front page redesign: fix styles on other pages

snarfed · Dec 14, 2023 · 3078af2 · 3078af2
1 parent 9db61cb
commit 3078af2
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 49 deletions.
diff --git a/static/style.css b/static/style.css
@@ -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;
 }

diff --git a/templates/activities.html b/templates/activities.html
@@ -1,4 +1,3 @@
-<div class="row">
 <ul class="user-items h-feed">
 
 {% for obj in objects %}

diff --git a/templates/base.html b/templates/base.html
@@ -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>

diff --git a/templates/index.html b/templates/index.html
@@ -1,12 +1,11 @@
+{% set body_id = 'front' %}
 {% extends "base.html" %}
 
 {% block content %}
 <script src="/static/jquery-3.7.1.slim.min.js"></script>
 <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 @@
   <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 @@
 </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 @@
   </p>
 </div>
 
-</div>  <!-- #front -->
 <script src="static/q5.min.js"></script>
 <script src="static/topology.js"></script>