From fbfcb298b69595f487f144481b175229efcc4f6d Mon Sep 17 00:00:00 2001 From: robin <67917529+comfysage@users.noreply.github.com> Date: Tue, 21 Jan 2025 01:15:37 +0100 Subject: [PATCH] feat(css): center pages (#37) --- src/data/blog.rs | 4 ++-- src/data/donos.rs | 2 +- styles/layouts/base.scss | 11 +++++++++++ styles/main.scss | 1 + styles/partials/anchors.scss | 19 +++++++++++++++++++ styles/text.scss | 3 ++- templates/pages/post.tera | 16 ++++++++-------- 7 files changed, 44 insertions(+), 12 deletions(-) create mode 100644 styles/partials/anchors.scss diff --git a/src/data/blog.rs b/src/data/blog.rs index 9a9d7f1..4257007 100644 --- a/src/data/blog.rs +++ b/src/data/blog.rs @@ -131,7 +131,7 @@ impl Post { let mut opts = ComrakOptions::default(); opts.extension.strikethrough = true; opts.extension.table = true; - opts.extension.header_ids = Some("#".to_string()); + opts.extension.header_ids = Some(String::new()); opts.extension.underline = true; opts.extension.alerts = true; @@ -306,7 +306,7 @@ mod tests { assert_eq!(post.tags, vec!["test", "post"]); assert_eq!( post.content, - "<h1><a href=\"#hello-world\" aria-hidden=\"true\" class=\"anchor\" id=\"#hello-world\"></a>Hello, World!</h1>\n<p>This is a test post.</p>\n" + "<h1><a href=\"#hello-world\" aria-hidden=\"true\" class=\"anchor\" id=\"hello-world\"></a>Hello, World!</h1>\n<p>This is a test post.</p>\n" ); } diff --git a/src/data/donos.rs b/src/data/donos.rs index 533a6bd..1a85cb9 100644 --- a/src/data/donos.rs +++ b/src/data/donos.rs @@ -12,7 +12,7 @@ pub struct Donor { } pub fn get() -> io::Result<Vec<Donor>> { - let file_str = std::env::var("DONOS_FILE").unwrap_or_else(|_| "donors.json".to_string()); + let file_str = std::env::var("DONOS_FILE").unwrap_or_else(|_| "donos.json".to_string()); let file = File::open(file_str)?; let reader = BufReader::new(file); diff --git a/styles/layouts/base.scss b/styles/layouts/base.scss index 547c6af..440801e 100644 --- a/styles/layouts/base.scss +++ b/styles/layouts/base.scss @@ -22,6 +22,17 @@ body { .main-page { flex: 1; container: main-page / inline-size; + + width: 80vw; + margin: auto; + + margin-top: 2rem; +} + +@container main-page (width < 768px) { + .main-page { + width: 100vw; + } } a { diff --git a/styles/main.scss b/styles/main.scss index 2363380..e7ef61e 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -11,6 +11,7 @@ // reusable styles @use 'partials/alerts.scss'; +@use 'partials/anchors.scss'; @use 'partials/donations.scss'; @use 'partials/blog-preview.scss'; @use 'partials/project.scss'; diff --git a/styles/partials/anchors.scss b/styles/partials/anchors.scss new file mode 100644 index 0000000..764a2a8 --- /dev/null +++ b/styles/partials/anchors.scss @@ -0,0 +1,19 @@ +html { + scroll-behavior: smooth; +} + +.anchor { + position: relative; + + &::before { + content: "#"; + position: absolute; + color: var(--fg); + display: inline-block; + vertical-align: middle; + width: 2rem; + height: 2rem; + left: -2rem; + top: 3px; + } +} diff --git a/styles/text.scss b/styles/text.scss index c8e7645..dafff2d 100644 --- a/styles/text.scss +++ b/styles/text.scss @@ -39,13 +39,14 @@ border: var(--border, var(--default-border)); line-height: 1.25rem; text-wrap: wrap; - } + // inline code p > code { background: var(--bg-lighter); color: var(--fg-lighter); padding-inline: .3rem; + padding-block: .15rem; } } diff --git a/templates/pages/post.tera b/templates/pages/post.tera index 7091f70..a80cdf2 100644 --- a/templates/pages/post.tera +++ b/templates/pages/post.tera @@ -3,14 +3,6 @@ {% block title %}{% set title = post.title %}{% endblock %} {% block description %}{% set description = post.description %}{% endblock %} -{% block additionalfoot %} -<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script> -<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/nix.min.js"></script> -<script> - hljs.highlightAll(); -</script> -{% endblock %} - {% block main %} <div class="reusable-header post-header"> <div class="left"> @@ -97,6 +89,14 @@ </section> <div id="comments"></div> +{% endblock %} + +{% block additionalfoot %} +<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script> +<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/languages/nix.min.js"></script> +<script> + hljs.highlightAll(); +</script> <script> const codeblocks = document.querySelectorAll('div.codeblock');