sites/abdullahtarawneh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

WIP add tags and lists

Browse source
This commit is contained in:
a 2020-10-16 15:00:32 -05:00
parent 572259f881
commit 068f1bf906
21 changed files with 189 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
assets/scss/base/list.scss Normal file
View file

@ -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;
}
}
}

43
assets/scss/base/page.scss Normal file
View file

@ -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;}
}
}

3
assets/scss/base/typography.scss
View file

@ -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;}

2
assets/scss/index/cards.scss
View file

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

2
assets/scss/main.scss
View file

@ -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";

47
assets/scss/partials/site-header.scss
View file

@ -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-icon {width: 44px; height: 44px; border-radius: 100em;}
.site-masthead {display: flex; align-items: center;}
.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;}
}
}
}
}

13
config.toml
View file

@ -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"
url = "/contact/"
name = "Case Studies"
url = "/case-studies/"
weight = 30

3
content/blog/_index.md
View file

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

3
content/case-studies/_index.md Normal file
View file

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

BIN
content/case-studies/mastodon/cover.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 118 KiB

10
content/case-studies/mastodon/index.md Normal file
View file

@ -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.

0
content/experience/mastodon/index.md → content/case-studies/pixelfed/index.md
View file

4
content/contact/_index.md
View file

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

2
content/experience/pixelfed/index.md
View file

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

5
layouts/_default/list.html
View file

@ -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 }}

18
layouts/_default/single.html
View file

@ -1,5 +1,5 @@
{{ define "title" }}
{{ .Title }} &ndash; {{ .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>

6
layouts/partials/site-footer.html
View file

@ -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>

2
layouts/partials/site-header.html
View file

@ -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>

15
layouts/taxonomy/tag.html Normal file
View file

@ -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 }}

2
resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content
View file

@ -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}

2
resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json
View file

@ -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="}}