diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..2970109 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,3 @@ ++++ +title = "Accueil" ++++ diff --git a/content/a-propos.md b/content/a-propos.md new file mode 100644 index 0000000..6d61c69 --- /dev/null +++ b/content/a-propos.md @@ -0,0 +1,6 @@ ++++ +title = "À propos" +template = "about.html" ++++ + +A propos de ce site \ No newline at end of file diff --git a/content/articles/example.md b/content/articles/example.md index 0dcfda6..6863611 100644 --- a/content/articles/example.md +++ b/content/articles/example.md @@ -4,8 +4,11 @@ description = "A quoi ça ressemble un article ?" date = 2025-03-27 updated = 2025-05-13 authors = ["Ungol"] +draft = true +++ +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. @@ -28,7 +31,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/_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-index.scss b/sass/parts/_articles-index.scss new file mode 100644 index 0000000..ee80f4d --- /dev/null +++ b/sass/parts/_articles-index.scss @@ -0,0 +1,37 @@ +ul.articles-index { + list-style-type: none; + padding-left: 0; + + li { + margin-top: 1rem; + margin-bottom: 1rem; + } + + .title { + margin: 0; + + &>a { + color: var(--text); + text-decoration: none; + font-weight: bold; + + &:visited { + color: var(--lavender); + } + + &:hover { + color: var(--sky); + } + } + + &::before { + content: "-"; + margin-left: .5rem; + margin-right: .5rem; + } + } + + .date { + color: var(--subtext0); + } +} \ No newline at end of file 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/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; } } diff --git a/sass/parts/_index.scss b/sass/parts/_index.scss new file mode 100644 index 0000000..1ca5b17 --- /dev/null +++ b/sass/parts/_index.scss @@ -0,0 +1,9 @@ +section.last-articles { + margin-top: 4rem; + + h1 { + border-bottom-width: .1rem; + border-bottom-style: solid; + border-bottom-color: var(--surface0); + } +} \ No newline at end of file diff --git a/sass/parts/_navbar.scss b/sass/parts/_navbar.scss index 2d9213d..4eadd7f 100644 --- a/sass/parts/_navbar.scss +++ b/sass/parts/_navbar.scss @@ -27,6 +27,16 @@ nav { font-weight: 100; text-transform: uppercase; @include link(var(--text), var(--text)); + + picture { + img { + max-height: 5rem; + display: inline; + vertical-align: middle; + margin-top: .5rem; + margin-bottom: .5rem; + } + } } .nav-bar { diff --git a/sass/shortcodes/_callout.scss b/sass/shortcodes/_callout.scss index f50eb75..d18a3b9 100644 --- a/sass/shortcodes/_callout.scss +++ b/sass/shortcodes/_callout.scss @@ -67,7 +67,7 @@ @include callout_customization("success", "--green", ""); @include callout_customization("warning", "--yellow", ""); @include callout_customization("danger", "--red", "󰈸"); - @include callout-customization("error", "--red", ""); + @include callout_customization("error", "--red", ""); @include callout_customization("tip", "--teal", "󰌵"); @include callout_customization("note", "--lavender", ""); @include callout_customization("question", "--sky", ""); diff --git a/sass/styles.scss b/sass/styles.scss index 9a81197..65769f6 100644 --- a/sass/styles.scss +++ b/sass/styles.scss @@ -2,6 +2,9 @@ @use 'theme'; @use 'shortcodes/callout'; @use 'parts/anchor'; +@use 'parts/articles-index'; +@use 'parts/articles'; +@use 'parts/index'; @use 'parts/code'; @use 'parts/footnote'; @use 'parts/misc'; @@ -29,14 +32,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 +49,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 +98,10 @@ h6 { h1 { font-size: 1.5rem; margin-top: 1.3rem; + + &.section-title { + font-size: 2.2rem; + } } h2 { diff --git a/static/logos/banniere-dark.svg b/static/logos/banniere-dark.svg new file mode 100644 index 0000000..aa05070 --- /dev/null +++ b/static/logos/banniere-dark.svg @@ -0,0 +1,1723 @@ + + + +ungol diff --git a/static/logos/banniere-light.svg b/static/logos/banniere-light.svg new file mode 100644 index 0000000..59f2163 --- /dev/null +++ b/static/logos/banniere-light.svg @@ -0,0 +1,1723 @@ + + + +ungol diff --git a/templates/about.html b/templates/about.html new file mode 100644 index 0000000..c9ef304 --- /dev/null +++ b/templates/about.html @@ -0,0 +1,12 @@ +{% extends "base.html" %} + +{% block content %} +

+ {{ page.title }} +

+
+
+ {{ page.content | safe }} +
+
+{% endblock content %} \ No newline at end of file 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..4030285 100644 --- a/templates/blog.html +++ b/templates/blog.html @@ -1,18 +1,8 @@ {% extends "base.html" %} {% block content %} -

+

{{ section.title }}

- +{%- include "partials/articles.html" -%} {% endblock content %} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 5b14ef8..92c8632 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,8 +1,12 @@ {% extends "base.html" %} {% block content %} -

- This is my blog made with Zola. -

-

Posts.

+
+{{ section.content | safe }} +
+
+

Derniers articles

+{%- set section = get_section(path="articles/_index.md") -%} +{%- include "partials/articles-index.html" -%} +
{% endblock content %} \ No newline at end of file diff --git a/templates/navbar.html b/templates/navbar.html index a960f71..2d3a088 100644 --- a/templates/navbar.html +++ b/templates/navbar.html @@ -1,29 +1,20 @@