From 102f8be1a6a96e8c862cc5edff317bb229968113 Mon Sep 17 00:00:00 2001 From: Dark-Storm Date: Wed, 12 Jul 2017 23:10:41 +0200 Subject: [PATCH] =?UTF-8?q?WIP,=20diff=C3=A9rents=20ajouts/retraits=20sur?= =?UTF-8?q?=20le=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates_dev/css/container.css | 50 ++- templates_dev/css/footer.css | 13 + templates_dev/css/global.css | 101 +++--- templates_dev/css/header.css | 94 ++++++ templates_dev/css/homepage.css | 8 +- templates_dev/css/navbar.css | 45 ++- templates_dev/css/responsive.css | 4 +- templates_dev/css/shoutbox.css | 24 +- templates_dev/forum.html | 449 -------------------------- templates_dev/homepage_guest.html | 418 ------------------------ templates_dev/homepage_member.html | 81 ++--- templates_dev/images/370.gif | Bin 0 -> 12199 bytes templates_dev/images/5554.png | Bin 0 -> 26673 bytes templates_dev/images/7098.png | Bin 0 -> 63563 bytes templates_dev/scripts/cookies.js | 13 + templates_dev/scripts/trigger_menu.js | 69 +++- templates_dev/topic_1234_2.html | 193 +++++++++-- 17 files changed, 538 insertions(+), 1024 deletions(-) create mode 100644 templates_dev/css/footer.css create mode 100644 templates_dev/css/header.css delete mode 100644 templates_dev/forum.html delete mode 100644 templates_dev/homepage_guest.html create mode 100644 templates_dev/images/370.gif create mode 100644 templates_dev/images/5554.png create mode 100644 templates_dev/images/7098.png create mode 100644 templates_dev/scripts/cookies.js diff --git a/templates_dev/css/container.css b/templates_dev/css/container.css index 4e2176b..b375a5d 100644 --- a/templates_dev/css/container.css +++ b/templates_dev/css/container.css @@ -1,17 +1,43 @@ -#container { - margin-left: 60px; +article { + display: flex; justify-content: space-around; + margin: 0; padding: 0; text-align: justify; + border-style: solid; border-width: 0 1px; +} +article:nth-child(even), h1 { background: white; border-color: rgba(0, 0, 0, .15); } +article:nth-child(odd) { background: #f4c0c0; border-color: rgba(128, 0, 0, .1); } + +article .author { + display: flex; flex-direction: column; align-items: center; + width: 10%; min-width: 100px; + padding: 16px 0 12px 0; margin: 0; +} +article .author img:first-child { width: 100px; height: 100px; margin-bottom: 8px; } +article .author span[title='nickname'] { display: block; text-align: center; font-weight: bold; } +article .author span { margin-bottom: 0; } +article .author span[title='level'] { font-size: 9px; } + + +article .content { + display: flex; flex-direction: column; + width: 85%; padding: 12px; + line-height: 18px; } -/* #container h1 { - margin-left: 5%; - font-family: Raleway; font-size: 24px; - font-weight: 200; color: #242424; -} +h1 { padding: 24px 0 8px 0; margin: 0; text-align: center; font-size: 24px; color: #181818; border-style: solid; border-width: 0 1px; } -#container h2 { - margin-left: 5%; - font-family: Raleway; font-size: 20px; - font-weight: 200; color: #242424; -} */ +article .content time { font-style: italic; } +article .content p { margin: 6px 0; } +article .content p:last-of-type { flex-grow: 1; /*margin-bottom: 10px;*/ } +article .content .meta { text-align: right; font-size: 11px; } +article .content .moderation { color: rgba(0, 0, 0, .4); } +div.pagination { text-align: center; margin: 16px 0 32px 0; } +div.content-border { margin: 16px 5%; border: 1px solid rgba(0, 0, 0, 0); border-top: 2px solid #db3e3e; border-bottom: 2px solid #db3e3e; } +details { display: block; padding: 10px; background: rgba(0, 0, 64, .12); } +summary { display: block; margin: -10px; padding: 5px; cursor: pointer; color: #ffffff; background: #b21212; } +summary:hover, summary:focus { background: #900909; } +details > p:last-child { margin-bottom: 0; } +details[open] > summary { margin-bottom: 0; } +/*summary:before { content: '→ '; } +details[open] > summary:before { content: '↓ '; }*/ diff --git a/templates_dev/css/footer.css b/templates_dev/css/footer.css new file mode 100644 index 0000000..11a4579 --- /dev/null +++ b/templates_dev/css/footer.css @@ -0,0 +1,13 @@ +/* + footer +*/ + +footer { + margin: 20px 10% 5px 10%; padding: 10px 0; + text-align: center; font-size: 11px; font-style: italic; + color: #a0a0a0; + border-top: 1px solid rgba(0, 0, 0, .1); +} +footer p { + margin: 3px 0; +} \ No newline at end of file diff --git a/templates_dev/css/global.css b/templates_dev/css/global.css index 6fe5e6f..2e8a1d0 100644 --- a/templates_dev/css/global.css +++ b/templates_dev/css/global.css @@ -14,72 +14,14 @@ body { margin: 0; - background: #fbfbfb; + background: #f8f8f8; font-family: 'DejaVu Sans', sans-serif; } - - -/* - header -*/ - -header { - height: 50px; margin: 0; padding: 0 30px; - display: flex; align-items: center; justify-content: space-between; - background: #f8f8fa; border-bottom: 1px solid #d0d0d0; +#container { + margin-left: 60px; } - -header h1 { - font-family: Raleway; font-weight: 200; -} - -header svg { - width: 24px; height: 24px; vertical-align: middle; - transition: .15s ease; -} -header a:hover > svg, header a:focus > svg { - filter: brightness(.5); -} - -header input[type="search"] { - width: 250px; - padding: 5px 35px 5px 10px; - border: 0; border-radius: 1px; - font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif; - box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease; -} -header input[type="search"] ~ a { - position: relative; left: -33px; -} -header input[type="search"]:focus { - box-shadow: 0 0 4px rgba(0, 102, 255, .9); -} -header input[type="search"] ~ a > svg > path { - fill: #cccccc; transition: .15s ease; -} -header input[type="search"]:focus ~ a > svg > path { - fill: #333333; -} - -#spotlight a { - padding: 8px 18px 6px 18px; - color: #727272; font-size: 15px; - border-bottom: 2px solid rgba(93, 123, 141, 0); - transition: border .15s ease; -} -#spotlight a:hover, header #spotlight a:focus { - border-bottom: 2px solid rgba(93, 123, 141, 1); -} - - -footer { - margin: 20px 10% 5px 10%; padding: 10px 0; - text-align: center; font-size: 11px; font-style: italic; - color: #a0a0a0; - border-top: 1px solid rgba(0, 0, 0, .1); -} -footer p { - margin: 3px 0; +#container.extended { + margin-left: 160px; } /* @@ -88,12 +30,25 @@ footer p { a { text-decoration: none; + color: #be1818; +} +a:hover { + text-decoration: underline; } a:focus { + text-decoration: underline; outline: none; } +quote { display: block; background: #e0e0e8; background: rgba(0, 0, 64, .12); border: 2px solid rgba(0, 0, 64, .08); border-width: 1px 0; padding: 4px 8px; } +quote quote { background: rgba(0, 0, 64, .12); } +quote[author]:before { + display: inline-block; margin-bottom: 5px; + font-style: italic; /*font-weight: bold;*/ + content: attr(author) ' a écrit :'; +} + /* alert overlay @@ -174,6 +129,11 @@ input[type="password"]:focus { } +span[title='nickname'][data-status='redac'] { color: #2549e4; } +span[title='nickname'][data-status='honor'] { color: #dd9b00; } +span[title='nickname'][data-status='admin'] { color: #ff2121; } + + section { margin: 10px 5%; } @@ -184,6 +144,19 @@ section h1 { font-weight: 200; color: #242424; } -section * { +* { transition: .15s ease; +} + +#overlay { position: fixed; top: -100%; left: 0; + width: 100%; height: 100%; + background: rgba(0, 0, 0, 0); + transition: top 0s ease .3s, background .3s; + z-index: 4; +} + +#overlay.opened { + top: 0%; + background: rgba(0, 0, 0, .75); + transition: top 0s, background .3s; } \ No newline at end of file diff --git a/templates_dev/css/header.css b/templates_dev/css/header.css new file mode 100644 index 0000000..d6feab3 --- /dev/null +++ b/templates_dev/css/header.css @@ -0,0 +1,94 @@ +/* + header +*/ + +header { + margin: 0; padding: 10px 16px; + display: flex; align-items: center; justify-content: flex-end; + background: #ffffff; border-bottom: 1px solid #e0e0e0; +} + +header h1 { + font-family: Raleway; font-weight: 200; +} + +header input + span { position: relative; left: -32px; cursor: pointer; } +header span > svg { + width: 24px; height: 24px; vertical-align: middle; + transition: .15s ease; fill: #969696; +} +header span:hover > svg, header span:focus > svg { + border-color: rgba(32, 128, 255, .6); + fill: #484848; +} + +header form { + flex-shrink: 0; margin-right: -23px; +} +header input[type="search"] { + width: 220px; height: 30px; padding: 4px 30px 4px 8px; + border: 1px solid rgba(0, 0, 0, .2); border-radius: 2px; +} +header input[type="search"] ~ a { + position: relative; left: -33px; +} +header input[type="search"]:focus { + box-shadow: 0 0 4px rgba(0, 102, 255, .9); +} +header input[type="search"] ~ a > svg > path { + fill: #cccccc; transition: .15s ease; +} +header input[type="search"]:focus ~ a > svg > path { + fill: #333333; +} + +#spotlight { + flex-shrink: 0; +} +#spotlight a { + display: inline-block; + height: 24px; line-height: 24px; + padding: 2px 10px; + background: #728bf6; color: white; font-size: 12px; + border-radius: 2px; border: 1px solid rgba(0, 0, 255, .05); +} +#spotlight a:hover { border-bottom: 1px solid rgba(128, 128, 255, .05); + background: #7a93ff; border-color: rgba(128, 128, 255, .03); +} + + +/* + subheader +*/ + +#subheader { + margin: 0; padding: 0 32px; + flex-grow: 1; +} +#subheader * { + margin: 0; padding: 0; +} + +#subheader li { + height: 30px; margin: 5px 0; + display: inline; + /*display: flex; align-items: center;*/ +} +#subheader li:after { + content: " »"; + opacity: 0.3; +} +#subheader li:last-child:after { + content: none; +} + +#subheader a { + padding: 0 3px; + /*border-bottom: 1px solid rgba(93, 123, 141, 0);*/ + color: #727272; +} +#subheader a:hover, #subheader a:focus { + /*border-bottom: 1px solid rgba(93, 123, 141, 1);*/ + color: #22292c; + text-decoration: none +} \ No newline at end of file diff --git a/templates_dev/css/homepage.css b/templates_dev/css/homepage.css index b5eb580..369d238 100644 --- a/templates_dev/css/homepage.css +++ b/templates_dev/css/homepage.css @@ -30,21 +30,17 @@ .home-pinned-content > div { display: flex; justify-content: space-between; } - .home-pinned-content article { flex-grow: 1; margin: 0 1px; padding: 0; position: relative; max-width: 250px; overflow: hidden; } - .home-pinned-content a { display: block; } - .home-pinned-content img { width: 100%; filter: blur(0px); } - .home-pinned-content article div { position: absolute; bottom: 0; z-index: 3; width: 90%; margin: 0; @@ -52,12 +48,14 @@ color: #ffffff; text-shadow: 1px 1px 0 rgba(0,0,0,.6); background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8)); } - .home-pinned-content h2 { display: block; margin: 5px 0; font-size: 18px; font-family: NotoSans; font-weight: 200; line-height: 20px; } +.home-pinned-content h2 + span { + font-style: italic; +} /* diff --git a/templates_dev/css/navbar.css b/templates_dev/css/navbar.css index 5dec525..0b03ed1 100644 --- a/templates_dev/css/navbar.css +++ b/templates_dev/css/navbar.css @@ -5,6 +5,7 @@ nav a { } nav a:hover, nav a:focus { + text-decoration: none; opacity: 1; } @@ -84,6 +85,37 @@ nav a:focus { display: block; } + + +#light-menu.extended { + width: 160px; +} +#light-menu.extended #logo img { + width: 40%; margin-left: 10px; +} +#light-menu.extended li { + text-align: left; +} +#light-menu.extended li > a { + flex-direction: row; align-items: center; + justify-content: flex-start; +} + +#light-menu.extended li > a > svg { + margin: 0 15px; width: 25px; +} +#light-menu.extended li div { + display: block; +} +#light-menu.extended li > a::after { + display: none; +} +#light-menu.extended li:not(.opened) > a:hover::after, +#light-menu.extended li:not(.opened) > a:focus::after { + display: none; +} + + /*nav li span[notifications]:not([notifications="0"])::before { content: attr(notifications); display: inline-block; margin-right: 6px; @@ -102,13 +134,16 @@ nav a:focus { height: 100%; overflow-x: hidden; overflow-y: auto; font-family: NotoSans; font-size: 14px; background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); - transition: 2s ease; + transition: .2s ease; } #menu.opened { left: 60px; /* left-to-right animation */ /*width: 300px;*/ /* scroll animation */ } +#menu.opened.extended { + left: 160px; +} #menu.scroll-animation { @@ -117,19 +152,25 @@ nav a:focus { #menu.scroll-animation.opened { width: 300px; } +#menu.scroll-animation.opened.extended { + left: 160px; +} #menu.left-to-right-animation { left: -240px; width: 300px; } #menu.left-to-right-animation.opened { left: 60px; } +#menu.left-to-right-animation.opened.extended { + left: 160px; +} #menu > div { width: 300px; display: none; } -#menu > div.opened { +#menu > div.opened:not(.never-displayed) { display: block; } diff --git a/templates_dev/css/responsive.css b/templates_dev/css/responsive.css index c96f7a5..367f840 100644 --- a/templates_dev/css/responsive.css +++ b/templates_dev/css/responsive.css @@ -11,7 +11,7 @@ border-bottom: 1px solid #adb0b4; }*/ header input[type="search"] { - font-size: 14px; + font-size: 12px; } #menu li { @@ -29,7 +29,7 @@ } header input[type="search"] { - font-size: 14px; + font-size: 12px; } #menu li { diff --git a/templates_dev/css/shoutbox.css b/templates_dev/css/shoutbox.css index 9725b29..41a2051 100644 --- a/templates_dev/css/shoutbox.css +++ b/templates_dev/css/shoutbox.css @@ -1,26 +1,32 @@ #shoutbox { margin: 20px 5% 10px 5%; - /*box-shadow: 0 0 2px rgba(0, 0, 0, .4);*/ + box-shadow: 0 2px 4px rgba(0, 0, 0, .1); background: #ffffff; - /*border: 1px solid #999999;*/ + border: 1px solid #999999; } #shoutbox > div { margin: 0; padding: 0; height: 125px; width: 100%; overflow-y: scroll; border-bottom: 1px solid #999999; - border-radius: 5px 5px 0 0; - border: 1px solid #999999; + /*border-radius: 2px 2px 0 0; + border: 1px solid #999999;*/ } -#shoutbox > input { - width: 100%; padding: 5px 0; - border-radius: 0 0 5px 5px; - border: 1px solid #999999; +#shoutbox > form { + display: flex; align-items: center; } -#shoutbox > input:focus { +#shoutbox > form > input { + flex-grow: 1; + padding: 5px 0; + /*border-radius: 0 0 2px 2px;*/ + /*border: 1px solid #999999;*/ + border: none; +} +#shoutbox > form > input:focus { border-color: #a12222; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(161, 34, 34, 0.6); } +/* Messages */ #shoutbox > div > div { padding: 2px 10px; border-bottom: 1px solid rgba(0, 0, 0, .3); diff --git a/templates_dev/forum.html b/templates_dev/forum.html deleted file mode 100644 index c57d5e8..0000000 --- a/templates_dev/forum.html +++ /dev/null @@ -1,449 +0,0 @@ - - - - Planète Casio : design template - - - - - - - - - - - - - - - -
-
-
- - - - - - -
- - - - -
- - - -
-

Concernant les alertes, cliquer sur "Masquer" enregistre un cookie pour une heure, ce qui bloque le réaffichage de l'alerte. Cliquer autre part fait disparaître l'alerte sans mettre le cookie, donc au prochain rechargement de la page celle-ci réapparaîtra.

-

Au niveau du menu, vous préférez une ouverture type ou plutôt de type ?

-

La shout est en cours de conception, merci d'être indulgent x)

-

Merci de me faire parvenir vos commentaires soit via la shout de Planète Casio, soit par mail à l.gatin@protonmail.com (précisez que ça concerne la v5 dans l'en-tête).

- Bien entendu ce paragraphe n'apparaitra pas dans la v5 (cliquez ici pour faire disparaitre). -
- -
-
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
Ceci est un message
-
- -
- -
- Forum -
- -
- - - -
- - - - - Votre message a bien été posté. - - -
- - - - - - - - - diff --git a/templates_dev/homepage_guest.html b/templates_dev/homepage_guest.html deleted file mode 100644 index 270035c..0000000 --- a/templates_dev/homepage_guest.html +++ /dev/null @@ -1,418 +0,0 @@ - - - - Planète Casio : design template - - - - - - - - - - - - - - -
-
-
- - - - - - -
- - -
- - -
-

Informations sur le développement

-
-

Tous les onglets sont fonctionnels, cliquez sur une icone pour afficher, sur une autre pour modifier, deux fois de suite pour fermer. Sinon cliquez à coté.

-

Les onglets Tutoriels et Sprites ne sont pas encore remplis, c'est normal qu'ils fassent un peu vide. L'avantage de ce menu est qu'on peut le remplir comme on veut, dans le pire des cas ça déclenche le scrolling (c'est pas exemple le cas pour l'onglet "Programmes", qui est beaucoup trop rempli). \o/

-

Le header contient une barre de recherche ainsi que des liens de type "spotlight" : ils servent à mettre en valeur un évènement ou une partie du site. On peut bien évidemment remplacer par autre chose, mais je trouvais que cela était intéressant de pouvoir attirer l'attention de cette manière.

-

Ne faites pas attention au contenu principal de la page, il n'est absolument pas définitif ! De même pour le positionnement des alertes. Toutefois, à part les entrées des sous-menus, ceux-ci sont en version quasi‑finale.

-

Nous sommes ouverts à toute suggestion et amélioration ! Si vous souhaitez participer au développement du site, n'hésitez pas à nous contacter à l'adresse suivante : contact@planet-casio.com. N'oubliez pas de préciser « [v5] » dans l'en-tête pour que nous puissions facilement traiter le message. Vous pouvez aussi ajouter des fichiers, tels que des exemples de html/css, des schémas d'organisation, ou encore des captures d'écran en cas de problème d'affichage. Dans le cas où vous signalez un bug, merci de préciser : -

    -
  • votre plateforme (PC, tablette ou smartphone)
    • -
  • votre système d'exploitation (nom et version)
    • -
  • votre navigateur (nom et version)
    • -
  • la taille de votre écran en pixel (pour les smartphones, essayez d'ajouter le viewport correspondant)
    • -
  • le problème rencontré
    • -
- Merci pour votre participation ! -

-
-
- -
-

Lorem ipsum

-
-

Etiam ut metus mollis, molestie leo vel, finibus orci. Praesent in orci diam. Nullam laoreet rutrum elit, id luctus neque. Integer egestas, leo ut porta sodales, lacus enim sollicitudin risus, congue pharetra est dui ac arcu. Nunc egestas eu erat vitae volutpat. In non lorem cursus, viverra nisl vel, feugiat sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc lacinia, nibh vel vulputate aliquam, nunc diam blandit massa, vel imperdiet velit ante eget ligula. Suspendisse vestibulum purus quis ligula cursus semper. Quisque efficitur ultrices dignissim.

-

Maecenas vel mauris ligula. Proin faucibus, magna eget euismod ullamcorper, felis risus hendrerit dui, in ultrices nunc tortor at nulla. Mauris eu pharetra ligula. Aliquam at arcu leo. Donec ipsum felis, tristique nec bibendum nec, bibendum ut nisi. In hac habitasse platea dictumst. Duis in ante magna. Sed lacinia suscipit enim vitae tempus. Mauris porta orci at tortor faucibus, a volutpat ligula imperdiet. Cras nisi ex, consectetur in orci at, sollicitudin faucibus quam. Fusce eget leo accumsan, dictum nunc et, sodales nisl.

-

Nullam ut purus suscipit, elementum magna quis, molestie lorem. Integer erat dui, pellentesque nec odio dignissim, semper elementum nunc. Aenean nec tristique ex, et vehicula dolor. Quisque quis urna ut sapien tristique placerat. Nunc pellentesque tincidunt leo eu porta. Maecenas sollicitudin ullamcorper diam, vel ultricies elit. Praesent lorem risus, ornare eu malesuada vitae, accumsan in lacus.

-

Vivamus at tortor vel arcu scelerisque interdum a et sem. Morbi pellentesque, velit quis malesuada fringilla, risus turpis mollis magna, et mattis arcu orci sit amet mauris. Donec ac tincidunt ipsum. Mauris at quam sit amet nibh varius auctor. In dictum dui sed justo semper tempor. Vivamus vitae sem id nibh vulputate tincidunt. Praesent quis finibus metus. Nulla at imperdiet ex. Suspendisse potenti. Nullam nec tortor sapien. Vestibulum bibendum enim vel lectus cursus, id fringilla sapien malesuada. Sed vitae tellus eu lectus laoreet malesuada at nec dui. Mauris varius, purus at scelerisque accumsan, turpis magna vehicula diam, a suscipit erat metus at diam.

-

Aenean mattis in leo viverra rutrum. Etiam et nulla in ipsum ornare consectetur. Quisque bibendum, metus nec ultrices efficitur, dui risus rhoncus lectus, a imperdiet nibh elit ut ipsum. Quisque convallis lacus elementum dolor dignissim sollicitudin. Maecenas dapibus dolor quis tellus imperdiet, hendrerit vestibulum lacus tempor. Nam quis risus non nulla euismod semper. Suspendisse commodo aliquam aliquet. Nullam nec varius felis. Nullam velit erat, interdum ac vehicula nec, efficitur in enim. Morbi sodales ante quis nunc vehicula, non eleifend lacus congue. Maecenas a imperdiet nunc.

-
-
- - -
- - - - - - - - - - diff --git a/templates_dev/homepage_member.html b/templates_dev/homepage_member.html index 49b78a4..11553bb 100644 --- a/templates_dev/homepage_member.html +++ b/templates_dev/homepage_member.html @@ -8,14 +8,17 @@ + + - - + +
+