diff --git a/assets/scss/base/content.scss b/assets/scss/base/content.scss new file mode 100644 index 0000000..248dcfd --- /dev/null +++ b/assets/scss/base/content.scss @@ -0,0 +1,88 @@ +.content { + /* 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; + } + } + + +} \ No newline at end of file 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..72fe33e 100644 --- a/assets/scss/base/variables.scss +++ b/assets/scss/base/variables.scss @@ -1,19 +1,30 @@ -$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-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/index.scss b/assets/scss/layouts/index.scss index 6440f60..44e99e0 100644 --- a/assets/scss/layouts/index.scss +++ b/assets/scss/layouts/index.scss @@ -1,252 +1,183 @@ 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; + + #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%; + height: 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; - } - p { - grid-column: 2 / span 2; - font-size: 1.25rem; - max-width: 35ch; - margin: 0; - place-self: center start; - } - 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; - } + } + + #updates { + background: var(--color-card-background); + color: var(--color-card-text); + border-radius: var(--border-radius); + padding-inline: var(--padding-inline, 1rem); } @media (min-width: 60rem) { - margin-top: 1rem; - #about { + --gap: 1rem; + padding-inline: 2rem; + grid-template-areas: + "info deeds" + "updates updates"; + grid-template-columns: 20rem 1fr; + #info { + grid-area: info; } #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: + "info 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/site-header.scss b/assets/scss/layouts/partials/site-header.scss index 631c52e..2e1554d 100644 --- a/assets/scss/layouts/partials/site-header.scss +++ b/assets/scss/layouts/partials/site-header.scss @@ -1,136 +1,149 @@ .site-header { - z-index: 10; - box-shadow: 0px 2px 2px rgba(0,0,0,0.2); - a { + text-transform: lowercase; + padding-block: 1rem; + .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); + @include box-shadow-heavy; + 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; + } + &: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,0,0,0.12), 0 -1px 2px rgba(0,0,0,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; + margin-bottom: var(--nav-height, 4rem); } \ 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/work/list.scss b/assets/scss/layouts/work/list.scss new file mode 100644 index 0000000..e4ada23 --- /dev/null +++ b/assets/scss/layouts/work/list.scss @@ -0,0 +1,202 @@ +main.work { + text-transform: lowercase; + .button { + text-decoration: none; + padding: 1rem; + border-radius: 1rem; + display: inline-grid; + grid-template-columns: auto 1fr; + gap: 0.8rem; + place-items: center; + svg { + font-size: 1.5rem; + } + &.primary { + @include box-shadow; + background-color: var(--color-button-background); + color: var(--color-button-text); + &:hover { + @include box-shadow-heavy; + background-color: var(--color-button-hover-background); + } + } + &.secondary { + &:hover { + background-color: var(--color-button-hover-background); + } + } + + } + #intro { + background: + url("/images/backgrounds/ffflux1.png") center / cover; + background-color: rgba(0,0,0,0.4); + background-blend-mode: hard-light; + color: var(--color-background); + .container { + background: + url("/images/puzzlehead.svg") center / cover; + padding-block: 2rem; + } + .tagline { + margin-block-start: 0; + margin-inline-end: 4rem; + em { + display: block; + } + margin-block-end: 1rem; + } + .blurb { + max-width: 40ch; + font-size: 1.2em; + margin-block-end: 2.5rem; + margin-inline-end: 4rem; + } + .tagline, + .blurb { + width: 15rem; + } + @media (min-width: 60rem) { + .tagline, .blurb {width: 40rem;} + .container {padding-block: 4rem;} + } + @media (min-width: 1200px) { + .container { + padding-block: 6rem; + } + } + } + #praise { + .title { + margin-block-end: 4rem; + text-align: center; + } + } + .testimonials { + display: flex; + flex-flow: row wrap; + gap: 4rem; + justify-content: center; + .testimonial { + display: grid; + grid-template-areas: + "bubble bubble" + "avatar name"; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + width: 20rem; + max-width: 90%; + place-items: center; + gap: 1rem; + .avatar { + border-radius: 100rem; + grid-area: avatar; + } + .name { + grid-area: name; + place-self: center start; + } + .bubble { + grid-area: bubble; + background: green; + color: white; + padding: 1rem; + margin: 0; + min-height: 6rem; + width: 100%; + display: grid; + place-items: center; + text-align: center; + border-radius: 1rem; + position: relative; + &:after { + content: ''; + position: absolute; + display: block; + width: 0; + border: 1rem solid transparent; + border-top-color: green; + border-bottom: 0; + bottom: -0.75rem; + left: 24px; + } + } + } + } + #interstitial { + background: var(--color-card-background); + padding-block: 4rem; + .container { + max-width: 38rem; + } + .title { + margin-block-start: 0; + } + } + .you {color: hsl(150, 100%, 20%);} + .me {color: hsl(210, 100%, 40%);} + + .work-items { + --border-radius: 1rem; + display: grid; + gap: 2rem; + @media (min-width: 30rem) { + grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); + align-items: stretch; + } + } + .work-item { + background-color: var(--color-card-background); + color: var(--color-card-text); + display: grid; + grid-template-areas: + "link" + "summary"; + grid-template-rows: auto 1fr; + border-radius: var(--border-radius, 1rem); + aspect-ratio: 1; + &__link { + display: grid; + grid-template-areas: + "image" + "title"; + grid-template-rows: 1fr auto; + grid-area: link; + } + &__image { + display: block; + width: 100%; + grid-area: image; + border-start-start-radius: var(--border-radius, 1rem); + border-start-end-radius: var(--border-radius, 1rem); + } + &__title { + grid-area: title; + padding-inline: 1rem; + margin-block-end: 0; + } + &__summary { + padding-inline: 1rem; + grid-area: summary; + place-self: start; + } + } + .your-item { + display: grid; + padding: 2rem; + border: 4px dashed green; + border-radius: var(--border-radius, 1rem); + aspect-ratio: 1; + place-items: center; + } + #hire-me { + .button { + span { + justify-self: start; + } + } + .email { + margin-block-end: 1rem; + } + } +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 7f29a5f..f55015b 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,56 +1,21 @@ -@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/content.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/work/list.scss"; +@import "layouts/blog/list.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/blog/single.scss"; \ No newline at end of file diff --git a/content/contributions/index.md b/content/contributions/index.md new file mode 100644 index 0000000..f7ba421 --- /dev/null +++ b/content/contributions/index.md @@ -0,0 +1,2 @@ ++++ ++++ \ No newline at end of file diff --git a/content/services/social-web-consultancy/index.md b/content/services/social-web-consultancy/index.md new file mode 100644 index 0000000..e69de29 diff --git a/content/services/software-documentation/index.md b/content/services/software-documentation/index.md new file mode 100644 index 0000000..e69de29 diff --git a/content/services/web-design/index.md b/content/services/web-design/index.md new file mode 100644 index 0000000..e69de29 diff --git a/content/work/eqin/index.md b/content/work/eqin/index.md index 2332e45..027fb2c 100644 --- a/content/work/eqin/index.md +++ b/content/work/eqin/index.md @@ -9,7 +9,9 @@ at = "Equality Initiative" position = "Director of Technology" tags = ["nonprofit"] categories = ["Work"] -src = "/images/cover/eqin.jpg" +[[resources]] +name = "cover" +src = "cover.jpg" +++ ## Building and maintaining a website diff --git a/content/work/mastodon/index.html b/content/work/mastodon/index.html index fffca27..7b624f8 100644 --- a/content/work/mastodon/index.html +++ b/content/work/mastodon/index.html @@ -7,8 +7,13 @@ start = "Aug 2019" end = "Jan 2020" at = "Mastodon" position = "Information Architect / Documentation Specialist" -tags = ["mastodon", "documentation", "information architecture", "rest api"] +tags = ["mastodon", "documentation", "information architecture", "rest api", "technical writing"] categories = ["Work"] +highlighted = true +weight = 10 +[[resources]] +name = "cover" +src = "mastodocs.jpg" +++
@@ -443,15 +448,9 @@ categories = ["Work"]

Maybe you'd appreciate me doing something similar for you?

Mastodon documentation landing page
- - - Check out the live - version - + + Check out the live + version
diff --git a/content/work/mastodon/style.scss b/content/work/mastodon/style.scss index d6d5ea7..0ad355c 100644 --- a/content/work/mastodon/style.scss +++ b/content/work/mastodon/style.scss @@ -1,4 +1,7 @@ #mastodon { + .container { + max-width: 960px; + } overflow: hidden; background: #16191f; color: #9baec8; @@ -173,7 +176,7 @@ position: relative; &:before { position: absolute; - top: -1.75em; + top: -2.5em; right: calc(50% - 3.25ch); font-size: 2em; font-weight: 900; @@ -228,6 +231,7 @@ } .praise { border: 0; + margin: 0; background: #303643; color: #d9e1e8; font-size: 1.8em; @@ -336,9 +340,16 @@ } .button { width: 100%; + padding: 1rem; + text-decoration: none; + display: inline-grid; + grid-template-columns: auto 1fr; + gap: 0.8rem; + place-items: center; flex-basis: 20em; - i { - margin-right: 1em; + border-radius: 1rem; + svg { + font-size: 2rem; } &.demo { background: transparent; @@ -349,6 +360,11 @@ } } &.email { + background: #0060ff; + color: white; + &:hover { + background: #9baec8; + } } } } diff --git a/content/work/pixelfed/index.md b/content/work/pixelfed/index.md index f3106af..a8024a4 100644 --- a/content/work/pixelfed/index.md +++ b/content/work/pixelfed/index.md @@ -11,7 +11,7 @@ tags = ["pixelfed", "project management", "product management", "github issues", categories = ["Work"] [[resources]] name = "cover" -src = "/images/cover/pixelfed.jpg" +src = "masterpost.jpg" +++ ## Overview diff --git a/content/work/trilogy/index.html b/content/work/trilogy/index.html index 01075cd..66cd7ff 100644 --- a/content/work/trilogy/index.html +++ b/content/work/trilogy/index.html @@ -9,7 +9,11 @@ at = "Trilogy" position = "Senior Technical Writer / Product Knowledge Curator" tags = ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"] category = "Work" -cover = "/images/cover/trilogy.png" +highlighted = true +weight = 20 +[[resources]] +name = "cover" +src = "trilogy-full.png" +++
diff --git a/content/work/trilogy/trilogy-full.png b/content/work/trilogy/trilogy-full.png new file mode 100644 index 0000000..4194114 Binary files /dev/null and b/content/work/trilogy/trilogy-full.png differ diff --git a/content/work/uab/index.md b/content/work/uab/index.md index 6d2301a..87bb6f2 100644 --- a/content/work/uab/index.md +++ b/content/work/uab/index.md @@ -9,4 +9,5 @@ at = "UAB" position = "Graduated from The University of Alabama at Birmingham" tags = [] categories = ["Work"] +draft = true +++ \ No newline at end of file diff --git a/hugo.toml b/hugo.toml index 4a364ee..9ea11a4 100644 --- a/hugo.toml +++ b/hugo.toml @@ -19,36 +19,36 @@ series = "series" [menu] [[menu.main]] -identifier = "home" -pre = '' -name = "Home" -url = "/" +identifier = "about" +pre = 'person' +name = "About" +pageRef = "/" weight = 10 [[menu.main]] identifier = "work" -pre = ' ' +pre = 'briefcase' name = "Work" -url = "/work/" +pageRef = "/work/" weight = 20 -[[menu.main]] -identifier = "code" -pre = '' -name = "Code" -url = "/code/" -weight = 30 +# [[menu.main]] +# identifier = "services" +# pre = '' +# name = "Services" +# pageRef = "/services/" +# weight = 30 -#[[menu.main]] -#identifier = "design" -#pre = ' ' -#name = "Design" -#url = "/design/" -#weight = 40 +[[menu.main]] +identifier = "wiki" +pre = 'wikitext brackets' +name = "Wiki" +pageRef = "/wiki/" +weight = 40 [[menu.main]] identifier = "blog" -pre = '' -name = "Blog" -url = "/blog/" +pre = 'article' +name = "Posts" +pageRef = "/blog/" weight = 50 \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 6f1045e..85d1a97 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,41 +1,59 @@ {{ define "body" }} {{ partial "site-header.html" . }} -
-
-
+
+
+
+

h-card

- +

Abdullah Tarawneh

- abdullahtarawneh.com -

More commonly known as a or trwnh

+ abdullahtarawneh.com +

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

-
-
-
Email
-
-
+
+

Contact me

+
+
+
Email
+
+
+ +
+
XMPP
+
a@trwnh.com
+
+ +
+
Fediverse
+
mastodon.social/@trwnh
+
+
+
+ +
-
-
XMPP
-
a@trwnh.com
-
- -
-
Fediverse
-
mastodon.social/@trwnh
-
- -
-
Personal website
-
trwnh.com
-
- -
- -
-

Things people have said about me

+
+

Things people have said about me

It's scary how much you know. @@ -60,36 +78,61 @@
a professional colleague
-
-
-
-
- - - - -

Mastodon documentation
case study

-

I reorganized and rewrote the docs for an open-source project with millions of users.

- Read more > -
-
-

What I'm doing right now

+
+ + + +
+ +
+

Notable work

+
+

Mastodon documentation case study

+ mastodon documentation +

I reorganized and rewrote the docs for an open-source project with millions of users.

+ Read more > +
+
+ +
+

Present involvement

-

social web so-called "expert"

+

social web so-called "expert"

Member of the Social Web Community Group at the W3C. Writing a W3C SWICG report on ActivityPub and WebFinger.

Also active on the SocialHub forum for the ActivityPub community.

- -
-

What I want to do

+
+ +
+

Future directions

-

untitled social app

+

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.

- -
+ + +
+ +
+
+

Latest news

+

June 2024: updated this website's layout

+
+ +
+

Latest posts

+
    + +
+
+ +
+

Latest changes

+ {{ range first 5 .Site.RegularPages.ByLastmod.Reverse }} +

{{ .Title }} was edited on {{ .Lastmod }} by commit {{.GitInfo.AbbreviatedHash}} - {{.GitInfo.Subject}}

+ {{ end }} +
+
+
- {{ end }} \ No newline at end of file diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index daf69e0..36c43a7 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -1,26 +1,34 @@
- - -

hi, i'm abdullah tarawneh.

+ + +

hi, i'm a.

 -
diff --git a/layouts/work/list.html b/layouts/work/list.html index c911dfa..32dbe0d 100644 --- a/layouts/work/list.html +++ b/layouts/work/list.html @@ -1,20 +1,28 @@ {{ define "main" }} -
-
+
+
-

i can help you
figure out the hard parts.

-

need something done? perhaps a website, some documentation, or simply advice on a project? i'm here for you.

- email me +

I can help you figure out the hard parts.

+

Need something done? Perhaps some documentation, a static website, or simply advice on a project? I'm here for you.

+ + email envelope + Send a proposal +
+
+
+

+
+
-

#a no-nonsense approach
to making things make sense.

+

A no-nonsense approach to making things make sense.

- your needs come first. + Your needs come first.

-

we'll sit down and figure out
exactly what your problem is,
and what your requirements are.

+

We'll sit down and figure out exactly what your problem is, and what your requirements are.

@@ -26,64 +34,70 @@

-

#what others have said:

+

What others have said:

{{ template "shortcodes/people/khalil.html" . }}

Khalil Saadiq,
former classmate

-
it's scary how much you know.
+
It's scary how much you know.
{{ template "shortcodes/people/gargron.html" . }}

Eugen Rochko,
Mastodon developer

-
bless you for being here to work on the docs btw. it's a big relief.
+
Bless you for being here to work on the docs BTW. It's a big relief.
{{ template "shortcodes/people/dansup.html" . }}

Daniel Supernault,
Pixelfed developer

-
i don't trust anyone as much as you to shape the direction of the project.
+
I don't trust anyone as much as you to shape the direction of the project.
-

i bet i can make you feel the same way.

-

do you want a knowledgeable person you can trust to do the work right, as well? i'd love to add your praise above.

- +

I bet i can make you feel the same way.

+

Do you want a knowledgeable person you can trust to do the work right, as well? I'd love to add your praise above.

+
-
+
-

#here's a timeline of work i've done.

-
- {{ range .Pages.ByDate }} -
-

{{ .Params.position }}

-

{{.Summary}}

- - {{ .Params.start }} – {{ .Params.end }} - - at {{ .Params.at }} - Read more... -
+

Here's some of my more notable work.

+
+ {{ range .Pages }} +
+ +

{{ .Title }}

+ {{ with .Resources.GetMatch "cover" }} + + {{ end }} + +

{{.Summary}}

+
{{ end }} -
-

You could be here.

-

i'm currently available for work. let's get in touch.

- Today - at your service +
+
+

You could be here.

+

I'm currently available for work. Let's get in touch.

+ +
-
+
-
- - Résume (HTML) - Résume (PDF) -
+

Got something more permanent in mind?

+

I'm also open to remote work on a 1099 or W2. I'm particularly interested in software and API documentation / technical writing and information architecture!

+ +
+ personal documentRésume (HTML) + personal documentRésume (PDF) +
+
+ writing documentTech writing samples (PDF) +
diff --git a/static/resume/abdullah-tarawneh_writing-samples.odt b/static/resume/abdullah-tarawneh_writing-samples.odt new file mode 100644 index 0000000..de16b53 Binary files /dev/null and b/static/resume/abdullah-tarawneh_writing-samples.odt differ diff --git a/static/resume/abdullah-tarawneh_writing-samples.pdf b/static/resume/abdullah-tarawneh_writing-samples.pdf new file mode 100644 index 0000000..b60f217 Binary files /dev/null and b/static/resume/abdullah-tarawneh_writing-samples.pdf differ