bcarlin/bcarlin.net
1
0
Fork 0
Code Pull requests Activity Actions

feat(theme): rewrite the CSS with nested selectors

Browse source
This commit is contained in:
Bruno Carlin 2025-07-02 23:58:44 +02:00
parent 394d1556f7
commit 0b8e85342a
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG key ID: 8E254EA0FFEB9B6D
3 changed files with 223 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

423
assets/static/css/bcarlin.css
View file

@ -92,14 +92,19 @@ header nav [role="link"]:is([aria-current]:not([aria-current="false"]),:hover,:a
--pico-text-decoration: none; --pico-text-decoration: none;
} }
.container { article :where(a:not([role="button"])) {
--pico-text-decoration: none;
}
body > :is(main, footer) {
max-width: 40em; max-width: 40em;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
}
article :where(a:not([role="button"])) { @media (width >= 1024px) {
--pico-text-decoration: none; margin-right: 0;
margin-left: 18em;
}
} }
/* /*
@ -115,10 +120,19 @@ article :where(a:not([role="button"])) {
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
font-family: var(--pico-font-family-sans-serif); font-family: var(--pico-font-family-sans-serif);
font-weight: bold; font-weight: bold;
@media (width >= 1024px) {
display: none;
}
img {
height: 2em;
}
} }
.mobile-header img { #menu-close {
height: 2em; float: right;
padding: 0 1.5em;
} }
#menu-close, #menu-close:hover, #menu-toggle { #menu-close, #menu-close:hover, #menu-toggle {
@ -126,98 +140,85 @@ article :where(a:not([role="button"])) {
background-color: inherit; background-color: inherit;
border: none; border: none;
text-decoration: none; text-decoration: none;
@media (width >= 1024px) {
display: none;
}
} }
body { body {
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
}
body > header { & > header {
width: 100vw; width: 100vw;
text-align: center; text-align: center;
height: 100vh; height: 100vh;
position: fixed; position: fixed;
left: -100vw; left: -100vw;
top: 0; top: 0;
background-color: var(--pico-background-color); background-color: var(--pico-background-color);
z-index: 100; z-index: 100;
transition: left 0.5s; transition: left 0.5s;
overflow: hidden auto; overflow: hidden auto;
}
body > header.active { @media (width >= 1024px) {
left: 0; position: sticky;
} top: 0;
left: 0;
width: 15em;
float: left;
}
body > header nav, body > header nav ul { .u-logo {
flex-direction: column; width: 5em;
} }
body > header .u-logo { .title {
width: 5em; 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 { .menu-primary & {
font-size: 1.5rem; font-weight: bold;
font-weight: bold; }
font-family: var(--pico-font-family-sans-serif); }
margin-top: 1em;
}
body > header nav { nav {
font-size: 1rem; font-size: 1rem;
font-family: var(--pico-font-family-sans-serif); font-family: var(--pico-font-family-sans-serif);
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
}
body > header nav li { ul {
padding: 0; flex-direction: column;
padding: calc( var(--pico-nav-element-spacing-vertical) / 4) }
calc( var(--pico-nav-element-spacing-horizontal) / 4);
}
body > header a { li {
color: var(--pico-color); padding: 0;
padding: 0; padding: calc( var(--pico-nav-element-spacing-vertical) / 4)
} calc( var(--pico-nav-element-spacing-horizontal) / 4);
}
}
}
body > header > a { & > footer{
float: right; p {
padding: 0 1.5em; font-size: 0.7em;
} text-align: center;
}
.menu-primary { }
font-weight: bold;
}
body > footer p {
font-size: 0.7em;
text-align: center;
} }
@media (width >= 1024px) { @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 { .metadata p {
display: inline; display: inline;
} }
@ -228,134 +229,130 @@ body > footer p {
* Content Styling * Content Styling
*/ */
.translations { main {
text-align: end; .translations {
margin-bottom: 0.3em; text-align: end;
} margin-bottom: 0.3em;
.translations a { a {
text-decoration: none; text-decoration: none;
} }
}
main > article { & > article {
text-align: justify; text-align: justify;
}
main > article > header { & > header {
margin-bottom: calc(2 * var(--pico-block-spacing-vertical)); margin-bottom: calc(2 * var(--pico-block-spacing-vertical));
}
ul.tags, ul.tags li { h1, p {
list-style-type: none; margin-bottom: calc(0.1 * var(--pico-typography-spacing-vertical));
display: inline; margin-top: 0.3em;
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;
}
article header .category a { .category a {
font-family: var(--pico-font-family-sans-serif); font-family: var(--pico-font-family-sans-serif);
font-weight: 700; font-weight: 700;
line-height: var(--pico-line-height); line-height: var(--pico-line-height);
color: var(--pico-muted-color); color: var(--pico-muted-color);
text-decoration: none; text-decoration: none;
font-size: 1rem; font-size: 1rem;
margin-bottom: 0.5em; 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 * Admonitions
@ -374,16 +371,20 @@ figure {
* Post lists * Post lists
*/ */
.h-feed article:not(:last-child) { .h-feed {
border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); article{
margin-bottom: 0; &:not(:last-child) {
} border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
margin-bottom: 0;
}
.h-feed article p { p {
margin-bottom: calc(0.2 * var(--pico-typography-spacing-vertical)); margin-bottom: calc(0.2 * var(--pico-typography-spacing-vertical));
} }
.h-feed article .p-summary { .p-summary {
font-size: 0.9em; font-size: 0.9em;
font-style: italic; font-style: italic;
}
}
} }

7
layouts/baseof.html
View file

@ -30,10 +30,12 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<header id="menu" class="h-card"> <header id="menu" class="h-card">
{{ partial "header.html" . }} {{ partial "header.html" . }}
</header> </header>
<main class="container">
<main>
{{- if .IsTranslated }} {{- if .IsTranslated }}
{{- range .Translations }} {{- range .Translations }}
<div class="translations"> <div class="translations">
@ -47,7 +49,8 @@
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</main> </main>
<footer class="container">
<footer>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
</footer> </footer>
</body> </body>

6
stylelint.config.js Normal file
View file

@ -0,0 +1,6 @@
/** @type {import('stylelint').Config} */
export default {
rules: {
"no-descending-specificity": false
}
};