fix footer and page

config.toml

@@ -4,9 +4,9 @@ theme = "devroom-2024"
 languagecode = "en"
 defaultcontentlanguage = "en"
 
-copyright = "Copyright © 1999-2023 Ariejan de Vroom &lt;<a href='/contact/'>ariejan@devroom.io</a>&gt;"
+copyright = "Copyright © 2024 Ariejan de Vroom"
 
-paginate = 9999
+paginate = 99999
 canonifyurls = true
 
 # pygmentsstyle = "solarized-dark256"

content/privacy.md

@@ -0,0 +1,17 @@
++++
+type = "page"
+title = "Privacy Statement"
++++
+
+This website (**devroom.io**) is privacy friendly and fully GDPR compliant. The site itself is static HTML and
+you are not required to enter any personal information to access the content.
+
+I do use a self-hosted instance of [Fathom Analytics](https://usefathom.com/) to track which pages are most
+popular. Fathom provides the following on privacy:
+
+> We want to process as little personal information as possible when you use our website. That's why we've chosen Fathom Analytics for our website analytics, which doesn't use cookies and complies with the GDPR, ePrivacy (including PECR), COPPA and CCPA. Using this privacy-friendly website analytics software, your IP address is only briefly processed, and we (running this website) have no way of identifying you. As per the CCPA, your personal information is de-identified. You can read more about this on Fathom Analytics' website.
+
+> The purpose of us using this software is to understand our website traffic in the most privacy-friendly way possible so that we can continually improve our website and business. The lawful basis as per the GDPR is "Article 6(1)(f); where our legitimate interests are to improve our website and business continually." As per the explanation, no personal data is stored over time.
+
+I'm not serving any ads on this website, so it's not making me any money. If you would like to show
+your appreciation, please consider making a small donation through [Buy me a Coffee](https://www.buymeacoffee.com/ariejan).

themes/devroom-2024/assets/scss/devroom.scss

@@ -15,10 +15,11 @@ $backdrop: $background;
 $text: rgb(226, 226, 226);
 $subtext: #868686;
 $links: $accent;
-$footer: $text;
+$footer: $subtext;
 $meta: $text;
 $header: $text;
 $highlight: $links;
+$blockquote_border: $accent;
 $code_background: $background;
 $code_border_color: $background;
 $code: #ff9327;
@@ -123,7 +124,7 @@ strong {
 }
 
 blockquote {
-    border-left: 5px solid $code_border_color;
+    border-left: 5px solid $blockquote_border;
     padding-left: 1rem;
 }
 
@@ -197,13 +198,26 @@ header {
 
 footer {
     color: $footer;
-    border-top: 1px solid $footer;
-    margin-top: 1.5rem;
+    margin-top: 4rem;
+    display: flex;
+    align-items: center;
 
-    em {
-        background-color: $background;
-        color: $text;
+    .copyright {
+        flex: 1;
     }
+
+    .buymeacoffee {
+        flex: 1;
+
+        img {
+            background-color: $accent;
+            padding: 4px 8px;
+            max-height: 32px;
+            height: auto;
+            width: auto;
+        }
+    }
+
 }
 
 small {

themes/devroom-2024/layouts/partials/footer.html

@@ -1,11 +1,10 @@
 <footer>
-    <p>
-        {{ .Site.Copyright | safeHTML }}
-        <br />
-        This site is free of ads. Statistics are tracked respecting your privacy with <a href="https://usefathom.com/">Fathom</a>.
-        <br />
-        Was this post helpful to you? Why not <a class="buymeacoffee" target="_blank" href="https://www.buymeacoffee.com/ariejan">☕ Buy me a coffee</a>
-    </p>
+    <div class="copyright">{{ .Site.Copyright | safeHTML }}</div>
+    <div class="buymeacoffee">
+        <a href="https://www.buymeacoffee.com/ariejan">
+            <img src="/bmc-full-logo-no-background.png" alt="Buy me a coffee" />
+        </a>
+    </div>
 </footer>
 
 <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->

themes/devroom-2024/layouts/partials/page.html

@@ -1,4 +1,11 @@
-<article>
-    <h1>{{ .Title }}</h1>
-    {{ .Content }}
-</article>  
+<article class="full">
+    <div class="article-head">    
+        <h1>{{ .Title }}</h1>
+    </div>
+
+    <article class="content">
+        <div class="narrow">
+            {{ .Content }}
+        </div>
+    </article>
+</article>