diff --git a/assets/scss/base/list.scss b/assets/scss/base/list.scss new file mode 100644 index 0000000..f661ee2 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/assets/scss/base/page.scss b/assets/scss/base/page.scss new file mode 100644 index 0000000..4d6779f --- /dev/null +++ b/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;} + } +} \ No newline at end of file diff --git a/assets/scss/base/typography.scss b/assets/scss/base/typography.scss index 50ee2f9..d9fa0ba 100644 --- a/assets/scss/base/typography.scss +++ b/assets/scss/base/typography.scss @@ -1,4 +1,7 @@ h1,h2,h3,h4,h5,h6 {line-height: 1.2} p { line-height: 1.4 -} \ No newline at end of file +} + + +#projects, .page-title, .site-nav {text-transform: lowercase;} \ No newline at end of file diff --git a/assets/scss/index/cards.scss b/assets/scss/index/cards.scss index fd0a80a..0f4e75a 100644 --- a/assets/scss/index/cards.scss +++ b/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; diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 03d4796..ce3f687 100644 --- a/assets/scss/main.scss +++ b/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"; diff --git a/assets/scss/partials/site-header.scss b/assets/scss/partials/site-header.scss index a66a631..b905b93 100644 --- a/assets/scss/partials/site-header.scss +++ b/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-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;} + } + } + } +} diff --git a/config.toml b/config.toml index f2aa254..d9ceac4 100644 --- a/config.toml +++ b/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 = "" -name = "Contact" -url = "/contact/" +name = "Case Studies" +url = "/case-studies/" weight = 30 diff --git a/content/blog/_index.md b/content/blog/_index.md index e69de29..ee163da 100644 --- a/content/blog/_index.md +++ b/content/blog/_index.md @@ -0,0 +1,3 @@ +--- +title: "Blog" +--- \ No newline at end of file diff --git a/content/case-studies/_index.md b/content/case-studies/_index.md new file mode 100644 index 0000000..d3e01b6 --- /dev/null +++ b/content/case-studies/_index.md @@ -0,0 +1,3 @@ +--- +title: "Case studies" +--- \ No newline at end of file diff --git a/content/case-studies/mastodon/cover.jpg b/content/case-studies/mastodon/cover.jpg new file mode 100644 index 0000000..cf3f94d Binary files /dev/null and b/content/case-studies/mastodon/cover.jpg differ diff --git a/content/case-studies/mastodon/index.md b/content/case-studies/mastodon/index.md new file mode 100644 index 0000000..c72bdd4 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/content/experience/mastodon/index.md b/content/case-studies/pixelfed/index.md similarity index 100% rename from content/experience/mastodon/index.md rename to content/case-studies/pixelfed/index.md diff --git a/content/contact/_index.md b/content/contact/_index.md deleted file mode 100644 index 80ee983..0000000 --- a/content/contact/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: "Contact" ---- - diff --git a/content/experience/pixelfed/index.md b/content/experience/pixelfed/index.md deleted file mode 100644 index a49ba48..0000000 --- a/content/experience/pixelfed/index.md +++ /dev/null @@ -1,2 +0,0 @@ ---- ---- \ No newline at end of file diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 7b95819..2a16d56 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,3 +1,6 @@ +{{ define "title" }} +{{.Title}} | {{ .Site.Title }} +{{ end }} {{ define "main" }}
@@ -9,7 +12,9 @@
{{ range .Pages }} +

{{ .Title }}

+

{{.Summary}}

{{ .Date.Format "January 2, 2006" }} {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 19cc1e6..295c9d5 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,5 @@ {{ define "title" }} -{{ .Title }} – {{ .Site.Title }} +{{ .Title }} | {{ .Site.Title }} {{ end }} {{ define "main" }}
@@ -9,9 +9,23 @@

{{ .Title }}

+
- {{ .TableOfContents }} {{ .Content }}
diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html index be3e9b1..8f0d105 100644 --- a/layouts/partials/site-footer.html +++ b/layouts/partials/site-footer.html @@ -2,11 +2,11 @@
-
Email
+
email
a@trwnh.com
-
Jabber
+
jabber
a@trwnh.com
-
Fediverse
+
fediverse
mastodon.social/@trwnh
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index 1603bc7..b08066c 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -4,7 +4,6 @@

abdullah tarawneh, freelance creative and consultant.

- \ No newline at end of file diff --git a/layouts/taxonomy/tag.html b/layouts/taxonomy/tag.html new file mode 100644 index 0000000..53d3731 --- /dev/null +++ b/layouts/taxonomy/tag.html @@ -0,0 +1,15 @@ +{{ define "main" }} +
+
+
+
    + {{ range .Data.Pages }} +
  • + {{ .Title }} +
    • + {{ end }} +
+
+
+
+{{ end }} \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content index 32cf558..821ce9a 100644 --- a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.content +++ b/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} \ No newline at end of file +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} \ No newline at end of file diff --git a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json b/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json index 5607eab..799230e 100644 --- a/resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json +++ b/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="}} \ No newline at end of file +{"Target":"scss/main.min.1728f3b8fb7e574269be9a411c55d3a93da926642f617fa9ec6871714626047e.css","MediaType":"text/css","Data":{"Integrity":"sha256-FyjzuPt+V0JpvppBHFXTqT2pJmQvYX+p7GhxcUYmBH4="}} \ No newline at end of file