1

Added style to hero

This commit is contained in:
2025-03-30 00:03:05 +01:00
parent fe24883933
commit d0a1a80143
2 changed files with 458 additions and 458 deletions

View File

@@ -2,519 +2,519 @@ article {
.article-content { .article-content {
counter-reset: h2; counter-reset: h2;
} }
}
.article-content, .article-content,
aside { article aside {
a { a {
color: #8ab4f8; color: #8ab4f8;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
text-decoration-thickness: 1.5px; text-decoration-thickness: 1.5px;
overflow-wrap: break-word; overflow-wrap: break-word;
&:hover, &:hover,
&:focus { &:focus {
color: #64c7ff; color: #64c7ff;
outline: none; outline: none;
}
&:focus-visible {
outline: 2px solid #64c7ff;
outline-offset: 3px;
}
} }
a.affiliated { &:focus-visible {
color: #e553ff; outline: 2px solid #64c7ff;
/* or: gold */ outline-offset: 3px;
text-decoration: underline;
} }
}
a.affiliated:hover, a.affiliated {
a.affiliated:focus { color: #e553ff;
color: #f6a7ff; /* or: gold */
} text-decoration: underline;
}
a.external { a.affiliated:hover,
color: #f38c8c; a.affiliated:focus {
/* or: gold */ color: #f6a7ff;
text-decoration: underline; }
}
a.external:hover, a.external {
a.external:focus { color: #f38c8c;
color: #ffd8d8; /* or: gold */
} text-decoration: underline;
}
a.active { a.external:hover,
color: #fff !important; a.external:focus {
} color: #ffd8d8;
}
abbr { a.active {
text-decoration: underline dotted; color: #fff !important;
cursor: help; }
}
address { abbr {
text-decoration: underline dotted;
cursor: help;
}
address {
display: block;
margin: 2em;
padding: 1em 1.5em;
border-left: 4px solid #64c7ff;
background-color: rgba(255, 255, 255, 0.03);
font-size: 0.9em;
color: #ccc;
font-style: normal;
border-radius: 0.5em;
line-height: 1.6;
}
audio {
display: block;
width: 100%;
max-width: 500px;
margin: 2em auto;
}
blockquote {
margin: 2em 0;
padding-left: 1.5em;
border-left: 4px solid #64c7ff;
color: #ccc;
font-style: italic;
font-size: 1.1em;
line-height: 1.6;
text-align: justify;
cite {
display: block; display: block;
margin: 2em; margin-top: 1em;
padding: 1em 1.5em;
border-left: 4px solid #64c7ff;
background-color: rgba(255, 255, 255, 0.03);
font-size: 0.9em;
color: #ccc;
font-style: normal; font-style: normal;
border-radius: 0.5em; font-size: 0.9em;
line-height: 1.6; color: #999;
text-align: right;
} }
}
audio { dl {
display: block; margin: 2em 0;
width: 100%; padding: 0;
max-width: 500px; }
margin: 2em auto;
}
blockquote { dt {
margin: 2em 0; font-weight: bold;
padding-left: 1.5em; color: #fff;
border-left: 4px solid #64c7ff; margin-top: 1.5em;
color: #ccc; }
font-style: italic;
font-size: 1.1em;
line-height: 1.6;
text-align: justify;
cite { dd {
display: block; margin-left: 1em;
margin-top: 1em; color: #ccc;
font-style: normal; line-height: 1.6;
font-size: 0.9em; }
color: #999;
text-align: right;
}
}
dl { del {
margin: 2em 0; display: inline;
padding: 0; text-decoration: line-through;
} color: #d44;
background-color: rgba(255, 0, 0, 0.1);
padding: 0 0.2em;
border-radius: 0.2em;
}
dt { details {
margin: 2em 0;
border-radius: 0.5em;
overflow: hidden;
padding: 1rem;
summary {
cursor: pointer;
padding: 0.5rem 1rem;
font-weight: bold; font-weight: bold;
color: #fff; user-select: none;
margin-top: 1.5em;
} }
dd { &.spoiler {
margin-left: 1em; border-left: 4px solid #888;
color: #ccc; background-color: rgba(255, 255, 255, 0.03);
line-height: 1.6;
}
del {
display: inline;
text-decoration: line-through;
color: #d44;
background-color: rgba(255, 0, 0, 0.1);
padding: 0 0.2em;
border-radius: 0.2em;
}
details {
margin: 2em 0;
border-radius: 0.5em;
overflow: hidden;
padding: 1rem;
summary { summary {
cursor: pointer;
padding: 0.5rem 1rem;
font-weight: bold;
user-select: none;
}
&.spoiler {
border-left: 4px solid #888;
background-color: rgba(255, 255, 255, 0.03);
summary {
color: #aaa;
&::before {
content: "⚠️ ";
margin-right: 0.25em;
}
}
&[open] summary {
color: #fff;
}
}
&.update {
border-left: 4px solid #64c7ff;
background-color: rgba(100, 199, 255, 0.1);
summary {
color: #64c7ff;
&::before {
content: "🛈 ";
margin-right: 0.25em;
}
}
&[open] summary {
color: #fff;
}
}
&.read-more {
border: none;
background: none;
summary {
font-weight: normal;
color: #8ab4f8;
text-decoration: underline dotted;
&::before {
content: " ";
margin-right: 0.25em;
}
&:hover {
color: #64c7ff;
}
}
summary~p {
padding-left: 1.25em;
}
}
}
dfn {
font-style: italic;
font-weight: normal;
border-bottom: 1px dashed #64c7ff;
cursor: help;
text-decoration: none;
}
figure {
display: block;
margin: 3em auto;
padding: 1rem;
border-radius: 1em;
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.7));
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
0 0 10px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
max-width: 100%;
text-align: center;
img,
video,
audio {
display: block;
max-width: 100%;
max-height: 60vh;
margin: 0 auto;
border-radius: 0.5em;
}
figcaption {
font-size: 0.9em;
color: #aaa; color: #aaa;
margin-top: 0.5em;
line-height: 1.4; &::before {
font-style: italic; content: "⚠️ ";
padding: 0 1em; margin-right: 0.25em;
}
}
&[open] summary {
color: #fff;
} }
} }
hr { &.update {
all: unset; border-left: 4px solid #64c7ff;
display: block; background-color: rgba(100, 199, 255, 0.1);
width: 100%;
max-width: 30em;
height: 1rem;
margin: 4em auto;
position: relative;
background: radial-gradient(ellipse at center -20px,
rgba(200, 240, 255, 0.18),
transparent 80%);
}
input[type="checkbox"] { summary {
appearance: none;
width: 1.1em;
height: 1.1em;
margin-right: 0.5em;
vertical-align: text-bottom;
/* ⬅ correction ici */
border: 2px solid #888;
border-radius: 0.2em;
background-color: transparent;
position: relative;
cursor: default;
&:checked::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* ⬅ centrage parfait */
color: #64c7ff; color: #64c7ff;
font-weight: bold;
font-size: 0.85em; &::before {
/* ⬅ très léger ajustement */ content: "🛈 ";
line-height: 1; margin-right: 0.25em;
}
} }
&:disabled { &[open] summary {
opacity: 1; color: #fff;
} }
} }
ins { &.read-more {
display: inline; border: none;
text-decoration: none; background: none;
font-weight: bold;
color: #2c5; summary {
background-color: rgba(0, 255, 0, 0.1); font-weight: normal;
padding: 0 0.2em; color: #8ab4f8;
border-radius: 0.2em; text-decoration: underline dotted;
&::before {
content: " ";
margin-right: 0.25em;
}
&:hover {
color: #64c7ff;
}
}
summary~p {
padding-left: 1.25em;
}
}
}
dfn {
font-style: italic;
font-weight: normal;
border-bottom: 1px dashed #64c7ff;
cursor: help;
text-decoration: none;
}
figure {
display: block;
margin: 3em auto;
padding: 1rem;
border-radius: 1em;
background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.7));
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
0 0 10px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
max-width: 100%;
text-align: center;
img,
video,
audio {
display: block;
max-width: 100%;
max-height: 60vh;
margin: 0 auto;
border-radius: 0.5em;
} }
kbd { figcaption {
display: inline-block;
padding: 0.2em 0.6em;
margin: 0 0.1em;
font-family: inherit;
font-size: 0.9em; font-size: 0.9em;
line-height: 1.2;
color: #aaa; color: #aaa;
background-color: #111; margin-top: 0.5em;
border-radius: 0.3em; line-height: 1.4;
box-shadow: font-style: italic;
0 0 6px rgba(255, 255, 255, 0.25), padding: 0 1em;
0 0 12px rgba(255, 255, 255, 0.12), }
inset 0 0 1px rgba(255, 255, 255, 0.04); }
white-space: nowrap;
vertical-align: middle; hr {
all: unset;
display: block;
width: 100%;
max-width: 30em;
height: 1rem;
margin: 4em auto;
position: relative;
background: radial-gradient(ellipse at center -20px,
rgba(200, 240, 255, 0.18),
transparent 80%);
}
input[type="checkbox"] {
appearance: none;
width: 1.1em;
height: 1.1em;
margin-right: 0.5em;
vertical-align: text-bottom;
/* ⬅ correction ici */
border: 2px solid #888;
border-radius: 0.2em;
background-color: transparent;
position: relative;
cursor: default;
&:checked::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* ⬅ centrage parfait */
color: #64c7ff;
font-weight: bold;
font-size: 0.85em;
/* ⬅ très léger ajustement */
line-height: 1;
} }
ul, &:disabled {
ol { opacity: 1;
margin-block: 1em; }
padding-left: 1.5em; }
li { ins {
margin-block: 0.3em; display: inline;
text-decoration: none;
font-weight: bold;
color: #2c5;
background-color: rgba(0, 255, 0, 0.1);
padding: 0 0.2em;
border-radius: 0.2em;
}
kbd {
display: inline-block;
padding: 0.2em 0.6em;
margin: 0 0.1em;
font-family: inherit;
font-size: 0.9em;
line-height: 1.2;
color: #aaa;
background-color: #111;
border-radius: 0.3em;
box-shadow:
0 0 6px rgba(255, 255, 255, 0.25),
0 0 12px rgba(255, 255, 255, 0.12),
inset 0 0 1px rgba(255, 255, 255, 0.04);
white-space: nowrap;
vertical-align: middle;
}
ul,
ol {
margin-block: 1em;
padding-left: 1.5em;
li {
margin-block: 0.3em;
}
li>ul,
li>ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
}
/* UL : puce unifiée */
ul {
list-style: none;
padding-left: 1.5em;
margin-block: 1em;
li {
position: relative;
margin-block: 0.3em;
padding-left: 1em;
text-indent: 0;
&::before {
content: "•";
color: #64c7ff;
position: absolute;
left: 0;
top: 0.1em;
} }
li>ul, >ul,
li>ol { >ol {
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
} }
}
/* UL : puce unifiée */ /* OL : numérotation propre et lisible */
ul { ol {
list-style: none; list-style: decimal;
padding-left: 1.5em;
margin-block: 1em;
li { li::marker {
position: relative; color: #9fd356;
margin-block: 0.3em; font-variant-numeric: tabular-nums;
padding-left: 1em;
text-indent: 0;
&::before {
content: "•";
color: #64c7ff;
position: absolute;
left: 0;
top: 0.1em;
}
>ul,
>ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
}
}
/* OL : numérotation propre et lisible */
ol {
list-style: decimal;
li::marker {
color: #9fd356;
font-variant-numeric: tabular-nums;
}
}
p {
text-align: justify;
margin-block: .5em;
}
.highlight {
font-size: .8rem;
pre {
padding: 1rem;
overflow: auto;
max-height: 50vh;
border-radius: .5rem;
}
}
q {
quotes: "«\00a0" " »" "“" "”";
font-style: italic;
color: #aaa;
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
}
samp {
display: inline-block;
padding: 0.3em 0.6em;
margin: 0.2em 0.1em;
font-family: 'Courier New', monospace;
font-size: 0.9em;
line-height: 1.4;
color: #a8ff60;
background-color: #111;
border-radius: 0.3em;
box-shadow:
0 0 1px rgba(0, 255, 0, 0.2),
inset 0 0 2px rgba(255, 255, 255, 0.05);
white-space: pre-wrap;
}
pre samp {
display: block;
padding: 1em;
margin: 2em auto;
background-color: #111;
color: #a8ff60;
border-radius: 0.5em;
box-shadow:
0 0 10px rgba(0, 255, 100, 0.05),
inset 0 0 3px rgba(0, 255, 100, 0.1);
font-size: 0.8em;
max-height: 50vh;
overflow: auto;
}
strong {
color: white;
}
sub,
sup {
font-size: 0.75em;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.4em;
}
sub {
bottom: -0.2em;
}
table {
width: 100%;
border-collapse: collapse;
margin: 3em 0;
font-size: 0.95em;
line-height: 1.5;
border: 1px solid #444;
background-color: rgba(255, 255, 255, 0.015);
/* Suppression des coins arrondis */
border-radius: 0;
}
thead {
background-color: rgba(255, 255, 255, 0.04);
color: #fff;
font-weight: bold;
}
thead th {
padding: 0.75em 1em;
border: 1px solid #444;
text-align: left;
white-space: nowrap;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.4));
}
tbody td {
padding: 0.75em 1em;
border: 1px solid #444;
vertical-align: top;
text-align: left;
color: #ccc;
background-color: transparent;
transition: background-color 0.2s;
}
/* Alternance des lignes */
tbody tr:nth-child(even) td {
background-color: rgba(255, 255, 255, 0.015);
}
/* Survol ligne */
tbody tr:hover td {
background-color: rgba(100, 199, 255, 0.05);
}
/* Survol cellule */
tbody td:hover {
background-color: rgba(100, 199, 255, 0.08);
}
/* Pied du tableau */
tfoot td {
padding: 0.75em 1em;
font-style: italic;
color: #aaa;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid #444;
} }
} }
aside { p {
text-align: justify;
margin-block: .5em;
}
h2::before, .highlight {
h3::before, font-size: .8rem;
h4::before,
h5::before, pre {
h6::before { padding: 1rem;
content: none; overflow: auto;
max-height: 50vh;
border-radius: .5rem;
} }
} }
q {
quotes: "«\00a0" " »" "“" "”";
font-style: italic;
color: #aaa;
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
}
samp {
display: inline-block;
padding: 0.3em 0.6em;
margin: 0.2em 0.1em;
font-family: 'Courier New', monospace;
font-size: 0.9em;
line-height: 1.4;
color: #a8ff60;
background-color: #111;
border-radius: 0.3em;
box-shadow:
0 0 1px rgba(0, 255, 0, 0.2),
inset 0 0 2px rgba(255, 255, 255, 0.05);
white-space: pre-wrap;
}
pre samp {
display: block;
padding: 1em;
margin: 2em auto;
background-color: #111;
color: #a8ff60;
border-radius: 0.5em;
box-shadow:
0 0 10px rgba(0, 255, 100, 0.05),
inset 0 0 3px rgba(0, 255, 100, 0.1);
font-size: 0.8em;
max-height: 50vh;
overflow: auto;
}
strong {
color: white;
}
sub,
sup {
font-size: 0.75em;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.4em;
}
sub {
bottom: -0.2em;
}
table {
width: 100%;
border-collapse: collapse;
margin: 3em 0;
font-size: 0.95em;
line-height: 1.5;
border: 1px solid #444;
background-color: rgba(255, 255, 255, 0.015);
/* Suppression des coins arrondis */
border-radius: 0;
}
thead {
background-color: rgba(255, 255, 255, 0.04);
color: #fff;
font-weight: bold;
}
thead th {
padding: 0.75em 1em;
border: 1px solid #444;
text-align: left;
white-space: nowrap;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.4));
}
tbody td {
padding: 0.75em 1em;
border: 1px solid #444;
vertical-align: top;
text-align: left;
color: #ccc;
background-color: transparent;
transition: background-color 0.2s;
}
/* Alternance des lignes */
tbody tr:nth-child(even) td {
background-color: rgba(255, 255, 255, 0.015);
}
/* Survol ligne */
tbody tr:hover td {
background-color: rgba(100, 199, 255, 0.05);
}
/* Survol cellule */
tbody td:hover {
background-color: rgba(100, 199, 255, 0.08);
}
/* Pied du tableau */
tfoot td {
padding: 0.75em 1em;
font-style: italic;
color: #aaa;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid #444;
}
}
aside {
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
content: none;
}
} }
.numbered-headings { .numbered-headings {

View File

@@ -6,7 +6,7 @@
<img src="{{ .RelPermalink }}" alt="Logo" class="site-logo" /> <img src="{{ .RelPermalink }}" alt="Logo" class="site-logo" />
{{- end }} {{- end }}
<div> <div class="article-content">
{{ .Content -}} {{ .Content -}}
</div> </div>
</section> </section>