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 {
counter-reset: h2;
}
}
.article-content,
aside {
a {
color: #8ab4f8;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1.5px;
overflow-wrap: break-word;
.article-content,
article aside {
a {
color: #8ab4f8;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1.5px;
overflow-wrap: break-word;
&:hover,
&:focus {
color: #64c7ff;
outline: none;
}
&:focus-visible {
outline: 2px solid #64c7ff;
outline-offset: 3px;
}
&:hover,
&:focus {
color: #64c7ff;
outline: none;
}
a.affiliated {
color: #e553ff;
/* or: gold */
text-decoration: underline;
&:focus-visible {
outline: 2px solid #64c7ff;
outline-offset: 3px;
}
}
a.affiliated:hover,
a.affiliated:focus {
color: #f6a7ff;
}
a.affiliated {
color: #e553ff;
/* or: gold */
text-decoration: underline;
}
a.external {
color: #f38c8c;
/* or: gold */
text-decoration: underline;
}
a.affiliated:hover,
a.affiliated:focus {
color: #f6a7ff;
}
a.external:hover,
a.external:focus {
color: #ffd8d8;
}
a.external {
color: #f38c8c;
/* or: gold */
text-decoration: underline;
}
a.active {
color: #fff !important;
}
a.external:hover,
a.external:focus {
color: #ffd8d8;
}
abbr {
text-decoration: underline dotted;
cursor: help;
}
a.active {
color: #fff !important;
}
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;
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;
margin-top: 1em;
font-style: normal;
border-radius: 0.5em;
line-height: 1.6;
font-size: 0.9em;
color: #999;
text-align: right;
}
}
audio {
display: block;
width: 100%;
max-width: 500px;
margin: 2em auto;
}
dl {
margin: 2em 0;
padding: 0;
}
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;
dt {
font-weight: bold;
color: #fff;
margin-top: 1.5em;
}
cite {
display: block;
margin-top: 1em;
font-style: normal;
font-size: 0.9em;
color: #999;
text-align: right;
}
}
dd {
margin-left: 1em;
color: #ccc;
line-height: 1.6;
}
dl {
margin: 2em 0;
padding: 0;
}
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;
}
dt {
details {
margin: 2em 0;
border-radius: 0.5em;
overflow: hidden;
padding: 1rem;
summary {
cursor: pointer;
padding: 0.5rem 1rem;
font-weight: bold;
color: #fff;
margin-top: 1.5em;
user-select: none;
}
dd {
margin-left: 1em;
color: #ccc;
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;
&.spoiler {
border-left: 4px solid #888;
background-color: rgba(255, 255, 255, 0.03);
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;
margin-top: 0.5em;
line-height: 1.4;
font-style: italic;
padding: 0 1em;
&::before {
content: "⚠️ ";
margin-right: 0.25em;
}
}
&[open] summary {
color: #fff;
}
}
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%);
}
&.update {
border-left: 4px solid #64c7ff;
background-color: rgba(100, 199, 255, 0.1);
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 */
summary {
color: #64c7ff;
font-weight: bold;
font-size: 0.85em;
/* ⬅ très léger ajustement */
line-height: 1;
&::before {
content: "🛈 ";
margin-right: 0.25em;
}
}
&:disabled {
opacity: 1;
&[open] summary {
color: #fff;
}
}
ins {
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;
&.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;
}
kbd {
display: inline-block;
padding: 0.2em 0.6em;
margin: 0 0.1em;
font-family: inherit;
figcaption {
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;
margin-top: 0.5em;
line-height: 1.4;
font-style: italic;
padding: 0 1em;
}
}
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,
ol {
margin-block: 1em;
padding-left: 1.5em;
&:disabled {
opacity: 1;
}
}
li {
margin-block: 0.3em;
ins {
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,
li>ol {
>ul,
>ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
}
}
/* UL : puce unifiée */
ul {
list-style: none;
padding-left: 1.5em;
margin-block: 1em;
/* OL : numérotation propre et lisible */
ol {
list-style: decimal;
li {
position: relative;
margin-block: 0.3em;
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;
li::marker {
color: #9fd356;
font-variant-numeric: tabular-nums;
}
}
aside {
p {
text-align: justify;
margin-block: .5em;
}
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
content: none;
.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 {
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
content: none;
}
}
.numbered-headings {

View File

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