Compare commits

...

2 commits

Author SHA1 Message Date
bcfa3e37a5
DRAFTS
wip: current work
2025-07-05 04:08:11 +02:00
0b8e85342a
feat(theme): rewrite the CSS with nested selectors 2025-07-05 03:54:43 +02:00
7 changed files with 309 additions and 213 deletions

View file

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

View file

@ -0,0 +1,36 @@
---
title: 'Going Dark'
slug: 'going-dark'
date: '2025-07-01T00:10:19+02:00'
draft: true
categories:
- Tooling
tags:
- darkman
- vivaldi
- waybar
- wofi
summary: |
entrer le résumé
description: |
entrer la description
---
I usually live in the terminal for most things: edit text files (neovim),
read and write emails (aerc), chat on Mattermost (matterhorn), browse files
(vifm), and so on. I might write on that later. My terminal and everything in it
is themed with Solarized Dark. That will not change.
For the few GUI applications I use, the light theme is ery aggressive at night.
Here are some tips to automatically switch a few of them between light and dark
mode.
## Automate with darkman
## GTK Apps
## Vivaldi
## Add A Switcher To Waybar
## Switch Wofi Theme

View file

@ -0,0 +1,13 @@
---
title: 'Hugo Translating Taxonomy Terms'
slug: 'hugo-translating-taxonomy-terms'
date: '2025-07-02T22:35:43+02:00'
draft: true
categories: []
tags:
-
summary: |
entrer le résumé
description: |
entrer la description
---

View file

@ -0,0 +1,36 @@
---
title: 'I Use jj as my Main VCS'
slug: 'i-use-jj-as-my-main-vcs'
date: '2025-07-02T18:04:31+02:00'
draft: true
categories:
- Tooling
tags:
- jj
- git
summary: |
entrer le résumé
description: |
entrer la description
resources:
- src: jj-logo.svg
params:
legend: jj logo
---
I stumbled upon [jj] sometimes last year but I decided to give it a real go a
few month ago. It has already become my main VCS for all my code, even as a
replacement of git.
![JJ Logo](jj-logo.svg)
does things right:
- undo that works
- versioned working copy (restore a deleted file to a previous version)
- jj git fetch removes local branches when the remote is removed
- jj log shows what is useful by default without noise
- rebase of trees
- rebase of multiple branches
[jj]: https://github.com/jj-vcs/jj

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.8 KiB

View file

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

6
stylelint.config.js Normal file
View file

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