mirror
/
bridgy-fed
kopia lustrzana https://github.com/snarfed/bridgy-fed
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

front page redesign: first pass at phone layout

redesign-v1-all-buttons
Ryan Barrett 2023-12-15 13:55:25 -08:00
rodzic 739bb03ba9
commit 7469f258a2
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 6BE31FDF4776E9D4
3 zmienionych plików z 43 dodań i 47 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

28
static/style.css
Wyświetl plik

@ -108,7 +108,7 @@ pre .value, code .value, code.value {
background-color: #23527c90;
}
.i-label {
.text-outline {
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.
@ -145,11 +145,9 @@ pre .value, code .value, code.value {
}
.front-buttons {
text-align: left;
margin-left: 2em;
/* vertical center button groups against left side text */
display: flex;
align-items: center;
/* display: flex; */
/* align-items: center; */
}
#front-tagline {
@ -157,8 +155,10 @@ pre .value, code .value, code.value {
text-shadow: 0px 0px .5em white, 2px 2px .5em yellow, -2px -2px .5em red;
}
.front-buttons > span {
text-align: right;
@media (min-width: 992px) { /* @screen-md-min */
.front-buttons > div:first-child {
text-align: right;
}
}
.front-buttons label {
@ -171,6 +171,11 @@ pre .value, code .value, code.value {
margin-top: -.2em;
}
.front-buttons .btn {
float: none; /* separate buttons */
border-radius: .2em !important;
}
.btn.web, .btn.web:hover, .btn.web:focus, .btn.web.active {
background-color: #20593c;
border: 2px solid #47c986;
@ -251,11 +256,6 @@ pre .value, code .value, code.value {
opacity: 70%;
}
.front-buttons .btn-group > .btn {
float: none; /* separate buttons */
border-radius: .2em !important;
}
#front-logo-bottom {
padding-bottom: 0;
margin-bottom: -1em;
@ -435,6 +435,10 @@ button[disabled]:hover {
vertical-align: middle;
}
.btn-group {
white-space: nowrap;
}
.btn {
white-space: normal;
}

1
templates/base.html
Wyświetl plik

@ -20,7 +20,6 @@
</head>
<body id="{{ body_id }}">
{% with messages = get_flashed_messages() %}
{% if messages %}
<div id="messages">

61
templates/index.html
Wyświetl plik

@ -17,56 +17,52 @@ bluesky light blue
<div id="front-tagline" class="row bigger">
<!-- The decentralized social bridge -->
<em class="front-form-text">Bridging the new social internet</em>
<em class="front-form-text">
Bridging the new <br class="visible-xs-inline"> social internet
</em>
</div>
<div id="front-me" class="row front-buttons">
<span class="col-sm-4 bigger">
<span class="i-label">I'm on</span>
</span>
<div class="col-sm-8 big">
<div id="front-me" class="row front-buttons"
role="group" data-toggle="buttons" aria-label="I'm on">
<div class="col-md-3 bigger text-outline">
I'm on
</div>
<!--
-- Separated buttons
-->
<div class="btn-group visible-md-block visible-lg-block"
role="group" data-toggle="buttons" aria-label="I'm on">
<div class="btn-group col-md-8 big">
<label for="me-web" class="btn btn-primary web">
<!-- autocomplete="off" prevents Firefox from preserving these buttons' state
https://github.com/twbs/bootstrap/issues/793
-->
<input name="me" id="me-web" type="radio" autocomplete="off">
🌐 <!-- globe_with_meridians -->
<!-- 🌏 globe_showing_asia-australia -->
Web
🌐 Web
</label>
<label for="me-fediverse" class="btn btn-primary fediverse">
<input name="me" id="me-fediverse" type="radio" autocomplete="off">
<img src="/static/fediverse_logo.svg">
Fediverse
</label>
<label for="me-atproto" class="btn btn-primary atproto disabled"
title="Coming soon">
<!-- <input name="me" id="me-atproto" type="radio" autocomplete="off"> -->
<br class="visible-xs-inline">
<label for="me-atproto" class="btn btn-primary disabled atproto" title="Coming soon">
<img src="/static/atproto_logo.png">
Bluesky
</label>
<label for="me-nostr" class="btn btn-primary nostr disabled"
title="Coming soon">
<!-- <input name="me" id="me-nostr" type="radio" autocomplete="off"> -->
<label for="me-nostr" class="btn btn-primary disabled nostr" title="Coming soon">
<img src="/static/nostr_logo_transparent.png">
Nostr
</label>
</div>
</div>
</div>
</div>
<div id="front-them" class="row front-buttons">
<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">
<div id="front-them" class="row front-buttons"
role="group" data-toggle="buttons" aria-label="I want to follow someone on">
<div class="col-md-3 bigger text-outline">
I want to follow <br class="visible-xs-inline"> someone on
</div>
<div class="btn-group col-md-8 big">
<label for="them-web" class="btn btn-primary web">
<input name="them" id="them-web" type="radio" autocomplete="off">
🌐 Web
@ -76,21 +72,18 @@ bluesky light blue
<img src="/static/fediverse_logo.svg">
Fediverse
</label>
<label for="them-atproto" class="btn btn-primary atproto disabled"
title="Coming soon">
<!-- <input name="them" id="them-atproto" type="radio" autocomplete="off"> -->
<br class="visible-xs-inline">
<label for="them-atproto" class="btn btn-primary disabled atproto" title="Coming soon">
<img src="/static/atproto_logo.png">
Bluesky
</label>
<label for="them-nostr" class="btn btn-primary nostr disabled"
title="Coming soon">
<!-- <input name="them" id="them-nostr" type="radio" autocomplete="off"> -->
<label for="them-nostr" class="btn btn-primary disabled nostr" title="Coming soon">
<img src="/static/nostr_logo_transparent.png">
Nostr
</label>
</div>
</div>
</div>
</div>
</div> <!-- front-form -->
<div id="front-instructions" class="row big front-light">