From 6f11dda87338e0580774a169abb57199f9849651 Mon Sep 17 00:00:00 2001 From: Ryan Barrett Date: Tue, 12 Dec 2023 16:17:04 -0800 Subject: [PATCH] front page redesign: misc * adjust topology anim params * redesign sections * css vars * lots of css bug fixes --- static/index.js | 5 ++++ static/style.css | 54 ++++++++++++++++++++++++++++++-------------- static/topology.js | 10 ++++---- templates/index.html | 47 ++++++++++++++++++++++---------------- 4 files changed, 76 insertions(+), 40 deletions(-) diff --git a/static/index.js b/static/index.js index e01c740..780e7be 100644 --- a/static/index.js +++ b/static/index.js @@ -6,6 +6,11 @@ function update() { // show matching instructions // console.log($('.instruction')) for (instr of $('.instruction')) { + if (instr.id == 'front-instruction-placeholder') { + instr.style.display = 'none' + continue + } + let parts = instr.id.split('-') let me = parts[1] let them = parts[2] diff --git a/static/style.css b/static/style.css index 3d63545..52a8d2d 100644 --- a/static/style.css +++ b/static/style.css @@ -13,12 +13,11 @@ #header { width: 100%; margin: 0; - /* margin-bottom: 2em; */ - /* padding: 1em; */ padding-bottom: 0; - background-color: white; + background-color: var(--fg); /* see corresponding shadow in .front-dark below */ - box-shadow: 0 0 .5em .5em white; + box-shadow: 0 0 .5em .5em var(--fg); + overflow-x: clip; /* this keeps it always visible on top, even when scrolling position: sticky; @@ -52,6 +51,7 @@ position: absolute; z-index: -1; background-color: #003355; + overflow: clip; } pre .keyword, code .keyword, code.keyword { @@ -64,7 +64,6 @@ pre .value, code .value, code.value { .handle { font-style: italic; - /* font-family: monospace; */ } .row { @@ -85,20 +84,31 @@ pre .value, code .value, code.value { } #front row { - background-color: white; + background-color: var(--fg); } #front-form { + margin-bottom: 0; + padding-bottom: 2em; background-color: transparent; /* topology animation is behind */ box-shadow: none; } +.front-form-text { + box-shadow: 0 0 .5em 0.5em #23527c90; + background-color: #23527c90; +} + .i-label { - /* text-shadow: 2px 2px var(--bg); */ text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg); + /* this is easier and supported in major browsers but draws the outline *inside* + the text, not outside, which looks much worse. + -webkit-text-stroke: 2px var(--bg); + */ } #front-form row { + margin-bottom: 0; background-color: transparent; } @@ -111,14 +121,13 @@ pre .value, code .value, code.value { } .front-light { - background-color: white; - box-shadow: 0 0 .5em 1em white; + background-color: var(--fg); + box-shadow: 0 0 .5em 1em var(--fg); } .front-dark { - /* background-color: #337ab7; */ background-color: var(--bg); - color: white; + color: var(--fg); box-shadow: 0 0 .5em 1.5em var(--bg); padding-top: 0; padding-bottom: 0; @@ -136,7 +145,6 @@ pre .value, code .value, code.value { #front-tagline { margin-bottom: 0; - /* text-shadow: #FC0 1px 0 10px; */ text-shadow: 0px 0px .5em white, 2px 2px .5em yellow, -2px -2px .5em red; } @@ -158,14 +166,22 @@ pre .value, code .value, code.value { } .front-instructions { - margin: 1em; - margin-left: 2em; - margin-right: 2em; min-height: 4em; } .instruction { display: none; + margin: 1em; + margin-left: 2em; + margin-right: 2em; + margin-top: 0; + margin-bottom: 0; +} + +#front-instruction-placeholder { + display: block; + font-style: italic; + opacity: 70%; } .front .btn-group > .btn { @@ -175,7 +191,7 @@ pre .value, code .value, code.value { #front-logo-bottom { padding-bottom: 0; - margin-bottom: -3em; + margin-bottom: -1em; } .btn.web { @@ -194,11 +210,15 @@ pre .value, code .value, code.value { background-color: #5E287D; } +.btn.disabled { + opacity: 100%; +} + #listen-signups input, #webmention-signups input { margin: .5em; } -.header, #user, .promo, #listen-signups, #webmention-signups { +#user, .promo, #listen-signups, #webmention-signups { margin-bottom: 1em; } diff --git a/static/topology.js b/static/topology.js index 066aa19..033a621 100644 --- a/static/topology.js +++ b/static/topology.js @@ -1,7 +1,9 @@ let sketch = function(p) { - let width = p.windowWidth; + let width = document.documentElement.clientWidth; + // this includes the scroll bar, which is too wide and causes horizontal scrolling + // let width = p.windowWidth; let height = 900; - let offset = 100; + let offset = 300; // background color is set in style.css, foreground in stroke() call below // let color = '#FFFFFF'; @@ -9,8 +11,8 @@ let sketch = function(p) { let flow_cell_size = 10; - let noise_size = 0.003; - let noise_radius = 0.1; + let noise_size = 0.03; + let noise_radius = 0.2; let flow_width = (width + offset * 2) / flow_cell_size; let flow_height = (height + offset * 2) / flow_cell_size; diff --git a/templates/index.html b/templates/index.html index 58581d8..05f4003 100644 --- a/templates/index.html +++ b/templates/index.html @@ -17,11 +17,13 @@ bluesky light blue
- Bridging the new social internet + Bridging the new social internet
-I'm on + + I'm on +
-I want to follow someone on + + I want to follow someone on +
@@ -80,38 +84,43 @@ bluesky light blue
+
-
+
+ +

+ Choose your networks above. +

-Use a feed reader! + Use a feed reader!

-

Enter your web site:

-
- - -
+ Enter your web site: +
+ + +

-To follow the web site example.com, search for @example.com@web.brid.gy on your fediverse instance. + To follow the web site example.com, search for @example.com@web.brid.gy on your fediverse instance.

-Search for them on your instance. + Search for them on your instance.

-
- -
-

Bridgy Fed connects many popular decentralized social networks. You can use it from one network to follow people on others, see their posts, and reply and like and repost like normal. All interactions work in both directions. See the docs for more information.

-
-
-

Bridgy Fed is a free, non-commercial, open source service. Feedback and bug reports are welcome!

+

Bridgy Fed connects many popular decentralized social networks. You can use it from one network to follow people on another, see their posts, and reply and like and repost like normal. All interactions work in both directions. See the docs for more info.

+
+ + + +
+

Bridgy Fed is a free, non-commercial, open source service. More background here. Feedback and bug reports are welcome!