feat(css): center pages (#37)

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"
         );
     }
 

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

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 {

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

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

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

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/[email protected]/highlight.min.js"></script>
-<script src="https://unpkg.com/@highlightjs/[email protected]/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/[email protected]/highlight.min.js"></script>
+<script src="https://unpkg.com/@highlightjs/[email protected]/languages/nix.min.js"></script>
+<script>
+  hljs.highlightAll();
+</script>
 
 <script>
   const codeblocks = document.querySelectorAll('div.codeblock');