From 7d867a68a026094e842529a41dbcc812181b0da9 Mon Sep 17 00:00:00 2001 From: Alexis Fourmaux Date: Sat, 17 May 2025 01:56:34 +0200 Subject: [PATCH 01/10] fix: code when adding linenos --- content/articles/example.md | 2 +- sass/parts/_code.scss | 37 ++++++++++++++++++++++++++++++++++++- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/content/articles/example.md b/content/articles/example.md index 0dcfda6..ed93666 100644 --- a/content/articles/example.md +++ b/content/articles/example.md @@ -28,7 +28,7 @@ Oechalidum[^second] limus posse. [^second]: Footnote text. -```c# +```c#,linenos,name=example.cs using System.IO.Compression; #pragma warning disable 414, 3021 diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss index 0249570..a965df2 100644 --- a/sass/parts/_code.scss +++ b/sass/parts/_code.scss @@ -1,4 +1,5 @@ pre { + position: relative; font-family: var(--mono-font); padding: 1.25rem; border-radius: var(--standard-border-radius); @@ -6,11 +7,45 @@ pre { border-color: var(--overlay0); border-width: 0.15rem; line-height: initial; - overflow-x: scroll; + overflow: hidden; + overflow-x: auto; &>code { background-color: initial; border: initial; + padding: 0; + } + + &[data-linenos] { + padding: 1.25rem 0; + } + + table { + width: 100%; + border-collapse: collapse; + margin: 0; + + th, + td, + tr { + border: none; + padding: 0 + } + + td:nth-of-type(1) { + text-align: center; + vertical-align: top; + user-select: none; + color: var(--overlay1); + } + + tr:nth-child(even) td { + background-color: inherit; + } + } + + mark { + display: block; } } From 113163815830f6ed32b87e4400f6e25b9e81210d Mon Sep 17 00:00:00 2001 From: Alexis Fourmaux Date: Tue, 3 Jun 2025 00:16:02 +0200 Subject: [PATCH 02/10] feat: add articles section --- content/articles/example.md | 2 ++ sass/parts/_anchor.scss | 4 ++-- sass/parts/_articles.scss | 34 +++++++++++++++++++++++++++++ sass/styles.scss | 14 ++++++++++-- templates/anchor-link.html | 1 - templates/blog.html | 20 +++++++++++------ templates/navbar.html | 6 ++--- templates/partials/anchor-link.html | 1 + templates/test.html | 9 -------- 9 files changed, 67 insertions(+), 24 deletions(-) create mode 100644 sass/parts/_articles.scss delete mode 100644 templates/anchor-link.html create mode 100644 templates/partials/anchor-link.html delete mode 100644 templates/test.html diff --git a/content/articles/example.md b/content/articles/example.md index ed93666..925a7d3 100644 --- a/content/articles/example.md +++ b/content/articles/example.md @@ -6,6 +6,8 @@ updated = 2025-05-13 authors = ["Ungol"] +++ +test-image + Cet article est un exemple utilisant du lorem ipsum en markdown pour développer et styler les éléments sur une base qui ressemble à un vrai texte. Il contient les éléments d'un article assez complet. diff --git a/sass/parts/_anchor.scss b/sass/parts/_anchor.scss index 39c607d..ca87477 100644 --- a/sass/parts/_anchor.scss +++ b/sass/parts/_anchor.scss @@ -8,14 +8,14 @@ h3, h4, h5, h6 { - &>a { + &>a.zola-anchor { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } &:hover { - &>a { + &>a.zola-anchor { visibility: visible; opacity: 1; } diff --git a/sass/parts/_articles.scss b/sass/parts/_articles.scss new file mode 100644 index 0000000..8bc8553 --- /dev/null +++ b/sass/parts/_articles.scss @@ -0,0 +1,34 @@ +ul.articles { + list-style-type: none; + padding-left: 0; + + li { + margin-top: 3rem; + margin-bottom: 3rem; + } + + .title { + margin: 0; + + &>a { + color: var(--text); + text-decoration: none; + + &:visited { + color: var(--lavender); + } + + &:hover { + color: var(--sky); + } + } + } + + .date { + color: var(--subtext0); + } + + a.read-more { + color: var(--overlay1); + } +} \ No newline at end of file diff --git a/sass/styles.scss b/sass/styles.scss index 9a81197..f42cd56 100644 --- a/sass/styles.scss +++ b/sass/styles.scss @@ -2,6 +2,7 @@ @use 'theme'; @use 'shortcodes/callout'; @use 'parts/anchor'; +@use 'parts/articles'; @use 'parts/code'; @use 'parts/footnote'; @use 'parts/misc'; @@ -29,14 +30,14 @@ body { margin: 0; } -article { +main { max-width: calc(var(--main-width) - 12rem); margin-left: auto; margin-right: auto; } @media only screen and (max-width: $smartphone) { - article { + main { max-width: var(--main-width); } } @@ -46,8 +47,13 @@ h1 { font-weight: medium; margin-top: 2rem; margin-bottom: 1rem; + + &.section-title { + font-size: 3rem; + } } + h2 { font-size: 1.5rem; margin-bottom: 1rem; @@ -90,6 +96,10 @@ h6 { h1 { font-size: 1.5rem; margin-top: 1.3rem; + + &.section-title { + font-size: 2.2rem; + } } h2 { diff --git a/templates/anchor-link.html b/templates/anchor-link.html deleted file mode 100644 index b67c464..0000000 --- a/templates/anchor-link.html +++ /dev/null @@ -1 +0,0 @@ -# \ No newline at end of file diff --git a/templates/blog.html b/templates/blog.html index 8ecabe0..f09a58e 100644 --- a/templates/blog.html +++ b/templates/blog.html @@ -1,17 +1,23 @@ {% extends "base.html" %} {% block content %} -

+

{{ section.title }}

-