WIP add tags and lists

assets/scss/base/list.scss

@@ -0,0 +1,30 @@
+.list {
+    .container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
+        gap: 1em;
+        align-items: start;
+    }
+    .list-item {
+        color: inherit;
+        text-decoration: none;
+        transition: color 0.2s ease-in-out;
+        &__image {
+            width: 100%;
+            height: auto;
+        }
+        &__title {
+            font-size: 1.5em;
+            margin: 0.5em 0;
+        }
+        &__summary {
+            margin-bottom: 1.5em;
+        }
+        &__date {
+
+        }
+        &:hover {
+            color: #0060ff;
+        }
+    }
+}

assets/scss/base/page.scss

@@ -0,0 +1,43 @@
+.page-title {
+	font-size: 1.5em;
+	@media (min-width: 600px) {font-size: 2em;}
+}
+
+.page {
+	font-size: 1em;
+	@media (min-width: 600px) {font-size: 1.25em;}
+	max-width: 960px;
+	margin: 0 auto;
+	@media (min-width: 960px) {
+		display: grid;
+		grid-template-columns: minmax(45ch,65ch) 1fr;
+		grid-template-rows: auto auto;
+		grid-template-areas:
+			"header ."
+			"content meta";
+	}
+	.section {
+		padding: 1em 0;
+		grid-area: content;
+
+	}
+	.page-header {
+		padding: 2em 0;
+		grid-area: header;
+	}
+	.meta {
+		grid-area: meta;
+	}
+}
+
+.tags {
+	display: flex;
+	flex-flow: row wrap;
+	gap: 0.25em;
+	li {
+		list-style: disc;
+		border-radius: 4px;
+		margin-left: 1em;
+		a {color: inherit;}
+	}
+}

assets/scss/base/typography.scss

@@ -2,3 +2,6 @@ h1,h2,h3,h4,h5,h6 {line-height: 1.2}
 p {
     line-height: 1.4
 }
+
+
+#projects, .page-title, .site-nav {text-transform: lowercase;}

assets/scss/index/cards.scss

@@ -1,7 +1,7 @@
 .cards {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(15em,1fr));
-	gap: 1em;
+	gap: 2em;
 }
 .card {
 	background: white;

assets/scss/main.scss

@@ -1,6 +1,8 @@
 @import "base/reset.scss";
 @import "base/sections.scss";
 @import "base/typography.scss";
+@import "base/page.scss";
+@import "base/list.scss";
 
 @import "index/hero.scss";
 @import "index/cards.scss";

assets/scss/partials/site-header.scss

@@ -1,8 +1,49 @@
 .site-header {
 	a {text-decoration: none; color: inherit;}
-	.container {}
+	.container {
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: space-between;
+		padding: 1em;
+	}
 }
 
-.site-masthead {display: flex; gap: 1em; align-items: center;}
+.site-masthead {display: flex; align-items: center;}
-.site-icon {width: 44px; height: 44px; border-radius: 100em;}
+.site-icon {width: 44px; height: 44px; border-radius: 100em; margin-right: 1em;}
 .site-title {}
+
+body {margin-bottom: 64px; min-height: calc(100vh - 64px)}
+
+.site-nav {
+	flex-grow: 1;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100vw;
+	background: #212121;
+	color: white;
+	z-index: 2;
+	ul {
+		height: 64px;
+		max-width: 960px;
+		margin: 0 auto;
+		display: flex;
+		justify-content: space-around;
+		li {
+			flex-grow: 1;
+			border-bottom: 4px solid #212121;
+			&.active {
+				font-weight: 700;
+				border-bottom: 4px solid #0060ff;
+			}
+			a {
+				display: flex;
+				flex-flow: column;
+				align-items: center;
+				justify-content: center;
+				height: 100%;
+				span {padding: 0.25em;}
+			}
+		}
+	}
+}

config.toml

@@ -1,9 +1,12 @@
 baseURL = "https://abdullahtarawneh.com"
 languageCode = "en-us"
-title = "abdullah tarawneh"
+title = "Abdullah Tarawneh"
 
 [markup.goldmark.renderer]
-unsafe= true
+unsafe = true
+
+[taxonomies]
+tag = "tags"
 
 [menu]
 
@@ -22,9 +25,9 @@ url = "/blog/"
 weight = 20
 
 [[menu.main]]
-identifier = "contact"
+identifier = "casestudies"
 pre = "<i class='fa fa-address-card' aria-hidden='true'></i>"
-name = "Contact"
+name = "Case Studies"
-url = "/contact/"
+url = "/case-studies/"
 weight = 30
 

content/blog/_index.md

@@ -0,0 +1,3 @@
+---
+title: "Blog"
+---

content/case-studies/_index.md

@@ -0,0 +1,3 @@
+---
+title: "Case studies"
+---

content/case-studies/mastodon/index.md

@@ -0,0 +1,10 @@
+---
+title: "Mastodon documentation revamp"
+summary: "Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it."
+date: "2020-01-04"
+tags: ["mastodon", "documentation", "information architecture", "rest api"]
+cover: "cover.jpg"
+---
+
+Eugen Rochko, Mastodon project lead:
+>bless you for being here to work on the docs btw. it's a big relief.

content/contact/_index.md

@@ -1,4 +0,0 @@
----
-title: "Contact"
----
-

content/experience/pixelfed/index.md

@@ -1,2 +0,0 @@
----
----

layouts/_default/list.html

@@ -1,3 +1,6 @@
+{{ define "title" }}
+{{.Title}} | {{ .Site.Title }}
+{{ end }}
 {{ define "main" }}
 <main>
 	<header class="section page-header">
@@ -9,7 +12,9 @@
 		<div class="container">
 			{{ range .Pages }}
 				<a class="list-item" href="{{ .Permalink }}">
+				<img class="list-item__image" src="{{.Permalink}}cover.jpg">
 				<h2 class="list-item__title">{{ .Title }}</h2>
+				<p class="list-item__summary">{{.Summary}}</p>
 				<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
 				</a>
 			{{ end }}

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "title" }}
-{{ .Title }} – {{ .Site.Title }}
+{{ .Title }} | {{ .Site.Title }}
 {{ end }}
 {{ define "main" }}
 <main>
@@ -9,9 +9,23 @@
 				<h1 class="page-title">{{ .Title }}</h1>
 			</div>
 		</header>
+		<aside class="meta section">
+			<div class="container">
+				<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
+				<p class="wordcount"> {{.WordCount}} words</p>
+				{{ with .Params.tags }}
+				<p>Keywords:</p>
+				<ul class="tags">
+					{{ range . }}
+					<li><a href='{{"tags/" | absURL }}{{. | urlize}}'>{{.}}</a></li>
+					{{ end }}
+				</ul>
+				{{ end }}
+				{{ .TableOfContents }}
+			</div>
+		</aside>
 		<section class="section">
 			<div class="container">
-				{{ .TableOfContents }}
 				{{ .Content }}
 			</div>
 		</section>

layouts/partials/site-footer.html

@@ -2,11 +2,11 @@
 	<hr>
 	<div class="container">
 		<dl style="max-width: max-content; margin: 0 auto;">
-			<dt>Email</dt>
+			<dt>email</dt>
 			<dd>a@trwnh.com</dd>
-			<dt>Jabber</dt>
+			<dt>jabber</dt>
 			<dd>a@trwnh.com</dd>
-			<dt>Fediverse</dt>
+			<dt>fediverse</dt>
 			<dd><a href="https://mastodon.social/@trwnh" rel="me">mastodon.social/@trwnh</a></dd>
 		</dl>
 	</div>

layouts/partials/site-header.html

@@ -4,7 +4,6 @@
 			<img class="site-icon" src="/images/avatar.png">
 			<h1 class="site-title">abdullah tarawneh, freelance creative and consultant.</h1>
 		</a>
-		<!--
 		<nav class="site-nav">
 			<ul>
 				{{- $currentPage := . -}}
@@ -20,6 +19,5 @@
 		  </ul>		  
 			{{ partial "i18nlist.html" . }}
 		</nav>
-		-->
 	</div>
 </header>

layouts/taxonomy/tag.html

@@ -0,0 +1,15 @@
+{{ define "main" }}
+<main>
+    <section class="section">
+        <div class="container">
+            <ul>
+                {{ range .Data.Pages }}
+                <li>
+                    <a href="{{.RelPermalink}}">{{ .Title }}</a>
+                </li>
+                {{ end }}
+            </ul>
+        </div>
+    </section>
+</main>
+{{ end }}

resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content

@@ -1 +1 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;scroll-behavior:smooth}body{display:flex;flex-flow:column;min-height:100vh;position:relative}main{flex-grow:1}.section{padding:2em 0}@media(min-width:600px){.section{padding:3em 0}}@media(min-width:62em){.section{padding:4em 0}}.container{width:100%;max-width:960px;margin:0 auto;padding:0 1em}.section-heading{font-size:1.2em;font-weight:400;line-height:1.2;text-align:center;max-width:18ch;margin:0 auto;margin-bottom:4em;padding-bottom:1em;border-bottom:2px solid rgba(0,0,0,.25)}h1,h2,h3,h4,h5,h6{line-height:1.2}p{line-height:1.4}.hero .container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1em}.hero img{width:100%;grid-row:1/3}.headline{font-size:clamp(1.4em,7vw,3em);max-width:11ch;line-height:1.2;align-self:end}.button{background:#0060ff;color:#fff;width:max-content;font-size:clamp(0.75em,2vw,1em);padding:.75em;display:flex;justify-content:center;text-decoration:none;border-radius:100em;font-weight:700}.cta{grid-column:1;grid-row:2;align-self:start}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:1em}.card{background:#fff}.card img{width:100%;height:auto}#process .card img{height:200px}.card h3{margin:1em 0;font-weight:700}.card p{margin-bottom:1em}.testimonials{display:flex;flex-flow:row wrap;gap:1em;justify-content:center}.testimonial{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;grid-gap:1em;margin-bottom:1em;flex-basis:18em}.avatar{margin-left:1em;width:2em;height:2em;border-radius:1em;background:#212121}.name{align-self:center}.bubble{background-color:#212121;color:#fff;padding:.5em;border-radius:.5em;position:relative;grid-column:span 2;height:80px;display:flex;justify-content:center;align-items:center;text-align:center}.bubble:after{content:'';position:absolute;top:0;left:2em;width:0;height:0;border:.5em solid transparent;border-bottom-color:#212121;border-top:0;margin-left:-.5em;margin-top:-.5em}.site-header a{text-decoration:none;color:inherit}.site-masthead{display:flex;gap:1em;align-items:center}.site-icon{width:44px;height:44px;border-radius:100em}.site-footer{background:#333;color:#fff}.site-footer hr{display:none}.site-footer .container{padding:2em 1em}.site-footer dt{font-weight:700}.site-footer dd{margin-bottom:.5em}.site-footer a{color:inherit}
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;scroll-behavior:smooth}body{display:flex;flex-flow:column;min-height:100vh;position:relative}main{flex-grow:1}.section{padding:2em 0}@media(min-width:600px){.section{padding:3em 0}}@media(min-width:62em){.section{padding:4em 0}}.container{width:100%;max-width:960px;margin:0 auto;padding:0 1em}.section-heading{font-size:1.2em;font-weight:400;line-height:1.2;text-align:center;max-width:18ch;margin:0 auto;margin-bottom:4em;padding-bottom:1em;border-bottom:2px solid rgba(0,0,0,.25)}h1,h2,h3,h4,h5,h6{line-height:1.2}p{line-height:1.4}#projects,.page-title,.site-nav{text-transform:lowercase}.page-title{font-size:1.5em}@media(min-width:600px){.page-title{font-size:2em}}.page{font-size:1em;max-width:960px;margin:0 auto}@media(min-width:600px){.page{font-size:1.25em}}@media(min-width:960px){.page{display:grid;grid-template-columns:minmax(45ch,65ch)1fr;grid-template-rows:auto auto;grid-template-areas:"header ." "content meta"}}.page .section{padding:1em 0;grid-area:content}.page .page-header{padding:2em 0;grid-area:header}.page .meta{grid-area:meta}.tags{display:flex;flex-flow:row wrap;gap:.25em}.tags li{list-style:disc;border-radius:4px;margin-left:1em}.tags li a{color:inherit}.list .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1em;align-items:start}.list .list-item{color:inherit;text-decoration:none;transition:color .2s ease-in-out}.list .list-item__image{width:100%;height:auto}.list .list-item__title{font-size:1.5em;margin:.5em 0}.list .list-item__summary{margin-bottom:1.5em}.list .list-item:hover{color:#0060ff}.hero .container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1em}.hero img{width:100%;grid-row:1/3}.headline{font-size:clamp(1.4em,7vw,3em);max-width:11ch;line-height:1.2;align-self:end}.button{background:#0060ff;color:#fff;width:max-content;font-size:clamp(0.75em,2vw,1em);padding:.75em;display:flex;justify-content:center;text-decoration:none;border-radius:100em;font-weight:700}.cta{grid-column:1;grid-row:2;align-self:start}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:2em}.card{background:#fff}.card img{width:100%;height:auto}#process .card img{height:200px}.card h3{margin:1em 0;font-weight:700}.card p{margin-bottom:1em}.testimonials{display:flex;flex-flow:row wrap;gap:1em;justify-content:center}.testimonial{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;grid-gap:1em;margin-bottom:1em;flex-basis:18em}.avatar{margin-left:1em;width:2em;height:2em;border-radius:1em;background:#212121}.name{align-self:center}.bubble{background-color:#212121;color:#fff;padding:.5em;border-radius:.5em;position:relative;grid-column:span 2;height:80px;display:flex;justify-content:center;align-items:center;text-align:center}.bubble:after{content:'';position:absolute;top:0;left:2em;width:0;height:0;border:.5em solid transparent;border-bottom-color:#212121;border-top:0;margin-left:-.5em;margin-top:-.5em}.site-header a{text-decoration:none;color:inherit}.site-header .container{display:flex;flex-flow:row wrap;justify-content:space-between;padding:1em}.site-masthead{display:flex;align-items:center}.site-icon{width:44px;height:44px;border-radius:100em;margin-right:1em}body{margin-bottom:64px;min-height:calc(100vh - 64px)}.site-nav{flex-grow:1;position:fixed;bottom:0;left:0;width:100vw;background:#212121;color:#fff;z-index:2}.site-nav ul{height:64px;max-width:960px;margin:0 auto;display:flex;justify-content:space-around}.site-nav ul li{flex-grow:1;border-bottom:4px solid #212121}.site-nav ul li.active{font-weight:700;border-bottom:4px solid #0060ff}.site-nav ul li a{display:flex;flex-flow:column;align-items:center;justify-content:center;height:100%}.site-nav ul li a span{padding:.25em}.site-footer{background:#333;color:#fff}.site-footer hr{display:none}.site-footer .container{padding:2em 1em}.site-footer dt{font-weight:700}.site-footer dd{margin-bottom:.5em}.site-footer a{color:inherit}

resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"scss/main.min.95089ef85e19636fd55cb64500712284e5a674f127ae539030f77b9e8d70aca1.css","MediaType":"text/css","Data":{"Integrity":"sha256-lQie+F4ZY2/VXLZFAHEihOWmdPEnrlOQMPd7no1wrKE="}}
+{"Target":"scss/main.min.1728f3b8fb7e574269be9a411c55d3a93da926642f617fa9ec6871714626047e.css","MediaType":"text/css","Data":{"Integrity":"sha256-FyjzuPt+V0JpvppBHFXTqT2pJmQvYX+p7GhxcUYmBH4="}}