From 7a55f22be47436565c604e290c756e9f35a1b073 Mon Sep 17 00:00:00 2001 From: Plumf Date: Mon, 15 Jan 2024 16:09:39 +0100 Subject: [PATCH] =?UTF-8?q?style:=20reecriture=20charte=20graphique=20g?= =?UTF-8?q?=C3=A9n=C3=A9rales?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- article.html | 14 +- css/font.css | 73 ++-- css/links.css | 6 +- css/theme.css | 98 +++-- css/typo.css | 94 ++-- css/variables.css.html | 23 +- inc/art_cartouche.html | 3 + {inclure => inc}/footer.html | 8 +- inc/forum.html | 69 +++ {inclure => inc}/head.html | 0 {inclure => inc}/header.html | 6 +- inc/nav.html | 13 + inc/recents.html | 18 + {inclure => inc}/sociaux.html | 0 inclure/nav.html | 14 - inclure/recents.html | 15 - mot.html | 24 +- paquet.xml | 8 +- polices/FiraSans-Regular.otf | Bin 357996 -> 0 bytes polices/FiraSans-Regular.woff | Bin 215332 -> 0 bytes polices/RobotoMono-Bold.ttf | Bin 114752 -> 0 bytes polices/RobotoMono-Bold.woff | Bin 66784 -> 0 bytes polices/RobotoMono-Regular.ttf | Bin 114624 -> 0 bytes polices/RobotoMono-Regular.woff | Bin 66644 -> 0 bytes polices/fira-sans-v10-latin-regular.eot | Bin 25059 -> 0 bytes polices/fira-sans-v10-latin-regular.svg | 330 -------------- polices/fira-sans-v10-latin-regular.ttf | Bin 54984 -> 0 bytes polices/fira-sans-v10-latin-regular.woff | Bin 25888 -> 0 bytes polices/fira-sans-v10-latin-regular.woff2 | Bin 21244 -> 0 bytes polices/ibm-plex-mono-v6-latin-500italic.eot | Bin 17474 -> 0 bytes polices/ibm-plex-mono-v6-latin-500italic.svg | 365 ---------------- polices/ibm-plex-mono-v6-latin-500italic.ttf | Bin 40032 -> 0 bytes polices/ibm-plex-mono-v6-latin-500italic.woff | Bin 19900 -> 0 bytes .../ibm-plex-mono-v6-latin-500italic.woff2 | Bin 15224 -> 0 bytes polices/jgs/jgs_font.ttf | Bin 0 -> 41384 bytes polices/jgs/jgs_font.woff | Bin 0 -> 18172 bytes polices/jgs/jgs_font.woff2 | Bin 0 -> 13520 bytes polices/luciole/luciole-bold.ttf | Bin 0 -> 79860 bytes polices/luciole/luciole-bold.woff | Bin 0 -> 27536 bytes polices/luciole/luciole-bold.woff2 | Bin 0 -> 21060 bytes polices/luciole/luciole-regular.ttf | Bin 0 -> 82144 bytes polices/luciole/luciole-regular.woff | Bin 0 -> 28908 bytes polices/luciole/luciole-regular.woff2 | Bin 0 -> 22260 bytes polices/roboto-mono-v12-latin-regular.eot | Bin 13517 -> 0 bytes polices/roboto-mono-v12-latin-regular.svg | 405 ------------------ polices/roboto-mono-v12-latin-regular.ttf | Bin 22224 -> 0 bytes polices/roboto-mono-v12-latin-regular.woff | Bin 15160 -> 0 bytes polices/roboto-mono-v12-latin-regular.woff2 | Bin 12312 -> 0 bytes rubrique.html | 8 +- sommaire.html | 8 +- tags.html | 25 +- 51 files changed, 303 insertions(+), 1324 deletions(-) create mode 100644 inc/art_cartouche.html rename {inclure => inc}/footer.html (78%) create mode 100644 inc/forum.html rename {inclure => inc}/head.html (100%) rename {inclure => inc}/header.html (57%) create mode 100644 inc/nav.html create mode 100644 inc/recents.html rename {inclure => inc}/sociaux.html (100%) delete mode 100644 inclure/nav.html delete mode 100644 inclure/recents.html delete mode 100644 polices/FiraSans-Regular.otf delete mode 100644 polices/FiraSans-Regular.woff delete mode 100644 polices/RobotoMono-Bold.ttf delete mode 100644 polices/RobotoMono-Bold.woff delete mode 100644 polices/RobotoMono-Regular.ttf delete mode 100644 polices/RobotoMono-Regular.woff delete mode 100644 polices/fira-sans-v10-latin-regular.eot delete mode 100644 polices/fira-sans-v10-latin-regular.svg delete mode 100644 polices/fira-sans-v10-latin-regular.ttf delete mode 100644 polices/fira-sans-v10-latin-regular.woff delete mode 100644 polices/fira-sans-v10-latin-regular.woff2 delete mode 100644 polices/ibm-plex-mono-v6-latin-500italic.eot delete mode 100644 polices/ibm-plex-mono-v6-latin-500italic.svg delete mode 100644 polices/ibm-plex-mono-v6-latin-500italic.ttf delete mode 100644 polices/ibm-plex-mono-v6-latin-500italic.woff delete mode 100644 polices/ibm-plex-mono-v6-latin-500italic.woff2 create mode 100644 polices/jgs/jgs_font.ttf create mode 100644 polices/jgs/jgs_font.woff create mode 100644 polices/jgs/jgs_font.woff2 create mode 100644 polices/luciole/luciole-bold.ttf create mode 100644 polices/luciole/luciole-bold.woff create mode 100644 polices/luciole/luciole-bold.woff2 create mode 100644 polices/luciole/luciole-regular.ttf create mode 100644 polices/luciole/luciole-regular.woff create mode 100644 polices/luciole/luciole-regular.woff2 delete mode 100644 polices/roboto-mono-v12-latin-regular.eot delete mode 100644 polices/roboto-mono-v12-latin-regular.svg delete mode 100644 polices/roboto-mono-v12-latin-regular.ttf delete mode 100644 polices/roboto-mono-v12-latin-regular.woff delete mode 100644 polices/roboto-mono-v12-latin-regular.woff2 diff --git a/article.html b/article.html index 5722f22..517c224 100644 --- a/article.html +++ b/article.html @@ -6,19 +6,19 @@ [(#TITRE|couper{80}|textebrut) - ][(#NOM_SITE_SPIP|textebrut)] [] [] - + - - + +
[(#REM) Contenu principal : contenu de l'article]
-

#TITRE

-

+

#TITRE

+

[
(#CHAPO|image_reduire{672,*})
] @@ -31,13 +31,13 @@ #MODELE{article_mots} [(#REM) Forum de l'article ] - + [

<:forum:form_pet_message_commentaire:>

(#FORMULAIRE_FORUM)]
- + diff --git a/css/font.css b/css/font.css index 7a0b537..23b6aae 100644 --- a/css/font.css +++ b/css/font.css @@ -1,41 +1,34 @@ -/* fira-sans-regular - latin */ + /*Reformatage 1.1.4 */ + /* Luciole Regular - latin */ @font-face { - font-display: swap; - font-family: 'Fira-Sans'; - font-style: normal; - font-weight: 400; - src: url('../polices/fira-sans-v10-latin-regular.eot'); /* IE9 Compat Modes */ - src: local('Fira Sans Regular'), local('FiraSans-Regular'), - url('../polices/fira-sans-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../polices/fira-sans-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../polices/fira-sans-v10-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('../polices/fira-sans-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../polices/fira-sans-v10-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */ - } - /* roboto-mono-regular - latin */ - @font-face { - font-display: swap; - font-family: 'Roboto-Mono'; - font-style: normal; - font-weight: 400; - src: url('../polices/roboto-mono-v12-latin-regular.eot'); /* IE9 Compat Modes */ - src: url('../polices/roboto-mono-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../polices/roboto-mono-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../polices/roboto-mono-v12-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('../polices/roboto-mono-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../polices/roboto-mono-v12-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */ - } - /* ibm-plex-mono-500italic - latin */ - @font-face { - font-display: swap; - font-family: 'IBM-Plex-Mono'; - font-style: italic; - font-weight: 500; - src: url('../polices/ibm-plex-mono-v6-latin-500italic.eot'); /* IE9 Compat Modes */ - src: local('IBM Plex Mono Medium Italic'), local('IBMPlexMono-MediumItalic'), - url('../polices/ibm-plex-mono-v6-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../polices/ibm-plex-mono-v6-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ - url('../polices/ibm-plex-mono-v6-latin-500italic.woff') format('woff'), /* Modern Browsers */ - url('../polices/ibm-plex-mono-v6-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../polices/ibm-plex-mono-v6-latin-500italic.svg#IBMPlexMono') format('svg'); /* Legacy iOS */ - } \ No newline at end of file + font-display: swap; + font-family: 'Luciole-Regular'; + font-style: normal; + font-weight: 400; + src: local('Luciole Regular'), local('Luciole-Regular'), + url('../polices/luciole/luciole-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('../polices/luciole/luciole-regular.woff') format('woff'), /* Modern Browsers */ + url('../polices/luciole/luciole-regular.ttf') format('truetype'), /* Safari, Android, iOS */ + } + /*Luciole Bold -latin*/ +@font-face { + font-display: swap; + font-family: 'Luciole-Bold'; + font-style: normal; + font-weight: 400; + src: local('Luciole Bold'), local('Luciole-Bold'), + url('../polices/luciole/luciole-bold.woff2') format('woff2'), /* Super Modern Browsers */ + url('../polices/luciole/luciole-bold.woff') format('woff'), /* Modern Browsers */ + url('../polices/luciole/luciole-bold.ttf') format('truetype'), /* Safari, Android, iOS */ + } +/*JGS Font */ +@font-face { + font-display: swap; + font-family: 'JGS-Font'; + font-style: normal; + font-weight: 400; + src: local('JGS Font'), local('JGS-Font'), + url('../polices/jgs/jgs_font.woff2') format('woff2'), /* Super Modern Browsers */ + url('../polices/jgs/jgs_font.woff') format('woff'), /* Modern Browsers */ + url('../polices/jgs/jgs_font.ttf') format('truetype'), /* Safari, Android, iOS */ + } diff --git a/css/links.css b/css/links.css index 73fc5b0..3d8b323 100644 --- a/css/links.css +++ b/css/links.css @@ -1,10 +1,10 @@ a { - border-bottom: 3px solid var(--couleurprincipal); + border-bottom: 3px solid var(--clr-maitre-bl); color: inherit; text-decoration: none; } a:hover { - background-color: var(--couleursurvol); - color: var(--couleurpolicesurvol); + background-color: var(--clr-maitre-bl); + color: var(--clr-contraste-bl); } \ No newline at end of file diff --git a/css/theme.css b/css/theme.css index dd8fd8e..7811029 100644 --- a/css/theme.css +++ b/css/theme.css @@ -1,8 +1,8 @@ body { + background-color: var(--clr-fond-bl); display: block; margin: 8px; } - .content{ margin-bottom: 8px; margin-left: auto; @@ -10,67 +10,77 @@ body { max-width: 800px; word-wrap: break-word; } - +/*Header - Bandeau de tête titre et slogan */ header .bandeau { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1em 0; } - -.header .site-description { +header .titre-site { + font-size: 2rem; + font-family: var(--font-contexte); +} +header .site-description { display: flex; justify-content: space-between; } +.site-description p { + font-family: var(--font-contexte); + font-size: 1.1em; +} -nav li { - display:inline-block; - margin:0 0.2em 0.4em 0; +bandeau +/*Element de la barre de navigation*/ +.pipe::before { + content:'|'; + color: var(--clr-neutre-bl); } nav ul { margin: 0; } - +nav li { + font-family: var(--font-contexte); + margin:0 0.2em 0.4em 0; + display: inline-block; + font-size: 1.2em; + text-transform: uppercase; +} nav .pagination { margin-top: 10em; } - .postes { - font-family: var(--policetitre); + font-family: var(--font-core); +} +.postes ul { + margin: 0; + list-style: none; } .postes li { margin: 0; } - -.postes ul { - margin: 0; -} - -header .titre-site { - font-size: 1.5rem; -} - .site-description { - font-family: var(--policecorps); + font-family: var(--font-core); } ul .liste-item { - font-family: var(--policetitre); + font-family: var(--font-core); } - -.liste-item time { - margin-bottom: 0em; - font-family: var(--policetitre); +/*Sommaire recent.html*/ +.liste-item { + margin: 1em 0 1em 0; } - .liste-item p { - margin-bottom: 0em; - font-family: var(--policetitre); + margin-bottom: 0.5em; + font-family: var(--font-core); +} +/*Element d'articles*/ +.date { + font-family: var(--font-core); + color: var(--clr-neutre-bl); + margin-bottom: 0.5em; } -nav li{ - font-family: var(--policetitre); -} /*Bouton de paginations*/ .pagination .pagination-items { list-style: none; @@ -124,7 +134,7 @@ nav li{ /*Configuration des pages listants des articles (rubrique, article, tags)*/ .listes-articles { - font-family: var(--policetitre); + font-family: var(--font-core); } .listes-articles > li::before { @@ -138,26 +148,38 @@ nav li{ list-style-type: none; } /* Conf pied de page */ - footer { - font-family: var(--policetitre ); + footer li { + font-family: var(--font-contexte); + font-size: 1.1em; } /* Affichage des tags */ .tags-articles li { - border: 2px solid var(--couleurprincipal); + border: 2px solid var(--clr-maitre-bl); border-radius: 3px; padding: 4px; text-decoration: none; margin: 0 4px; text-decoration: none; } - .tags-articles a { border-bottom: none; } - ul.ligne li { list-style: none; display: inline-block; - +} +/*Squelette mots*/ +.mot h1::before { +content: url(../img/tags.svg); +color: var(--clr-maitre-bl); +margin-right: 5px; +} + +.icone { + fill: var(--clr-maitre-bl); + } + +.mot { + color: var(--clr-maitre-bl); } \ No newline at end of file diff --git a/css/typo.css b/css/typo.css index 65fa0fe..2af0cde 100644 --- a/css/typo.css +++ b/css/typo.css @@ -7,7 +7,7 @@ html { font-family: Roboto-Mono; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; - color: var(--couleurpolices); + color: var(--clr-font-bl); } /* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ et http://forum.alsacreations.com/topic-4-54377-1.html @@ -33,7 +33,11 @@ html { .font4 { font-family: fantasy; } - /* Headings */ + /*Formatage des éléments visuels*/ + ::before { + margin-right: 3px; + } + /* Formatage des titres */ h1, .h1, h2, @@ -49,19 +53,19 @@ html { display: block; margin: 0; padding: 0; - font-family: var(--policetitre); + font-family: var(--font-titre); font-size: 100%; font-weight: normal; } h1, .h1 { - font-size: 1.2em; + font-size: 1.3em; margin-top: 2em; - margin-bottom: 1em; + margin-bottom: 0.5em; } h1::before { - color: var(--couleurprincipal); + color: var(--clr-maitre-bl); content: '# '; } h2, @@ -72,7 +76,7 @@ h1::before { } h2::before { - color: var(--couleurprincipal); + color: var(--clr-maitre-bl); content: '## '; } @@ -84,7 +88,7 @@ h1::before { } h3::before { - color: var(--couleurprincipal); + color: var(--clr-maitre-bl); content: '### '; } h4, @@ -93,51 +97,56 @@ h1::before { line-height: 1.364; margin-bottom: 1.364em; } +h4::before { + color: var(--clr-maitre-bl); + content: '#### '; + } h5, .h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; -} + } +h5::before { + color: var(--clr-maitre-bl); + content: '##### '; + } h6, .h6 { font-size: 1em; font-weight: bold; -} - h1 small, - .h1 small, - h2 small, - .h2 small, - h3 small, - .h3 small, - h4 small, - .h4 small, - h5 small, - .h5 small, - h6 small, - .h6 small { - font-size: 60%; - line-height: 0; } - hr { - border: 0; - border-top: 3px dotted var(--couleurneutre); - margin: 1em 0; - /*-moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; - overflow: visible; - margin: 1.5em 0; - border: solid; - border-width: 1px 0 0;*/ +h6::before { + color: var(--clr-maitre-bl); + content: '###### '; + } +h1 small, +.h1 small, + h2 small, + .h2 small, + h3 small, + .h3 small, + h4 small, + .h4 small, + h5 small, + .h5 small, + h6 small, + .h6 small { + font-size: 60%; + line-height: 0; + } +hr { + border: 0; + border-top: 2.5px solid var(--clr-neutre-bl); + margin: 1.5em 0 0.5em 0; } /* Typographical enhancements */ - em, - i, - .i { - font-style: italic; +em, +i, +.i { + font-style: italic; } - strong, +strong, b, .b { font-weight: bold; @@ -171,9 +180,6 @@ h6, cursor: help; } -time { - color: #797676; -} @media print { abbr[title] { border-bottom: 0; @@ -587,7 +593,7 @@ time { fieldset { margin-top: 0; margin-bottom: 1.5em; - font-family: var(--policecorps); + font-family: var(--font-core); } /* Typography for small screens [fr] http://www.alsacreations.com/astuce/lire/1177 */ diff --git a/css/variables.css.html b/css/variables.css.html index b1a28ee..e68d945 100644 --- a/css/variables.css.html +++ b/css/variables.css.html @@ -1,16 +1,17 @@ [(#REM) - Configuration des variables CSS d'Archil via le menu configuration du squelette + Variables CSS d'archil des couleurs et des fonts utilisés. + Configurable via le menu configuration du squelette ou non configurable. ] :root{ - --couleurprincipal: #CONFIG{archil/cfg_theme_clr_principal,#FF0000}; - --couleurpolices: #CONFIG{archil/cfg_theme_clr_police,#232333}; - --couleursurvol:#CONFIG{archil/cfg_theme_clr_principal,#FF0000}; - --couleurpolicesurvol: #CONFIG{archil/cfg_theme_clr_police_survol,#FFFFFF}; - --couleurneutre:#CONFIG{archil/cfg_theme_clr_lignes,#663399}; - --couleurautre:rebeccapurple; - --couleurautresombre:dodgerblue; - --couleurprincipalsombre: #50fa7b; - --policetitre: Roboto-Mono; - --policecorps: Fira-Sans; + /*Jeu de couleurs*/ + --clr-fond-bl: ##FFF7F1; + --clr-maitre-bl: #CONFIG{archil/cfg_theme_clr_principal,#FF0000}; + --clr-font-bl: #CONFIG{archil/cfg_theme_clr_police,#232333}; + --clr-contraste-bl: #CONFIG{archil/cfg_theme_clr_police_survol,#FFFFFF}; + --clr-neutre-bl:#CONFIG{archil/cfg_theme_clr_lignes,#797676}; + /*Polices - Font*/ + --font-titre: Luciole-Regular; + --font-core: Luciole-Regular; + --font-contexte: JGS-Font; } \ No newline at end of file diff --git a/inc/art_cartouche.html b/inc/art_cartouche.html new file mode 100644 index 0000000..f1bf87e --- /dev/null +++ b/inc/art_cartouche.html @@ -0,0 +1,3 @@ +
+ [(#URL_ARTICLE|qrcode{3,H})] +
\ No newline at end of file diff --git a/inclure/footer.html b/inc/footer.html similarity index 78% rename from inclure/footer.html rename to inc/footer.html index cca56aa..17a5a42 100644 --- a/inclure/footer.html +++ b/inc/footer.html @@ -3,11 +3,11 @@