From d0a1a801433f3352bcd1d028600c9a30b342a84c Mon Sep 17 00:00:00 2001 From: Richard Dern Date: Sun, 30 Mar 2025 00:03:05 +0100 Subject: [PATCH] Added style to hero --- themes/default/assets/css/typography.css | 914 +++++++++++----------- themes/default/layouts/_default/home.html | 2 +- 2 files changed, 458 insertions(+), 458 deletions(-) diff --git a/themes/default/assets/css/typography.css b/themes/default/assets/css/typography.css index e07c487d..1fe4ea23 100644 --- a/themes/default/assets/css/typography.css +++ b/themes/default/assets/css/typography.css @@ -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 { diff --git a/themes/default/layouts/_default/home.html b/themes/default/layouts/_default/home.html index f327ba5f..c16076e5 100644 --- a/themes/default/layouts/_default/home.html +++ b/themes/default/layouts/_default/home.html @@ -6,7 +6,7 @@ {{- end }} -
+
{{ .Content -}}