diff --git a/assets/scss/base/paper.scss b/assets/scss/base/paper.scss new file mode 100644 index 0000000..6940658 --- /dev/null +++ b/assets/scss/base/paper.scss @@ -0,0 +1,22 @@ +:root { + --paper-padding: 4em; +} + +body {position: relative;} +main {background: #ddd; z-index: 1; position: relative;} +main:before { + content: ''; + position: absolute; + width: calc(var(--container-width) + 2 * var(--paper-padding)); + height: 100%; + z-index: 0; + left: calc(50% - (var(--container-width) + 2 * var(--paper-padding)) / 2); + box-shadow: 0px 0px 6px rgba(0,0,0,0.2); + background: white; +} +footer {z-index: 1;} +main > * {position: relative; z-index: 1} + +.site-header {box-shadow: 0px 2px 6px rgba(0,0,0,0.2);} +.site-nav {box-shadow: 0px -2px 6px rgba(0,0,0,0.2);} +.site-footer {box-shadow: 0px -2px 3px rgba(0,0,0,0.2);} \ No newline at end of file diff --git a/assets/scss/base/variables.scss b/assets/scss/base/variables.scss index 11e69e9..e2a56c8 100644 --- a/assets/scss/base/variables.scss +++ b/assets/scss/base/variables.scss @@ -1,8 +1,11 @@ $container-width: 960px; +$nav-height: 4em; +$header-height: 4em; :root { - --nav-height: 4em; - --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; diff --git a/assets/scss/components/intro.scss b/assets/scss/components/intro.scss index 070707f..ab6553e 100644 --- a/assets/scss/components/intro.scss +++ b/assets/scss/components/intro.scss @@ -20,8 +20,10 @@ 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)); } } @@ -29,13 +31,13 @@ font-size: 1.5em; font-weight: 700; em {color: #76ff03;font-style: italic;} - margin-bottom: 0.7rem; + margin-bottom: 0.5em; line-height: 1.1; } .blurb { - margin-bottom: 2.5em; - max-width: 30ch; font-size: 1.1em; + margin-bottom: 2em; + max-width: 38ch; line-height: 1.4; } .button { @@ -44,16 +46,65 @@ width: max-content; i {margin: 0;} span {display: none;} - @media (min-width: 30em) { - span {display: block;} - padding: 1em 2em; - } border-radius: 100em; @include box-shadow; - justify-self: end; - align-self: end; + 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: 48em) { + .tagline {margin-top: 1em;} + } + } } \ No newline at end of file diff --git a/assets/scss/content/work/go-fed.scss b/assets/scss/content/work/go-fed.scss index 524ee1d..b61a8eb 100644 --- a/assets/scss/content/work/go-fed.scss +++ b/assets/scss/content/work/go-fed.scss @@ -118,12 +118,10 @@ #after { .quote {background: #90EE90} .quote:before, .quote:after {} - } - #templates { - } #hugo { background: $hugo-bg; color: $hugo-text; + } } \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index bf45fca..983096b 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -5,6 +5,7 @@ @import "base/page.scss"; @import "base/list.scss"; +//@import "base/paper.scss"; @import "libraries/photoswipe.scss"; @import "components/links.scss"; diff --git a/assets/scss/partials/site-footer.scss b/assets/scss/partials/site-footer.scss index 16e4176..efd3edb 100644 --- a/assets/scss/partials/site-footer.scss +++ b/assets/scss/partials/site-footer.scss @@ -1,7 +1,6 @@ .site-footer { background: #fff; color: #212121; - box-shadow: 0px -2px 3px rgba(0,0,0,0.2); padding: 2em 0 calc(2em + 4em); @media (min-width: 960px) { padding: 2em 0; @@ -92,4 +91,24 @@ 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 e3afcc7..698f5f7 100644 --- a/assets/scss/partials/site-header.scss +++ b/assets/scss/partials/site-header.scss @@ -8,7 +8,7 @@ } background: var(--ui-background); color: var(--ui-text); - box-shadow: 0px 2px 6px rgba(0,0,0,0.2); + } .site-masthead { @@ -66,7 +66,7 @@ } } } - box-shadow: 0px -2px 6px rgba(0,0,0,0.2); + @media (min-width: $container-width) { position: unset; bottom: unset; diff --git a/content/work/go-fed/index.html b/content/work/go-fed/index.html index 9208077..3924fa0 100644 --- a/content/work/go-fed/index.html +++ b/content/work/go-fed/index.html @@ -21,11 +21,43 @@ cover: "/images/cover/go-fed.png"

I remade and simplifed Go-Fed's website on both the frontend and backend.

-
+

about the client

- + +
+ + cj's avatar +
+
cj🇺🇸🇨🇭
+
@cj@mastodon.technology
+
+ +
+

Get Fedi Hired: Go-Fed Site Redesign

+

+ I'm looking to pay from the Go-Fed OpenCollective to update the go-fed website.

+ + Both frontend & backend.

+ + go-fed.org design is "yep it has color". The backend is similarly a gigantic single golang template, a nightmare.

+ + The only real constraint is "preserve the existing content". Site design color scheme may need to reflect logo rework.

+ + DMs OK.

+ + The Open Collective + https://opencollective.com/go-fed-activitypub-labs

+ + The Work Tracker + https://socialhub.activitypub.rocks/t/go-fed-work-tracker-megathread/1170

+ + Boosts welcome. #hirefedi +

+ December 8, 2020, 12:06 PM +
+
@@ -37,7 +69,7 @@ cover: "/images/cover/go-fed.png" CJ's avatar CJ Slep
Go-Fed
author -
+
The old homepage layout at mobile widths @@ -82,7 +114,7 @@ cover: "/images/cover/go-fed.png"

after the redesign

-
+
@@ -147,9 +179,9 @@ cover: "/images/cover/go-fed.png"
-
+
-

moving away from old tech

+

rebuilding on a more manageable tech stack

The backend is similarly a gigantic single golang template, a nightmare.
CJ's avatar @@ -157,11 +189,6 @@ cover: "/images/cover/go-fed.png"
-
-
-

rebuilding on a more manageable tech stack

-
-
diff --git a/static/images/puzzlehead.svg b/static/images/puzzlehead.svg index dee9be5..d1889b5 100644 --- a/static/images/puzzlehead.svg +++ b/static/images/puzzlehead.svg @@ -25,9 +25,9 @@ showgrid="false" units="px" width="1920px" - inkscape:zoom="5.12" - inkscape:cx="1582.4219" - inkscape:cy="476.36719" + inkscape:zoom="0.45254834" + inkscape:cx="1334.664" + inkscape:cy="541.37863" inkscape:window-width="2560" inkscape:window-height="1568" inkscape:window-x="0" @@ -46,47 +46,47 @@ id="layer1">