From d2c7ec794b270ad167be43cb8c0d74da3fca66ad Mon Sep 17 00:00:00 2001
From: heyarne <arne@schlueter.is>
Date: Fri, 30 Jul 2021 09:43:45 +0200
Subject: [PATCH] Allow different layouts for different pages

---
 assets/style.scss | 86 +++++++++++++++++++++++++++++++++++------------
 index.janet       |  6 ++--
 views.janet       | 31 +++++++++--------
 3 files changed, 84 insertions(+), 39 deletions(-)

diff --git a/assets/style.scss b/assets/style.scss
index e5cfe44..7e03444 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -1,4 +1,10 @@
 $font-path: 'ibm-plex';
+
+// the base size of the header svg is 500 * 500, strokes will need to be
+// adjusted for exact pixel sizes
+$logo-size: 208;
+$factor: 1 / ($logo-size / 500);
+
 @import 'ibm-plex/css/ibm-plex.scss';
 
 *, *:before, *:after {
@@ -19,25 +25,33 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
+  margin: 0;
 }
 
+h1 {
+  font-size: 32px;
+  padding: 0 0 24px;
+}
 
-// the base size of the header svg is 500 * 500, strokes will need to be
-// adjusted for exact pixel sizes
-$logo-size: 216;
-$factor: 1 / ($logo-size / 500);
+h2 {
+  font-size: 24px;
+  padding: 0 0 16px;
+}
+
+p {
+  margin: 0 0 16px;
+}
 
 .ten-print {
-  width: $logo-size;
-  height: $logo-size;
-}
+  width: $logo-size * 1px;
+  height: $logo-size * 1px;
 
-
-.ten-print path {
-  stroke: #ff005f;
-  fill: transparent;
-  stroke-width: 1.5px * $factor;
-  stroke-linecap: round;
+  path {
+    stroke: #ff005f;
+    fill: transparent;
+    stroke-width: 1.5px * $factor;
+    stroke-linecap: round;
+  }
 }
 
 main {
@@ -45,21 +59,49 @@ main {
   max-width: 960px;
   margin: 48px auto 48px 48px;
   grid-gap: 32px;
-  grid-auto-rows: 1fr;
-  grid-template-columns: repeat(16, 1fr);
+  // grid-auto-rows: 1fr;
+  // grid-template-columns: repeat(4, 1fr);
+  grid-template-areas:
+    "header header header header"
+    "nav content content content";
   grid-auto-flow: dense;
 }
 
-aside {
-  grid-column: span 4;
+header {
+  grid-area: header;
 }
 
-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+nav {
+  grid-area: nav;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 }
 
 article {
-  grid-column: span 12;
+  grid-area: content;
+
+  ul {
+    padding: 0 0 0 16px;
+    margin: 0 0 32px;
+  }
+}
+
+// special page styling
+
+.home { // == main
+  grid-template-areas:
+    "header header header header"
+    "nav nav nav nav";
+
+  nav {
+    ul {
+      list-style: inside;
+      padding: 0 0 0 16px;
+      margin: 0 0 32px;
+    }
+  }
 }
diff --git a/index.janet b/index.janet
index cc03817..761ef20 100644
--- a/index.janet
+++ b/index.janet
@@ -12,7 +12,7 @@
 # build config
 # ---
 
-(def base-path "/")
+(def base-url "/")
 (bagatto/set-output-dir! "site")
 
 # ---
@@ -42,7 +42,7 @@
     post))
 
 (defn absolute-url [path]
-  (string base-path path))
+  (string base-url path))
 
 (defn files-in [base]
   (fn []
@@ -70,7 +70,7 @@
 # ---
 
 (def data {:config {:attrs {:title "arnes.space"
-                            :base-path base-path
+                            :base-url base-url
                             :stylesheet (absolute-url "assets/style.css")}}
            :assets {:src (bagatto/* "assets/*")
                     :attrs bagatto/parse-base}
diff --git a/views.janet b/views.janet
index 580ed15..19e8bde 100644
--- a/views.janet
+++ b/views.janet
@@ -86,15 +86,15 @@
   You can call this with some content and have it generate an entire HTML
   structure for you.
   ```
-  [data nav body &opt raw?]
+  [page data nav body &opt raw?]
   (default raw? false)
   (as-html [(html-head data)
             [:body
-             [:main
-              [:aside
-               (ten-print body)
+             [:main {:class page}
+              [:header (ten-print body)]
+              [:nav
                [:h1 (get-in data [:config :title])]
-               [:nav nav]]
+               nav]
               [:article (if raw? (html/raw body) body)]]]]))
 
 #
@@ -105,23 +105,26 @@
   (string/format "%j" jdn))
 
 (defn home [data]
-  (base data
-    []
-    [[:h1 "Projects"]
+  (base "home"
+    data
+    [[:h2 "Projects"]
      [:ul
       [:li "Berliner Winter"]
       [:li "Vanilla Sky"]
       [:li "All My Friends"]
       [:li "Kosmopolit"]]
-     [:h1 "Recent Posts"]
+     [:h2 "Recent Posts"]
      [:ul
       (map (fn [post]
-             [:li [:a {:href (utils/slugify-content data post)} (post "title")]]) (data :posts))]]))
+             [:li [:a {:href (utils/slugify-content data post)} (post "title")]]) (data :posts))]]
+    []))
 
 (defn post [data item]
-  (base data
+  (base "post"
+    data
     [:ul
-     [:li [:a {:href "#"}] "Projects"]
-     [:li [:a {:href "#"}] "Posts"]
-     [:li [:a {:href "#"}] "About"]]
+     [:li [:a {:href (get-in data [:config :base-url])} "Home"]]
+     [:li [:a {:href "#"} "Projects"]]
+     [:li [:a {:href "#"} "Posts"]]
+     [:li [:a {:href "#"} "About"]]]
     (bagatto/mmarkdown->html (item :contents)) true))