Allow different layouts for different pages

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
+h2 {
-// adjusted for exact pixel sizes
+  font-size: 24px;
-$logo-size: 216;
+  padding: 0 0 16px;
-$factor: 1 / ($logo-size / 500);
+}
+
+p {
+  margin: 0 0 16px;
+}
 
 .ten-print {
-  width: $logo-size;
+  width: $logo-size * 1px;
-  height: $logo-size;
+  height: $logo-size * 1px;
-}
 
-
+  path {
-.ten-print path {
+    stroke: #ff005f;
-  stroke: #ff005f;
+    fill: transparent;
-  fill: transparent;
+    stroke-width: 1.5px * $factor;
-  stroke-width: 1.5px * $factor;
+    stroke-linecap: round;
-  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-auto-rows: 1fr;
-  grid-template-columns: repeat(16, 1fr);
+  // grid-template-columns: repeat(4, 1fr);
+  grid-template-areas:
+    "header header header header"
+    "nav content content content";
   grid-auto-flow: dense;
 }
 
-aside {
+header {
-  grid-column: span 4;
+  grid-area: header;
 }
 
-nav ul {
+nav {
-  list-style: none;
+  grid-area: nav;
-  margin: 0;
+
-  padding: 0;
+  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;
+    }
+  }
 }

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}

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
+             [:main {:class page}
-              [:aside
+              [:header (ten-print body)]
-               (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
+  (base "home"
-    []
+    data
-    [[:h1 "Projects"]
+    [[: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 (get-in data [:config :base-url])} "Home"]]
-     [:li [:a {:href "#"}] "Posts"]
+     [:li [:a {:href "#"} "Projects"]]
-     [:li [:a {:href "#"}] "About"]]
+     [:li [:a {:href "#"} "Posts"]]
+     [:li [:a {:href "#"} "About"]]]
     (bagatto/mmarkdown->html (item :contents)) true))