3 files changed, 91 insertions(+), 30 deletions(-)

M public/app.css
M src/views/common.nim
M src/views/utils.nim

@@ 36,11 36,12 @@ body {
     --font: 'Jostvf', sans;
     --font-mono: monospace;
     margin: 0;
-    padding: 0 1rem;
+    padding: 0;
     overflow-wrap: break-word;
     font-family: var(--font);
     background-color: var(--back);
     font-feature-settings: 'kern', 'liga';
+    font-weight: 500;
     color: var(--text);
 }
 


@@ 54,6 55,13 @@ h1 {
     font-weight: 300;
 }
 
+main {
+    width: 100%;
+    max-width: 72ch;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
 ul {
     list-style-type: none;
 }


@@ 63,24 71,34 @@ li:before {
 }
 
 a {
+    color: var(--prime);
     text-decoration: underline;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --back: var(--imperial-purple);
-        --prime: var(--lake-red);
-        --text: var(--wevet);
-    }
+a:visited:after {
+    content: "[visited]";
 }
 
 header {
+    padding: .2rem 0;
+    background: var(--prime);
+    color: var(--wevet);
+}
+
+header > div {
+    width: 100%;
+    max-width: 72ch;
+    padding: 0 1rem;
+    margin: 0 auto;
     display: flex;
     align-items: center;
-    padding: .2rem 0;
     gap: 1rem;
 }
 
+header a {
+    color: var(--wevet);
+}
+
 header nav span {
     padding: 0 .2rem;
 }


@@ 119,16 137,56 @@ header nav span {
 
 .actions form {
     display: none;
+    margin: 0;
 }
 
 .actions input[type=checkbox]:checked ~ form {
     display: inline-block;
 }
 
+.actions .cancel {
+    cursor: pointer;
+}
+
+.actions .delete {
+    text-decoration: underline;
+    color: var(--prime);
+    cursor: pointer;
+}
+
 form {
     margin: 1rem 0;
     max-width: 72ch;
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 1rem;
+}
+
+button {
+    cursor: pointer;
+}
+
+.extra {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+@media (min-width: 72ch) {
+    main,
+    header > div {
+        padding: 0;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --back: var(--imperial-purple);
+        --prime: var(--lake-red);
+        --text: var(--wevet);
+    }
+
+    a {
+        color: var(--text);
+    }
 }=
\ No newline at end of file

@@ 17,13 17,14 @@ proc renderPage*(body: VNode): string =
     renderHead()
     body:
       header:
-        a(href = "/"): text "🛖 urlhut"
-        nav:
-          span: text "["
-          a(href = "/tags"): text "all tags"
-          span: text "|"
-          a(href = "/new"): text "new url"
-          span: text "]"
+        tdiv:
+          a(href = "/"): text "🛖 urlhut"
+          nav:
+            span: text "["
+            a(href = "/tags"): text "all tags"
+            span: text "|"
+            a(href = "/new"): text "new url"
+            span: text "]"
       main:
         body
   result = doctype & $node

@@ 10,18 10,20 @@ proc renderUrl*(item: Item): VNode =
         br()
         text item.url
     p: text item.description
-    ul:
-      for t in item.tags:
-        a(href = &"/tags/{t}"): text &"#{t}"
-    tdiv(class = "actions"):
-      a(href = "/edit/"&item.id): text "edit"
-      input(`type` = "checkbox", id = &"delete-{item.id}")
-      label(`for` = &"delete-{item.id}"):
-        span(class = "delete"):
-          text "delete"
-        span(class = "cancel"):
-          text "cancel"
-      form(`method` = "post", action = "/api/v1/url/delete", autocomplete = "off",
-              enctype = "multipart/form-data"):
-        input(`type` = "hidden", name = "id", value = item.id)
-        button(`type` = "submit"): text "really delete"
+    tdiv(class = "extra"):
+      tdiv:
+        for t in item.tags:
+          a(href = &"/tags/{t}"): text &"#{t}"
+      tdiv(class = "actions"):
+        a(href = "/edit/"&item.id): text "edit"
+        span: text "|"
+        input(`type` = "checkbox", id = &"delete-{item.id}")
+        label(`for` = &"delete-{item.id}"):
+          span(class = "delete"):
+            text "delete"
+          span(class = "cancel"):
+            text "cancel"
+        form(`method` = "post", action = "/api/v1/url/delete", autocomplete = "off",
+                enctype = "multipart/form-data"):
+          input(`type` = "hidden", name = "id", value = item.id)
+          button(`type` = "submit"): text "really delete"