Restyle Add Feed

twm · Jan 5, 2025 · 67ad1a1 · 67ad1a1
1 parent 8c62108
commit 67ad1a1
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 62 deletions.
diff --git a/css/main.css b/css/main.css
@@ -256,60 +256,13 @@ select[multiple] {
     }
 }
 
-/* Mostly used for the login page. */
-form.small-form {
-    display: block;
-    margin: 0 auto;
-    padding: 0.5rem 1rem;
-
-    .errorlist {
-        padding: 0;
-        list-style: none;
-        hyphens: auto;
-    }
+/* Django form errors */
+.errorlist {
+    padding: 0;
+    list-style: none;
+    hyphens: auto;
 }
 
-.login-page {
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: stretch;
-
-    margin: 0 auto;
-    max-width: 32rem;
-
-    h1 {
-        margin: 0;
-        padding: 1rem 1rem 0 0;
-        flex: 100 1 auto;
-
-        font: 3.5rem Montez, sans-serif;
-
-        text-align: center;
-
-        img {
-            display: block;
-            margin: 0 auto;
-            filter: var(--logo-filter);
-        }
-    }
-
-    form {
-        flex: 1 1 100%;
-        min-width: 0;
-        margin: 0;
-    }
-
-    /* Desktop layout */
-    @media screen and (min-width: 32rem) {
-        flex-flow: row nowrap;
-        align-items: center;
-        min-height: 90vh;
-
-        form {
-            flex-basis: 15rem;
-        }
-    }
-}
 
 #footer {
     padding: 3em 0.25em;

diff --git a/yarrharr/templates/feed_add.html b/yarrharr/templates/feed_add.html
@@ -3,16 +3,32 @@
 {% block title %}Add Feed{% endblock %}
 
 {% block content %}
-<div id="yarrharr" class="layout-narrow">
+
+<style>
+.feed-add {
+  margin: 2rem auto;
+  padding: 1.5rem 2rem 2rem 2rem;
+  max-width: var(--layout-max-width);
+  background: var(--footer-background-color);
+  border: 2px solid var(--border-color);
+
+  border-radius: 0.5rem;
+}
+h1 {
+  margin: 0 0 1rem 0;
+}
+
+</style>
+
+
+<div id="yarrharr">
 
   {% include "header.html" %}
 
-  <div class="feed-header">
+  <div class="feed-add">
     <h1>Add Feed</h1>
-  </div>
 
-  <div class="inventory-centered">
-    <form action="{% url 'feed-add' %}" method="POST" name="feed-add">
+    <form action="{% url 'feed-add' %}" method="POST" name="feed-add" class="small-form">
       {% csrf_token %}
       {{ form.as_p }}
       <div class="inventory-tools">

diff --git a/yarrharr/templates/label_list.html b/yarrharr/templates/label_list.html
@@ -3,11 +3,7 @@
 {% block title %}Labels{% endblock %}
 
 {% block content %}
-<style>
-/* TODO */
-</style>
-
-<div id="yarrharr" class="layout-narrow">
+<div id="yarrharr">
 
   {% include "header.html" %}
 

diff --git a/yarrharr/templates/login.html b/yarrharr/templates/login.html
@@ -6,6 +6,52 @@
 {% block title %}Login{% endblock %}
 
 {% block content %}
+
+<style>
+.login-page {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: stretch;
+
+    margin: 0 auto;
+    max-width: 32rem;
+
+    h1 {
+        margin: 0;
+        padding: 1rem 1rem 0 0;
+        flex: 100 1 auto;
+
+        font: 3.5rem Montez, sans-serif;
+
+        text-align: center;
+
+        img {
+            display: block;
+            margin: 0 auto;
+            filter: var(--logo-filter);
+        }
+    }
+
+    form {
+        flex: 1 1 100%;
+        min-width: 0;
+        margin: 0;
+        padding: 0.5rem 1rem;
+    }
+
+    /* Desktop layout */
+    @media screen and (min-width: 32rem) {
+        flex-flow: row nowrap;
+        align-items: center;
+        min-height: 90vh;
+
+        form {
+            flex-basis: 15rem;
+        }
+    }
+}
+</style>
+
 <div class="login-page">
     <h1>Yarrharr</h1>