start front page UI redesign for multi-protocol

for #661
redesign-v3-text-instructions
Ryan Barrett 2023-12-07 12:07:34 -08:00
rodzic fff9746d15
commit 2f59f32cdf
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 6BE31FDF4776E9D4
4 zmienionych plików z 61 dodań i 114 usunięć

Wyświetl plik

@ -1,33 +1,16 @@
.container {
width: 100%;
margin: 0;
padding: 0;
}
#intro {
margin-top: 2em;
}
#logins {
margin-top: .3em;
text-align: right;
}
#logo {
z-index: -1;
}
@media (max-width: 600px) {
#logo {
float: left;
}
#header {
float: none;
width: 100%;
}
}
#signups {
margin-top: 2em;
}
#signups hr {
width: 50%;
border-color: lightgray;
width: 100%;
margin: 0;
margin-bottom: 2em;
padding: 1em;
background-color: #FFFFFF80;
/* TODO: box-shadow alpha to blend into topology */
}
.big {
@ -42,30 +25,16 @@
font-size: .8em;
}
#header br {
display: none;
}
@media (min-width: 960px) {
#header br {
display: inline;
}
}
#header p {
text-align: left;
#header {
text-align: right;
}
#title {
font-weight: normal;
}
#more-link {
font-size: .7em;
}
body.about #more-link {
display: none;
#topology {
z-index: -1;
}
pre .keyword, code .keyword, code.keyword {
@ -91,6 +60,16 @@ pre .value, code .value, code.value {
margin-bottom: 1em;
}
#front-me {
text-align: left;
margin-left: 4em;
}
#front-them {
text-align: right;
margin-right: 4em;
}
/* tentatively removed since it didn't look great with webmention signups */
/* @media (min-width: 768px) { */
/* #listen-signup, #listen-ui { */
@ -244,13 +223,6 @@ label {
font-weight: 300;
}
/* Seems like this shouldn't be necessary, but cursor was ending up as auto on the
* a > img for the disabled Facebook signup button for some reason, not sure why.
*/
a > img {
cursor: pointer;
}
button {
border: 0;
background-color: #337AB7; /* same color as links */
@ -436,6 +408,7 @@ input[type="submit"] {
#footer {
margin-top: 2em;
margin-bottom: 1em;
margin-right: 1em;
text-align: right;
}

Wyświetl plik

@ -2,6 +2,8 @@ let sketch = function(p) {
let width = 1400;
let height = 900;
let offset = 100;
let color = '#002222';
let backgroundColor = '#FFFFFF';
let flow_cell_size = 10;
@ -20,7 +22,6 @@ let sketch = function(p) {
let tick = 0;
p.setup = function() {
p.createCanvas(width, height);
p.background('#022');
p.smooth();
p.noStroke();
//p.blendMode(p.OVERLAY);
@ -121,7 +122,7 @@ let sketch = function(p) {
function display_particles() {
p.strokeWeight(2);
p.stroke(255, 240, 220, 5);
p.stroke(160, 180, 200, 5);
for (let i = 0; i < particles.length; i++) {
//p.stroke(particles[i].col);
//p.point(particles[i].pos.x, particles[i].pos.y);
@ -147,14 +148,14 @@ let sketch = function(p) {
}
}
p.keyPressed = function() {
if (p.keyCode === 80) {
p.saveCanvas('landslide', 'jpeg');
}
};
// p.keyPressed = function() {
// if (p.keyCode === 80) {
// p.saveCanvas('landslide', 'jpeg');
// }
// };
function mod(x, n) {
return (x % n + n) % n;
}
};
new p5(sketch);
new p5(sketch, document.getElementById('topology'));

Wyświetl plik

@ -10,7 +10,7 @@
<!-- 32x32 last so that browsers prefer it -->
<link rel="shortcut icon" sizes="32x32" href="https://brid.gy/static/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="32x32" href="https://brid.gy/static/favicon.png">
<link rel="stylesheet" href="/oauth_dropins_static/bootstrap.min.css" />
<link rel="stylesheet" href="/static/bootstrap.min.css" />
<link rel="stylesheet" href="/oauth_dropins_static/util.css" type="text/css" />
<link rel="stylesheet" href="/static/style.css" type="text/css" />
<link rel="webmention" href="/webmention" />
@ -34,21 +34,20 @@
<main class="tp-main lead container">
<div id="intro" class="row">
<div id="logo" class="col-xs-4">
<a href="/"><img id="logo-img" class="img-responsive" src="/static/bridgy_fed_logo.png" /></a>
</div>
<div id="logo">
<a href="/">
<img id="logo-img" class="img-responsive col-sm-2 col-xs-3"
src="/static/bridgy_logo_with_alpha.png" />
<span class="bigger col-sm-3 col-xs-4">Bridgy Fed</span>
</a>
</div>
<div id="header" class="col-xs-7">
<p class="big">
<a id="title" href="/" style="white-space: nowrap">Bridgy Fed</a>
connects <a href="https://indieweb.org/">your web site</a> <br>
to <a href="https://joinmastodon.org/">Mastodon</a> and the
<a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>. <br>
<a href="/docs">Learn more...</a>
</p></div>
<div id="header" class="col-xs-4 col-xs-offset-3">
<a href="/docs">Docs</a>
| <a href="https://snarfed.org/?s=%22bridgy+fed%22">News</a>
| <a href="https://github.com/snarfed/bridgy-fed">Open source</a>
</div>
</div>
<p class="clearfix"></p>
{% block content %}
{% endblock %}

Wyświetl plik

@ -2,47 +2,21 @@
{% block content %}
<div class="row big">
What do you want to do?
<div id="topology" style="position: fixed; top: 0; left: 0"></div>
<div id="front-me" class="row big front">
I'm on
<input name="me" id="me-web" type="radio"><label for="me-web">Web</label></input>
<input name="me" id="me-fediverse" type="radio"><label for="me-fediverse">Fediverse</label></input>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-0 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
<a class="btn btn-default btn-home" href="https://brid.gy/mastodon/start">
<p class="bigger">Cross-post to a Mastodon account:<br>
@you@mastodon.server</p>
<pre class="bigger"> <img title="Pleroma" style="height: 1.5em; margin-bottom: -.2em" src="/static/pleroma_logo.svg">
/
<span class="highlight" style="background-color: khaki" title="Your web site">🌐</span><span class="highlight"><img title="Mastodon" src="/oauth_dropins_static/mastodon_2x.png"></span><img title="Friendica" src="/static/friendica_logo.svg">
\
<img title="Mastodon" src="/oauth_dropins_static/mastodon_2x.png">
</pre>
<p class="big">You already have a Mastodon account. You want to post on your web site, copy those posts to that account, and send responses back to your site.</p>
</a>
<div id="front-them" class="row big front">
I want to follow someone on
<input name="them" id="them-web" type="radio"><label for="them-web">Web</label></input>
<input name="them" id="them-fediverse" type="radio"><label for="them-fediverse">Fediverse</label></input>
</div>
<div class="col-lg-6 col-lg-offset-0 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
<a class="btn btn-default btn-home" href="/web-site">
<p class="bigger">Connect directly to the fediverse:<br>
@yoursite.com</p>
<pre class="bigger"><img title="Fediverse" src="/static/fediverse_logo.svg"> <img title="PeerTube" src="/static/peertube_logo.svg">
\ /
<img title="Misskey" src="/static/misskey_logo.png"><span class="highlight" title="Your web site">🌐</span><img title="Mastodon" src="/oauth_dropins_static/mastodon_2x.png">
/ \
<img title="GNU Social" src="/static/gnu_social_logo.svg"> <img title="Pixelfed" src="/oauth_dropins_static/pixelfed_2x.png">
</pre>
<p class="big">Your web site will be its own fediverse account, including its posts. Its username and instance will be your domain. This takes a bit of technical know-how.</p>
</a>
</div>
</div>
<div class="row">
<div class="big col-lg-6 col-lg-offset-3 col-md-12">
...or, if you just want to check out the <a href="https://fediverse.party/en/fediverse/">fediverse</a>, try <a href="https://micro.blog/">micro.blog</a> or <a href="https://joinmastodon.org/">Mastodon</a>. Or <a href="https://indieweb.org/discuss">ask us more in chat!</a>
</div>
</div>
</div>
<script src="static/q5.min.js"></script>
<script src="static/topology.js"></script>
{% endblock %}