diff --git a/assets/scss/base/components.scss b/assets/scss/base/components.scss index b39201f..ef4184c 100644 --- a/assets/scss/base/components.scss +++ b/assets/scss/base/components.scss @@ -1,3 +1,6 @@ +a:link {color: #06f;} +a:visited {color: rgb(147, 85, 197)} + .button { background: #0060ff; color: white; diff --git a/assets/scss/base/page.scss b/assets/scss/base/page.scss index 5c7ec0a..dfc6da9 100644 --- a/assets/scss/base/page.scss +++ b/assets/scss/base/page.scss @@ -56,6 +56,7 @@ margin: 1em 0; border-left: 0.25rem solid black; padding-left: 0.5em; + line-height: 1.4; } pre { @@ -88,7 +89,10 @@ th, td {border: 1px solid black; padding: 0.5em;} } figure { - img {width: 100%;} + img { + width: 100%; + margin-bottom: -0.125em; + } figcaption { background: #212121; color: white; diff --git a/assets/scss/base/sections.scss b/assets/scss/base/sections.scss index 208c0fc..2f3e963 100644 --- a/assets/scss/base/sections.scss +++ b/assets/scss/base/sections.scss @@ -19,21 +19,4 @@ main {flex-grow: 1;} max-width: 960px; margin: 0 auto; padding: 0 1em; -} - -.section-heading { - font-size: 2em; - font-weight: 700; - line-height: 1.2; - /* - max-width: 18ch; - text-align: center; - margin: 0 auto; - margin-bottom: 4em; - - border-bottom: 2px solid rgba(0,0,0,0.25) - */ - padding-bottom: 1em; - - } \ No newline at end of file diff --git a/assets/scss/blog/index.scss b/assets/scss/blog/index.scss new file mode 100644 index 0000000..2d84e76 --- /dev/null +++ b/assets/scss/blog/index.scss @@ -0,0 +1,28 @@ +#blog { + .list { + .container { + display: flex; + flex-flow: column; + gap: 3em; + } + .list-item { + &__title { + margin: 0; + margin-bottom: 0.5em; + } + &__meta { + display: flex; + flex-flow: row wrap; + gap: 1em; + font-size: 0.8em; + margin-top: 1em; + } + &__date { + margin: 0; + } + .tag:before { + content: '#'; + } + } + } +} \ No newline at end of file diff --git a/assets/scss/code/index.scss b/assets/scss/code/index.scss index 7b3ee37..f905566 100644 --- a/assets/scss/code/index.scss +++ b/assets/scss/code/index.scss @@ -1,18 +1,28 @@ #code { + p { line-height: 1.4; font-size: 1.2em; } .page-header { - - } - .page-title { - margin-bottom: 1em; + .title:before {content: 'code';} + .title {margin-top: 0;} } .title { font-size: 2em; font-weight: 700; - margin-bottom: 1em; + &:before { + font-size: 3em; + font-weight: 700; + color: #ddd; + position: absolute; + top: -0.425em; + left: -0.15em; + z-index: -1; + } + position: relative; + margin-top: 1em; + margin-bottom: 2em; } .explainer { text-decoration: none; @@ -79,6 +89,7 @@ } } #projects { + .title:before {content: 'projects';} .container { } @@ -89,65 +100,59 @@ margin-top: 4em; } .project { - + box-shadow: 0 1px 1px rgba(0,0,0,0.11), + 0 2px 2px rgba(0,0,0,0.11), + 0 4px 4px rgba(0,0,0,0.11), + 0 6px 8px rgba(0,0,0,0.11), + 0 8px 16px rgba(0,0,0,0.11); + border-radius: 0.25em; + overflow: hidden; + display: grid; + grid-template-areas: "cover" "title" "summary" "footer"; + grid-template-rows: auto auto auto 1fr; &__link { display: contents; } &__image { width: 100%; height: auto; + grid-area: cover; } &__title { font-weight: 700; grid-area: title; - text-decoration: underline; font-size: 1.5em; - margin: 1.5em 0 0.5em; + margin: 1rem 1rem 0.5rem 1rem; + color: initial; } &__summary { line-height: 1.4; grid-area: summary; max-width: 70ch; - margin-bottom: 0.5em; + margin: 0 1rem; + color: initial; } - &__date { - display: block; - margin-bottom: 1em; - } - - } - @media (min-width: 35em) and (max-width: 847px) { - .codemastomods, .codecertbot-namecheap { - grid-column: span 2; - display: grid; - grid-template-areas: "cover title" "cover summary" "cover date"; - grid-template-columns: 1fr 38ch; - grid-template-rows: auto auto 1fr; - height: max-content; - align-self: start; - .project__image { - grid-area: cover; - } - .project__title { - margin: 0; - margin-left: 1rem; - margin-bottom: 0.5em; - } - .project__summary { - margin-left: 1rem; - } - .project__date { - margin-left: 1rem; - } + &__date, &__hint { + align-self: end; + justify-self: end; + padding: 1rem 1rem; + text-transform: uppercase; + font-weight: 500; } } @media (min-width: 53em) { .codecertbot-namecheap { grid-column: span 3; + display: grid; + grid-template-areas: "cover title" "cover summary" "cover date"; + grid-template-columns: 20em 1fr; + grid-template-rows: auto auto auto; + height: max-content; } } } #contributions { + .title:before {content: 'contributions';} .container { } @@ -188,8 +193,12 @@ } .commit { display: grid; - grid-template-areas: "icon title . summary"; - grid-template-columns: 3em auto 0.5em 1fr; + grid-template-areas: "icon title" ". summary"; + grid-template-columns: 3em 1fr; + @media (min-width: 30em) { + grid-template-areas: "icon title . summary"; + grid-template-columns: 3em auto 0.5rem 1fr; + } align-items: center; &__link { display: contents; @@ -217,6 +226,7 @@ } } #support { + .title:before {content: 'support';} .container > p { line-height: 1.4; font-size: 1.2em; diff --git a/assets/scss/index/cards.scss b/assets/scss/index/cards.scss deleted file mode 100644 index 39e559a..0000000 --- a/assets/scss/index/cards.scss +++ /dev/null @@ -1,14 +0,0 @@ -.cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); - grid-gap: 2em; -} -.card { - -} -.card__img { - width: 100%; -} -.card__body {} -.card__title {font-weight: 700; margin-bottom: 0.7em; margin-top: 1.4em;} -.card__desc {line-height: 1.4;} \ No newline at end of file diff --git a/assets/scss/index/index.scss b/assets/scss/index/index.scss index 22348fa..cbf0d96 100644 --- a/assets/scss/index/index.scss +++ b/assets/scss/index/index.scss @@ -1,10 +1,143 @@ -#introduction .blurb { - font-size: 2.49em; - font-weight: 700; - line-height: 1.2; -} -#contact { - .section-heading {font-weight: 700;} - p {line-height: 1.4; max-width: 65ch;} - .cta {margin: 2em 0 0;} +#index { + .title { + font-size: 1.75em; + font-weight: 700; + line-height: 1.2; + &:before { + font-size: 3em; + font-weight: 700; + color: #ddd; + position: absolute; + top: -0.5em; + left: -0.25em; + z-index: -1; + } + position: relative; + margin-bottom: 2em; + + } + .subtitle { + font-size: 1.5em; + line-height: 1.2; + margin-bottom: 0.5em; + margin-top: 2em; + } + #intro { + line-height: 1.2; + .tagline { + font-size: 1.5em; + font-weight: 700; + em {color: #06f;font-style: italic;} + } + .blurb { + margin-top: 1em; + font-size: 1.2em; + } + } + #about { + .title:before { + content: 'about'; + } + .blurb { + line-height: 1.4; + font-size: 1.1em; + } + } + #skills { + .container { + display: grid; + grid-template-columns: repeat(auto-fit,minmax(15em,1fr)); + gap: 2em; + } + .title {grid-column: 1 / -1;} + .title:before { + content: 'skills'; + } + .card { + display: grid; + grid-template-areas: "img" "title" "desc"; + grid-template-rows: auto auto 1fr; + &__title { + grid-area: title; + font-weight: 700; + font-size: 1.1em; + line-height: 1.2; + margin: 0.5em 0; + } + &__desc { + grid-area: desc; + line-height: 1.4; + } + &__img { + width: 100%; + aspect-ratio: 16/9; + object-fit: contain; + grid-area: img; + border-radius: 1em; + } + &.sysadm .card__img {padding: 1em;} + } + } + #praise { + .title:before { + content: 'praise'; + } + .testimonials { + display: flex; + flex-flow: row wrap; + gap: 2em; + justify-content: center; + } + .testimonial { + display: grid; + grid-template-areas: "b b" "a n"; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + gap: 1em; + width: 18em; + } + .avatar { + grid-area: a; + margin-left: 1em; + width: 4em; + height: 4em; + border-radius: 100em; + background: #212121; + } + .name { + grid-area: n; + align-self: center; + } + .bubble { + grid-area: b; + background: #212121; + color: white; + padding: 0.5em; + border-radius: 0.5em; + position: relative; + grid-column: span 2; + min-height: 80px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + line-height: 1.4; + width: 100%; + } + .bubble:after { + content: ''; + position: absolute; + width: 0; + height: 0; + border: 0.5em solid transparent; + border-top-color: #212121; + bottom: -1em; + left:2.5em; + } + } + #contact { + .title:before { + content: 'contact'; + } + } } \ No newline at end of file diff --git a/assets/scss/index/testimonials.scss b/assets/scss/index/testimonials.scss deleted file mode 100644 index ae8db35..0000000 --- a/assets/scss/index/testimonials.scss +++ /dev/null @@ -1,51 +0,0 @@ -.testimonials { - display: flex; - flex-flow: row wrap; - gap: 2em; - 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: 4em; - height: 4em; - border-radius: 100em; - background: #212121; -} -.name { - align-self: center; -} -.bubble { - background-color: #212121; - color: white; - padding: 0.5em; - border-radius: 0.5em; - position: relative; - grid-column: span 2; - min-height: 80px; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - line-height: 1.4; -} -.bubble:after { - content: ''; - position: absolute; - top: 0; - left: 3em; - width: 0; - height: 0; - border: 0.5em solid transparent; - border-bottom-color: #212121; - border-top: 0; - margin-left: -0.5em; - margin-top: -0.5em; -} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index cdc9036..2fb1101 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -5,8 +5,6 @@ @import "base/components.scss"; @import "index/index.scss"; -@import "index/cards.scss"; -@import "index/testimonials.scss"; @import "work/index.scss"; @import "work/trilogy/index.scss"; @@ -14,5 +12,7 @@ @import "code/index.scss"; +@import "blog/index.scss"; + @import "partials/site-header.scss"; @import "partials/site-footer.scss"; \ No newline at end of file diff --git a/assets/scss/work/index.scss b/assets/scss/work/index.scss index aa08dc7..2448214 100644 --- a/assets/scss/work/index.scss +++ b/assets/scss/work/index.scss @@ -1,13 +1,20 @@ #work { - .page-header .container { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - align-content: center; - .page-title { - margin-right: 1em; - margin-bottom: 1em; + .title { + font-size: 2em; + font-weight: 700; + margin-top: em; + margin-bottom: 1em; + &:before { + content: 'work'; + font-size: 3em; + font-weight: 700; + color: #ddd; + position: absolute; + top: -0.425em; + left: -0.15em; + z-index: -1; } + position: relative; } .timeline { position: relative; @@ -62,24 +69,24 @@ border: 0.25em solid #ddd; } &.worktrilogy::before { - background: url("/icons/trilogy.png"); + background: url("/images/logos/trilogy.png"); background-size: cover; } &.workmastodon::before { - background: url("/icons/mastodon.png"); + background: url("/images/logos/mastodon.png"); background-size: cover; } &.workpixelfed::before { - background: url("/icons/pixelfed.svg"); + background: url("/images/logos/pixelfed.svg"); background-size: cover; background-color: pink; } &.workeqin::before { - background: url("/icons/eqin.png"); + background: url("/images/logos/eqin.png"); background-size: cover; } &.workuab:before { - background: url("/icons/uab.png"); + background: url("/images/logos/uab.png"); background-size: contain; background-repeat: no-repeat; background-position: center; @@ -138,6 +145,7 @@ font-size: 1.4em; font-weight: 700; margin-bottom: 1.4em; + &:before {content: ''} } .blurb { line-height: 1.4; @@ -165,7 +173,7 @@ } } .email.button { - + color: white; } .resume.button { background: white; diff --git a/assets/scss/work/mastodon/index.scss b/assets/scss/work/mastodon/index.scss index 731382b..467740b 100644 --- a/assets/scss/work/mastodon/index.scss +++ b/assets/scss/work/mastodon/index.scss @@ -281,6 +281,26 @@ margin-left: 1em; margin-bottom: 1em; } + .benefit { + position: relative; + margin-top: 8em; + &:before { + position: absolute; + font-size: 4em; + font-weight: 700; + top: -1.25em; + color: #3088d4; + } + &.one:before { + content: '01'; + } + &.two:before { + content: '02'; + } + &.three:before { + content: '03'; + } + } } .separator { width: 10em; diff --git a/assets/scss/work/trilogy/index.scss b/assets/scss/work/trilogy/index.scss index 91c9ba1..ab70ffb 100644 --- a/assets/scss/work/trilogy/index.scss +++ b/assets/scss/work/trilogy/index.scss @@ -173,6 +173,11 @@ } } .card { + box-shadow: 0 1px 1px rgba(0,0,0,0.11), + 0 2px 2px rgba(0,0,0,0.11), + 0 4px 4px rgba(0,0,0,0.11), + 0 6px 8px rgba(0,0,0,0.11), + 0 8px 16px rgba(0,0,0,0.11); &__title { margin-top: 1em; margin-bottom: 2em; diff --git a/content/code/certbot-namecheap/cover.png b/content/code/certbot-namecheap/cover.png new file mode 100644 index 0000000..c84d257 Binary files /dev/null and b/content/code/certbot-namecheap/cover.png differ diff --git a/content/code/certbot-namecheap/index.md b/content/code/certbot-namecheap/index.md index 9b65fd7..58d9096 100644 --- a/content/code/certbot-namecheap/index.md +++ b/content/code/certbot-namecheap/index.md @@ -5,7 +5,7 @@ author: "Abdullah Tarawneh" date: "2019-10-30" tags: ["namecheap", "certbot", "dns-01", "python", "letsencrypt"] category: "Code" -cover: "/images/namecheap.jpg" +cover: "/code/certbot-namecheap/cover.png" --- ## The problem diff --git a/content/code/liberapay-pleroma/index.md b/content/code/liberapay-pleroma/index.md index 44e7e64..ff9dce9 100644 --- a/content/code/liberapay-pleroma/index.md +++ b/content/code/liberapay-pleroma/index.md @@ -5,7 +5,7 @@ author: "Abdullah Tarawneh" date: "2019-11-13" tags: ["mastodon", "api", "pleroma", "liberapay", "contribution", "pull request", "github"] category: "Code" -cover: "/images/liberapay-pleroma.jpg" +cover: "/images/cover/liberapay-pleroma.jpg" --- pleroma is compatible with mastodon api. diff --git a/content/code/mastomods/index.md b/content/code/mastomods/index.md index 2c561b6..aa6de98 100644 --- a/content/code/mastomods/index.md +++ b/content/code/mastomods/index.md @@ -5,7 +5,7 @@ author: "Abdullah Tarawneh" date: "2019-02-18" tags: ["mastomods", "mastodon", "css", "userstyles", "tweaks"] category: "Code" -cover: "/images/mastomods.jpg" +cover: "/images/cover/mastomods.jpg" --- This work is heavily based on (and an extension of) my earlier work on Mastodon Flat CSS, and its child theme Linernotes Mastodon Themes. I grew tired of having to maintain what was essentially the same code in multiple different places, so this repo was created to be a more modular way of managing code snippets after I learned enough about how importing works. diff --git a/content/code/obs-edit-transform/index.md b/content/code/obs-edit-transform/index.md index 1a33d47..e14c765 100644 --- a/content/code/obs-edit-transform/index.md +++ b/content/code/obs-edit-transform/index.md @@ -5,7 +5,7 @@ date: "2017-04-30" author: "Abdullah Tarawneh" tags: ["obs", "open broadcaster software", "obs studio", "keyboard shortcut", "edit transform", "pull request", "github"] category: "Code" -cover: "/images/obs-transform.jpg" +cover: "/images/cover/obs-transform.jpg" --- Editing was very easy in OBS Classic, and I could not find the option for stretching a source to bounds in OBS Studio, so the "Edit Transform" dialogue should be more user-facing. Giving it a keyboard shortcut denotes that it is important enough to have a shortcut, as opposed to the myriad options with no shortcut. diff --git a/content/code/photobucketgrabber/cover.png b/content/code/photobucketgrabber/cover.png new file mode 100644 index 0000000..3056614 Binary files /dev/null and b/content/code/photobucketgrabber/cover.png differ diff --git a/content/code/photobucketgrabber/index.md b/content/code/photobucketgrabber/index.md index f54d6f9..72f9279 100644 --- a/content/code/photobucketgrabber/index.md +++ b/content/code/photobucketgrabber/index.md @@ -5,7 +5,7 @@ author: "Abdullah Tarawneh" date: "2019-03-17" tags: ["python", "photobucket", "automation", "scripting", "archive", "export", "download"] category: "Code" -cover: "/images/photobucketgrabber.jpg" +cover: "/code/photobucketgrabber/cover.png" --- ## The problem diff --git a/content/code/salatime/index.md b/content/code/salatime/index.md index 54c7e97..3b4f49d 100644 --- a/content/code/salatime/index.md +++ b/content/code/salatime/index.md @@ -5,7 +5,7 @@ date: "2019-05-09" author: "Abdullah Tarawneh" tags: ["python", "web scraping", "scraping", "beautifulsoup", "salat", "prayer", "time"] category: "Code" -cover: "/images/salatime.jpg" +cover: "/images/cover/salatime.jpg" --- ## The problem diff --git a/content/design/go-fed-site/index.md b/content/design/go-fed-site/index.html similarity index 54% rename from content/design/go-fed-site/index.md rename to content/design/go-fed-site/index.html index 10c3b40..c274475 100644 --- a/content/design/go-fed-site/index.md +++ b/content/design/go-fed-site/index.html @@ -5,19 +5,6 @@ author: "Abdullah Tarawneh" date: "2020-12-27" tags: ["go-fed", "redesign", "website", "web", "responsive"] category: "Design" -cover: "/images/go-fed.png" +cover: "/images/cover/go-fed.png" --- -## Overview - -## Identifying issues with the old site - -{{< img src="old-1280-home.png" alt="The old site's homepage">}} - -### Lack of responsive design - -### - -## Improvements made - -### \ No newline at end of file diff --git a/content/design/motarawneh/index.md b/content/design/motarawneh/index.md index 63c4d6e..3330602 100644 --- a/content/design/motarawneh/index.md +++ b/content/design/motarawneh/index.md @@ -5,7 +5,7 @@ author: "Abdullah Tarawneh" date: "2020-03-17" tags: ["website", "web", "responsive", "design"] category: "Design" -cover: "/images/motarawneh.jpg" +cover: "/images/cover/motarawneh.jpg" --- ## Overview \ No newline at end of file diff --git a/content/work/eqin/index.md b/content/work/eqin/index.md index 80c56a6..c8ac417 100644 --- a/content/work/eqin/index.md +++ b/content/work/eqin/index.md @@ -9,7 +9,7 @@ at: "Equality Initiative" position: "Director of Technology" tags: ["nonprofit"] category: "Work" -cover: "/images/eqin.jpg" +cover: "/images/cover/eqin.jpg" --- ## Building and maintaining a website diff --git a/content/work/mastodon/cover.png b/content/work/mastodon/cover.png new file mode 100644 index 0000000..08072aa Binary files /dev/null and b/content/work/mastodon/cover.png differ diff --git a/content/work/mastodon/index.html b/content/work/mastodon/index.html index ae5a6f3..e86007f 100644 --- a/content/work/mastodon/index.html +++ b/content/work/mastodon/index.html @@ -9,13 +9,13 @@ at: "Mastodon" position: "Information Architect / Documentation Specialist" tags: ["mastodon", "documentation", "information architecture", "rest api"] category: "Work" -cover: "/images/mastodocs.jpg" +cover: "/images/cover/mastodocs.jpg" ---