kopia lustrzana https://github.com/snarfed/bridgy-fed
front page redesign: misc
* adjust topology anim params * redesign sections * css vars * lots of css bug fixesredesign-v3-text-instructions
Ryan Barrett
rodzic
b30ea3f97f
commit
6f11dda873
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -17,11 +17,13 @@ bluesky light blue
|
|||
<div id="topology" style="position: absolute; top: 0; left: 0"></div>
|
||||
<div id="front-tagline" class="row bigger">
|
||||
<!-- The decentralized social bridge -->
|
||||
<em>Bridging the new social internet</em>
|
||||
<em class="front-form-text">Bridging the new social internet</em>
|
||||
</div>
|
||||
|
||||
<div id="front-me" class="row front">
|
||||
<span class="col-sm-4 bigger i-label">I'm on</span>
|
||||
<span class="col-sm-4 bigger">
|
||||
<span class="i-label">I'm on</span>
|
||||
</span>
|
||||
<div class="col-sm-8 big">
|
||||
<div class="btn-group" role="group" data-toggle="buttons" aria-label="I'm on">
|
||||
<label for="me-web" class="btn btn-primary web">
|
||||
|
|
@ -52,7 +54,9 @@ bluesky light blue
|
|||
</div>
|
||||
|
||||
<div id="front-them" class="row front">
|
||||
<span class="col-sm-4 bigger i-label">I want to follow someone on</span>
|
||||
<span class="col-sm-4 bigger">
|
||||
<span class="i-label">I want to follow someone on</span>
|
||||
</span>
|
||||
<div class="col-sm-8 big">
|
||||
<div class="btn-group" role="group" data-toggle="buttons"
|
||||
aria-label="...and I want to follow someone on">
|
||||
|
|
@ -80,38 +84,43 @@ bluesky light blue
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- front-form -->
|
||||
|
||||
<div class="row big front-instructions">
|
||||
<div class="row big front-light front-instructions">
|
||||
|
||||
<p id="front-instruction-placeholder" class="instruction">
|
||||
Choose your networks above.
|
||||
</p>
|
||||
|
||||
<p id="front-web-web" class="instruction">
|
||||
<a href="https://indieweb.org/reader">Use a feed reader!</a>
|
||||
<a href="https://indieweb.org/reader">Use a feed reader!</a>
|
||||
</p>
|
||||
|
||||
<div id="front-web-fediverse" class="instruction">
|
||||
<p>Enter your web site:</p>
|
||||
<form method="post" action="/web-site">
|
||||
<input required type="url" name="url" id="url" placeholder="snarfed.org" />
|
||||
<input type="submit" class="btn btn-default" value="OK" />
|
||||
</form>
|
||||
Enter your web site:
|
||||
<form method="post" action="/web-site">
|
||||
<input required type="url" name="url" id="url" placeholder="snarfed.org" />
|
||||
<input type="submit" class="btn btn-default" value="Go" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p id="front-fediverse-web" class="instruction">
|
||||
To follow the web site <span class="handle">example.com</span>, search for <span class="handle">@example.com@web.brid.gy</span> on your fediverse instance.
|
||||
To follow the web site <span class="handle">example.com</span>, search for <span class="handle">@example.com@web.brid.gy</span> on your fediverse instance.
|
||||
</p>
|
||||
|
||||
<p id="front-fediverse-fediverse" class="instruction">
|
||||
<a href="https://docs.joinmastodon.org/user/network/#follow">Search for them on your instance.</a>
|
||||
<a href="https://docs.joinmastodon.org/user/network/#follow">Search for them on your instance.</a>
|
||||
</p>
|
||||
</div>
|
||||
</div> <!-- front-form -->
|
||||
|
||||
<div class="row big front-light">
|
||||
<p>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. <a href="/docs">See the docs for more information.</a></p>
|
||||
</div>
|
||||
<!-- <p>Blocks, mutes, and other native moderation features work automatically. You can opt out of Bridgy Fed by adding <em>#nobridge</em> or <em>#nobots</em> to your bio or <a href="mailto:opt-out@brid.gy">by private email request</a>.</p> -->
|
||||
|
||||
<div class="row big front-dark">
|
||||
<p>Bridgy Fed is a free, non-commercial, open source service. <a href="mailto:feedback@brid.gy">Feedback</a> and <a href="https://github.com/snarfed/bridgy-fed/issues">bug reports</a> are welcome!</a></p>
|
||||
<p>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. <a href="/docs">See the docs for more info.</a></p>
|
||||
</div>
|
||||
|
||||
<!-- <p>Blocks, mutes, and other native moderation features work automatically. You can opt out of Bridgy Fed by adding <em>#nobridge</em> or <em>#nobots</em> to your bio or <a href="mailto:opt-out@brid.gy">by private email request</a>.</p> -->
|
||||
|
||||
<div class="row big front-light">
|
||||
<p>Bridgy Fed is a free, non-commercial, open source service. <a href="https://snarfed.org/2023-11-27_re-introducing-bridgy-fed">More background here.</a> <a href="mailto:feedback@brid.gy">Feedback</a> and <a href="https://github.com/snarfed/bridgy-fed/issues">bug reports</a> are welcome!</a></p>
|
||||
</div>
|
||||
|
||||
<div id="front-logo-bottom" class="row">
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue