Style blog using darkwiiplayer/css

css/post.css

@@ -1,18 +0,0 @@
-body {
-	--sidebar: minmax(16em, 1fr);
-	display: grid;
-	grid-template-columns: var(--sidebar) 40em var(--sidebar);
-	gap: 2em;
-}
-nav {
-	grid-column: 1;
-	position: sticky;
-	height: max-content;
-	top: 0;
-	max-height: max-content;
-}
-nav>* {
-}
-article {
-	grid-column: 2;
-}

css/reset.css

@@ -1,3 +0,0 @@
-* {
-	box-sizing: border-box;
-}

css/site.css

@@ -1,6 +0,0 @@
-@import url('reset.css');
-
-time.timestamp {
-	opacity: .6;
-	font-style: italic;
-}

pages/index.html.skooma.yue

@@ -3,14 +3,15 @@ slots, json = select 1, ...
 posts = require 'posts'
 
 post = =>
-	blogPost {
-		name: @head.slug
-		a @head.title, href: "/"..output..@head.uri
-	}
+	a href: "/"..output..@head.uri,
+		* flexColumn
+			* b @head.title
+			* time is: 'local-date', datetime: @head.date, @head.date
+			* @head.description
 
 slots.head title "Index"
-slots.head script "window.posts = JSON.parse(`#{json}`)"
-slots.head script type: 'module', src: "/#{output}/javascript/BlogPost.js"
 slots.head script type: 'module', src: "/#{output}/javascript/LocalDate.js"
 
-return ul [li post p for p in *posts]
+return main
+	* h1 "Blog Posts"
+	* nav ul [li post p for p in *posts]

templates/main.html.skooma.yue

@@ -2,15 +2,38 @@ import output from require 'params'
 import slotty from require 'skooma'
 import 'config'
 
+styles = [[
+	@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
+	@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+	@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
+
+	:root { container: style; }
+	:is(h1, h2, h3, h4, h5, h6) { font-family: "Raleway", sans-serif; }
+	:is(code, kbd, var, samp) { font-family: "Fira Code", monospace; }
+	.badge { font-family: "Open Sans", sans-serif }
+]]
+
 slots = slotty!
 
+css = =>
+	link rel: 'stylesheet', href: @
+
 content, data = select 1, ...
 html
 	lang: "english"
 	* head
-		* link rel: "stylesheet", href: "/#{output}/css/site.css"
 		* meta charset: "UTF-8"
+		* meta name: "viewport", content: "width=device-width"
+		* css 'https://darkwiiplayer.github.io/css/all.css'
+		* css 'https://darkwiiplayer.github.io/css/schemes/talia.css'
+		* style styles
 		* slots.head
 		* [ link rel: "modulepreload", href: module.url for module in *config.modules when module.preload ]
 	* body
-		* content slots, data
+		* slots.top
+		* header class: 'sticky'
+			* h1 "Talia's Blog"
+			* nav { class: 'right bar' }
+				* ul li a "Home", href: "/blog"
+		* main
+			* content slots, data

templates/post.html.skooma.yue

@@ -4,11 +4,25 @@ slots, post = select 1, ...
 url = (path) -> "/"..output..path
 
 slots.head title post.head.title
-slots.head link rel: "stylesheet", href: "/#{output}/css/post.css"
+
+positions = (input, character) ->
+	((last) => @find(character, last+1, true)), input, 1
+
+breadcrumb = (href) -> li a :href, href\match('[^/]+$')
+
+if src = post.head.cover_image
+	slots.top pageHero cover: 60
+		* img :src, style: 'opacity: .4'
+		* h1(post.head.title)
+else
+	slots.title h1(post.head.title)
 
 return (=>@)
-	* nav
-		* ul
-			* li a "Index", href: url "/"
-			* [li a post.head.title, href: url post.head.uri for post in *require("posts")]
-	* article { h1(post.head.title), post.body }
+	* article 
+		* slots.title
+		* nav { class: "breadcrumbs" }
+			* ul
+				* li a "Blog", href: url "/"
+				* [ breadcrumb post.head.uri\sub(1, number-1) for number in positions(post.head.uri, "/") ]
+				* li post.head.title, class: 'active'
+		* post.body