WIP: more work/go-fed progress

This commit is contained in:
a 2021-12-27 16:42:31 -06:00
parent f0160df67d
commit fdbb9b822e
9 changed files with 162 additions and 41 deletions

View file

@ -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);}

View file

@ -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;

View file

@ -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;}
}
}
}

View file

@ -118,12 +118,10 @@
#after {
.quote {background: #90EE90}
.quote:before, .quote:after {}
}
#templates {
}
#hugo {
background: $hugo-bg;
color: $hugo-text;
}
}

View file

@ -5,6 +5,7 @@
@import "base/page.scss";
@import "base/list.scss";
//@import "base/paper.scss";
@import "libraries/photoswipe.scss";
@import "components/links.scss";

View file

@ -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;
}
}

View file

@ -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;

View file

@ -21,11 +21,43 @@ cover: "/images/cover/go-fed.png"
<h1 class="title">I remade and simplifed Go-Fed's website on both the frontend and backend.</h1>
</div>
</header>
<section class="section" id="about">
<section class="section" id="about" style="background: #0e2333">
<div class="container">
<h2 class="title">about the client</h2>
<div class="conversation">
<iframe src="https://mastodon.technology/@cj/105345893037769051/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
<!--iframe src="https://mastodon.technology/@cj/105345893037769051/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe-->
<article style="padding: 1em; background: #122e43; color: #fff;">
<a target="_blank" href="https://mastodon.technology/@cj" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
<img src="/images/people/cj.jpg" width=48 height=48 alt="cj's avatar" style="border-radius: 4px; margin-right: 10px; width: 48px; height: 48px;">
<div style="line-height: 1.5">
<div style="font-weight: 500;">cj🇺🇸🇨🇭</div>
<div>@cj@mastodon.technology</div>
</div>
</a>
<div style="font-size: 19px; line-height: 24px;">
<p style="margin-bottom: 20px; font-size: 22px; font-weight: 700;">Get Fedi Hired: Go-Fed Site Redesign</p>
<p>
I'm looking to pay from the Go-Fed OpenCollective to update the go-fed website.<br><br>
Both frontend & backend.<br><br>
<a target="_blank" href="https://go-fed.org/" style="color: #e4e6da">go-fed.org</a> design is "yep it has color". The backend is similarly a gigantic single golang template, a nightmare.<br><br>
The only real constraint is "preserve the existing content". Site design color scheme may need to reflect logo rework.<br><br>
DMs OK.<br><br>
The Open Collective
<a target="_blank" style="color: #e4e6da" href="https://opencollective.com/go-fed-activitypub-labs">https://opencollective.com/go-fed-activitypub-labs</a> <br><br>
The Work Tracker
<a target="_blank" style="color: #e4e6da" href="https://socialhub.activitypub.rocks/t/go-fed-work-tracker-megathread/1170">https://socialhub.activitypub.rocks/t/go-fed-work-tracker-megathread/1170</a> <br><br>
Boosts welcome. <a target="_blank" style="color: #e4e6da" href="https://mastodon.technology/tags/hirefedi">#hirefedi</a>
</p>
<a target="_blank" href="https://mastodon.technology/@cj/105345893037769051" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: inherit; display: block;">December 8, 2020, 12:06 PM</a>
</div>
</article>
</div>
</div>
</section>
@ -37,7 +69,7 @@ cover: "/images/cover/go-fed.png"
<img src="/images/people/cj.jpg" alt="CJ's avatar" width=32 height=32>
<cite><em>CJ Slep</em><br>Go-Fed<br>author</cite>
</div>
<div class="mobile device-gallery">
<div class="mobile device-gallery pswp-gallery">
<figure>
<a class="smartphone" href="old-320-home.png" data-size="320x480">
<img src="old-320-home.png" alt="The old homepage layout at mobile widths">
@ -82,7 +114,7 @@ cover: "/images/cover/go-fed.png"
<section class="section" id="after">
<div class="container">
<h2 class="title">after the redesign</h2>
<div class="mobile device-gallery">
<div class="mobile device-gallery pswp-gallery">
<figure>
<a class="smartphone" href="new-320-backtotop.png" data-size="320x480">
<img src="new-320-backtotop.png" alt="">
@ -147,9 +179,9 @@ cover: "/images/cover/go-fed.png"
</div>
</div>
</section>
<section class="section" id="templates">
<section class="section" id="hugo">
<div class="container">
<h2 class="title">moving away from old tech</h2>
<h2 class="title">rebuilding on a more manageable tech stack</h2>
<blockquote class="quote">The backend is similarly a gigantic single golang template, a nightmare.</blockquote>
<div class="attribution">
<img src="/images/people/cj.jpg" alt="CJ's avatar" width=32 height=32>
@ -157,11 +189,6 @@ cover: "/images/cover/go-fed.png"
</div>
</div>
</section>
<section class="section" id="hugo">
<div class="container">
<h2 class="title">rebuilding on a more manageable tech stack</h2>
</div>
</section>
</main>
<script defer src="/lib/pswp4/photoswipe.min.js"></script>

View file

@ -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">
<path
style="fill:#676767;fill-opacity:0.968926;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 348.24614,102.1188 c -5.41242,-0.74694 -10.77612,-0.094 -15.98515,5.00347 -2.37812,8.53184 -1.94546,19.14811 -15.99578,19.02399 l 2.51635,-9.51858 c 4.20769,-0.60685 8.65698,-2.28604 14.22072,-14.58622 l 9.04996,-2.406067 z"
d="m 379.99616,102.1188 c -5.41242,-0.74694 -10.77612,-0.094 -15.98515,5.00347 -2.37812,8.53184 -1.94546,19.14811 -15.99578,19.02399 l 2.51635,-9.51858 c 4.20769,-0.60685 8.65698,-2.28604 14.22072,-14.58622 l 9.04996,-2.406067 z"
id="path19623"
sodipodi:nodetypes="ccccccc" />
<path
id="path213"
style="fill:#000000;fill-opacity:0.50011826;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 217.18312,111.90532 c -34.1174,-0.16076 -66.94938,19.19356 -67.045,63.3274 -5.33668,9.31504 -12.19347,26.27912 -12.49743,42.27804 0.53524,3.03565 5.13303,6.38216 17.62425,4.9103 1.70001,3.19888 1.48306,6.25934 0.78548,9.73584 -3.02556,1.22823 -3.25052,7.82492 1.99471,10.00094 -3.96301,-0.32736 -3.78566,11.54494 3.63544,11.31972 -2.28333,8.74627 -2.20049,19.46038 3.26388,20.91397 11.78843,4.90526 30.18059,-6.80746 35.90737,-1.95337 6.26115,4.53588 7.01381,26.19417 8.81393,34.62993 l 46.29847,0.34208 c -8.40009,-14.62751 -20.34011,-42.94044 -11.92485,-47.73764 94.55736,-89.25168 31.94184,-147.49016 -26.85625,-147.76721 z m 7.85543,24.71134 c 3.87221,0.0457 7.54991,2.80701 5.97948,9.41234 l 14.0348,-3.45095 3.48144,12.70672 c -15.85781,-3.07819 -9.15568,20.33767 2.543,9.87175 l 3.5171,12.82815 -14.45545,3.86075 c 3.2183,-15.56238 -20.19709,-8.65683 -9.57616,2.4536 l -14.46889,3.78064 -3.4463,-13.05036 c -12.25079,11.5034 -18.02236,-13.85555 -2.43602,-9.40408 l -3.36879,-13.00696 14.18518,-3.79511 c -6.96748,-7.23234 -1.29575,-12.26917 4.01061,-12.20649 z"
style="fill:#000000;fill-opacity:0.500118;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 296.55817,111.90532 c -34.1174,-0.16076 -66.94938,19.19356 -67.045,63.3274 -5.33668,9.31504 -12.19347,26.27912 -12.49743,42.27804 0.53524,3.03565 5.13303,6.38216 17.62425,4.9103 1.70001,3.19888 1.48306,6.25934 0.78548,9.73584 -3.02556,1.22823 -3.25052,7.82492 1.99471,10.00094 -3.96301,-0.32736 -3.78566,11.54494 3.63544,11.31972 -2.28333,8.74627 -2.20049,19.46038 3.26388,20.91397 11.78843,4.90526 30.18059,-6.80746 35.90737,-1.95337 6.26115,4.53588 7.01381,26.19417 8.81393,34.62993 l 46.29847,0.34208 c -8.40009,-14.62751 -20.34011,-42.94044 -11.92485,-47.73764 94.55736,-89.25168 31.94184,-147.49016 -26.85625,-147.76721 z m 7.85543,24.71134 c 3.87221,0.0457 7.54991,2.80701 5.97948,9.41234 l 14.0348,-3.45095 3.48144,12.70672 c -15.85781,-3.07819 -9.15568,20.33767 2.543,9.87175 l 3.5171,12.82815 -14.45545,3.86075 c 3.2183,-15.56238 -20.19709,-8.65683 -9.57616,2.4536 l -14.46889,3.78064 -3.4463,-13.05036 c -12.25079,11.5034 -18.02236,-13.85555 -2.43602,-9.40408 l -3.36879,-13.00696 14.18518,-3.79511 c -6.96748,-7.23234 -1.29575,-12.26917 4.01061,-12.20649 z"
sodipodi:nodetypes="scccccccccccssccccccccccccs" />
<path
style="fill:#cdcdcd;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 359.86574,109.70565 c -5.16698,-4.01146 -11.70521,-7.80525 -20.78098,-11.196237 l -8.3293,-0.0693 c -12.70745,15.768317 -22.99863,11.120777 -26.82278,9.020467 1.40757,-6.75823 3.01306,-13.489353 10.39337,-17.266117 l 22.90318,-3.146792 22.13552,6.78253 z"
d="m 391.61576,109.70565 c -5.16698,-4.01146 -11.70521,-7.80525 -20.78098,-11.196237 l -8.3293,-0.0693 c -12.70745,15.768317 -22.99863,11.120777 -26.82278,9.020467 1.40757,-6.75823 3.01306,-13.489353 10.39337,-17.266117 l 22.90318,-3.146792 22.13552,6.78253 z"
id="path14357"
sodipodi:nodetypes="cccccccc" />
<path
style="fill:#9a9a9a;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 342.05224,99.635393 -9.04996,2.406067 c -7.12457,17.94414 -15.55081,15.87567 -26.9806,12.37034 l 2.49172,-5.05274 c 11.29356,1.72078 17.24365,-6.33703 22.24206,-10.918967 l 8.3293,0.0693 z"
d="m 373.80226,99.635393 -9.04996,2.406067 c -7.12457,17.94414 -15.55081,15.87567 -26.9806,12.37034 l 2.49172,-5.05274 c 11.29356,1.72078 17.24365,-6.33703 22.24206,-10.918967 l 8.3293,0.0693 z"
id="path17811"
sodipodi:nodetypes="ccccccc" />
<path
style="fill:#ffffff;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 294.49347,72.453136 c 2.43526,16.477242 11.44453,17.124177 20.47047,17.730996 12.40127,1.472657 25.71636,1.121248 36.32073,6.180731 3.62135,2.43499 5.80547,5.344547 7.11909,8.541537 1.32731,7.17571 0.1792,11.78854 -1.13602,16.22836 l -16.92724,4.84594 c -22.01697,-5.61291 -28.7433,5.53446 -29.15695,13.88186 l 29.19706,4.60131 36.84145,-4.77375 25.97515,-6.06557 -7.14195,-28.24037 -3.93676,-1.40584 C 382.01374,92.978304 374.67878,87.697546 367.45801,82.652569 l -31.78757,-9.469594 z"
d="m 326.24349,72.453136 c 2.43526,16.477242 11.44453,17.124177 20.47047,17.730996 12.40127,1.472657 25.71636,1.121248 36.32073,6.180731 3.62135,2.43499 5.80547,5.344547 7.11909,8.541537 1.32731,7.17571 0.1792,11.78854 -1.13602,16.22836 l -16.92724,4.84594 c -22.01697,-5.61291 -28.7433,5.53446 -29.15695,13.88186 l 29.19706,4.60131 36.84145,-4.77375 25.97515,-6.06557 -7.14195,-28.24037 -3.93676,-1.40584 C 413.76376,92.978304 406.4288,87.697546 399.20803,82.652569 l -31.78757,-9.469594 z"
id="path8018"
sodipodi:nodetypes="ccccccccccccccc" />
<path
style="fill:#ffff00;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 283.00277,135.75448 -3.44611,-13.05062 c -12.25079,11.5034 -18.02249,-13.85519 -2.43615,-9.40372 l -3.36849,-13.00709 14.18518,-3.794997 c -12.05186,-12.509992 13.71257,-18.451269 9.99006,-2.794188 l 14.03482,-3.451275 3.48136,12.7069 c -15.85781,-3.078187 -9.15571,20.3377 2.54297,9.87176 l 3.51716,12.82835 -14.4553,3.86031 c 3.2183,-15.56239 -20.19737,-8.65683 -9.57644,2.45361 z"
d="m 314.75279,135.75448 -3.44611,-13.05062 c -12.25079,11.5034 -18.02249,-13.85519 -2.43615,-9.40372 l -3.36849,-13.00709 14.18518,-3.794997 c -12.05186,-12.509992 13.71257,-18.451269 9.99006,-2.794188 l 14.03482,-3.451275 3.48136,12.7069 c -15.85781,-3.078187 -9.15571,20.3377 2.54297,9.87176 l 3.51716,12.82835 -14.4553,3.86031 c 3.2183,-15.56239 -20.19737,-8.65683 -9.57644,2.45361 z"
id="path4641"
sodipodi:nodetypes="ccccccccccccc" />
<path
style="fill:#163159;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 404.16021,137.36354 -8.85211,-34.61616 3.59422,-0.39886 c 3.56243,11.26533 5.95568,22.53073 8.95257,33.85754 z"
d="m 435.91023,137.36354 -8.85211,-34.61616 3.59422,-0.39886 c 3.56243,11.26533 5.95568,22.53073 8.95257,33.85754 z"
id="path8680"
sodipodi:nodetypes="ccccc" />
<path
style="fill:#15498b;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 408.46888,140.00482 508.5609,111.66601 508.72172,99.732383 406.04275,129.67172 Z"
d="M 440.2189,140.00482 540.31092,111.66601 540.47174,99.732383 437.79277,129.67172 Z"
id="path11041"
sodipodi:nodetypes="ccccc" />
<path
style="fill:#153e71;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 397.60403,98.496523 8.72274,32.465497 102.40403,-29.62323 -0.70363,-32.171823 z"
d="m 429.35405,98.496523 8.72274,32.465497 102.40403,-29.62323 -0.70363,-32.171823 z"
id="path11505"
sodipodi:nodetypes="ccccc" />
</g>

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB