front page redesign: fix styles on other pages

redesign-v3-text-instructions
Ryan Barrett 2023-12-13 15:52:39 -08:00
rodzic ed0612903d
commit 2fc0a1b8b1
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 6BE31FDF4776E9D4
4 zmienionych plików z 62 dodań i 49 usunięć

Wyświetl plik

@ -4,19 +4,11 @@
--fg: white;
}
.container {
width: 100%;
margin: 0;
padding: 0;
}
#header {
width: 100%;
margin: 0;
padding-bottom: 0;
background-color: var(--fg);
/* see corresponding shadow in .front-dark below */
box-shadow: 0 0 .5em .5em var(--fg);
padding-top: 1em;
padding-bottom: 1em;
overflow-x: clip;
/* this keeps it always visible on top, even when scrolling
@ -38,9 +30,21 @@
}
.header-links {
text-align: right;
}
#header .header-links {
margin-top: 1em;
margin-bottom: 1em;
text-align: right;
}
#front #footer {
margin-top: -2em;
}
#footer {
margin-top: 2em;
margin-bottom: 0;
}
#title {
@ -71,8 +75,6 @@ pre .value, code .value, code.value {
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-top: 1em;
padding-bottom: 1em;
}
#blogposts, #publishes, #webmentions, #user {
@ -83,8 +85,21 @@ pre .value, code .value, code.value {
margin-bottom: 1em;
}
#front row {
#front .container {
width: 100%;
margin: 0;
padding: 0;
}
#front .row {
padding: 1em;
}
#front #header {
padding-bottom: 0;
background-color: var(--fg);
/* see corresponding shadow in .front-dark below */
box-shadow: 0 0 .5em .5em var(--fg);
}
#front-form {
@ -107,19 +122,6 @@ pre .value, code .value, code.value {
*/
}
#front-form row {
margin-bottom: 0;
background-color: transparent;
}
.front {
text-align: left;
margin-left: 2em;
/* vertical center button groups against left side text */
display: flex;
align-items: center;
}
.front-light {
background-color: var(--fg);
box-shadow: 0 0 .5em 1em var(--fg);
@ -143,20 +145,33 @@ pre .value, code .value, code.value {
color: #93cae7;
}
#front-form row {
margin-bottom: 0;
background-color: transparent;
}
.front-buttons {
text-align: left;
margin-left: 2em;
/* vertical center button groups against left side text */
display: flex;
align-items: center;
}
#front-tagline {
margin-bottom: 0;
text-shadow: 0px 0px .5em white, 2px 2px .5em yellow, -2px -2px .5em red;
}
.front > span {
.front-buttons > span {
text-align: right;
}
.front label {
.front-buttons label {
font-size: 1em;
}
.front label img {
.front-buttons label img {
height: 1em;
margin-top: -.2em;
}
@ -241,7 +256,7 @@ pre .value, code .value, code.value {
opacity: 70%;
}
.front .btn-group > .btn {
.front-buttons .btn-group > .btn {
float: none; /* separate buttons */
border-radius: .2em !important;
}

Wyświetl plik

@ -1,4 +1,3 @@
<div class="row">
<ul class="user-items h-feed">
{% for obj in objects %}

Wyświetl plik

@ -42,25 +42,26 @@
</a>
</div>
<div class="col-sm-7 col-xs-5 header-links">
<a href="/docs">Docs</a> &nbsp;
<a href="https://snarfed.org/?s=%22bridgy+fed%22">News</a> &nbsp;
<a href="mailto:feedback@brid.gy">Feedback</a> &nbsp;
<a href="https://github.com/snarfed/bridgy-fed">Source</a>
</div>
<div class="col-sm-7 col-xs-5 header-links">
<a href="/docs">Docs</a> &nbsp;
<a href="https://snarfed.org/?s=%22bridgy+fed%22">News</a> &nbsp;
<a href="mailto:feedback@brid.gy">Feedback</a> &nbsp;
<a href="https://github.com/snarfed/bridgy-fed">Source</a>
</div>
</div>
{% block content %}
{% endblock %}
<div class="header-links">
<a href="/docs">Docs</a> &nbsp;
<a href="https://snarfed.org/?s=%22bridgy+fed%22">News</a> &nbsp;
<a href="mailto:feedback@brid.gy">Feedback</a> &nbsp;
<a href="https://github.com/snarfed/bridgy-fed">Source</a>
<div id="footer" class="row">
<p class="header-links">
<a href="/docs">Docs</a> &nbsp;
<a href="https://snarfed.org/?s=%22bridgy+fed%22">News</a> &nbsp;
<a href="mailto:feedback@brid.gy">Feedback</a> &nbsp;
<a href="https://github.com/snarfed/bridgy-fed">Source</a>
</p>
</div>
</div>
</main>
<script src="/static/fragmention.js"></script>

Wyświetl plik

@ -1,3 +1,4 @@
{% set body_id = 'front' %}
{% extends "base.html" %}
{% block content %}
@ -5,8 +6,6 @@
<script src="/static/bootstrap.min.js"></script>
<script src="/static/index.js"></script>
<div id="front">
<!--
nostr purple
web blue? green? globe
@ -20,7 +19,7 @@ bluesky light blue
<em class="front-form-text">Bridging the new social internet</em>
</div>
<div id="front-me" class="row front">
<div id="front-me" class="row front-buttons">
<span class="col-sm-4 bigger">
<span class="i-label">I'm on</span>
</span>
@ -56,7 +55,7 @@ bluesky light blue
</div>
</div>
<div id="front-them" class="row front">
<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>
@ -132,7 +131,6 @@ bluesky light blue
</p>
</div>
</div> <!-- #front -->
<script src="static/q5.min.js"></script>
<script src="static/topology.js"></script>