diff --git a/assets/scss/base/sections.scss b/assets/scss/base/layout.scss similarity index 54% rename from assets/scss/base/sections.scss rename to assets/scss/base/layout.scss index 009b41f..64973f1 100644 --- a/assets/scss/base/sections.scss +++ b/assets/scss/base/layout.scss @@ -1,7 +1,12 @@ +* { + box-sizing: border-box; +} html { scroll-behavior: smooth; } body { + margin: 0; + padding: 0; display: flex; flex-flow: column; min-height: calc(var(--vh, 1vh) * 100); @@ -13,14 +18,13 @@ main {flex-grow: 1;} @media (min-width: 62em) {padding: 4em 0} } .container { - width: 100%; - max-width: var(--container-width); + max-width: var(--max-container-width); margin: 0 auto; - padding: 0 1em; + padding: 0 1rem; } - -@media (min-width: $container-width + 2em) { - .container { - padding: 0; - } +@media (min-width: 60rem) { + .container {padding-inline: 2rem;} +} +@media (min-width: 1200px) { + .container {padding-inline: 3rem;} } \ No newline at end of file diff --git a/assets/scss/base/mixins.scss b/assets/scss/base/mixins.scss index 42ea976..8d515fa 100644 --- a/assets/scss/base/mixins.scss +++ b/assets/scss/base/mixins.scss @@ -1,17 +1,25 @@ @mixin box-shadow { - 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); + box-shadow: 0 1px 1px rgba(0,35,54,0.11), + 0 2px 2px rgba(0,35,54,0.11), + 0 4px 4px rgba(0,35,54,0.11), + 0 6px 8px rgba(0,35,54,0.11), + 0 8px 16px rgba(0,35,54,0.11); +} + +@mixin box-shadow-top { + box-shadow: 0 -1px 1px rgba(0,35,54,0.11), + 0 -2px 2px rgba(0,35,54,0.11), + 0 -4px 4px rgba(0,35,54,0.11), + 0 -6px 8px rgba(0,35,54,0.11), + 0 -8px 16px rgba(0,35,54,0.11); } @mixin box-shadow-heavy { - box-shadow: 0 2px 1px rgba(0,0,0,0.09), - 0 4px 2px rgba(0,0,0,0.09), - 0 8px 4px rgba(0,0,0,0.09), - 0 16px 8px rgba(0,0,0,0.09), - 0 32px 16px rgba(0,0,0,0.09); + box-shadow: 0 2px 1px rgba(0,35,54,0.09), + 0 4px 2px rgba(0,35,54,0.09), + 0 8px 4px rgba(0,35,54,0.09), + 0 16px 8px rgba(0,35,54,0.09), + 0 32px 16px rgba(0,35,54,0.09); } @mixin focus-outline { diff --git a/assets/scss/base/reset.scss b/assets/scss/base/reset.scss deleted file mode 100644 index 5cebaa4..0000000 --- a/assets/scss/base/reset.scss +++ /dev/null @@ -1,44 +0,0 @@ -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; -} \ No newline at end of file diff --git a/assets/scss/base/text.scss b/assets/scss/base/text.scss deleted file mode 100644 index 9b01557..0000000 --- a/assets/scss/base/text.scss +++ /dev/null @@ -1,85 +0,0 @@ -/* typography */ -html { - --line-height: 1.6; -} -h1 { - font-size: 2.49em; - font-weight: bold; -} -h2 { - font-size: 2.07em; - font-weight: bold; -} -h3 { - font-size: 1.73em; - font-weight: bold; -} -h4 { - font-size: 1.44em; - font-weight: bold; -} -h5 { - font-size: 1.2em; - font-weight: bold; -} -h6 { - font-size: 1em; - font-weight: bold; -} -p { - line-height: var(--line-height); -} -h1, h2, h3, h4, h5, h6, p { - margin-block: 1rem; -} -strong { - font-weight: bold; -} -em { - font-style: italic; -} - -/* lists */ -ol { - list-style: decimal; -} -ul { - list-style: disc; -} -ol, ul { - margin-inline-start: 1em; -} -li { - margin-block: 0.5em; - line-height: var(--line-height); -} - -/* content */ -blockquote { - border-inline-start: 0.25em solid black; - padding-inline-start: 0.5em; - display: block; - margin-block: 1em; - line-height: 1.6; - p { - - } -} -img { - max-width: 100%; -} -figure { - blockquote { - - } - img { - display: block; - width: 100%; - } - figcaption { - padding: 0.5em; - font-style: italic; - line-height: 2; - } -} - diff --git a/assets/scss/base/variables.scss b/assets/scss/base/variables.scss index 6480a88..0110d0f 100644 --- a/assets/scss/base/variables.scss +++ b/assets/scss/base/variables.scss @@ -1,19 +1,31 @@ -$container-width: 60em; -$nav-height: 4em; -$header-height: 4em; +$max-container-width: 1600px; :root { - --container-width: #{$container-width}; - --nav-height: #{$nav-height}; - --header-height: #{$header-height}; - --link-color: rgb(0,96,255); - --link-visited: rgb(140, 74, 194); - --primary-accent: rgb(0,96,255); - --primary-accent-transparent: rgba(0,96,255,0.25); - --primary-accent-text: #fff; - --ui-background: #fff; - --ui-background-track: #aaa; - --ui-text: #212121; - --ui-text-muted: #777; - --ui-text-bold: #000; + --max-container-width: #{$max-container-width}; + + --color-background: hsl(210, 100%, 90%); + --color-text: hsl(210, 100%, 15%); + --color-text-muted: hsl(210, 50%, 45%); + --color-highlight: hsl(210, 80%, 40%); + --color-highlight-weak: hsl(210, 80%, 80%); + --color-accent: hsl(150, 50%, 50%); + + --color-card-background: hsl(210, 100%, 95%); + --color-card-text: var(--color-text); + + --color-button-background: var(--color-highlight); + --color-button-text: white; + --color-button-hover-background: var(--color-highlight-weak); + --color-button-hover-text: var(--color-text); + + --color-link: hsl(210, 100%, 50%); + --color-link-visited: hsl(270, 50%, 50%); + + --transition-duration: 0.4s; +} + +body { + background-color: var(--color-background); + color: var(--color-text); + font-family: sans-serif; } \ No newline at end of file diff --git a/assets/scss/components/button.scss b/assets/scss/components/button.scss deleted file mode 100644 index 14418aa..0000000 --- a/assets/scss/components/button.scss +++ /dev/null @@ -1,84 +0,0 @@ -.button { - width: 100%; - @media (min-width: 33.75em) { - width: max-content; - } - font-size: clamp(1em,2vw,1em); - padding: 1em; - display: flex; - justify-content: center; - align-items: center; - text-decoration: none; - border-radius: 0.25em; - font-weight: 700; - gap: 1em; - &:link { - - } - - &:visited { - - } - - &:focus { - padding: 1em; - border-radius: 0.25em; - @include focus-outline; - } - - &:hover { - - } - - &:active { - - } -} - -.button.primary { - background: var(--primary-accent); - color: var(--primary-accent-text); - &:link { - - } - - &:visited { - - } - - &:focus { - - } - - &:hover { - background: var(--primary-accent-transparent); - } - - &:active { - - } -} -.button.secondary { - background: white; - border: 2px solid var(--primary-accent); - color: var(--primary-accent); - &:link { - - } - - &:visited { - - } - - &:focus { - - } - - &:hover { - background: var(--primary-accent-transparent); - } - - &:active { - - } -} \ No newline at end of file diff --git a/assets/scss/components/devices.scss b/assets/scss/components/devices.scss deleted file mode 100644 index 6aa822b..0000000 --- a/assets/scss/components/devices.scss +++ /dev/null @@ -1,107 +0,0 @@ -.smartphone { - img { - width: 100%; - } - display: block; - position: relative; - max-width: 320px; - margin: auto; - border: 16px black solid; - border-top-width: 60px; - border-bottom-width: 80px; - border-radius: 36px; - background: black; - &:before { - content: ''; - display: block; - width: 60px; - height: 5px; - position: absolute; - top: -30px; - left: 50%; - transform: translate(-50%, -50%); - background: #333; - border-radius: 10px; - } - &:after { - content: ''; - display: block; - width: 20%; - aspect-ratio: 1; - position: absolute; - left: 50%; - bottom: -96px; - transform: translate(-50%, -50%); - background: #333; - border-radius: 50%; - } -} - -.laptop { - img { - width: 100%; - } - display: block; - width: 100%; - border-radius: 6px; - border-style: solid; - border-color: black; - border-width: 12px; - background-color: black; - position: relative; - &:after { - content: ''; - position: absolute; - width: calc(100% + 3em); - height: 7%; - left: -1.5em; - bottom: -9%; - background: #333; - border-radius: 0 0 100em 100em; - } - &:before { - content: ''; - position: absolute; - width: 25%; - height: 2%; - left: 37.5%; - bottom: -4%; - background: #777; - z-index: 2; - } - margin-bottom: 3.7%; - } - -.screenshot { - img { - width: 100%; - } - position: relative; - width: 100%; - &:after { - content: ''; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - } - &.pc { - img {padding: 1.1% 1.2%;} - margin-bottom: 21.25%; - &:after { - height: 140%; - background: url('/images/frames/pc.svg'); - background-repeat: no-repeat; - } - } - &.macbook { - img {padding: 2.9% 11.75% 0;} - margin-bottom: 11.25%; - &:after { - height: 250%; - background: url('/images/frames/macbook.svg'); - background-repeat: no-repeat; - } - } -} \ No newline at end of file diff --git a/assets/scss/components/intro.scss b/assets/scss/components/intro.scss deleted file mode 100644 index fbe80ec..0000000 --- a/assets/scss/components/intro.scss +++ /dev/null @@ -1,119 +0,0 @@ -#work #intro { - --headerHeight: 4em; - --navHeight: 4em; - color: #fff; - - padding: 0; - display: flex; - flex: 1; - background-image: url('/images/backgrounds/ffflux1.png'); - background-size: cover; - background-position: center; - .container { - display: grid; - grid-template-rows: auto auto 1fr; - position: relative; - padding: 1em; - - background-image: url('/images/puzzlehead.svg'); - background-size: contain; - background-position-x: right; - background-position-y: bottom; - background-repeat: no-repeat; - - aspect-ratio: 1; - max-height: calc(100vh - var(--header-height) - var(--nav-height)); - max-height: calc(var(--vh) * 100 - var(--header-height) - var(--nav-height)); - @media (min-width: $container-width) { - max-height: calc(100vh - var(--header-height)); - max-height: calc(var(--vh) * 100 - var(--header-height)); - } - } - .tagline { - font-size: 1.5em; - font-weight: 700; - em {color: #76ff03;font-style: italic;} - margin-bottom: 0.5em; - line-height: 1.1; - } - .blurb { - font-size: 1.1em; - margin-bottom: 2em; - max-width: 38ch; - line-height: 1.4; - } - .button { - background: #06f; - color: white; - width: max-content; - svg { - width: 1.75em; - height: 1.75em; - margin: 0; - } - span { - display: none; - font-size: 1.25em; - } - border-radius: 100em; - @include box-shadow; - justify-self: start; - align-self: start; - position: absolute; - bottom: 1em; - right: 1em; - } - @media (max-width: $container-width) { - @media (min-height: 25em) { - .tagline { - font-size: clamp(1.5em,6vw,3em) - } - .blurb { - font-size: clamp(1.1em, 3vw, 1.25em) - } - } - @media (min-height: 31.25em) { - @media (min-width: 32em) { - .button { - position: revert; - span {display: block;} - padding: 1em 2em; - } - aspect-ratio: 7.7/7; - } - @media (min-width: 37.5em) { - aspect-ratio: 640 / 540 - } - @media (min-width: 40em) { - aspect-ratio: 720 / 600 - } - @media (min-width: 42.5em) { - aspect-ratio: 744 / 600 - } - @media (min-width: 50em) { - aspect-ratio: 800 / 620 - } - @media (min-width: 52.5em) { - aspect-ratio: 840 / 640 - } - @media (min-width: 55em) { - aspect-ratio: 880 / 640 - } - } - } - @media (min-width: $container-width) { - @media (min-height: 25em) { - .tagline {font-size: 3em} - .blurb {font-size: 1.25em} - .button { - position: revert; - span {display: block;} - padding: 1em 2em; - } - max-height: 46em; - } - @media (min-height: 40em) { - .tagline {margin-top: 1em;} - } - } -} \ No newline at end of file diff --git a/assets/scss/components/praise.scss b/assets/scss/components/praise.scss deleted file mode 100644 index 7dd27b3..0000000 --- a/assets/scss/components/praise.scss +++ /dev/null @@ -1,59 +0,0 @@ -#praise { - --color: green; - .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: white; - padding: 2px; - border: 2px solid var(--color); - img {width: 100%; height: 100%; border-radius: 100em;} - } - .name { - grid-area: n; - align-self: center; - } - .bubble { - grid-area: b; - background: var(--color); - color: white; - padding: 0.5em; - border: 0; - 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: var(--color); - bottom: -1em; - left:2.5em; - } -} \ No newline at end of file diff --git a/assets/scss/components/pullquote.scss b/assets/scss/components/pullquote.scss deleted file mode 100644 index 9ddfd98..0000000 --- a/assets/scss/components/pullquote.scss +++ /dev/null @@ -1,46 +0,0 @@ -@mixin pullquote { - content: attr(data-pullquote); - font-size: 1em; - line-height: 1.4; - display: flex; - font-family: serif; - color: #555; - font-size: 1.25em; -} - -@mixin left { - float: left; - max-width: 30ch; - text-align: left; -} - -@mixin right { - float: right; - max-width: 30ch; - text-align: right; -} - -.has-pullquote { - &.left:before { - @include pullquote; - margin-bottom: 1rem; - @media (min-width: 40rem) { - @include left; - } - @media (min-width: 80rem) { - margin-left: -9rem; - padding-right: 1em; - } - } - &.right:before { - @include pullquote; - margin-bottom: 1rem; - @media (min-width: 40rem) { - @include right; - } - @media (min-width: 80rem) { - margin-right: -9rem; - padding-left: 1em; - } - } -} \ No newline at end of file diff --git a/assets/scss/components/table-of-contents.scss b/assets/scss/components/table-of-contents.scss deleted file mode 100644 index e98b09c..0000000 --- a/assets/scss/components/table-of-contents.scss +++ /dev/null @@ -1,41 +0,0 @@ -/* === ordered: true === */ - -#TableOfContents ol { - /* - each list gets a new counter - */ - counter-reset: item; - margin-inline-start: 0; - list-style: none; -} -#TableOfContents ol li:before { - /* - the counter is added as a pseudo-element, - and nested counters are joined by a dot - */ - content: counters(item, ".") " "; - counter-increment: item; - /* ensure the counters align visually */ - font-family: monospace; - font-weight: bold; - margin-inline-end: 1em; -} -#TableOfContents > ol > li { - /* - top-level items wrap after the number, - in order to add some visual separation - */ - display: flex; - flex-flow: column; -} - -/* === ordered: false === */ - -#TableOfContents ul { - list-style: none; - margin-left: 0; -} - -#TableOfContents ul ul { - margin-left: 1em; -} \ No newline at end of file diff --git a/assets/scss/components/terminal.scss b/assets/scss/components/terminal.scss deleted file mode 100644 index 8b70f66..0000000 --- a/assets/scss/components/terminal.scss +++ /dev/null @@ -1,23 +0,0 @@ -.terminal { - &:after { - content: ''; - background: repeating-linear-gradient( - 0deg, - rgba(black, 0.15), - rgba(black, 0.15) 1px, - transparent 2px, - transparent 4px - ); - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - pointer-events: none; - } - position: relative; - background: radial-gradient(circle at bottom, #455a48, black, black); - text-shadow: 0 0 5px #C8C8C8; - color: rgb(143, 255, 143); - font-family: monospace; -} \ No newline at end of file diff --git a/assets/scss/content/blog.scss b/assets/scss/content/blog.scss deleted file mode 100644 index 2d84e76..0000000 --- a/assets/scss/content/blog.scss +++ /dev/null @@ -1,28 +0,0 @@ -#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/content/code.scss b/assets/scss/content/code.scss deleted file mode 100644 index e4c1c43..0000000 --- a/assets/scss/content/code.scss +++ /dev/null @@ -1,282 +0,0 @@ -#code { - overflow: hidden; - p { - line-height: 1.4; - font-size: 1.2em; - } - .title { - font-size: 2em; - font-weight: 700; - &:before { - font-size: 1em; - font-weight: 700; - color: #ddd; - position: absolute; - top: -1.25em; - left: 0em; - z-index: -1; - } - a { - position: absolute; - top: -1.25em; - width: 100%; - color: #ddd; - display: block; - } - position: relative; - margin-top: 2rem; - margin-bottom: 2rem; - } - .explainer { - text-decoration: none; - color: inherit; - display: flex; - align-items: center; - gap: 1em; - margin: 0 auto; - .image { - display: flex; - justify-content: center; - align-items: center; - width: 4em; - height: 4em; - flex-shrink: 0; - border-radius: 100em; - } - i { - font-size: 2em; - } - } - #intro { - .tagline { - font-size: clamp(1.5em,6vw,3em); - font-weight: 700; - margin-bottom: 0.5em; - } - .blurb {} - } - #gitea { - margin-top: 4em; - svg { - width: 2em; - height: 2em; - } - .image { - background-color: #609926; - color: white; - } - } - #github { - margin-top: 2em; - svg { - width: 2em; - height: 2em; - } - .image { - background: #1B1F23; - color: white - } - } - #liberapay { - margin-top: 2em; - svg { - width: 2em; - height: 2em; - } - .image { - background: #F6C915; - color: white; - } - } - #patreon { - margin-top: 2em; - svg { - width: 2em; - height: 2em; - margin-left: 0.25em; - } - .image { - background: #f96753; - color: white; - } - } - #paypal { - margin-top: 2em; - svg { - width: 2em; - height: 2em; - } - .image { - background: #002F85; - color: white; - } - } - #cashapp { - margin-top: 2em; - svg { - width: 2em; - height: 2em; - } - .image { - background: #00D72E; - color: white; - } - } - #projects { - .title:before {content: '#projects';} - .container { - - } - .project-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); - gap: 3em; - margin-top: 4em; - } - .project { - text-decoration: none; - @include box-shadow; - border-radius: 0.25em; - overflow: hidden; - display: grid; - grid-template-areas: "cover" "title" "summary" "footer"; - grid-template-rows: auto auto auto 1fr; - &:link { - color: var(--link-color); - } - &:visited { - color: var(--link-visited); - } - &:focus { - background: unset; - padding: unset; - border-radius: 0.25em; - @include focus-outline; - } - - &:hover { - transform: scale(1.05); - @include box-shadow-heavy; - } - - &:active { - - } - &__image { - width: 100%; - height: auto; - grid-area: cover; - } - &__title { - font-weight: 700; - grid-area: title; - font-size: 1.5em; - margin: 1rem 1rem 0.5rem 1rem; - color: initial; - } - &__summary { - line-height: 1.4; - grid-area: summary; - max-width: 70ch; - margin: 0 1rem; - color: initial; - } - &__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 { - - } - .contribution-list { - display: flex; - flex-flow: column; - gap: 2em; - margin-top: 3em; - } - .pr { - display: grid; - grid-template-areas: "icon title" "icon summary"; - grid-template-columns: 3em 1fr; - &__link { - grid-area: title; - max-width: max-content; - } - &__icon { - grid-area: icon; - width: 2em; - height: 2em; - margin-top: -0.375em; - path { - fill: #9A6BEA; - } - } - &__title { - font-weight: 700; - font-size: 1.2em; - } - &__summary { - line-height: 1.4; - grid-area: summary; - max-width: 70ch; - } - } - .commit { - display: grid; - 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 { - grid-area: title; - max-width: max-content; - } - &__icon { - grid-area: icon; - width: 2em; - height: 2em; - margin-top: 0.325em; - path { - fill: #8B949E; - } - } - &__title { - font-weight: 700; - - } - &__summary { - line-height: 1.4; - grid-area: summary; - max-width: 70ch; - } - } - } - #support { - .title:before {content: '#support';} - .container > p { - line-height: 1.4; - font-size: 1.2em; - } - } - b {font-weight: 700;} -} diff --git a/assets/scss/content/work.scss b/assets/scss/content/work.scss deleted file mode 100644 index f7f81a7..0000000 --- a/assets/scss/content/work.scss +++ /dev/null @@ -1,290 +0,0 @@ -#work { - overflow: hidden; - .title { - font-size: 2em; - font-weight: 700; - line-height: 1.2; - margin-top: 2rem; - margin-bottom: 2em; - &:before { - font-size: 1em; - font-weight: 700; - color: #ddd; - position: absolute; - top: -1em; - left: 0em; - z-index: -1; - } - position: relative; - a { - position: absolute; - left: 0; - top: -1em; - color: #ddd; - width: 100%; - } - } - #praise .title:before { - content: '#praise'; - } - #process .title:before { - content: '#process'; - } - #timeline .title:before { - content: '#timeline'; - } - #hireme .title:before { - content: '' - } - #process { - .title { - strong { - color: #06f; - font-weight: 900; - } - em { - color: green; - font-style: italic; - } - br { - @media (max-width: 24.375em) { - display: none - } - } - } - .subtitle { - font-size: 1.6em; - margin-bottom: 1em; - } - .blurb { - font-size: 1.2em; - line-height: 1.4; - } - } - #interstitial { - padding: 3em 0; - @media (min-width: 35em) { - padding-top: 4em; - } - background: #eee; - box-shadow: - 0px 4px 4px -4px inset rgba(0,0,0,0.5), - 0px -4px 4px -4px inset rgba(0,0,0,0.5) - ; - strong { - color: #06f; - font-weight: 900; - } - em { - color: green; - font-style: italic; - } - .container { - display: grid; - place-items: center; - text-align: center; - } - .title { - margin: 0; - margin-bottom: 0.7em; - } - .blurb { - font-size: 1.25em; - margin-bottom: 2em; - max-width: 45ch; - line-height: 1.4; - } - .button { - } - } - .timeline { - position: relative; - max-width: 60em; - margin: 0 auto; - &::before { - content: '?'; - position: absolute; - bottom: -4rem; - left: 1.25em; - font-size: 2em; - font-weight: 900; - color: #ddd; - } - &::after { - content: ''; - position: absolute; - width: 0.5rem; - background: #ddd; - top: -1.5rem; - bottom: -5rem; - left: 0.5rem; - z-index: -1; - border-radius: 100em; - } - &-item { - padding: 1em 0; - position: relative; - margin-bottom: 2em; - @media (min-width: 30em) { - display: grid; - grid-template-areas: - "dates title" - "at title" - "readmore summary" - ; - grid-template-columns: 20ch 1fr; - grid-template-rows: auto auto auto; - } - margin-left: 2.5rem; - &::before { - content: " "; - position: absolute; - top: 0.75rem; - width: 2rem; - height: 2rem; - z-index: 1; - left: -3rem; - border-width: 1rem; - border-radius: 100em; - background-color: #ddd; - border: 0.25em solid #ddd; - } - &.worktrilogy::before { - background: url("/images/logos/trilogy.png"); - background-size: cover; - } - &.workmastodon::before { - background: url("/images/logos/mastodon.png"); - background-size: cover; - background-color: #2b90d9; - - } - &.workpixelfed::before { - background: url("/images/logos/pixelfed.svg"); - background-size: cover; - background-color: pink; - } - &.workgo-fed::before { - background: url("/images/logos/go-fed.png"); - background-size: cover; - } - &.workeqin::before { - background: url("/images/logos/eqin.png"); - background-size: cover; - } - &.workuab:before { - background: url("/images/logos/uab.svg"); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - background-color: white; - } - &__daterange { - margin-left: 0em; - flex-basis: 10ch; - grid-area: dates; - text-transform: uppercase; - } - &__at { - display: block; - margin-bottom: 0.5em; - } - &__title { - font-size: 1.4em; - font-weight: 700; - margin-bottom: 0.5em; - margin-top: 0.5em; - align-self: center; - grid-area: title; - @media (min-width: 30em) { - margin-top: -0.125em; - } - } - &__summary { - flex-basis: 30ch; - grid-area: summary; - line-height: 1.4; - margin-bottom: 0.5em; - } - &__readmore { - width: max-content; - height: min-content; - grid-area: readmore; - border-radius: 0.25em; - display: block; - } - } - .workeqin, .workuab, .workpixelfed { - .timeline-item__readmore {display: none;} - } - .you { - &:before { - background: green; - } - strong { - font-weight: 700; - color: green; - } - } - } - #cta { - .container { - display: flex; - flex-flow: column; - align-items: start; - } - .title { - font-size: 1.4em; - font-weight: 700; - margin-bottom: 1.4em; - &:before {content: ''} - } - .blurb { - line-height: 1.4; - margin-bottom: 1.4em; - strong { - font-weight: 700; - color: green; - } - } - .buttons { - margin-top: 1em; - display: grid; - grid-template-columns: 1fr; - width: 100%; - font-size: 1.25em; - @media (min-width: 33.75em) { - grid-template-columns: auto auto 1fr; - .button.resume { - grid-row: 2; - } - .button.email { - width: 100%; - grid-column: span 2; - } - } - @media (min-width: 43.25em) { - grid-template-columns: auto auto auto 1fr; - width: unset; - .button { - width: max-content; - } - .button.resume { - grid-row: unset; - } - .button.email { - width: max-content; - grid-column: span 1; - } - } - gap: 1em; - svg { - width: 1.25em; - height: 1.25em; - path { - fill: currentColor; - } - } - } - } -} \ No newline at end of file diff --git a/assets/scss/layouts/_default/single.scss b/assets/scss/layouts/_default/single.scss index d227493..a596314 100644 --- a/assets/scss/layouts/_default/single.scss +++ b/assets/scss/layouts/_default/single.scss @@ -1,46 +1,5 @@ -.page .title { - font-family: serif; - margin-top: 2em; -} - -.page .summary { - font-size: 1.25em; - font-family: serif; -} - -.page .wordcount { - margin: 0; -} - -.page .tags-title { - font-variant: small-caps; - font-weight: bold; - margin: 0.5em 0; -} - -.page .tags { - display: flex; - flex-flow: row wrap; - gap: 0.5em; - list-style: none; - margin-left: 0; - li { - margin: 0; +main.single { + .page-title, .page-summary, .content .container > * { + max-width: 80ch; } - a { - display: block; - padding: 0.5rem; - background: #cde; - border-radius: 6px; - &:before { - content: "#" - } - } - -} - -.page .toc-title { - margin-block-end: 0.5em; - font-weight: bold; - font-variant: small-caps; } \ No newline at end of file diff --git a/assets/scss/layouts/blog/list.scss b/assets/scss/layouts/blog/list.scss index c4374b7..8cef3c0 100644 --- a/assets/scss/layouts/blog/list.scss +++ b/assets/scss/layouts/blog/list.scss @@ -1,7 +1,61 @@ -.list-item__title { - font-size: 1.5em; -} - -.list-item__summary { - font-size: 1em; +main.blog.list { + padding-block: 3rem; + .categories { + ul { + list-style: none; + padding-inline-start: 0; + li {margin-block: 0.5rem;} + } + } + .posts { + display: grid; + gap: 2rem; + } + .pagination { + list-style: none; + padding: 0; + display: flex; + gap: 1rem; + .page-item { + display: inline-block; + background: var(--color-highlight-weak); + &:hover { + background: var(--color-highlight); + } + border-radius: 100rem; + &.active { + background: unset; + font-weight: bold; + } + &.disabled { + display: none; + } + .page-link { + display: inline-grid; + place-items: center; + text-decoration: none; + width: 1.5rem; + height: 1.5rem; + } + } + } + @media (min-width: 60rem) { + display: grid; + grid-template-areas: + "header header" + "categories posts"; + gap: 2rem 4rem; + grid-template-columns: auto 1fr; + width: 100%; + > header { + grid-area: header; + } + .categories { + grid-area: categories; + } + .posts { + grid-area: posts; + .h-entry {max-width: 40rem;} + } + } } \ No newline at end of file diff --git a/assets/scss/layouts/blog/single.scss b/assets/scss/layouts/blog/single.scss index 53387c4..4792b75 100644 --- a/assets/scss/layouts/blog/single.scss +++ b/assets/scss/layouts/blog/single.scss @@ -1,72 +1,115 @@ -.blog .post .title { - font-family: serif; - margin-top: 2em; -} - -.blog .post .summary { - font-size: 1.25em; - font-family: serif; -} - -.blog .post .wordcount { - margin: 0; -} - -.blog .post .tags-title { - font-variant: small-caps; - font-weight: bold; - margin: 0.5em 0; -} - -.blog .post .tags { - display: flex; - flex-flow: row wrap; - gap: 0.5em; - list-style: none; - margin-left: 0; - li { - margin: 0; - } - a { - display: block; - padding: 0.5rem; - background: #cde; - border-radius: 6px; - &:before { - content: "#" +main.blog.single { + --max-container-width: 80ch; + line-height: 1.6; + padding-bottom: 2rem; + article.h-entry { + > header { + background: var(--color-card-background); + color: var(--color-card-text); + padding-block: 1rem; + .entry-title { + margin-block-start: 1rem; + font-family: serif; + } + .entry-summary { + font-family: serif; + } + .h-card { + font-style: normal; + display: inline-block; + a { + display: grid; + grid-template-columns: auto 1fr; + gap: 0.5rem; + align-items: center; + text-decoration: none; + } + img.logo { + width: 2rem; + height: 2rem; + border-radius: 100rem; + } + } + time.dt-published { + display: block; + } + #TableOfContents > ul { + padding-left: 1rem; + } + } + section.e-content { + display: grid; + grid-template-columns: 1em 1fr 1em; + padding-block: 1rem; + gap: 1rem 0; + max-width: 80ch; + margin: 0 auto; + @media (min-width: 55ch) { + grid-template-columns: minmax(1em, 1fr) minmax(45ch, 70ch) minmax(1em, 1fr); + } + > * { + grid-column: 2; + margin: 0; + } + > img, > figure { + grid-column: 1 / span 3; + width: 100%; + img { + width: 100%; + display: block; + } + figcaption { + padding: 1rem; + background: var(--color-card-background); + color: var(--color-card-text); + font-size: 0.8em; + } + } + > blockquote { + padding-inline-start: 0.25rem; + border-inline-start: 0.25rem solid var(--color-highlight); + p:only-child {margin: 0;} + } + .has-pullquote { + @mixin pullquote { + content: attr(data-pullquote); + font-family: serif; + display: block; + margin-block-end: 1rem; + font-size: 1.2rem; + color: var(--color-highlight); + } + &.left { + &.before:before, + &.after:after { + @include pullquote; + } + } + &.right { + &.before:before, + &.after:after { + @include pullquote; + } + } + @media (min-width: 40rem) { + &.left { + &.before:before, + &.after:after { + float: left; + margin-inline-end: 1rem; + max-width: 24ch; + } + } + &.right { + &.before:before, + &.after:after { + float: right; + margin-inline-start: 1rem; + max-width: 24ch; + } + } + } + } } } -} - -.blog .toc-title { - margin-block-end: 0.5em; - font-weight: 900; - text-transform: uppercase; - color: var(--ui-text-muted); -} - -.blog .post .content { - margin-block: 4em; -} - -@media (min-width: 75ch) { - .blog .post .content { - display: grid; - grid-template-columns: 1fr minmax(45ch, 75ch) 1fr; - } - .blog .post .content > * { - grid-column: 2; - margin-top: 0; - } - .blog .post .content > figure { - grid-column: 1 / span 3; - margin: 2em 0; - } - .blog .post .content figcaption { - max-width: 78ch; - margin: 0 auto; - } - .blog .post .content > hr { - width: 10ch; - } } \ No newline at end of file diff --git a/assets/scss/layouts/index.scss b/assets/scss/layouts/index.scss index 6440f60..b480956 100644 --- a/assets/scss/layouts/index.scss +++ b/assets/scss/layouts/index.scss @@ -1,252 +1,206 @@ main.index { - flex-grow: 0; - width: 100%; - max-width: var(--container-width, 60rem); - margin: 0 auto; - margin-bottom: 4rem; - @include box-shadow; - article:not(.h-card) { - padding: 1em; - > .title { + + text-transform: lowercase; + + --padding-inline: 1rem; + --gap: 2rem; + --border-radius: 0.5rem; + + display: grid; + gap: var(--gap, 1rem); + + padding-inline: 0; + padding-block-end: var(--gap, 2rem); + + #about {display: contents;} + + #hcard { + background: var(--color-card-background); + color: var(--color-card-text); + border-radius: var(--border-radius); + --avatar-size: 7.5rem; + + > .section-title { + margin-block: 0; + padding-block: 1rem; + padding-inline: var(--padding-inline, 1rem); + } + + > header { + background-image: url("/images/sunset.jpg"); + background-size: cover; + background-position: center; + width: 100%; + max-height: 20rem; + aspect-ratio: 2; + + position: relative; + .u-photo { + position: absolute; + top: calc(100% - var(--avatar-size) / 2); + left: var(--padding-inline, 1rem); + width: var(--avatar-size, 7.5rem); + height: var(--avatar-size, 7.5rem); + aspect-ratio: 1; + background: #ddd; + border: 0.5rem solid #ddd; + box-sizing: border-box; + border-radius: 1rem; + } + margin-block-end: calc(var(--avatar-size) / 2); + + } + + .info { + padding-inline: var(--padding-inline, 1rem); + } + + .p-name { font-size: 1.5rem; - font-variant: small-caps; + font-weight: bold; + margin-block-start: calc(var(--avatar-size) / 2 + 0.5rem); + margin-block-end: 0; } - .section-title { - font-size: 1.25rem; - } - } - article#quotes { - background: #ddd; - > .title { - - } - } - - article#mastodon { - background: #3088d4; - color: white; - padding: 2em 1em; - a { + .u-uid { + font-family: monospace; + font-size: 1rem; display: inline-block; text-decoration: none; - background: white; - padding: 1rem; - color: black; + } + + .p-note { + margin-block: 1rem; + } + + #contact { + + margin-block: 3rem; + padding-inline: var(--padding-inline, 1rem); + > .section-title { + margin-block-start: 2rem; + margin-block-end: 1rem; + } + } + + #links { + padding-inline: var(--padding-inline, 1rem); + padding-block-end: 3rem; + } + + } + + #quotes { + padding-inline: var(--padding-inline, 1rem); + padding-block: 1rem; + margin-block-start: var(--gap, 1rem); + background: var(--color-card-background); + color: var(--color-card-text); + border-radius: var(--border-radius); + > .section-title { + margin-block-start: 0; + margin-block-end: 2rem; + } + } + + .metadata { + dt { + font-variant: small-caps; font-weight: bold; - border-radius: 10px; - border: 1px solid rgba(0,0,0,0.25); + } + dd { + margin-inline-start: 0; + } + display: flex; + flex-flow: column; + gap: 1rem; + } + + .quote { + margin-inline: 0; + blockquote { + margin: 0; + border-inline-start: 4px solid var(--color-primary-highlight); + padding-inline-start: 0.5rem; + } + cite { + padding-inline-start: calc(0.5rem + 4px); + &:before { + content: '— '; + } } } - article#now { - background: white; - } - article#todo { - background: white; + #deeds { + background: var(--color-card-background); + color: var(--color-card-text); + border-radius: var(--border-radius); + padding-inline: var(--padding-inline, 1rem); + padding-block: 1rem; } - @media (min-width: 40rem) { - display: grid; - grid-template-columns: repeat(12, 1fr); - #about { - grid-column: 1 / span 12; - display: grid; - grid-template-columns: 20rem 1fr; - width: 100%; + #done { + > .section-title { + margin-block-start: 0; + margin-block-end: 1rem; } - article.h-card { - .metadata { - padding-inline: 0.75em; + #mastodon { + img { + max-width: 100%; } } - #deeds { - grid-column: 1 / span 12; - display: grid; - grid-template-columns: 1fr 1fr; - } - article#mastodon { - grid-column: 1 / span 2; - display: grid; - grid-template-columns: 1fr auto auto auto 1fr; - gap: 1em; - svg { - grid-column: 2; - place-self: center; - } - .title { - grid-column: 3 / span 2; - font-size: 2rem; - margin: 0; - place-self: center start; + } + + #updates { + background: var(--color-card-background); + color: var(--color-card-text); + border-radius: var(--border-radius); + padding-inline: var(--padding-inline, 1rem); + } + + #activity { + header { + display: flex; + h2 { + display: inline-block; } + align-items: end; p { - grid-column: 2 / span 2; - font-size: 1.25rem; - max-width: 35ch; - margin: 0; - place-self: center start; + margin-block-end: 1.5rem; } - a { - grid-column: 4; - grid-row: 2; - place-self: center start; - } - } - article#now { - grid-column: 1 / span 1; - } - article#todo { - grid-column: 2 / span 1; + justify-content: space-between; } } @media (min-width: 60rem) { - margin-top: 1rem; - #about { + --gap: 1rem; + padding-inline: 2rem; + grid-template-areas: + "hcard deeds" + "quotes deeds" + "updates updates"; + grid-template-columns: 20rem 1fr; + grid-template-rows: auto auto 1fr; + #hcard { + grid-area: hcard; + } + #quotes { + grid-area: quotes; + margin-block-start: 0; } #deeds { - - } - article#now { - padding: 2em; - height: 320px; - } - article#todo { - padding: 2em; + grid-area: deeds; } + #updates { + grid-area: updates; + } } - // @media (min-width: 100rem) { - // max-width: 100rem; - // display: grid; - // grid-template-columns: 60rem 40rem; - // margin-top: 2rem; - - // #about { - // grid-column: 1; - // } - // #deeds { - // grid-column: 2; - // display: grid; - // grid-template-columns: 1fr; - // grid-template-rows: auto auto 1fr; - // } - // article#now { - // grid-column: 1; - // } - // article#todo { - // grid-column: 1; - // } - // } - - figure.quote { - border: 0; - blockquote { - padding-inline-start: 0; - &:before { - inset-inline-start: 0; - } - } + @media (min-width: 1200px) { + padding-inline: 3rem; + grid-template-areas: + "hcard deeds updates" + "quotes deeds updates"; + grid-template-columns: 20rem 1fr 20rem; } - - #wiki { - max-width: 120em; - margin-inline: auto; - h1 { - margin-bottom: 0.25em; - font-family: serif; - border-bottom: 1px solid currentColor; - padding-bottom: 1rem; - } - h2 { - font-weight: normal; - border-bottom: 1px solid currentColor; - padding-bottom: 1rem; - font-family: serif; - } - #TableOfContents { - display: contents; - &::before { - content: "Contents"; - font-weight: bold; - } - } - } - - .h-card { - --border-radius: 0px; - border-radius: var(--border-radius, 10px); - background: #eee; - h2 { - text-align: center; - font-size: 1em; - margin: 0em; - padding: 1rem; - } - header { - aspect-ratio: 2; - background-image: url('/images/sunset.jpg'); - background-size: cover; - background-position: center; - position: relative; - border-top-left-radius: var(--border-radius, 10px); - border-top-right-radius: var(--border-radius, 10px); - img { - border-radius: 12px; - background-color: #ddd; - padding: 10px; - width: 120px; - height: 120px; - position: absolute; - left: calc(50% - 60px); - top: calc(100% - 60px); - } - margin-bottom: 60px; - } - .info { - text-align: center; - p { - margin: 0; - line-height: 1; - } - .p-name { - font-weight: bold; - text-align: center; - font-size: 1.5rem; - line-height: 2rem; - } - .u-uid { - text-decoration: none; - font-family: monospace; - color: inherit; - font-size: 1.25em; - display: inline-block; - line-height: 24px; - } - .p-note { - margin-bottom: 1rem; - line-height: 1.5; - } - } - .metadata { - padding-block-end: 2rem; - display: grid; - gap: 1em; - .field { - display: grid; - place-items: start; - gap: 0.5em; - padding: 0 1em; - } - dt { - font-weight: bold; - font-variant: small-caps - } - dd { - - } - } - } - } \ No newline at end of file diff --git a/assets/scss/layouts/partials/h-entry.scss b/assets/scss/layouts/partials/h-entry.scss new file mode 100644 index 0000000..1c96fff --- /dev/null +++ b/assets/scss/layouts/partials/h-entry.scss @@ -0,0 +1,24 @@ +.h-entry { + .tags { + padding-inline-start: 0; + list-style: none; + display: flex; + flex-flow: row wrap; + gap: 1rem; + li { + display: inline; + } + a { + background: var(--color-highlight-weak); + text-decoration: none; + font-family: monospace; + padding: 0.25rem; + &:before { + content: '#'; + } + &:hover { + background: var(--color-highlight); + } + } + } +} \ No newline at end of file diff --git a/assets/scss/layouts/partials/site-footer.scss b/assets/scss/layouts/partials/site-footer.scss index b982b13..e21cb2f 100644 --- a/assets/scss/layouts/partials/site-footer.scss +++ b/assets/scss/layouts/partials/site-footer.scss @@ -1,94 +1,11 @@ .site-footer { - background: #fff; - color: #212121; - padding: 2em 0 calc(2em + 4em); - @media (min-width: 960px) { - padding: 2em 0; - } + --padding-block: 2rem; hr { display: none; } - .container { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - gap: 2em; - } - .external-links { - margin: 0 auto; - display: grid; - grid-template-columns: repeat(6,1fr); - gap: 1em; - margin-top: 2rem; - a { - width: 2em; - aspect-ratio: 1; - display: flex; - justify-content: center; - align-items: center; - text-decoration: none; - color: inherit; - } - i {font-size: 1.6em;} - } - .footer-copy { - font-family: monospace; - width: 100%; - h1 { - font-weight: 700; - font-size: 1.21em; - margin-bottom: 1em; - } - h2 { - font-weight: 700; - font-size: 1.1em; - margin-bottom: 0.7rem; - margin-top: 1rem; - } - h3 { - font-weight: 700; - font-size: 1em; - margin-bottom: 0.5rem; - margin-top: 1rem; - } - ul { - display: flex; - flex-flow: column; - gap: 0.5rem; - } - p { - line-height: 1.4; - max-width: 55ch; - } - a h3 { - display: inline-block; - } - } - .git-lastcommit { - margin-bottom: 0.7rem; - display: grid; - grid-template-areas: - "time time" - "hash subj"; - grid-template-columns: max-content 1fr; - time { - grid-area: time; - display: flex; - justify-content: start; - align-items: center; - padding: 0.25rem 0; - } - p { - grid-area: subj; - padding: 1em; - } - a { - grid-area: hash; - display: flex; - justify-content: center; - align-items: center; - border-radius: 0.25rem; - font-family: monospace; - } - } + background: var(--color-text); + color: var(--color-background); + padding-block-start: var(--padding-block, 2rem); + padding-bottom: calc(var(--nav-height, 4rem) + var(--padding-block, 2rem)); + a {word-wrap: break-word;} } \ No newline at end of file diff --git a/assets/scss/layouts/partials/site-header.scss b/assets/scss/layouts/partials/site-header.scss index 631c52e..4bde1f4 100644 --- a/assets/scss/layouts/partials/site-header.scss +++ b/assets/scss/layouts/partials/site-header.scss @@ -1,136 +1,151 @@ .site-header { - z-index: 10; - box-shadow: 0px 2px 2px rgba(0,0,0,0.2); - a { + text-transform: lowercase; + padding-block: 1rem; + background: var(--color-background); + .container { + height: 4rem; + display: grid; + place-items: center start; + grid-template-columns: 1fr auto; + } + + .support { + --icon-size: 2rem; + svg { + font-size: var(--icon-size, 2rem); + } + span { + display: none; + } + + padding: 1rem; + display: grid; + place-items: center; + background: var(--color-accent); + color: var(--color-text); + text-decoration: none; + &:hover { + background-color: var(--color-button-hover-background); + color: var(--color-button-hover-text); + } + border-radius: 0.75rem; + + @media (min-width: 400px) { + span {display: unset;} + grid-template-columns: var(--icon-size, 1rem) auto; + width: unset; + gap: 1rem; + padding-inline: 1rem; + } + } + + + + .site-masthead { + display: inline-flex; + gap: 1rem; text-decoration: none; color: inherit; - &:link { - + font-weight: bold; + img { + width: 3rem; + height: 3rem; } - - &:visited { - + p { + margin: 0; + padding: 1rem; + border-radius: 0; + transition-duration: 0.4s; } - - &:focus { - background: var(--primary-accent-transparent); - outline: none; - } - &:hover { - - } - - &:active { - + p { + background-color: var(--color-highlight-weak); + color: var(--color-highlight); + border-radius: 100rem; + } } } - .container { - display: flex; - flex-flow: row wrap; - justify-content: space-between; - } - background: var(--ui-background); - color: var(--ui-text); - -} - -.site-masthead { - display: flex; - flex-flow: row-reverse; - align-items: center; - padding: 1em 0; - gap: 1em; - flex: 1; - @media (min-width: $container-width) { - flex: unset; - } -} -.site-icon { - width: 2em; - height: 2em; - border-radius: 100em; -} -.site-title { - margin: 0; - line-height: 1; - font-size: 1em; -} - -.site-nav { - flex-grow: 1; - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - background: var(--ui-background); - color: var(--ui-text-muted); - z-index: 2; - ul { - list-style: none; - height: var(--nav-height); - max-width: $container-width; - margin: 0 auto; - display: flex; - justify-content: space-around; - li { + .site-nav { + --icon-size: 3rem; + --icon-size-active: 3rem; + --icon-size-hover: 3rem; + height: var(--nav-height, 4rem); + padding-block-end: 0.5rem; + ul { + list-style: none; + padding-inline-start: 0; margin-block: 0; - flex: 1; - border-bottom: 4px solid var(--ui-background-track); + display: flex; + justify-content: space-around; + height: 100%; + } + li { + display: contents; &.active { - color: var(--ui-text-bold); - border-bottom: 6px solid var(--primary-accent); - font-weight: 700; - } - a { - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - height: 100%; + font-weight: bold; + color: var(--color-highlight); svg { - width: 1em; - height: 1em; - } - &:link { - - } - - &:visited { - - } - - &:focus { - background: var(--primary-accent-transparent); - padding: unset; - border-radius: unset; - outline: none; - } - - &:hover { - - } - - &:active { - + font-size: var(--icon-size-active, 2rem) } } } + a { + text-decoration: none; + color: inherit; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + width: var(--nav-height); + transition-duration: var(--transition-duration); + svg { + transition-duration: var(--transition-duration); + padding: 0.0rem 0.5rem; + font-size: var(--icon-size, 2rem); + border-radius: 100rem; + } + span { + line-height: 1; + } + &:hover { + color: var(--color-highlight); + svg { + font-size: var(--icon-size-hover, 2.5rem); + background-color: var(--color-highlight-weak); + } + } + } + background-color: var(--color-background); + color: var(--color-text); + position: fixed; + z-index: 10; + bottom: 0; + left: 0; + width: 100%; + box-shadow: 0 -1px 3px rgba(0,35,54,0.12), 0 -1px 2px rgba(0,35,54,0.24); } - box-shadow: 0px -2px 2px rgba(0,0,0,0.2); - @media (min-width: $container-width) { - position: unset; - bottom: unset; - left: unset; - flex-grow: unset; - width: 20em; - box-shadow: unset; + @media (min-width: 768px) { + --nav-height: 4rem; + .site-nav { + position: unset; + grid-area: nav; + display: inline-flex; + background: unset; + width: unset; + place-self: end; + box-shadow: unset; + padding-block-end: unset; + ul {gap: 1rem;} + } + .container { + grid-template-columns: auto 1fr auto; + grid-template-areas: "mast nav button"; + gap: 1rem; + } + } } -@media (min-width: $container-width) { - .site-header { - position: sticky; - top: 0; - } +body { + --nav-height: 5rem; } \ No newline at end of file diff --git a/assets/scss/layouts/shortcodes/figquote.scss b/assets/scss/layouts/shortcodes/figquote.scss deleted file mode 100644 index 574030f..0000000 --- a/assets/scss/layouts/shortcodes/figquote.scss +++ /dev/null @@ -1,27 +0,0 @@ -figure.quote { - border: 1px solid currentColor; - padding: 1rem; - margin-block: 1rem; - font-family: serif; - position: relative; - blockquote { - border: 0; - margin-block-end: 0; - &:before { - content: '“'; - position: absolute; - inset-block-start: 0.25rem; - inset-inline-start: 0.5rem; - font-size: 2rem; - } - } - figcaption { - font-size: 0.8em; - cite { - &:before { - content: '— '; - - } - } - } -} \ No newline at end of file diff --git a/assets/scss/layouts/shortcodes/hcard-full.scss b/assets/scss/layouts/shortcodes/hcard-full.scss deleted file mode 100644 index 689ed2f..0000000 --- a/assets/scss/layouts/shortcodes/hcard-full.scss +++ /dev/null @@ -1,99 +0,0 @@ -.h-card.full { - --border-radius: 10px; - height: min-content; - border-radius: var(--border-radius, 10px); - background: #eee; - h2 { - text-align: center; - font-size: 1em; - margin: 0em; - padding: 1rem; - } - header { - aspect-ratio: 2; - background-image: url('/images/sunset.jpg'); - background-size: cover; - background-position: center; - position: relative; - border-top-left-radius: var(--border-radius, 10px); - border-top-right-radius: var(--border-radius, 10px); - img { - border-radius: 12px; - background-color: #ddd; - padding: 10px; - width: 120px; - height: 120px; - position: absolute; - left: calc(50% - 60px); - top: calc(100% - 60px); - } - margin-bottom: 60px; - } - .info { - text-align: center; - p { - margin: 0; - } - .p-name { - font-weight: bold; - text-align: center; - font-size: 1.5em; - } - .u-uid { - text-decoration: none; - font-family: monospace; - color: inherit; - font-size: 1rem; - } - .p-note { - margin-bottom: 1em; - } - } - .metadata { - padding-block-end: 2rem; - display: grid; - max-width: calc(33ch + 1em); - margin: 0 auto; - gap: 1em; - .field { - display: grid; - place-items: start; - gap: 0.5em; - padding: 0 1em; - } - dt { - font-weight: bold; - font-variant: small-caps - } - dd { - - } - } - @media (min-width: 40em) { - display: grid; - grid-template-columns: 20em 1fr; - grid-template-areas: - "header meta" - "info meta"; - header { - width: 20em; - grid-area: header; - border-top-right-radius: 0; - } - .info { - grid-area: info; - } - .metadata { - grid-area: meta; - padding-block-start: 2em; - max-width: unset; - width: 100%; - padding-left: 2em; - background: #e6e6e6; - border-top-right-radius: var(--border-radius, 10px); - border-bottom-right-radius: var(--border-radius, 10px); - } - max-width: 40em; - margin: 0 auto; - } -} \ No newline at end of file diff --git a/assets/scss/layouts/taxonomy/category.scss b/assets/scss/layouts/taxonomy/category.scss new file mode 100644 index 0000000..912fde3 --- /dev/null +++ b/assets/scss/layouts/taxonomy/category.scss @@ -0,0 +1,8 @@ +main.category { + .entries { + .container { + display: grid; + gap: 2rem; + } + } +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 7f29a5f..91bb52c 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,56 +1,22 @@ -@import "base/reset.scss"; @import "base/variables.scss"; @import "base/mixins.scss"; -@import "base/sections.scss"; -@import "base/text.scss"; +@import "base/layout.scss"; @import "base/links.scss"; @import "libraries/photoswipe.scss"; -@import "components/pullquote.scss"; -@import "components/button.scss"; -@import "components/intro.scss"; -@import "components/praise.scss"; -@import "components/devices.scss"; -@import "components/terminal.scss"; - @import "layouts/partials/site-header.scss"; @import "layouts/partials/site-footer.scss"; @import "layouts/partials/breadcrumbs.scss"; -@import "layouts/shortcodes/figquote.scss"; -@import "layouts/shortcodes/hcard-full.scss"; - @import "layouts/_default/single.scss"; @import "layouts/_default/list.scss"; -@import "layouts/blog/single.scss"; -@import "layouts/blog/list.scss"; - -@import "components/table-of-contents"; @import "layouts/index.scss"; -@import "content/work.scss"; -@import "content/code.scss"; -@import "content/blog.scss"; +@import "layouts/blog/list.scss"; +@import "layouts/blog/single.scss"; -@media (min-width: 2500px) { - main { - overflow: hidden; - position: relative; - } - main:before { - content: '...what, you actually use your browser at this width? god, what a waste of space...'; - position: fixed; - left: 5%; - bottom: 1em; - max-width: 40ch; - } - main:after { - content: 'although, i kinda want to create a website that actually makes use of it... one day, maybe?'; - position: fixed; - right: 5%; - bottom: 1em; - max-width: 40ch; - } -} \ No newline at end of file +@import "layouts/partials/h-entry.scss"; + +@import "layouts/taxonomy/category.scss"; \ No newline at end of file diff --git a/content/_index.html b/content/_index.html new file mode 100644 index 0000000..94f2af6 --- /dev/null +++ b/content/_index.html @@ -0,0 +1,161 @@ ++++ +title = "Abdullah Tarawneh" +summary = "Abdullah Tarawneh is an information architect, designer, developer, photographer, and all-around creative, especially for the web." +tags = ["abdullah", "tarawneh", "birmingham", "hoover", "alabama", "design", "designer", "web", "developer", "freelance", "freelancer", "photography", "photographer", "technical writer", "creative", "consultant"] +layout = "custom_html" ++++ + +
+
+
+

h-card

+
+ +
+
+

Abdullah Tarawneh

+ abdullahtarawneh.com +

More commonly known as a or trwnh. Nonbinary ace (they/them)

+
+
+

Contact me

+ +
+ +
+ +
+

Things people have said about me

+
+
+ It's scary how much you know. +
+
a former classmate
+
+
+
+ You're the first person I've met that keeps a spreadsheet of their lightbulbs. +
+
an electrician
+
+
+
+ VERY MUCH not garbage [...] a worthwhile human +
+
a social networking acquaintance
+
+
+
+ Honestly, I trust your judgement more than I trust my own. +
+
a professional colleague
+
+
+ +
+ +
+ +
+

Notable work

+
+

Mastodon documentation

+ mastodon documentation +

In August 2019, a offered their services to completely revamp the documentation for Mastodon, while also writing or rewriting significant portions of it. From the beginning, they developed an information architecture based on the various user personas that would be reading the documentation -- end users, administrators, contributors, client developers, and protocol implementers. a developed each persona into a section with its own narrative journey. Following this, they wrote out the missing parts of the documentation.

+

+ a was contracted again in late 2022 to help update the content of the documentation for the monumentous v4.0 update of Mastodon.

+ Read more > +
+
+ +
+

Present involvement

+
+

social web so-called "expert"

+

a has been active in the world of open source and free software since at least 2017. As a power user, a quickly got involved in discussions on the GitHub issue tracker for Mastodon, Pixelfed, and other fediverse projects. a is a member of the Social Web Community Group at the W3C, and is also active on the SocialHub forum for the ActivityPub community.

+ +
+

Fediverse Enhancement Proposals

+ +
+
+
+ +
+

Future directions

+
+

untitled social app

+

For the past few years, I've been developing a theoretical framework for unified social communications across various protocols. I'd like to collect my ideas into writings that will be published on this site or elsewhere.

+
+
+ +
+ +
+
+

Latest news

+

I am looking for work! View my work page for more about what I can do.

+
+ +
+

Latest changes

+
    +
  • +

    June 2024: New site redesign!

    +
  • +
+
+ +
+
+

Latest posts

+

See more posts

+
+ {{< index/latest-posts 7 >}} +
+
+ +
\ No newline at end of file diff --git a/content/_index.md b/content/_index.md deleted file mode 100644 index 7895ede..0000000 --- a/content/_index.md +++ /dev/null @@ -1,57 +0,0 @@ -+++ -title = "Abdullah Tarawneh" -summary = "**Abdullah Tarawneh** is an information architect, designer, developer, photographer, and all-around creative, especially for the web." -tags = ["abdullah", "tarawneh", "birmingham", "hoover", "alabama", "design", "designer", "web", "developer", "freelance", "freelancer", "photography", "photographer", "technical writer", "creative", "consultant"] -+++ - -## h-card - -{{< hcard-full >}} - -## Professional work - -Main page: [Work](/work) - -Abdullah Tarawneh is currently available for work. - -### Mastodon documentation - -Main page: [Mastodon](/work/mastodon) - -In August 2019, Abdullah Tarawneh offered their services to completely revamp the documentation for Mastodon, while also writing or rewriting significant portions of it. From the beginning, they developed an information architecture based on the various user personas that would be reading the documentation -- end users, administrators, contributors, client developers, and protocol implementers. Abdullah Tarawneh developed each persona into a section with its own narrative journey. Following this, they wrote out the missing parts of the documentation. - -Abdullah Tarawneh was contracted again in late 2022 to help update the content of the documentation for the monumentous v4.0 update of Mastodon. - -### Senior Technical Writer / Product Knowledge Curator at Trilogy - -Main page: [Trilogy](/work/trilogy) - -From May 2021 through December 2021, Abdullah Tarawneh was contracted as a Product Knowledge Curator for Trilogy. In this role, they managed the knowledge bases of numerous products all at once. Being responsible for several products under the banner of Central Support meant that they had to quickly and rapidly learn new products with limited information. They were tasked with analyzing customer support tickets one by one, in order to document the problems and solutions faced by actual customers. The resulting analysis would be used to write a clear and concise solution article, and the troubleshooting steps involved in reaching that solution would be compiled across several tickets into a troubleshooting article that would aid agents in disambiguating similar issues. Based on these articles, Abdullah Tarawneh created training units within a learning management system consisting of either a test or a task based on each article/ticket pair. - -## Free software contributions - -Main page: [Code](/code) - -Abdullah Tarawneh has been active in the world of open source and free software since at least 2017. - -### Involvement with the fediverse - -As a power user, Abdullah Tarawneh quickly got involved in discussions on the GitHub issue tracker for Mastodon, Pixelfed, and other fediverse projects. - -## Quotes about the subject - -{{< figquote cite="a former classmate" >}} -It's scary how much you know. -{{< /figquote >}} - -{{< figquote cite="an electrician" >}} -You're the first person I've met that keeps a spreadsheet of their lightbulbs. -{{< /figquote >}} - -{{< figquote cite="a social networking acquaintance" >}} -VERY MUCH not garbage [...] a worthwhile human -{{< /figquote >}} - -{{< figquote cite="a professional colleague" >}} -Honestly, I trust your judgement more than I trust my own. -{{< /figquote >}} \ No newline at end of file diff --git a/content/authors/Abdullah Tarawneh/_index.md b/content/authors/Abdullah Tarawneh/_index.md new file mode 100644 index 0000000..3c9f74c --- /dev/null +++ b/content/authors/Abdullah Tarawneh/_index.md @@ -0,0 +1,6 @@ ++++ +title = "Abdullah Tarawneh" +[[resources]] +name = "avatar" +src = "avatar.png" ++++ \ No newline at end of file diff --git a/content/authors/Abdullah Tarawneh/avatar.png b/content/authors/Abdullah Tarawneh/avatar.png new file mode 100644 index 0000000..8d0f5ab Binary files /dev/null and b/content/authors/Abdullah Tarawneh/avatar.png differ diff --git a/content/blog/_index.md b/content/blog/_index.html similarity index 100% rename from content/blog/_index.md rename to content/blog/_index.html diff --git a/content/code/certbot-namecheap/cover.png b/content/blog/certbot-namecheap/cover.png similarity index 100% rename from content/code/certbot-namecheap/cover.png rename to content/blog/certbot-namecheap/cover.png diff --git a/content/code/certbot-namecheap/index.md b/content/blog/certbot-namecheap/index.md similarity index 98% rename from content/code/certbot-namecheap/index.md rename to content/blog/certbot-namecheap/index.md index ba7a988..13438cf 100644 --- a/content/code/certbot-namecheap/index.md +++ b/content/blog/certbot-namecheap/index.md @@ -2,9 +2,12 @@ title = "Certbot DNS-01 hook for Namecheap" summary = "A manual authorization hook for EFF Certbot, allowing DNS-01 challenge verification with Namecheap domains. Written in Python." author = "Abdullah Tarawneh" -date = "2019-10-30" +date = 2019-10-30 tags = ["namecheap", "certbot", "dns-01", "python", "letsencrypt"] categories = ["Code"] +aliases = [ + "/code/namecheap", +] +++ ## The problem diff --git a/content/code/liberapay-pleroma/cover.jpg b/content/blog/liberapay-pleroma/cover.jpg similarity index 100% rename from content/code/liberapay-pleroma/cover.jpg rename to content/blog/liberapay-pleroma/cover.jpg diff --git a/content/code/liberapay-pleroma/index.md b/content/blog/liberapay-pleroma/index.md similarity index 95% rename from content/code/liberapay-pleroma/index.md rename to content/blog/liberapay-pleroma/index.md index 1167a74..465b3f9 100644 --- a/content/code/liberapay-pleroma/index.md +++ b/content/blog/liberapay-pleroma/index.md @@ -2,9 +2,12 @@ title = "Liberapay: Add Pleroma support" summary = "Pleroma is compatible with the Mastodon API, but uses a different URL format. This pull request creates a Pleroma identity provider within Liberapay that takes this difference into account." author = "Abdullah Tarawneh" -date = "2019-11-13" +date = 2019-11-13 tags = ["mastodon", "api", "pleroma", "liberapay", "contribution", "pull request", "github"] categories = ["Code"] +aliases = [ + "/code/liberapay-pleroma", +] +++ pleroma is compatible with mastodon api. diff --git a/content/code/mastomods/cover.jpg b/content/blog/mastomods/cover.jpg similarity index 100% rename from content/code/mastomods/cover.jpg rename to content/blog/mastomods/cover.jpg diff --git a/content/code/mastomods/index.md b/content/blog/mastomods/index.md similarity index 94% rename from content/code/mastomods/index.md rename to content/blog/mastomods/index.md index 51affe7..898af3a 100644 --- a/content/code/mastomods/index.md +++ b/content/blog/mastomods/index.md @@ -2,9 +2,12 @@ title = "MastoMods" summary = "CSS tweaks and modifications for Mastodon, a libre micro-blogging social server similar to Twitter." author = "Abdullah Tarawneh" -date = "2019-02-18" +date = 2019-02-18 tags = ["mastomods", "mastodon", "css", "userstyles", "tweaks"] categories = ["Code"] +aliases = [ + "/code/mastomods", +] +++ 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/blog/no-right-to-profit/index.md b/content/blog/no-right-to-profit/index.md index c2e1803..63d500f 100644 --- a/content/blog/no-right-to-profit/index.md +++ b/content/blog/no-right-to-profit/index.md @@ -2,9 +2,12 @@ title = "You don't have a right to profit." summary = "People will go to ridiculous lengths in the name of protecting the “right” to profit. Let’s be real here. No one has a “right” to profit." author = "Abdullah Tarawneh" -date = "2015-07-08" +date = 2015-07-08 tags = ["capitalism", "profit", "music", "music industry", "piracy", "distribution", "access"] -categories = ["Blog"] +categories = ["Uncategorized"] +[[resources]] +name = "featured" +src = "download.png" +++

These days, you see a lot of ridiculous things like copyright claims on the download pages of free software, because they contain the word “download”. A lot of these stupid actions are done in the name of “protecting the artists”. People will go to ridiculous lengths in the name of protecting the “right” to profit.

diff --git a/content/code/obs-edit-transform/cover.jpg b/content/blog/obs-edit-transform/cover.jpg similarity index 100% rename from content/code/obs-edit-transform/cover.jpg rename to content/blog/obs-edit-transform/cover.jpg diff --git a/content/code/obs-edit-transform/index.md b/content/blog/obs-edit-transform/index.md similarity index 91% rename from content/code/obs-edit-transform/index.md rename to content/blog/obs-edit-transform/index.md index 90a38cb..6122ff2 100644 --- a/content/code/obs-edit-transform/index.md +++ b/content/blog/obs-edit-transform/index.md @@ -1,10 +1,13 @@ +++ title = "OBS Studio: Ctrl+E to Edit Transform" summary = "I added a shortcut to edit transforms on a source in OBS Studio." -date = "2017-04-30" +date = 2017-04-30 author = "Abdullah Tarawneh" tags = ["obs", "open broadcaster software", "obs studio", "keyboard shortcut", "edit transform", "pull request", "github"] categories = ["Code"] +aliases = [ + "/code/obs-edit-transform", +] +++ 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/blog/personal-websites/index.md b/content/blog/personal-websites/index.md index e148747..02d89fb 100644 --- a/content/blog/personal-websites/index.md +++ b/content/blog/personal-websites/index.md @@ -2,15 +2,15 @@ title = "I wish personal websites were actually personal." summary = "When I say personal website, I do not mean a page or portfolio for potential employers or clients to hire you." author = "Abdullah Tarawneh" -date = "2023-03-18" +date = 2023-03-18 tags = ["personal websites", "portfolios", "services", "branding", "marketing", "capitalism"] -categories = ["Blog"] +categories = ["Uncategorized"] +++

A lot of resources and materials that are readily available for helping you make a so-called personal website generally assume that you are trying to get hired or get clients. To me, this is a strange interpretation of "personal". I would describe such websites as professional websites instead. When I say personal website, I do not mean a page or portfolio for potential employers or clients to hire you. I mean a place to be yourself and to express yourself to others. I want advice on self-reflection and introspection and knowing yourself -- how to identify and how to introduce yourself; how to be genuinely engaging. Stuff that gets to the heart of who you are.

There is shockingly little of the latter content among what I can find. Virtually everyone is offering their advice for the former. The personal has become the professional. And, well... can you blame people, really? The current internet is highly commercialized and focused on promoting products or services. Sure, a website is ostensibly about conveying information, but a lot of that information is intended to get you to do something -- usually something representing a financial transaction.

-

No one seems to have any tips or hints on how to make a truly personal website. It's always "build your brand" or "showcase your portfolio" or some other transparently profit-motivated initiative. Everyone is always talking about the sales funnel or the call to action or whatever. It's just assumed you are also like this.

+

No one seems to have any tips or hints on how to make a truly personal website. It's always "build your brand" or "showcase your portfolio" or some other transparently profit-motivated initiative. Everyone is always talking about the sales funnel or the call to action or whatever. It's just assumed you are also like this.

How many websites are basically just "Hello I'm $NAME and I'm a $ROLE"? That doesn't really tell me much about a person. It doesn't really stand out at all. But what should you do instead? There's so little that you can take as an example. Perhaps a stroll through something like Neocities might help, but you'd have to look for quite a while.

\ No newline at end of file diff --git a/content/code/photobucketgrabber/cover.png b/content/blog/photobucketgrabber/cover.png similarity index 100% rename from content/code/photobucketgrabber/cover.png rename to content/blog/photobucketgrabber/cover.png diff --git a/content/code/photobucketgrabber/index.md b/content/blog/photobucketgrabber/index.md similarity index 61% rename from content/code/photobucketgrabber/index.md rename to content/blog/photobucketgrabber/index.md index f8f83b6..01b9b13 100644 --- a/content/code/photobucketgrabber/index.md +++ b/content/blog/photobucketgrabber/index.md @@ -1,12 +1,24 @@ +++ title = "PhotoBucketGrabber" -summary = "Download all your photos from PhotoBucket using this Python script." +summary = "[OBSOLETE] Download all your photos from PhotoBucket using this Python script." author = "Abdullah Tarawneh" -date = "2019-03-17" +date = 2019-03-17 tags = ["python", "photobucket", "automation", "scripting", "archive", "export", "download"] categories = ["Code"] +aliases = [ + "/code/photobucketgrabber", +] +++ + + ## The problem I had an old PhotoBucket account that I wanted to archive and delete. However, it would take an extremely long time to manually save each photo and recreate any albums' folder structure. diff --git a/content/code/photobucketgrabber/select.jpg b/content/blog/photobucketgrabber/select.jpg similarity index 100% rename from content/code/photobucketgrabber/select.jpg rename to content/blog/photobucketgrabber/select.jpg diff --git a/content/blog/rip-grooveshark/index.md b/content/blog/rip-grooveshark/index.md index 6a51d43..fbb24e1 100644 --- a/content/blog/rip-grooveshark/index.md +++ b/content/blog/rip-grooveshark/index.md @@ -2,9 +2,12 @@ title = "RIP Grooveshark." summary = "I last used Grooveshark earlier today. I refreshed the page and found that it was dead. [...] I find myself feeling about Grooveshark similarly as when I found out that Megaupload had been shut down, and that many of my files were lost forever." author = "Abdullah Tarawneh" -date = "2015-05-01" +date = 2015-05-01 tags = ["grooveshark", "music", "music industry", "culture", "user generated content", "capitalism", "copyright"] -categories = ["Blog"] +categories = ["Uncategorized"] +[[resources]] +name = "featured" +src = "rip.png" +++ I last used Grooveshark earlier today. I refreshed the page and found that it was dead. Grooveshark has finally shut down. UMG et al have won. Effective immediately, the Grooveshark service no longer works, all music has been wiped entirely from the site, user data has been lost, curated playlists are inaccessible, VIP users are unable to get refunds, all social media accounts have been deleted, and the grooveshark.com website shows only an apology that admits wrongdoing and directs users to whymusicmatters.org, the RIAA’s website. diff --git a/content/code/salatime/cover.jpg b/content/blog/salatime/cover.jpg similarity index 100% rename from content/code/salatime/cover.jpg rename to content/blog/salatime/cover.jpg diff --git a/content/code/salatime/index.md b/content/blog/salatime/index.md similarity index 91% rename from content/code/salatime/index.md rename to content/blog/salatime/index.md index 08f7846..89d4c44 100644 --- a/content/code/salatime/index.md +++ b/content/blog/salatime/index.md @@ -1,10 +1,13 @@ +++ title = "salatime" -summary = "Basic terminal script to print out daily prayer times for Birmingham, AL." -date = "2019-05-09" +summary = "[OBSOLETE] Basic terminal script to print out daily prayer times for Birmingham, AL." +date = 2019-05-09 author = "Abdullah Tarawneh" tags = ["python", "web scraping", "scraping", "beautifulsoup", "salat", "prayer", "time"] categories = ["Code"] +aliases = [ + "/code/salatime", +] +++