From 0b8e85342a39bae4d84d5a982e0014a7d5419e77 Mon Sep 17 00:00:00 2001 From: Bruno Carlin Date: Wed, 2 Jul 2025 23:58:44 +0200 Subject: [PATCH] feat(theme): rewrite the CSS with nested selectors --- assets/static/css/bcarlin.css | 423 +++++++++++++++++----------------- layouts/baseof.html | 7 +- stylelint.config.js | 6 + 3 files changed, 223 insertions(+), 213 deletions(-) create mode 100644 stylelint.config.js diff --git a/assets/static/css/bcarlin.css b/assets/static/css/bcarlin.css index 99d2b22..a27e26e 100644 --- a/assets/static/css/bcarlin.css +++ b/assets/static/css/bcarlin.css @@ -92,14 +92,19 @@ header nav [role="link"]:is([aria-current]:not([aria-current="false"]),:hover,:a --pico-text-decoration: none; } -.container { +article :where(a:not([role="button"])) { + --pico-text-decoration: none; +} + +body > :is(main, footer) { max-width: 40em; margin-left: auto; margin-right: auto; -} -article :where(a:not([role="button"])) { - --pico-text-decoration: none; + @media (width >= 1024px) { + margin-right: 0; + margin-left: 18em; + } } /* @@ -115,10 +120,19 @@ article :where(a:not([role="button"])) { backdrop-filter: blur(3px); font-family: var(--pico-font-family-sans-serif); font-weight: bold; + + @media (width >= 1024px) { + display: none; + } + + img { + height: 2em; + } } -.mobile-header img { - height: 2em; +#menu-close { + float: right; + padding: 0 1.5em; } #menu-close, #menu-close:hover, #menu-toggle { @@ -126,98 +140,85 @@ article :where(a:not([role="button"])) { background-color: inherit; border: none; text-decoration: none; + + @media (width >= 1024px) { + display: none; + } } body { background-color: var(--pico-background-color); -} -body > header { - width: 100vw; - text-align: center; - height: 100vh; - position: fixed; - left: -100vw; - top: 0; - background-color: var(--pico-background-color); - z-index: 100; - transition: left 0.5s; - overflow: hidden auto; -} + & > header { + width: 100vw; + text-align: center; + height: 100vh; + position: fixed; + left: -100vw; + top: 0; + background-color: var(--pico-background-color); + z-index: 100; + transition: left 0.5s; + overflow: hidden auto; -body > header.active { - left: 0; -} + @media (width >= 1024px) { + position: sticky; + top: 0; + left: 0; + width: 15em; + float: left; + } -body > header nav, body > header nav ul { - flex-direction: column; -} + .u-logo { + width: 5em; + } -body > header .u-logo { - width: 5em; -} + .title { + font-size: 1.5rem; + font-weight: bold; + font-family: var(--pico-font-family-sans-serif); + margin-top: 1em; + } + a { + color: var(--pico-color); + padding: 0; -body > header .title { - font-size: 1.5rem; - font-weight: bold; - font-family: var(--pico-font-family-sans-serif); - margin-top: 1em; -} + .menu-primary & { + font-weight: bold; + } + } -body > header nav { - font-size: 1rem; - font-family: var(--pico-font-family-sans-serif); - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; -} + nav { + font-size: 1rem; + font-family: var(--pico-font-family-sans-serif); + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; -body > header nav li { - padding: 0; - padding: calc( var(--pico-nav-element-spacing-vertical) / 4) - calc( var(--pico-nav-element-spacing-horizontal) / 4); -} + ul { + flex-direction: column; + } -body > header a { - color: var(--pico-color); - padding: 0; -} + li { + padding: 0; + padding: calc( var(--pico-nav-element-spacing-vertical) / 4) + calc( var(--pico-nav-element-spacing-horizontal) / 4); + } + } + } -body > header > a { - float: right; - padding: 0 1.5em; -} - -.menu-primary { - font-weight: bold; -} - -body > footer p { - font-size: 0.7em; - text-align: center; + & > footer{ + p { + font-size: 0.7em; + text-align: center; + } + } } @media (width >= 1024px) { - .mobile-header, #menu-close { - display: none; - } - - body > header { - position: sticky; - top: 0; - left: 0; - width: 15em; - float: left; - } - - .container { - margin-right: 0; - margin-left: 18em; - } - .metadata p { display: inline; } @@ -228,134 +229,130 @@ body > footer p { * Content Styling */ -.translations { - text-align: end; - margin-bottom: 0.3em; -} +main { + .translations { + text-align: end; + margin-bottom: 0.3em; -.translations a { - text-decoration: none; -} + a { + text-decoration: none; + } + } -main > article { - text-align: justify; -} + & > article { + text-align: justify; -main > article > header { - margin-bottom: calc(2 * var(--pico-block-spacing-vertical)); -} + & > header { + margin-bottom: calc(2 * var(--pico-block-spacing-vertical)); -ul.tags, ul.tags li { - list-style-type: none; - display: inline; - padding-left: 0; - margin-bottom: 0; -} - -ul > li { - list-style-type: disc; -} - -h1, h2, h3, h4, h5, h6 { - font-family: var(--pico-font-family-sans-serif); - text-align: left; -} - -h1 { - font-size: 1.7rem; -} - -h2 { - font-size: 1.3rem; -} - -h2::before { - content: "## "; - color: var(--markup-color); -} - -h3 { - font-size: 1.2rem; -} - -h3::before { - content: "### "; - color: var(--markup-color); -} - -h4 { - font-size: 1.1rem; -} - -h4::before { - content: "#### "; - color: var(--markup-color); -} - -h5 { - font-size: 1rem; -} - -h5::before { - content: "##### "; - color: var(--markup-color); -} - -h6 { - font-size: 1rem; -} - -h6::before { - content: "###### "; - color: var(--markup-color); -} - -article header h1, article header p { - margin-bottom: calc(0.1 * var(--pico-typography-spacing-vertical)); - margin-top: 0.3em; -} + h1, p { + margin-bottom: calc(0.1 * var(--pico-typography-spacing-vertical)); + margin-top: 0.3em; + } -article header .category a { - font-family: var(--pico-font-family-sans-serif); - font-weight: 700; - line-height: var(--pico-line-height); - color: var(--pico-muted-color); - text-decoration: none; - font-size: 1rem; - margin-bottom: 0.5em; + .category a { + font-family: var(--pico-font-family-sans-serif); + font-weight: 700; + line-height: var(--pico-line-height); + color: var(--pico-muted-color); + text-decoration: none; + font-size: 1rem; + margin-bottom: 0.5em; + } + } + + ul > li { + list-style-type: disc; + } + + h1, h2, h3, h4, h5, h6 { + font-family: var(--pico-font-family-sans-serif); + text-align: left; + + a { + color: var(--pico-muted-color); + text-decoration: none; + margin-left: 0.4rem; + font-size: 1rem; + } + } + + h1 { + font-size: 1.7rem; + } + + h2 { + font-size: 1.3rem; + + &::before { + content: "## "; + color: var(--markup-color); + } + } + + h3 { + font-size: 1.2rem; + + &::before { + content: "### "; + color: var(--markup-color); + } + } + + h4 { + font-size: 1.1rem; + + &::before { + content: "#### "; + color: var(--markup-color); + } + } + + h5 { + font-size: 1rem; + + &::before { + content: "##### "; + color: var(--markup-color); + } + } + + h6 { + font-size: 1rem; + + &::before { + content: "###### "; + color: var(--markup-color); + } + } + + pre { + margin-bottom: calc(1.5 * var(--pico-spacing)); + } + + code, kbd, pre { + font-size: 0.8em; + } + + a[rel="external"]::after { + content: "\ecae"; + font-size: 0.7em; + margin-left: 0.2em; + font-family: 'remixicon' !important; + font-style: normal; + color: var(--pico-muted-color); + text-decoration: none; + } + + figure { + max-width: 50%; + text-align: center; + margin: var(--pico-block-spacing-vertical) auto; + } + } } -h2 a, h3 a, h4 a, h5 a, h6 a { - color: var(--pico-muted-color); - text-decoration: none; - margin-left: 0.4rem; - font-size: 1rem; -} - -pre { - margin-bottom: calc(1.5 * var(--pico-spacing)); -} - -code, kbd, pre { - font-size: 0.8em; -} - -a[rel="external"]::after { - content: "\ecae"; - font-size: 0.7em; - margin-left: 0.2em; - font-family: 'remixicon' !important; - font-style: normal; - color: var(--pico-muted-color); - text-decoration: none; -} - -figure { - max-width: 50%; - text-align: center; - margin: var(--pico-block-spacing-vertical) auto; -} /* * Admonitions @@ -374,16 +371,20 @@ figure { * Post lists */ -.h-feed article:not(:last-child) { - border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); - margin-bottom: 0; -} +.h-feed { + article{ + &:not(:last-child) { + border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); + margin-bottom: 0; + } -.h-feed article p { - margin-bottom: calc(0.2 * var(--pico-typography-spacing-vertical)); -} + p { + margin-bottom: calc(0.2 * var(--pico-typography-spacing-vertical)); + } -.h-feed article .p-summary { - font-size: 0.9em; - font-style: italic; + .p-summary { + font-size: 0.9em; + font-style: italic; + } + } } diff --git a/layouts/baseof.html b/layouts/baseof.html index e1c7971..6db0687 100644 --- a/layouts/baseof.html +++ b/layouts/baseof.html @@ -30,10 +30,12 @@ + -
+ +
{{- if .IsTranslated }} {{- range .Translations }}
@@ -47,7 +49,8 @@ {{ block "main" . }}{{ end }}
-