front page redesign: first pass at protocol buttons

includes minified JS for:
* Bootstrap 3.3.7, https://getbootstrap.com/docs/3.3/getting-started/#download
* JQuery 3.7.1 "slim" prod, https://code.jquery.com/jquery-3.7.1.slim.min.js

(yes I know I need to upgrade 🤷)

for #661
redesign-v3-text-instructions
Ryan Barrett 2023-12-07 13:13:54 -08:00
rodzic 2f59f32cdf
commit abc1601e46
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 6BE31FDF4776E9D4
5 zmienionych plików z 67 dodań i 22 usunięć

7
static/bootstrap.min.js vendored 100644

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Wyświetl plik

@ -60,24 +60,16 @@ pre .value, code .value, code.value {
margin-bottom: 1em;
}
#front-me {
.front {
text-align: left;
margin-left: 4em;
margin-left: 2em;
}
#front-them {
text-align: right;
margin-right: 4em;
.front label img {
height: 1em;
margin-top: -.2em;
}
/* tentatively removed since it didn't look great with webmention signups */
/* @media (min-width: 768px) { */
/* #listen-signup, #listen-ui { */
/* border-left: 1px solid lightgray; */
/* border-right: 1px solid lightgray; */
/* } */
/* } */
#listen-signups input, #webmention-signups input {
margin: .5em;
}

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="/static/bootstrap.min.css" />
<link rel="stylesheet" href="/oauth_dropins_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" />

Wyświetl plik

@ -1,19 +1,63 @@
{% extends "base.html" %}
{% block content %}
<script src="/static/jquery-3.7.1.slim.min.js"></script>
<script src="/static/bootstrap.min.js"></script>
<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 id="front-me" class="row front">
<span class="col-sm-4 bigger">I'm on</span>
<div class="col-sm-8 bigger">
<div class="btn-group" role="group" data-toggle="buttons" aria-label="I'm on">
<label for="me-web" class="btn btn-primary">
<input name="me" id="me-web" type="radio">
🌐 <!-- globe_with_meridians -->
<!-- 🌏 globe_showing_asia-australia -->
Web
</label>
<label for="me-web" class="btn btn-primary">
<input name="me" id="me-web" type="radio">
<img src="/static/fediverse_logo.svg">
Fediverse
</label>
<label for="me-web" class="btn btn-primary">
<input name="me" id="me-web" type="radio">
<img src="/static/atproto_logo.png">
Bluesky
</label>
<!-- <button type="button" class="btn btn-default big" id="me-bluesky"> -->
<!-- <img src="/static/atproto_logo.png"> -->
<!-- Bluesky -->
<!-- </button> -->
</div>
</div>
</div>
<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 id="front-them" class="row front">
<span class="col-sm-4 bigger">I want to follow someone on</span>
<div class="col-sm-8 bigger">
<div class="btn-group" role="group" data-toggle="buttons"
aria-label="...and I want to follow someone on">
<label for="them-web" class="btn btn-primary">
<input name="them" id="them-web" type="radio">
🌐 <!-- globe_with_meridians -->
<!-- 🌏 globe_showing_asia-australia -->
Web
</label>
<label for="them-web" class="btn btn-primary">
<input name="them" id="them-web" type="radio">
<img src="/static/fediverse_logo.svg">
Fediverse
</label>
<label for="them-web" class="btn btn-primary">
<input name="them" id="them-web" type="radio">
<img src="/static/atproto_logo.png">
Bluesky
</label>
</div>
</div>
</div>
<script src="static/q5.min.js"></script>