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

Compare commits

base: bcarlin:394d1556f756596080c57b18a7b2f9bf50f4f7f9
Branches Tags
bcarlin:main
bcarlin:drafts
...
compare: bcarlin:cce7779c5a7e2828059b77ce0a622f2eb5e13905
Branches Tags
bcarlin:drafts
bcarlin:main

4 commits
394d1556f7 ... cce7779c5a

Author SHA1 Message Date
Bruno Carlin
cce7779c5a
fix(archetypes): fixes the new post archetype 2025-07-06 17:37:22 +02:00
Bruno Carlin
02a58a1f94
fix(content): remove a trailing comma in tags 2025-07-06 17:36:37 +02:00
Bruno Carlin
142e825719
fix(theme): fix the menu apearence on mobiles 2025-07-06 14:26:56 +02:00
Bruno Carlin
2ca921f682
feat(theme): rewrite the CSS with nested selectors 2025-07-06 14:26:56 +02:00
5 changed files with 230 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

4
archetypes/default.md
View file

@ -1,9 +1,11 @@
--- ---
# vim: spell spelllang=en
title: '{{ replace .File.ContentBaseName "-" " " | title }}' title: '{{ replace .File.ContentBaseName "-" " " | title }}'
slug: '{{ .File.ContentBaseName }}' slug: '{{ .File.ContentBaseName }}'
date: '{{ .Date }}' date: '{{ .Date }}'
draft: true draft: true
categories: [] categories:
-
tags: tags:
- -
summary: | summary: |

425
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,89 @@ 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: 100dvw;
text-align: center; text-align: center;
height: 100vh; height: 100dvh;
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 { &.active {
left: 0; left: 0;
} }
body > header nav, body > header nav ul { @media (width >= 1024px) {
flex-direction: column; position: sticky;
} top: 0;
left: 0;
width: 15em;
float: left;
}
body > header .u-logo { .u-logo {
width: 5em; width: 5em;
} }
.title {
font-size: 1.5rem;
font-weight: bold;
font-family: var(--pico-font-family-sans-serif);
margin-top: 1em;
}
body > header .title { a {
font-size: 1.5rem; color: var(--pico-color);
font-weight: bold; padding: 0;
font-family: var(--pico-font-family-sans-serif);
margin-top: 1em;
}
body > header nav { .menu-primary & {
font-size: 1rem; font-weight: bold;
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 { nav {
padding: 0; font-size: 1rem;
padding: calc( var(--pico-nav-element-spacing-vertical) / 4) font-family: var(--pico-font-family-sans-serif);
calc( var(--pico-nav-element-spacing-horizontal) / 4); width: 100%;
} height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
body > header a { ul {
color: var(--pico-color); flex-direction: column;
padding: 0; }
}
body > header > a { li {
float: right; padding: 0;
padding: 0 1.5em; padding: calc( var(--pico-nav-element-spacing-vertical) / 4)
} calc( var(--pico-nav-element-spacing-horizontal) / 4);
}
}
}
.menu-primary { & > footer{
font-weight: bold; p {
} font-size: 0.7em;
text-align: center;
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 +233,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 +375,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;
}
}
} }

2
content/blog/007-prepare-for-the-next-internet-outage/index.en.md
View file

@ -5,7 +5,7 @@ date: '2025-06-14T04:05:48+02:00'
categories: categories:
- DevOps - DevOps
tags: tags:
- architecture, - architecture
- cloud - cloud
summary: > summary: >
A reflection on recent internet outages and my takeways to build more A reflection on recent internet outages and my takeways to build more

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
}
};