M views/honkpage.html → views/honkpage.html

@@ -42,7 +42,7 @@ </div>
 {{ if eq .ServerMessage "one honk maybe more" }} <script> hideelement("refreshbox")</script> {{ end }}
 {{ end }}
 <div id="honksonpage">
-<div>
+<div class="honkboxes">
 {{ $BonkCSRF := .HonkCSRF }}
 {{ $IsPreview := .IsPreview }}
 {{ $MapLink := .MapLink }}

M views/style.css → views/style.css

@@ -1,11 +1,13 @@ 
 :root {
   --bg-page: #F5EFFF;
-  --bg-dark: #E5D9F2;
-  --bg-limited: #CDC1FF;
+  --bg-dark: #6BD2F2;
+  --bg-limited: #4CC9F0;
   --fg: #02013C;
-  --fg-subtle: #9280B3;
-  --fg-limited: #E5D9F2;
-  --hl: #CDC1FF;
+  --fg-subtle: #3A0CA3;
+  --fg-limited: #F72585;
+  --hl: #4361EE;
+  --header: #F72585;
+  --header-fg: var(--bg-page);
 }
 
 ::selection {
@@ -21,7 +23,9 @@ --fg: #ccc;
     --hl: #333;
     --fg-subtle: #ccc;
     --fg-limited: #509c93;
-    --bg-limited: #333;
+    --bg-limited: #777;
+    --header: #509c93;
+    --header-fg: #111;
   }
 }
 
@@ -57,13 +61,6 @@ display: block;
   max-width: 100%;
   overflow-x: auto;
 }
-a {
-  color: var(--fg);
-}
-
-a:hover {
-  background: var(--bg-limited);
-}
 
 form, input, textarea {
   font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
@@ -78,28 +75,31 @@ color: var(--fg);
   font-size: 1.0em;
   line-height: 1.2em;
   padding: 0.4em;
+  border: 1px solid var(--hl);
 }
 #honkform input {
   font-size: 0.8em;
 }
 body > header {
+  background: var(--header);
   max-width: 100%;
   margin: 0px;
   padding: 1em 0em 2em 0em;
   font-size: 1.5em;
-  color: white !important;
+  color: var(--header-fg);
 }
 body > header span {
   margin-left: 2em;
 }
 
-header > a {
+.easylinks a {
   text-decoration: none !important;
+  color: var(--header-fg);
 }
 
 header > details {
   padding: 1em 1em 1em 1em;
-  color: var(--fg);
+  color: var(--header-fg);
   position: fixed;
   top: 0;
   left: 0;
@@ -111,6 +111,7 @@ overscroll-behavior: contain;
   z-index: 2;
 }
 header > details[open] {
+  color: var(--fg);
   padding: 1em 1em 0em 1em;
   background: var(--bg-dark);
   margin-bottom: 1em;
@@ -137,8 +138,8 @@ hr {
   border-color: var(--hl);
 }
 .info {
-  background: var(--bg-dark);
-  border: 1px solid var(--bg-dark);
+  background: var(--bg-page);
+  border: 1px solid var(--hl);
   margin-bottom: 1em;
   padding: 0em 1em 0em 1em;
   margin-top: 1em;
@@ -151,7 +152,7 @@ label {
   font-size: 0.8em;
 }
 label.button, button, select {
-  border: 1px solid var(--hl);
+  border: none;
   font-size: 14px;
   font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
   color: var(--fg);
@@ -181,6 +182,7 @@ form {
   margin-top: 1em;
 }
 textarea {
+  border: 1px solid var(--hl);
   padding: 0.5em;
   font-size: 1em;
   background: var(--bg-page);
@@ -217,14 +219,18 @@ }
 
 .honk {
   margin: auto;
-  background: var(--bg-dark);
-  border: 0px solid var(--hl);
-  margin-bottom: 1em;
-  border-radius: 0em !important;
+  background: var(--bg-page);
+  border-top: 1px solid var(--hl);
+  border-left: 1px solid var(--hl);
+  border-right: 1px solid var(--hl);
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 0;
   overflow: hidden;
+}
+
+.honkboxes:last-child {
+  border-bottom: 1px solid var(--hl);
 }
 
 .chat {
@@ -407,6 +413,16 @@ }
 
 #emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 1px var(--fg-subtle);text-align:center;}
 #emupicker img{margin:0;}
+
+a {
+  color: var(--fg);
+}
+
+a:hover {
+  background: var(--bg-limited);
+}
+
+
 
 @media screen and (max-width: 1360px) {
   .nophone {