From 8143834ec56666a7c7be1f4fb46dcf9310e08c04 Mon Sep 17 00:00:00 2001 From: a Date: Tue, 28 Dec 2021 08:52:13 -0600 Subject: [PATCH] WIP: styled links and buttons and cards --- assets/scss/base/links.scss | 54 +++++----- assets/scss/base/list.scss | 21 ++++ assets/scss/base/mixins.scss | 14 +++ assets/scss/base/variables.scss | 10 +- assets/scss/components/button.scss | 65 +++++++++++- assets/scss/components/intro.scss | 15 ++- assets/scss/components/links.scss | 2 - assets/scss/components/praise.scss | 3 - assets/scss/content/code.scss | 88 +++++++++++++--- assets/scss/content/work.scss | 138 +++++++++++++++++++++++--- assets/scss/main.scss | 25 ++++- assets/scss/partials/site-footer.scss | 20 ---- assets/scss/partials/site-header.scss | 53 +++++++++- config.toml | 10 +- content/work/mastodon/index.html | 4 +- layouts/code/list.html | 38 ++++--- layouts/work/list.html | 58 ++++++++--- static/images/puzzlehead.svg | 10 +- 18 files changed, 490 insertions(+), 138 deletions(-) delete mode 100644 assets/scss/components/links.scss diff --git a/assets/scss/base/links.scss b/assets/scss/base/links.scss index a59bc31..67593a3 100644 --- a/assets/scss/base/links.scss +++ b/assets/scss/base/links.scss @@ -1,32 +1,30 @@ -a:link, -a:visited { - color: inherit; - text-decoration-color: #0060ff; - transition: - text-decoration-thickness 200ms ease-out, - text-underline-offset 200ms ease-out, - text-decoration-color 200ms ease-out, - color 200ms ease-out - ; -} - -a:hover, a:focus, a:active { - text-decoration-color: #0060ff; -} - -a:link {text-underline-offset: -0.075em;} -a:hover {text-underline-offset: -0.375em;} - -@supports (text-decoration-thickness: 1em) { - a:link { - text-decoration-thickness: 0.125em; +a { + transition: all 0.1s ease-out; + @media (prefers-reduced-motion) { + transition: none; + } + &:link { + color: var(--link-color); + text-decoration-thickness: .125rem; text-underline-offset: 0.125em; text-decoration-skip-ink: none; } - - a:hover { - color: white; - text-decoration-thickness: 1.125em; - text-underline-offset: -0.875em; + &:visited { + color: var(--link-visited); } -} \ No newline at end of file + &:focus { + outline: none; + background: var(--primary-accent); + color: var(--primary-accent-text); + padding: 4px; + border-radius: 2px; + text-decoration: none; + } + &:hover { + text-decoration-thickness: 0.25em; + text-underline-offset: 0.25em; + } + &:active { + + } + } \ No newline at end of file diff --git a/assets/scss/base/list.scss b/assets/scss/base/list.scss index d752edc..399da53 100644 --- a/assets/scss/base/list.scss +++ b/assets/scss/base/list.scss @@ -8,6 +8,27 @@ color: inherit; text-decoration: none; transition: color 0.2s ease-in-out; + &__link { + display: block; + &:focus { + background: unset; + padding: unset; + @include focus-outline; + &:link { + color: var(--link-color); + } + &:visited { + color: var(--link-visited); + } + } + + &:hover { + } + + &:active { + + } + } &__image { width: 100%; height: auto; diff --git a/assets/scss/base/mixins.scss b/assets/scss/base/mixins.scss index 40e01a0..1f6390d 100644 --- a/assets/scss/base/mixins.scss +++ b/assets/scss/base/mixins.scss @@ -4,4 +4,18 @@ 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); +} + +@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); +} + +@mixin focus-outline { + outline: solid; + outline-color: var(--primary-accent); + outline-offset: 4px; } \ No newline at end of file diff --git a/assets/scss/base/variables.scss b/assets/scss/base/variables.scss index e2a56c8..2320337 100644 --- a/assets/scss/base/variables.scss +++ b/assets/scss/base/variables.scss @@ -6,11 +6,13 @@ $header-height: 4em; --container-width: #{$container-width}; --nav-height: #{$nav-height}; --header-height: #{$header-height}; - --link-color: #06f; - --link-visited: rgb(147, 85, 197); - --primary-accent: #06f; + --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: #ddd; + --ui-background-track: #aaa; --ui-text: #212121; --ui-text-muted: #777; --ui-text-bold: #000; diff --git a/assets/scss/components/button.scss b/assets/scss/components/button.scss index 932285b..ba13667 100644 --- a/assets/scss/components/button.scss +++ b/assets/scss/components/button.scss @@ -1,4 +1,4 @@ -.button, .button:link, .button:visited { +.button { width: 100%; @media (min-width: 33.75em) { width: max-content; @@ -12,14 +12,73 @@ 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: white; + color: var(--primary-accent-text); + &:link { + + } + + &:visited { + + } + + &:focus { + + } + + &:hover { + + } + + &:active { + + } } .button.secondary { background: white; border: 2px solid var(--primary-accent); - color: #06f; + 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/intro.scss b/assets/scss/components/intro.scss index ab6553e..6b5a3e2 100644 --- a/assets/scss/components/intro.scss +++ b/assets/scss/components/intro.scss @@ -1,4 +1,4 @@ -#intro { +#work #intro { --headerHeight: 4em; --navHeight: 4em; background-color: rgb(80, 102, 124); @@ -44,8 +44,15 @@ background: #06f; color: white; width: max-content; - i {margin: 0;} - span {display: none;} + 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; @@ -103,7 +110,7 @@ } max-height: 46em; } - @media (min-height: 48em) { + @media (min-height: 40em) { .tagline {margin-top: 1em;} } } diff --git a/assets/scss/components/links.scss b/assets/scss/components/links.scss deleted file mode 100644 index 24b7391..0000000 --- a/assets/scss/components/links.scss +++ /dev/null @@ -1,2 +0,0 @@ -a:link {color: var(--link-color);} -a:visited {color: var(--link-visited);} \ No newline at end of file diff --git a/assets/scss/components/praise.scss b/assets/scss/components/praise.scss index 3ea1ddb..29d4682 100644 --- a/assets/scss/components/praise.scss +++ b/assets/scss/components/praise.scss @@ -1,7 +1,4 @@ #praise { - .title:before { - content: 'praise'; - } .testimonials { display: flex; flex-flow: row wrap; diff --git a/assets/scss/content/code.scss b/assets/scss/content/code.scss index 93e93a3..e4aee2b 100644 --- a/assets/scss/content/code.scss +++ b/assets/scss/content/code.scss @@ -4,21 +4,25 @@ line-height: 1.4; font-size: 1.2em; } - .page-header { - .title:before {content: 'code';} - } .title { font-size: 2em; font-weight: 700; &:before { - font-size: 3em; + font-size: 1em; font-weight: 700; color: #ddd; position: absolute; - top: -0.425em; - left: -0.15em; + top: -1em; + left: 0em; z-index: -1; } + a { + position: absolute; + top: -1em; + color: #ddd; + display: block; + width: 100%; + } position: relative; margin-top: 2rem; margin-bottom: 2rem; @@ -45,7 +49,10 @@ } #gitea { margin-top: 4em; - i {margin-left: 0em; margin-top: 0.0625em} + svg { + width: 2em; + height: 2em; + } .image { background-color: #609926; color: white; @@ -53,13 +60,21 @@ } #github { margin-top: 2em; + svg { + width: 2em; + height: 2em; + } .image { - background: black; + background: #1B1F23; color: white } } #liberapay { margin-top: 2em; + svg { + width: 2em; + height: 2em; + } .image { background: #F6C915; color: white; @@ -67,14 +82,22 @@ } #patreon { margin-top: 2em; - i {margin-left: 0.125em;} + svg { + width: 2em; + height: 2em; + margin-left: 0.25em; + } .image { - background: #F23F4A; + background: #f96753; color: white; } } #paypal { margin-top: 2em; + svg { + width: 2em; + height: 2em; + } .image { background: #002F85; color: white; @@ -82,13 +105,17 @@ } #cashapp { margin-top: 2em; + svg { + width: 2em; + height: 2em; + } .image { background: #00D72E; color: white; } } #projects { - .title:before {content: 'projects';} + .title:before {content: '#projects';} .container { } @@ -99,14 +126,33 @@ 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 { - display: contents; + &: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%; @@ -147,7 +193,7 @@ } } #contributions { - .title:before {content: 'contributions';} + .title:before {content: '#contributions';} .container { } @@ -178,6 +224,12 @@ font-weight: 700; grid-area: title; text-decoration: underline; + text-decoration-thickness: 0.125em; + text-decoration-offset: 0.125em; + &:hover { + text-decoration-thickness: 0.25em; + text-decoration-offset: 0.25em; + } font-size: 1.2em; } &__summary { @@ -212,6 +264,12 @@ grid-area: title; text-decoration: underline; font-size: 1.2em; + text-decoration-thickness: 0.125em; + text-decoration-offset: 0.125em; + &:hover { + text-decoration-thickness: 0.25em; + text-decoration-offset: 0.25em; + } } &__summary { line-height: 1.4; @@ -221,7 +279,7 @@ } } #support { - .title:before {content: 'support';} + .title:before {content: '#support';} .container > p { line-height: 1.4; font-size: 1.2em; diff --git a/assets/scss/content/work.scss b/assets/scss/content/work.scss index f79c44b..ab73240 100644 --- a/assets/scss/content/work.scss +++ b/assets/scss/content/work.scss @@ -3,41 +3,119 @@ .title { font-size: 2em; font-weight: 700; + line-height: 1.2; margin-top: 2rem; margin-bottom: 2em; &:before { - font-size: 3em; + font-size: 1em; font-weight: 700; color: #ddd; position: absolute; - top: -0.425em; - left: -0.15em; + 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'; + 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: 'TODAY'; + 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: 0rem; + top: -1.5rem; bottom: -5rem; left: 0.5rem; z-index: -1; @@ -56,7 +134,6 @@ ; grid-template-columns: 20ch 1fr; grid-template-rows: auto auto auto; - padding-top: 1.5em; } margin-left: 2.5rem; &::before { @@ -69,7 +146,7 @@ left: -3rem; border-width: 1rem; border-radius: 100em; - background-color: #06f; + background-color: #ddd; border: 0.25em solid #ddd; } &.worktrilogy::before { @@ -115,7 +192,7 @@ 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; @@ -131,10 +208,6 @@ width: max-content; height: min-content; grid-area: readmore; - background: #06f; - padding: 0.5em 1em; - color: white; - text-decoration: none; border-radius: 0.25em; display: block; } @@ -142,8 +215,17 @@ .workeqin, .workuab, .workpixelfed { .timeline-item__readmore {display: none;} } + .you { + &:before { + background: green; + } + strong { + font-weight: 700; + color: green; + } + } } - .cta { + #cta { .container { display: flex; flex-flow: column; @@ -170,13 +252,37 @@ width: 100%; font-size: 1.25em; @media (min-width: 33.75em) { - grid-template-columns: 1fr 1fr 1fr; + 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: unset; + 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/main.scss b/assets/scss/main.scss index 983096b..382aa43 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -5,10 +5,10 @@ @import "base/page.scss"; @import "base/list.scss"; +@import "base/links.scss"; //@import "base/paper.scss"; @import "libraries/photoswipe.scss"; -@import "components/links.scss"; @import "components/pullquote.scss"; @import "components/button.scss"; @import "components/h-card.scss"; @@ -26,4 +26,25 @@ @import "partials/site-header.scss"; @import "partials/site-footer.scss"; -@import "partials/breadcrumbs.scss"; \ No newline at end of file +@import "partials/breadcrumbs.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 diff --git a/assets/scss/partials/site-footer.scss b/assets/scss/partials/site-footer.scss index efd3edb..b982b13 100644 --- a/assets/scss/partials/site-footer.scss +++ b/assets/scss/partials/site-footer.scss @@ -91,24 +91,4 @@ font-family: monospace; } } -} -@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 diff --git a/assets/scss/partials/site-header.scss b/assets/scss/partials/site-header.scss index 698f5f7..777994e 100644 --- a/assets/scss/partials/site-header.scss +++ b/assets/scss/partials/site-header.scss @@ -1,6 +1,30 @@ .site-header { z-index: 10; - a {text-decoration: none; color: inherit;} + a { + text-decoration: none; + color: inherit; + &:link { + + } + + &:visited { + + } + + &:focus { + background: var(--primary-accent-transparent); + padding: unset; + border-radius: unset; + } + + &:hover { + + } + + &:active { + + } + } .container { display: flex; flex-flow: row wrap; @@ -63,10 +87,35 @@ justify-content: center; height: 100%; span {padding: 0.25em;} + svg { + width: 1em; + height: 1em; + } + &:link { + + } + + &:visited { + + } + + &:focus { + background: var(--primary-accent-transparent); + padding: unset; + border-radius: unset; + } + + &:hover { + + } + + &:active { + + } } } } - + box-shadow: 0px -2px 2px rgba(0,0,0,0.2); @media (min-width: $container-width) { position: unset; bottom: unset; diff --git a/config.toml b/config.toml index b9696b7..0ffe6c3 100644 --- a/config.toml +++ b/config.toml @@ -14,35 +14,35 @@ category = "category" [[menu.main]] identifier = "" -pre = "" +pre = '' name = "Home" url = "/" weight = 10 [[menu.main]] identifier = "work" -pre = "" +pre = ' ' name = "Work" url = "/work/" weight = 20 [[menu.main]] identifier = "code" -pre = "" +pre = '' name = "Code" url = "/code/" weight = 30 #[[menu.main]] #identifier = "design" -#pre = "" +#pre = ' ' #name = "Design" #url = "/design/" #weight = 40 [[menu.main]] identifier = "blog" -pre = "" +pre = '' name = "Blog" url = "/blog/" weight = 50 \ No newline at end of file diff --git a/content/work/mastodon/index.html b/content/work/mastodon/index.html index e5e2e69..389b2fc 100644 --- a/content/work/mastodon/index.html +++ b/content/work/mastodon/index.html @@ -398,9 +398,9 @@ cover: "/images/cover/mastodocs.jpg"

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

Mastodon documentation landing page
- Check out the live + Check out the live version - +
diff --git a/layouts/code/list.html b/layouts/code/list.html index 785a81d..faf784c 100644 --- a/layouts/code/list.html +++ b/layouts/code/list.html @@ -5,14 +5,18 @@

check out some of the code i've written.

- + + +

I host my own code with Gitea. currently, i host the source code for some websites i've built, including this one.

- + + +

i also have a Github account. i mainly use this account to contribute to open-source projects using pull requests instead of sending patch files via email.

@@ -21,12 +25,11 @@
-

Original projects

+

#Original projects

{{ range .Pages }} {{ if not (in .Params.tags "pull request") }} - - {{ end }} {{ end }} @@ -46,7 +48,7 @@
-

Contributions to other projects

+

#Contributions to other projects

{{ range where .Pages ".Params.tags" "intersect" (slice "pull request") }}
@@ -91,32 +93,44 @@
-

Support me.

+

#Support me.

If you appreciate any of what I've done, please send me money. Your contributions and generosity will directly fund my creative efforts, which would otherwise go unpaid. The more I receive, the more time I can justifiably devote to continuing to do what I do.

- +

Recurring or one-time donation via Liberapay: liberapay.com/trwnh

- + + + +

Monthly patronage on Patreon: patreon.com/trwnh

- + + + +

For direct, one-time contributions, you can use Paypal with my email address a@trwnh.com

- +

You can also use Cashapp if you'd prefer: $trwnh

diff --git a/layouts/work/list.html b/layouts/work/list.html index 1e7bba5..484bad7 100644 --- a/layouts/work/list.html +++ b/layouts/work/list.html @@ -4,12 +4,29 @@

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 + email me
+
+
+

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

+
+

+ your needs come first. +

+

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

+
+
+

+ +

+

+
+
+
-

what others have said:

+

#what others have said:

@@ -29,9 +46,16 @@
+
+
+

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.

+

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

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

you could be here.

-

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

-
- - Résume (HTML) - Résume (PDF) -
-
+
+ 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) +
diff --git a/static/images/puzzlehead.svg b/static/images/puzzlehead.svg index d1889b5..9ba2425 100644 --- a/static/images/puzzlehead.svg +++ b/static/images/puzzlehead.svg @@ -25,9 +25,9 @@ showgrid="false" units="px" width="1920px" - inkscape:zoom="0.45254834" - inkscape:cx="1334.664" - inkscape:cy="541.37863" + inkscape:zoom="1.8101934" + inkscape:cx="1878.2524" + inkscape:cy="553.53203" inkscape:window-width="2560" inkscape:window-height="1568" inkscape:window-x="0" @@ -81,12 +81,12 @@ sodipodi:nodetypes="ccccc" />