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');
-- 
2.51.2