various tweaks

leftists/static/css/index.css

@@ -11,6 +11,7 @@ body {
     font-variation-settings: var(--font-mono), var(--font-casl), var(--font-wght), var(--font-slnt), var(--font-rep-roman);
     background: lightgrey;
     margin: 0;
+    transition: all 200ms;
 }
 
 nav {
@@ -30,22 +31,26 @@ main {
     display: flex;
     flex-direction: column;
     position: absolute;
-    top: 25%;
+    margin-top: 4ch;
     left: 50%;
     margin-right: -50%;
-    transform: translate(-50%, -50%);
+    max-width: 1000px;
+    transform: translateX(-50%);
 }
 
 th, td {
     padding: 0 0.5ch;
 }
+tr:nth-child(even) {
+    background-color: #dddddd;
+  }
 
 .section {
     border: 1px #666 solid;
     border-radius: 1ch;
     background: white;
     box-shadow: 0.5ch 0.5ch 1ch #bbb;
-    padding: 1ch;
+    padding: 2ch;
     margin-bottom: 2ch;
 }
 
@@ -72,9 +77,58 @@ h4 {
     margin: 0 1ch;
 
 }
+#id_domain { flex-grow: 1;}
+#id_location { flex-grow: 5;}
 #id_to { flex-grow: 1;}
 
 .ov-domains {
     display: flex;
     flex-direction: column;
 }
+
+a {
+    text-decoration: none;
+}
+
+input, select {
+    border-radius: 0.5ch;
+    border-width: 1px;
+    padding: 0.5ch 1ch;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: black;
+        color: white;
+    }
+
+    nav {
+        background-color: #111;
+        border: 1px #333 solid;
+        box-shadow: 0.5ch 0.5ch 1ch #222;
+    }
+    .section {
+        border: 1px #333 solid;
+        background: #111;
+        box-shadow: 0.5ch 0.5ch 1ch #222;
+    }
+
+    a {
+        color: #8fb0ff;
+        font-weight: bold;
+    }
+    input, select {
+        color: white;
+        border-radius: 0.5ch;
+        border-width: 1px;
+        padding: 0.5ch 1ch;
+        border-color: #666;
+        background: #111;
+    }
+    input[type="submit"] {
+        background: #444;
+    }
+    tr:nth-child(even) {
+        background-color: #000;
+      }
+}

leftists/templates/interface/create_link.html

@@ -5,7 +5,7 @@
         {% csrf_token %}
         <h4>Create new link</h4>
         <div class="cl-from">
-        {{ form.domain }} <p class="cl-form-deco">/</p> {{ form.location }}
+        {{ form.domain }} <p class="cl-form-deco" style="padding-top: 0.5ch;">/</p> {{ form.location }}
         </div>
         <div class="cl-to">
         <p class="cl-form-deco">→</p> {{ form.to }}

leftists/templates/interface/overview.html

@@ -17,7 +17,7 @@
     </tr>
     {% for link in links %}
         <tr>
-            <td><code><a href="{% url 'interface.link.update' link.slug %}">[e]</a> | <a href="{% url 'interface.link.delete' link.slug %}">[d]</a></code></td>
+            <td><code><a href="{% url 'interface.link.update' link.slug %}" alt="edit redirect">🖊️</a> | <a href="{% url 'interface.link.delete' link.slug %}" alt="delete redirect">🗑️</a> | 📊 </code></td>
             <td>{{ link.link }}</td>
             <td>{{ link.to }}</td>
         </tr>

leftists/views.py

@@ -50,7 +50,7 @@ class LinkCreateView(LoginRequiredMixin, CreateView):
 
 
 class LinkUpdateView(LoginRequiredMixin, UpdateView):
-    template_name = 'interface/basic_form.html'
+    template_name = 'interface/create_link.html'
     model = ShortLink
     form_class = LinkForm
     success_url = reverse_lazy('interface.overview')