1

Introduction du nouveau thème

This commit is contained in:
2025-10-11 00:36:18 +02:00
parent fa5ba208ed
commit 2653b0fa01
112 changed files with 1590 additions and 2766 deletions

View File

@@ -0,0 +1,15 @@
.external {
color: var(--color-link-external);
&:hover {
color: var(--color-link-external-hover);
}
}
.affiliated {
color: var(--color-link-affiliated);
&:hover {
color: var(--color-link-affiliated-hover);
}
}

View File

@@ -0,0 +1,159 @@
article.article-body {
display: flex;
flex-direction: column;
gap: var(--gap);
padding: var(--padding) 0;
font-size: 1.5rem;
.stat {
max-width: var(--width-content-max);
margin: var(--margin) auto;
width: 100%;
}
h2,
h3,
h4,
h5,
h6,
>p,
>details,
>ul,
>ol,
>blockquote,
.footnotes ol {
min-width: var(--width-content-min);
max-width: var(--width-content-max);
width: 100%;
}
h2,
h3,
h4,
h5,
h6 {
margin: auto;
color: var(--color-site-title);
font-variant: small-caps;
text-shadow: var(--shadow-text);
text-wrap: balance;
}
>p,
>details p {
margin: auto;
line-height: 150%;
text-align: justify;
}
>details {
margin: auto;
background: var(--background-spoiler);
padding: var(--padding);
border-radius: var(--radius-base);
summary {
font-variant: small-caps;
color: var(--color-site-title);
text-shadow: var(--shadow-text);
display: block;
cursor: help;
}
summary~* {
padding-top: var(--padding);
}
p {
width: 100%;
}
}
>ul,
>ol,
>details ul,
>details ol {
margin: 0 auto;
padding-left: var(--list-padding);
line-height: 150%;
display: flex;
flex-direction: column;
gap: var(--gap-list);
}
strong {
color: var(--color-site-title);
}
blockquote {
color: var(--color-text-light);
font-style: italic;
text-align: justify;
margin: auto;
cite {
display: block;
font-style: normal;
text-align: right;
}
}
>blockquote {
padding: var(--padding);
border: var(--border-panel-outer);
border-top: var(--border-panel-top);
background: var(--background-chat-other);
border-radius: var(--radius-base);
box-shadow: var(--shadow-base);
color: var(--color-text-muted);
}
pre,
code {
border-radius: var(--radius-base);
}
pre {
padding: var(--padding);
overflow: scroll;
max-height: 50vh;
max-width: 80vw;
width: 100%;
margin: var(--margin) auto;
border: var(--border-panel-outer);
border-top: var(--border-panel-top);
box-shadow: var(--shadow-base);
}
.footnotes {
ol {
margin: var(--margin) auto;
font-size: 1rem;
list-style-type: decimal;
display: flex;
flex-direction: column;
gap: var(--gap-half);
p {
width: auto;
line-height: 130%;
}
}
}
sub,
sup {
font-size: 0.75em;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.4em;
}
sub {
bottom: -0.2em;
}
}

View File

@@ -0,0 +1,6 @@
nav.articles-list {
display: grid;
gap: var(--gap-articles-list);
grid-template-columns: repeat(var(--grid-columns), minmax(var(--width-card-min), 1fr));
overflow: auto;
}

View File

@@ -0,0 +1,53 @@
#big-logo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-big-logo);
margin: var(--margin-big-logo);
img {
margin: auto;
}
hgroup {
flex: 1;
h1 {
font-size: 4rem;
font-variant: small-caps;
color: var(--color-big-logo-title);
text-shadow: var(--shadow-big-logo-title);
white-space: nowrap;
}
p {
font-style: italic;
font-size: 1.5rem;
color: var(--color-big-logo-description);
}
}
}
@media (max-width: 460px) {
#big-logo hgroup {
h1 {
font-size: 2.5rem;
}
p {
font-size: 1.25rem;
}
}
}
@media (max-width: 768px) {
#big-logo hgroup {
h1 {
text-align: center;
}
p {
text-align: center;
}
}
}

View File

@@ -0,0 +1,20 @@
body {
font-family: var(--font-family);
font-size: var(--font-size-body);
background: var(--background-body);
color: var(--color-text);
padding: var(--padding-body);
/* On utilise flex pour que le footer colle au pied de page */
display: flex;
flex-direction: column;
gap: var(--gap-body);
min-height: 100vh;
height: auto;
}
@media (max-width: 768px) {
body {
padding: 0;
}
}

View File

@@ -0,0 +1,5 @@
.breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: var(--gap-half);
}

View File

@@ -0,0 +1,54 @@
.card {
text-decoration: none;
color: inherit;
font-variant: small-caps;
font-size: 1rem;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
display: flex;
flex-direction: column;
box-shadow: none;
h3 {
font-weight: normal;
text-wrap: balance;
color: var(--color-card-title);
font-size: var(--font-size-card-title);
}
.card-image {
background-size: cover;
background-position: 50% 50%;
height: 220px;
display: block;
border-radius: var(--radius-base) var(--radius-base) 0 0;
background-image: var(--background-figure);
}
.card-content {
display: flex;
flex-direction: column;
padding: var(--padding-card-content);
gap: var(--gap-card-content);
flex: 1;
border-radius: 0 0 var(--radius-base) var(--radius-base);
h3 {
flex: 1;
}
.card-meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
&:hover {
h3 {
text-decoration: underline;
}
}
}

View File

@@ -0,0 +1,98 @@
figure {
border: var(--border-panel-outer);
border-top: var(--border-panel-top);
background: var(--background-figure);
border-radius: var(--radius-base);
box-shadow: var(--shadow-base);
margin: var(--margin) auto;
font-size: 1rem;
text-align: center;
padding: var(--padding) 0;
figcaption {
padding: 0 var(--padding) var(--padding) var(--padding);
p {
color: var(--color-text-muted);
font-style: italic;
max-width: var(--width-content-max);
font-size: 1rem;
text-wrap: balance;
font-weight: bold;
text-align: center;
margin: auto;
line-height: 150%;
em {
color: var(--color-text-strong);
}
}
}
details,
p.details {
padding: var(--padding) var(--padding) 0 var(--padding);
max-width: var(--width-content-max);
text-align: center;
text-wrap: balance;
margin: auto;
line-height: 150%;
}
audio {
margin: auto;
padding: var(--padding);
}
img,
video {
max-height: 80vh;
max-width: 100%;
}
img {
background-color: var(--color-figure-media-background);
}
&.chat-message {
clear: both;
display: inline;
width: 40vw;
min-width: 270px;
margin: 0 auto;
position: relative;
padding: var(--padding);
&.me,
&.other {}
&.me {
background: var(--background-chat-me);
margin-right: 11vw;
}
&.other {
background: var(--background-chat-other);
margin-left: 11vw;
}
blockquote {
text-align: left;
display: flex;
font-style: normal;
flex-direction: column;
gap: calc(var(--gap)/2);
line-height: 130%;
p {
width: 100%;
text-align: left;
}
ul,
ol {
margin-left: var(--margin);
}
}
}
}

View File

@@ -0,0 +1,44 @@
body>footer {
display: flex;
gap: var(--gap-footer);
flex-wrap: wrap;
color: var(--color-footer-text);
padding: var(--footer-padding);
a {
color: var(--color-footer-text);
text-decoration: underline;
&:hover,
&:focus {
color: var(--color-footer-heading);
}
}
section {
flex: 1;
text-align: center;
font-variant: small-caps;
header {
padding-bottom: var(--padding);
h2 {
font-size: 1.2rem;
color: var(--color-footer-heading);
}
}
nav {
display: flex;
flex-direction: column;
gap: var(--gap-footer-nav);
}
}
p {
text-align: center;
width: 100%;
text-wrap: balance;
}
}

View File

@@ -0,0 +1,38 @@
header#hero-page {
display: flex;
gap: var(--gap-hero-page);
flex-direction: column;
.sup-title {
text-align: center;
font-variant: small-caps;
text-shadow: var(--shadow-text);
color: var(--color-site-title);
}
h1 {
text-align: center;
font-size: 1.25em;
text-wrap: balance;
color: var(--color-site-title);
text-shadow: var(--shadow-text);
font-variant: small-caps;
font-weight: normal;
}
}
@media (min-width: 460px) {
header#hero-page {
h1 {
font-size: 2.5rem;
}
}
}
@media (min-width: 768px) {
header#hero-page {
h1 {
font-size: 4rem;
}
}
}

View File

@@ -0,0 +1,6 @@
header#hero {
display: flex;
flex-wrap: wrap;
gap: var(--gap-hero);
align-items: center;
}

View File

@@ -0,0 +1,22 @@
main#home {
section {
margin: var(--margin-home-section);
header {
font-variant: small-caps;
margin: var(--margin-home-section-header);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--gap-half);
a {
color: var(--color-home-link);
&:hover {
color: var(--color-home-link-hover);
}
}
}
}
}

View File

@@ -0,0 +1,13 @@
hr {
all: unset;
display: block;
width: 100%;
height: 1rem;
margin: auto;
position: relative;
background: var(--background-hr-glow);
&.mirror {
background: var(--background-hr-glow-mirror);
}
}

View File

@@ -0,0 +1,27 @@
@import "variables.css";
@import "reset.css";
@import "body.css";
@import "links.css";
@import "panel.css";
@import "hero.css";
@import "big-logo.css";
@import "site-stats.css";
@import "hr.css";
@import "stat.css";
@import "stats.css";
@import "main.css";
@import "home-section.css";
@import "breadcrumbs.css";
@import "articles-list.css";
@import "card.css";
@import "footer.css";
@import "hero-page.css";
@import "site-title.css";
@import "page-meta.css";
@import "page-links.css";
@import "article-body.css";
@import "figure.css";
@import "table.css";
@import "pagination.css";
@import "table-of-contents.css";
@import "a.css";

View File

@@ -0,0 +1,9 @@
a {
color: var(--color-link);
text-decoration: underline;
&:hover,
&:focus {
color: var(--color-link-hover);
}
}

View File

@@ -0,0 +1,6 @@
main {
display: flex;
flex-direction: column;
gap: var(--gap-main);
flex: 1;
}

View File

@@ -0,0 +1,5 @@
nav {
ul {
list-style: none;
}
}

View File

@@ -0,0 +1,7 @@
nav#page-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--gap-page-links);
}

View File

@@ -0,0 +1,13 @@
.page-meta {
gap: var(--gap-page-meta);
display: flex;
flex-wrap: wrap;
align-items: center;
color: var(--color-page-meta);
font-variant: small-caps;
>* {
white-space: nowrap;
margin: auto;
}
}

View File

@@ -0,0 +1,58 @@
.pagination {
display: flex;
justify-content: space-between;
.prev {
&.disabled {
color: var(--color-text-muted);
}
}
details {
flex: 1;
text-align: center;
position: relative;
summary {
cursor: pointer;
}
ul {
position: absolute;
display: flex;
flex-direction: column;
gap: var(--gap-half);
overflow: auto;
max-height: 50vh;
min-width: 300px;
width: auto;
left: 50%;
margin-left: -150px;
padding: var(--padding);
list-style: none;
border-radius: var(--radius-pagination);
box-shadow: var(--shadow-pagination);
border: var(--border-pagination);
background: var(--background-pagination);
li {
font-size: 1rem;
.current {
display: block;
font-size: 1rem;
}
a {
display: block;
}
}
}
}
.next {
&.disabled {
color: var(--color-text-muted);
}
}
}

View File

@@ -0,0 +1,14 @@
.panel {
padding: var(--padding-panel);
border-radius: var(--radius-panel);
box-shadow: var(--shadow-panel);
border: var(--border-panel);
&.panel-hero {
background: var(--background-panel);
}
&.stat {
background: var(--background-panel-stat);
}
}

View File

@@ -0,0 +1,5 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

View File

@@ -0,0 +1,3 @@
section#site-stats {
margin: var(--margin-site-stats);
}

View File

@@ -0,0 +1,21 @@
#site-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--gap-site-title);
font-size: 2rem;
color: var(--color-site-title);
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
text-shadow: var(--shadow-text);
justify-content: center;
span {
white-space: nowrap;
}
&:hover {
text-decoration: underline;
}
}

View File

@@ -0,0 +1,19 @@
.stat {
display: flex;
flex-direction: column;
gap: var(--gap-half);
strong {
display: block;
font-variant: small-caps;
color: var(--color-text-muted);
white-space: nowrap;
}
span {
font-size: 2rem;
color: var(--color-panel-text-stats);
font-weight: bold;
flex: 1;
}
}

View File

@@ -0,0 +1,13 @@
.stats {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--gap-site-stats-list);
margin: var(--margin-site-stats-list);
>div {
flex: 1;
text-align: center;
min-width: 250px;
}
}

View File

@@ -0,0 +1,24 @@
#TableOfContents {
font-size: 1.25rem;
text-align: left;
padding: var(--padding);
max-width: var(--width-content-max);
display: flex;
flex-direction: column;
gap: var(--gap-half);
ol ol {
margin-left: var(--margin);
}
ol,
li {
display: flex;
flex-direction: column;
gap: var(--gap-half);
}
a {
display: block;
}
}

View File

@@ -0,0 +1,46 @@
table {
max-width: 100%;
border-collapse: collapse;
margin: var(--margin) auto;
line-height: 1.5;
border: var(--border-panel-outer);
font-size: 1.2rem;
}
thead {
background: var(--background-panel-stats);
font-weight: bold;
}
thead th {
padding: var(--padding-half) var(--padding);
text-align: left;
white-space: nowrap;
}
tbody td {
padding: var(--padding-half) var(--padding);
vertical-align: top;
text-align: left;
}
/* Alternance des lignes */
tbody tr:nth-child(even) td {
background-color: var(--background-body-alt);
}
/* Survol ligne */
tbody tr:hover td {
background-color: var(--color-hr-glow);
}
/* Survol cellule */
tbody td:hover {
background-color: var(--color-hr-glow);
}
/* Pied du tableau */
tfoot td {
padding: var(--padding-half) var(--padding);
font-style: italic;
}

View File

@@ -0,0 +1,4 @@
@import "variables/colors.css";
@import "variables/fonts.css";
@import "variables/structure.css";
@import "variables/aesthetics.css";

View File

@@ -0,0 +1,19 @@
@import "colors/gray.css";
@import "colors/blue.css";
@import "colors/indigo.css";
@import "colors/purple.css";
@import "colors/pink.css";
@import "colors/magenta.css";
@import "colors/red.css";
@import "colors/orange.css";
@import "colors/amber.css";
@import "colors/yellow.css";
@import "colors/lime.css";
@import "colors/green.css";
@import "colors/teal.css";
@import "colors/cyan.css";
@import "colors/brown.css";
:root {
--transparent: rgba(0, 0, 0, 0);
}

View File

@@ -0,0 +1,12 @@
:root {
--amber-100: #FFEFD9;
--amber-300: #FFD08C;
--amber-500: #FFA93D;
--amber-700: #BF6A0E;
/* --- */
--amber-200: #ff0000; /** Volontairement non définie **/
--amber-400: #ff0000; /** Volontairement non définie **/
--amber-600: #ff0000; /** Volontairement non définie **/
--amber-800: #ff0000; /** Volontairement non définie **/
--amber-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--blue-100: #E4F0FF;
--blue-300: #98C0FF;
--blue-500: #467FFF;
--blue-700: #1C4FBF;
/* --- */
--blue-200: #ff0000; /** Volontairement non définie **/
--blue-400: #ff0000; /** Volontairement non définie **/
--blue-600: #ff0000; /** Volontairement non définie **/
--blue-800: #ff0000; /** Volontairement non définie **/
--blue-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--brown-100: #F4E8DF;
--brown-300: #D6B599;
--brown-500: #A7795B;
--brown-700: #6B4633;
/* --- */
--brown-200: #ff0000; /** Volontairement non définie **/
--brown-400: #ff0000; /** Volontairement non définie **/
--brown-600: #ff0000; /** Volontairement non définie **/
--brown-800: #ff0000; /** Volontairement non définie **/
--brown-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--cyan-100: #E1FAFF;
--cyan-300: #8EE8FF;
--cyan-500: #2FC4FF;
--cyan-700: #007EAC;
/* --- */
--cyan-200: #ff0000; /** Volontairement non définie **/
--cyan-400: #ff0000; /** Volontairement non définie **/
--cyan-600: #ff0000; /** Volontairement non définie **/
--cyan-800: #ff0000; /** Volontairement non définie **/
--cyan-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--gray-0: #FFFFFF;
--gray-100: #F5F7FA;
--gray-200: #E8ECF2;
--gray-300: #D9E0E8;
--gray-400: #CAD3DD;
--gray-500: #B0B7C4;
--gray-600: #969CAB;
--gray-700: #7C8392;
--gray-800: #333746;
--gray-900: #0F1114;
}

View File

@@ -0,0 +1,12 @@
:root {
--green-100: #E3F9E5;
--green-300: #8FE4A2;
--green-500: #40C474;
--green-700: #207A47;
/* --- */
--green-200: #ff0000; /** Volontairement non définie **/
--green-400: #ff0000; /** Volontairement non définie **/
--green-600: #ff0000; /** Volontairement non définie **/
--green-800: #ff0000; /** Volontairement non définie **/
--green-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--indigo-100: #E6E9FF;
--indigo-300: #A9B4FF;
--indigo-500: #5D6CFF;
--indigo-700: #2A36C4;
/* --- */
--indigo-200: #ff0000; /** Volontairement non définie **/
--indigo-400: #ff0000; /** Volontairement non définie **/
--indigo-600: #ff0000; /** Volontairement non définie **/
--indigo-800: #ff0000; /** Volontairement non définie **/
--indigo-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--lime-100: #F0FCD9;
--lime-300: #C3F58A;
--lime-500: #86E23B;
--lime-700: #519214;
/* --- */
--lime-200: #ff0000; /** Volontairement non définie **/
--lime-400: #ff0000; /** Volontairement non définie **/
--lime-600: #ff0000; /** Volontairement non définie **/
--lime-800: #ff0000; /** Volontairement non définie **/
--lime-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--magenta-100: #FFE0F1;
--magenta-300: #FFA4D0;
--magenta-500: #FF5BA6;
--magenta-700: #CC1F75;
/* --- */
--magenta-200: #ff0000; /** Volontairement non définie **/
--magenta-400: #ff0000; /** Volontairement non définie **/
--magenta-600: #ff0000; /** Volontairement non définie **/
--magenta-800: #ff0000; /** Volontairement non définie **/
--magenta-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--orange-100: #FFE8DE;
--orange-300: #FFAC85;
--orange-500: #FF733D;
--orange-700: #C23C0D;
/* --- */
--orange-200: #ff0000; /** Volontairement non définie **/
--orange-400: #ff0000; /** Volontairement non définie **/
--orange-600: #ff0000; /** Volontairement non définie **/
--orange-800: #ff0000; /** Volontairement non définie **/
--orange-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--pink-100: #FFE5F4;
--pink-300: #FF9CD3;
--pink-500: #FF54B0;
--pink-700: #C0227F;
/* --- */
--pink-200: #ff0000; /** Volontairement non définie **/
--pink-400: #ff0000; /** Volontairement non définie **/
--pink-600: #ff0000; /** Volontairement non définie **/
--pink-800: #ff0000; /** Volontairement non définie **/
--pink-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--purple-100: #F3E7FF;
--purple-300: #D2AAF7;
--purple-500: #9E63E9;
--purple-700: #6330A9;
/* --- */
--purple-200: #ff0000; /** Volontairement non définie **/
--purple-400: #ff0000; /** Volontairement non définie **/
--purple-600: #ff0000; /** Volontairement non définie **/
--purple-800: #ff0000; /** Volontairement non définie **/
--purple-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--red-100: #FFE5E7;
--red-300: #FF939B;
--red-500: #FF4D5A;
--red-700: #C0202E;
/* --- */
--red-200: #ff0000; /** Volontairement non définie **/
--red-400: #ff0000; /** Volontairement non définie **/
--red-600: #ff0000; /** Volontairement non définie **/
--red-800: #ff0000; /** Volontairement non définie **/
--red-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,12 @@
:root {
--teal-100: #E0FAF7;
--teal-300: #7EE1D4;
--teal-500: #32B9AB;
--teal-700: #197C70;
/* --- */
--teal-200: #ff0000; /** Volontairement non définie **/
--teal-400: #ff0000; /** Volontairement non définie **/
--teal-600: #ff0000; /** Volontairement non définie **/
--teal-800: #ff0000; /** Volontairement non définie **/
--teal-900: #ff0000; /** Volontairement non définie **/
}

View File

@@ -0,0 +1,16 @@
:root {
--yellow-100: #FFF8D6;
--yellow-300: #FFE68A;
--yellow-500: #F9CB2F;
--yellow-700: #B58506;
--yellow-900: #713F12;
/* --- */
--yellow-200: #ff0000;
/** Volontairement non définie **/
--yellow-400: #ff0000;
/** Volontairement non définie **/
--yellow-600: #ff0000;
/** Volontairement non définie **/
--yellow-800: #ff0000;
/** Volontairement non définie **/
}

View File

@@ -0,0 +1,15 @@
:root {
--font-family: system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
sans-serif;
--font-size-body: 20px;
--font-size-card-title: 1.5rem;
}

View File

@@ -0,0 +1,43 @@
:root {
--padding: 1rem;
--padding-half: 0.5rem;
--padding-double: 2rem;
--padding-body: var(--padding);
--padding-panel: var(--padding);
--padding-card-content: var(--padding);
--padding-hero-panel: var(--padding-panel);
--footer-padding: var(--padding);
--list-padding: var(--padding-double);
--gap: 1.5rem;
--gap-half: 0.75rem;
--gap-third: 0.5rem;
--gap-body: var(--gap);
--gap-card-content: var(--gap-half);
--gap-hero: var(--gap-body);
--gap-big-logo: var(--gap-hero);
--gap-site-stats-list: var(--gap-hero);
--gap-main: var(--gap-body);
--gap-articles-list: var(--gap-main);
--gap-footer: var(--gap-main);
--gap-footer-nav: var(--gap-half);
--gap-hero-page: var(--gap-hero);
--gap-site-title: var(--gap-half);
--gap-page-meta: var(--gap-half);
--gap-page-links: var(--gap);
--gap-list: var(--gap-third);
--margin: 2rem;
--margin-half: 1rem;
--margin-big-logo: auto;
--margin-site-stats: auto;
--margin-site-stats-list: var(--margin) auto;
--margin-home-section: var(--margin) 0 0 0;
--margin-home-section-header: 0 0 var(--margin-half) 0;
--width-content-min: 300px;
--width-content-max: 48rem;
--grid-columns: 4;
--width-card-min: 300px;
}

View File

@@ -0,0 +1 @@
{{- partial "media/render-image.html" . -}}

View File

@@ -0,0 +1,28 @@
{{- $isExternal := strings.HasPrefix .Destination "http" -}}
{{- $parsed := urls.Parse .Destination -}}
{{- $host := $parsed.Host -}}
{{- $path := $parsed.Path -}}
{{- $query := $parsed.RawQuery -}}
{{- $aff := index site.Data.affiliates.sites $host -}}
{{- $isAffiliated := false -}}
{{- $newURL := .Destination -}}
{{- if and $isExternal $aff -}}
{{- $param := $aff.param -}}
{{- $value := $aff.value -}}
{{- $isAffiliated = true -}}
{{- if $query }}
{{- $newURL = printf "%s://%s%s?%s&%s=%s" $parsed.Scheme $host $path $query $param $value -}}
{{- else }}
{{- $newURL = printf "%s://%s%s?%s=%s" $parsed.Scheme $host $path $param $value -}}
{{- end }}
{{- end -}}
{{- $titlePrefix := "" -}}
{{- if $isAffiliated -}}
{{- $titlePrefix = "Lien affilié" -}}
{{- else if $isExternal -}}
{{- $titlePrefix = "Lien externe" -}}
{{- end -}}
<a href="{{ $newURL }}" title="{{ $titlePrefix }}{{ .Title }}"
{{- if $isExternal -}} rel="noreferrer" class="external{{ if $isAffiliated }} affiliated{{ end }}" {{- end -}}>
{{- .Text | safeHTML -}}
</a>

View File

@@ -0,0 +1,8 @@
{{- $pages := .Pages -}}
{{- $context := .Context -}}
{{- $count := len $pages -}}
<nav class="articles-list">
{{- range $pages }}
{{- partial "card.html" . -}}
{{- end }}
</nav>

View File

@@ -0,0 +1,9 @@
{{- $logoPath := .Site.Params.logo | default "logo-large.png" -}}
{{- $logo := resources.GetMatch $logoPath -}}
<section id="big-logo">
<img src="{{ $logo.RelPermalink }}" alt="Logo de {{ .Site.Title }}" />
<hgroup>
<h1>{{ .Site.Title }}</h1>
<p>{{ .Site.Params.description }}</p>
</hgroup>
</section>

View File

@@ -0,0 +1,19 @@
{{- $page := . -}}
{{- with .Page -}}
{{- $page = . -}}
{{- end -}}
{{- if or $page.IsPage $page.IsSection -}}
{{- $trail := slice -}}
{{- range $page.Ancestors.Reverse -}}
{{- if ne .RelPermalink "/" -}}
{{- $trail = $trail | append . -}}
{{- end -}}
{{- end -}}
{{- if gt (len $trail) 0 -}}
<nav class="breadcrumbs" aria-label="Fil dAriane">
{{- range $item := $trail -}}
<a href="{{ $item.RelPermalink }}">{{ with $item.LinkTitle }}{{ . }}{{ else }}{{ $item.Title }}{{ end }}</a>
{{- end -}}
</nav>
{{- end -}}
{{- end -}}

View File

@@ -0,0 +1,51 @@
<a href="{{ .RelPermalink }}" class="card panel panel-hero">
{{ $page := . -}}
{{- $coverPath := .Params.cover -}}
{{- $img := false -}}
{{- if $coverPath -}}
{{- if strings.HasSuffix $coverPath ".yaml" -}}
{{- $coverAbsPath := printf "%s%s" $page.File.Dir $coverPath -}}
{{- $coverRaw := readFile $coverAbsPath -}}
{{- $coverData := $coverRaw | transform.Unmarshal -}}
{{- with $coverData.file -}}
{{- $img = $page.Resources.GetMatch . -}}
{{- end -}}
{{- else -}}
{{- $img = $page.Resources.GetMatch $coverPath -}}
{{- end -}}
{{- end -}}
{{- if $img -}}
{{- with $img -}}
{{- $resized := .Fill "450x220" -}}
<div class="card-image" style="background-image: url({{ $resized.RelPermalink }});"></div>
{{ end -}}
{{ else }}<div class="card-image"></div>
{{ end -}}
<div class="card-content">
<h3>{{ .Title }}</h3>
{{- if not $page.IsSection -}}
{{- with $page.Date -}}
<time datetime="{{ . }}">{{ . | time.Format ":date_long" }}</time>
{{- end -}}
{{- end -}}
<div class="card-meta">
{{ $section := "" -}}
{{- with .Parent -}}
{{- $sectionPath := path.Base .File.Dir -}}
{{- $section = $sectionPath -}}
{{- end -}}
<span class="section section-{{ $section }}">{{ .Parent.LinkTitle }}</span>
<span class="reading-time">
{{ if .IsSection -}}
{{- $count := len .Pages -}}
{{- $label := cond (eq $count 1) "article" "articles" -}}
{{- $count }} {{ $label -}}
{{- else -}}
{{- if ge .ReadingTime 5 -}}
{{- .ReadingTime }} min de lecture
{{- end -}}
{{- end }}
</span>
</div>
</div>
</a>

View File

@@ -0,0 +1,53 @@
{{- $current := . }}
{{- $currentTitle := .Title }}
{{- $position := .Scratch.Get "paginationPosition" | default "up" }}
{{- with index .Params.dossier 0 }}
{{- $dossierID := . }}
{{- $allPages := site.RegularPages }}
{{- $filtered := where $allPages "Params.dossier" "intersect" (slice $dossierID) }}
{{- $valid := where $filtered "Weight" "gt" 0 }}
{{- $sorted := sort $valid "Weight" }}
{{- if gt (len $sorted) 1 }}
{{- $index := -1 }}
{{- range $i, $p := $sorted }}
{{- if eq $p.Permalink $current.Permalink }}
{{- $index = $i }}
{{- end }}
{{- end }}
{{- $prev := index $sorted (sub $index 1) }}
{{- $next := index $sorted (add $index 1) }}
{{- with $dossierID -}}
<div class="sup-title">{{ . }}</div>
{{- end -}}
<nav class="pagination" aria-label="Sommaire du dossier">
{{- if ge $index 1 }}
<a class="prev" href="{{ $prev.RelPermalink }}" title="Page précédente"></a>
{{- else }}
<span class="disabled prev"></span>
{{- end }}
<details class="{{ $position }}">
<summary>Sommaire</summary>
<ul class="stat">
{{- range $i, $p := $sorted }}
<li>
{{- if eq $p.Permalink $current.Permalink }}
<span class="current">{{ $p.Title }}</span>
{{- else }}
<a href="{{ $p.RelPermalink }}">{{ $p.Title }}</a>
{{- end }}
</li>
{{- end }}
</ul>
</details>
{{- if lt (add $index 1) (len $sorted) }}
<a class="next" href="{{ $next.RelPermalink }}" title="Page suivante"></a>
{{- else }}
<span class="disabled next"></span>
{{- end }}
</nav>
{{- end }}
{{- end }}

View File

@@ -0,0 +1,25 @@
<footer>
<hr class="mirror" />
{{ range site.Menus.main -}}
<section>
<header>
<h2>{{ if .PageRef }}
<a href="{{ .PageRef }}" title="{{ .Title }}">{{ .Name }}</a>
{{ else }}
<span>{{ .Name }}</span>
{{ end }}</h2>
</header>
<nav>
{{ range .Children -}}
{{ if .PageRef }}
<a href="{{ .PageRef }}" title="{{ .Title }}">{{ .Name }}</a>
{{ else }}
<span title="{{ .Title }}">{{ .Name }}</span>
{{ end }}
{{ end }}
</nav>
</section>
{{ end }}
<p>Sauf mention contraire, l'intégralité du contenu de ce site est disponible sous licence <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">CC BY-NC-ND</a>.</p>
</footer>

View File

@@ -0,0 +1,4 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
{{ partialCached "head/css.html" . }}

View File

@@ -0,0 +1,9 @@
{{- $mainCSS := resources.Get "css/index.css" | postCSS (dict "inlineImports" true) -}}
{{- $bundle := slice $mainCSS | resources.Concat "css/bundle.css" -}}
{{- if eq hugo.Environment "development" -}}
<link rel="stylesheet" href="{{ $bundle.RelPermalink }}" type="text/css" />
{{- else -}}
{{- with $bundle | minify | fingerprint -}}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" type="text/css" />
{{- end -}}
{{- end -}}

View File

@@ -0,0 +1,7 @@
<header id="hero-page" class="panel panel-hero">
{{ partialCached "site-title.html" . }}
{{- partial "dossier-summary" . -}}
<h1>{{ .Title }}</h1>
{{ partial "page-meta.html" . }}
{{ partial "page-links.html" . }}
</header>

View File

@@ -0,0 +1,7 @@
<header id="hero-page" class="panel-hero">
{{ partialCached "site-title.html" . }}
<div class="page-meta">
{{ partial "breadcrumbs.html" . }}
</div>
<h1>{{ .Title }}</h1>
</header>

View File

@@ -0,0 +1,4 @@
<header class="panel-hero" id="hero">
{{- partialCached "big-logo.html" . -}}
{{- partialCached "site-stats.html" . -}}
</header>

View File

@@ -0,0 +1,19 @@
{{- $section := .Section -}}
{{- $sectionPages := default (slice) .SectionPages -}}
{{- $title := .Title -}}
{{- $context := default . .Context -}}
<section>
<header>
{{- with $section -}}
{{- partial "breadcrumbs.html" . -}}
<h2><a href="{{ .RelPermalink }}">{{ with .LinkTitle }}{{ . }}{{ else }}{{ .Title }}{{ end }}</a></h2>
{{- else -}}
{{- with $title -}}
<h2>{{ . }}</h2>
{{- end -}}
{{- end -}}
</header>
{{- partial "articles-list.html" (dict "Pages" $sectionPages "Context" $context) -}}
</section>
<hr />

View File

@@ -0,0 +1,6 @@
{{ if and (.Parent) (ne .Parent.RelPermalink "/") }}
{{- $sectionPath := path.Base .Parent.File.Dir -}}
<a href="{{ .Parent.RelPermalink }}" title="Retour à la section {{ .Parent.LinkTitle }}" class="section-{{ $sectionPath }}">
{{ or .Parent.LinkTitle "Section" }}
</a>
{{ end }}

View File

@@ -0,0 +1,41 @@
{{- $imgPath := .Destination -}}
{{- $imgName := path.Base $imgPath | replaceRE "\\.[^.]+$" "" -}} {{/* Supprime l'extension */}}
{{- $dataPath := printf "data/images/%s.yaml" $imgName -}}
{{- $dataFile := .Page.Resources.Get $dataPath -}}
{{- $data := dict -}}
{{- if $dataFile }}
{{- $data = $dataFile.Content | transform.Unmarshal -}}
{{- end }}
{{- $alt := .PlainText | default $data.title | default "" -}}
{{- $title := .Title | default $data.title | default .Page.Title -}}
{{- $description := default $data.description | default $title -}}
{{- $image := .Page.Resources.GetMatch $imgPath -}}
{{- $display := $image }}
{{- if gt $display.Height 810 }}
{{- $display = $image.Resize "x810" -}}
{{- end }}
<figure>
{{- with $description }}
<figcaption>
<p>{{ . | markdownify }}</p>
</figcaption>
{{- end }}
<a href="{{ $image.RelPermalink }}" title="Cliquez pour agrandir l'image">
<img src="{{ $display.RelPermalink }}" alt="{{ $alt }}" title="{{ $title }}" />
</a>
{{- if $data.prompt }}
<details>
<summary>
<strong>Attribution : {{- with $data.attribution }}<em>{{ . | markdownify }}</em>{{- end }}</strong>
</summary>
<p><strong>Prompt :</strong> <em>{{ $data.prompt }}</em></p>
</details>
{{- else }}
{{- with $data.attribution }}
<p class="details">
<strong>Attribution :</strong>
<em>{{ . | markdownify }}</em>
</p>
{{- end }}
{{- end }}
</figure>

View File

@@ -0,0 +1,51 @@
{{- /*
Renders a menu for the given menu ID.
@context {page} page The current page.
@context {string} menuID The menu ID.
@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}
{{- $page := .page }}
{{- $menuID := .menuID }}
{{- with index site.Menus $menuID }}
<nav>
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
</nav>
{{- end }}
{{- define "_partials/inline/menu/walk.html" }}
{{- $page := .page }}
{{- range .menuEntries }}
{{- $attrs := dict "href" .URL }}
{{- if $page.IsMenuCurrent .Menu . }}
{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
{{- else if $page.HasMenuCurrent .Menu .}}
{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
{{- end }}
{{- $name := .Name }}
{{- with .Identifier }}
{{- with T . }}
{{- $name = . }}
{{- end }}
{{- end }}
<li>
<a
{{- range $k, $v := $attrs }}
{{- with $v }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end -}}
>{{ $name }}</a>
{{- with .Children }}
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
{{- end }}
</li>
{{- end }}
{{- end }}

View File

@@ -0,0 +1,7 @@
{{ if .Params.links }}
<nav id="page-links">
{{ range .Params.links }}
<a href="{{ .url }}" rel="noopener noreferer norelated">{{ .name }}</a>
{{ end }}
</nav>
{{ end }}

View File

@@ -0,0 +1,9 @@
<div class="page-meta">
{{ with .Date }}
<time datetime="{{ . }}">{{ . | time.Format ":date_long" }}</time>
{{ end }}
{{ partial "breadcrumbs.html" . }}
{{- if ge .ReadingTime 5 -}}
<span>{{- .ReadingTime }} min de lecture</span>
{{- end -}}
</div>

View File

@@ -0,0 +1,22 @@
{{- $site := .Site -}}
{{- $title := $site.Title -}}
{{- $totalArticles := len $site.RegularPages -}}
{{- $allSections := where $site.Pages "Kind" "section" -}}
{{- $allSections = where $allSections "RelPermalink" "!=" "/" -}}
{{- $leafSections := slice -}}
{{- range $allSections -}}
{{- if eq (len .Sections) 0 -}}
{{- $leafSections = $leafSections | append . -}}
{{- end -}}
{{- end -}}
{{- $sectionsCount := len $leafSections -}}
{{- $lastMod := $site.Lastmod | time.Format "02/01/2006" -}}
<section id="site-stats">
<hr class="mirror" />
<div aria-label="Statistiques" class="stats">
{{ partial "stat.html" (dict "title" "Articles publiés" "value" $totalArticles)}}
{{ partial "stat.html" (dict "title" "Thématiques" "value" $sectionsCount)}}
{{ partial "stat.html" (dict "title" "Dernière mise à jour" "value" $lastMod)}}
</div>
<hr />
</section>

View File

@@ -0,0 +1,7 @@
<a id="site-title" href="/">
{{- $logoPath := .Params.logo | default "logo-large.png" -}}
{{- $logo := resources.GetMatch $logoPath -}}
{{- $resized := $logo.Resize "64x" -}}
<img src="{{ $resized.RelPermalink }}" alt="" />
<span>{{ .Site.Title }}</span>
</a>

View File

@@ -0,0 +1,4 @@
<div class="panel stat">
<strong>{{ .title }}</strong>
<span>{{ .value }}</span>
</div>

View File

@@ -0,0 +1,23 @@
{{- /*
For a given taxonomy, renders a list of terms assigned to the page.
@context {page} page The current page.
@context {string} taxonomy The taxonomy.
@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
*/}}
{{- $page := .page }}
{{- $taxonomy := .taxonomy }}
{{- with $page.GetTerms $taxonomy }}
{{- $label := (index . 0).Parent.LinkTitle }}
<div>
<div>{{ $label }}:</div>
<ul>
{{- range . }}
<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{- end }}
</ul>
</div>
{{- end }}

View File

@@ -0,0 +1,30 @@
{{- $imageURL := .Get 0 -}}
{{- $alignment := .Get 1 | default "center" -}}
{{- $title := .Get 2 | default "" -}}
{{- $description := .Get 3 | default "" -}}
{{- $attribution := .Get 4 | default "" -}}
{{- $imageURL := printf "%s?raw=true" $imageURL -}}
{{- $remoteImage := resources.GetRemote $imageURL -}}
{{- $hash := md5 $imageURL -}}
{{- $extension := path.Ext $imageURL -}}
{{- $cleanFilename := printf "%s%s" $hash $extension -}}
{{- $cleanFilename := replace $cleanFilename "?raw=true" "" -}}
{{- $localImage := $remoteImage | resources.Copy (printf "remote-images/%s" $cleanFilename) -}}
{{- $width := (cond (eq $alignment "center") "1024x" "500x") -}}
{{- $resizedImage := $localImage.Resize $width -}}
<figure class="custom-image {{ $alignment }}">
<a href="{{ $localImage.RelPermalink }}" title="Cliquez pour agrandir l'image">
<img src="{{ $resizedImage.RelPermalink }}" alt="{{ $title }}" title="{{ $title }}" />
</a>
{{- with $attribution }}
<p class="details">
<strong>Attribution :</strong>
<em>{{ . | markdownify }}</em>
</p>
{{- end }}
{{- with $description }}
<figcaption>
<p>{{ .| markdownify }}</p>
</figcaption>
{{- end }}
</figure>

View File

@@ -0,0 +1,28 @@
{{- $soundData := .Get 0 -}}
{{- $alignment := .Get 1 | default "center" -}}
{{- $dataFile := .Page.Resources.Get (printf "data/sounds/%s.yaml" $soundData) -}}
{{- if $dataFile -}}
{{- $data := $dataFile.Content | transform.Unmarshal -}}
{{- $audio := .Page.Resources.Get $data.file -}}
{{- if $audio -}}
<figure class="custom-sound {{ $alignment }}">
<audio controls preload="metadata">
<source src="{{ $audio.RelPermalink }}">
Votre navigateur ne prend pas en charge la lecture audio.
</audio>
{{- if or $data.title (or $data.description $data.attribution) }}
<figcaption>
{{- with $data.title }}
<p><strong>{{ . }}</strong></p>
{{- end }}
{{- with $data.description }}
<p>{{ . | markdownify }}</p>
{{- end }}
{{- with $data.attribution }}
<p class="details"><strong>Attribution :</strong> <em>{{ . | markdownify }}</em></p>
{{- end }}
</figcaption>
{{- end }}
</figure>
{{- end -}}
{{- end -}}

View File

@@ -0,0 +1,44 @@
{{- $videoData := .Get 0 -}}
{{- $alignment := .Get 1 | default "center" -}}
{{- $dataFile := .Page.Resources.Get (printf "data/videos/%s.yaml" $videoData) -}}
{{- if $dataFile -}}
{{- $data := $dataFile.Content | transform.Unmarshal -}}
{{- $video := .Page.Resources.Get $data.file -}}
{{- if $video -}}
<figure class="custom-video {{ $alignment }}">
<video controls preload="metadata" width="100%">
<source src="{{ $video.RelPermalink }}" type="video/mp4">
Votre navigateur ne prend pas en charge la lecture des vidéos.
</video>
{{- if $data.prompt }}
<details>
<summary>
<strong>Attribution :</strong>
{{- with $data.attribution }}
<em>{{ . | markdownify }}</em>
{{- end }}
</summary>
{{- with $data.prompt }}
<p><strong>Prompt :</strong> <em>{{ . }}</em></p>
{{- end }}
</details>
{{- with $data.description }}
<figcaption>
<p>{{ .| markdownify }}</p>
</figcaption>
{{- end }}
{{- else }}
{{- with $data.attribution }}
<p class="details">
<strong>Attribution :</strong>
<em>{{ . | markdownify }}</em>
</p>
{{- end }}{{- with $data.description }}
<figcaption>
<p>{{ .| markdownify }}</p>
</figcaption>
{{- end }}
{{- end }}
</figure>
{{- end -}}
{{- end -}}

View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
{{ partial "head.html" . }}
</head>
<body>
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
</body>
</html>

View File

@@ -0,0 +1,41 @@
{{- define "main" }}
{{- $site := .Site -}}
{{- $allArticles := $site.RegularPages.ByDate.Reverse -}}
{{- $allSections := where $site.Pages "Kind" "section" -}}
{{- $allSections = where $allSections "RelPermalink" "!=" "/" -}}
{{- $leafSections := slice -}}
{{- range $allSections -}}
{{- if eq (len .Sections) 0 -}}
{{- $leafSections = $leafSections | append . -}}
{{- end -}}
{{- end -}}
{{- partial "hero.html" . -}}
{{- $used := slice -}}
<main id="home">
{{- $recent := first 4 ($allArticles) -}}
{{- range $recent }}
{{- $used = $used | append .File.Path -}}
{{- end -}}
{{- partial "home-section.html" (dict "SectionPages" $recent "Title" "Dernières publications" "Context" .) -}}
{{- range sort $leafSections "Lastmod" "desc" -}}
{{- $section := . -}}
{{- $sectionPages := slice -}}
{{- range $section.RegularPagesRecursive.ByDate.Reverse -}}
{{- if not (in $used .File.Path) -}}
{{- $sectionPages = $sectionPages | append . -}}
{{- end -}}
{{- end -}}
{{- $sectionPages = first 4 $sectionPages -}}
{{- if gt (len $sectionPages) 0 -}}
{{- range $sectionPages -}}
{{- $used = $used | append .File.Path -}}
{{- end -}}
{{- partial "home-section.html" (dict "SectionPages" $sectionPages "Section" $section "Context" .) -}}
{{- end -}}
{{- end -}}
</main>
{{- end }}

View File

@@ -0,0 +1,30 @@
{{ define "main" }}
{{ partial "hero-page.html" . }}
<main>
<article class="article-body">
{{- if eq .Page.Parent.RelPermalink "/interets/liens-interessants/" -}}
{{- else -}}
{{- if .Params.cover -}}
{{- partial "media/render-image.html" (dict
"Page" .Page
"Destination" .Params.cover
) -}}
{{- end -}}
{{- end -}}
{{ with .TableOfContents }}
{{ if gt (len (plainify .)) 0 }}
<div class="stat">
<strong>
Sommaire
</strong>
{{ . | safeHTML }}
</div>
{{ end }}
{{ end }}
{{ .Content }}
</article>
</main>
{{ end }}

View File

@@ -0,0 +1,8 @@
{{ define "main" }}
{{ partial "hero-section.html" . }}
<main>
{{ .Content }}
{{- partial "articles-list.html" (dict "Pages" .Pages.ByDate.Reverse "Context" .) -}}
</main>
{{ end }}

View File

@@ -0,0 +1,7 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}

View File

@@ -0,0 +1,7 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}