css update

go.mod

@@ -1,6 +1,6 @@
 module smt
 
-go 1.24.3
+go 1.24.4
 
 require (
 	github.com/gin-gonic/gin v1.10.1

www/mvp.css

@@ -1,4 +1,4 @@
-/* MVP.css v1.14 - https://github.com/andybrewer/mvp */
+/* MVP.css v1.17 - https://github.com/andybrewer/mvp */
 
 :root {
   --active-brightness: 0.85;
@@ -14,16 +14,16 @@
   --color-table: #118bee;
   --color-text: #000;
   --color-text-secondary: #999;
+  --color-scrollbar: #cacae8;
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   --hover-brightness: 1.2;
   --justify-important: center;
-    --justify-table: left;
   --justify-normal: left;
   --line-height: 1.5;
   --width-card: 285px;
   --width-card-medium: 460px;
   --width-card-wide: 800px;
-/*    --width-content: 1080px;*/
+  --width-content: 1080px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -73,14 +73,14 @@ header,
 main {
   margin: 0 auto;
   max-width: var(--width-content);
-    padding: 1rem 1rem;
+  padding: 3rem 1rem;
 }
 
 hr {
   background-color: var(--color-bg-secondary);
   border: none;
   height: 1px;
-    margin: 2rem 0;
+  margin: 4rem 0;
   width: 100%;
 }
 
@@ -178,7 +178,7 @@ nav ul li ul {
   display: none;
   height: auto;
   left: -2px;
-    padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   position: absolute;
   top: 1.7rem;
   white-space: nowrap;
@@ -201,6 +201,24 @@ nav ul li ul li a {
   display: block;
 }
 
+/* Nav for Mobile */
+@media (max-width: 768px) {
+  nav {
+    flex-wrap: wrap;
+  }
+
+  nav ul li {
+    width: calc(100% - 1em);
+  }
+
+  nav ul li ul {
+    border: none;
+    box-shadow: none;
+    display: block;
+    position: static;
+  }
+}
+
 /* Typography */
 code,
 samp {
@@ -228,6 +246,7 @@ h4,
 h5,
 h6 {
   line-height: var(--line-height);
+  text-wrap: balance;
 }
 
 mark {
@@ -283,14 +302,14 @@ a {
   text-decoration: underline;
 }
 
-a:active {
-    filter: brightness(var(--active-brightness));
-}
-
 a:hover {
   filter: brightness(var(--hover-brightness));
 }
 
+a:active {
+  filter: brightness(var(--active-brightness));
+}
+
 a b,
 a em,
 a i,
@@ -311,17 +330,17 @@ input[type="submit"] {
   font-family: var(--font-family);
 }
 
-button:active,
-input[type="submit"]:active {
-    filter: brightness(var(--active-brightness));
-}
-
 button:hover,
 input[type="submit"]:hover {
   cursor: pointer;
   filter: brightness(var(--hover-brightness));
 }
 
+button:active,
+input[type="submit"]:active {
+  filter: brightness(var(--active-brightness));
+}
+
 a b,
 a strong,
 button,
@@ -402,8 +421,8 @@ input[type="radio"] {
   display: inline-block;
 }
 
-input[type="checkbox"]+label,
+input[type="checkbox"] + label,
-input[type="radio"]+label {
+input[type="radio"] + label {
   display: inline-block;
   font-weight: normal;
   position: relative;
@@ -424,6 +443,7 @@ textarea {
 }
 
 input[type="text"],
+input[type="password"],
 textarea {
   width: calc(100% - 1.6rem);
 }
@@ -440,15 +460,53 @@ label {
 
 /* Popups */
 dialog {
+  max-width: 90%;
+  max-height: 85dvh;
+  margin: auto;
+  padding: 0;
   border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
+  border-radius: 0.5rem;
-    box-shadow: var(--box-shadow) var(--color-shadow);
+  overscroll-behavior: contain;
-    position: fixed;
+  scroll-behavior: smooth;
-    top: 50%;
+  scrollbar-width: none; /* Hide scrollbar for Firefox */
-    left: 50%;
+  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
-    transform: translate(-50%, -50%);
+  scrollbar-color: transparent transparent;
-    width: 50%;
+  animation: bottom-to-top 0.25s ease-in-out forwards;
-    z-index: 999;
+}
+
+dialog::-webkit-scrollbar {
+  width: 0;
+  display: none;
+}
+
+dialog::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+dialog::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+
+@media (min-width: 650px) {
+  dialog {
+    max-width: 39rem;
+  }
+}
+
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+@keyframes bottom-to-top {
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Tables */
@@ -460,14 +518,14 @@ table {
   max-width: 100%;
   overflow-x: auto;
   padding: 0;
-    /*white-space: nowrap;*/
+  white-space: nowrap;
 }
 
 table td,
 table th,
 table tr {
   padding: 0.4rem 0.8rem;
-    text-align: var(--justify-table);
+  text-align: var(--justify-important);
 }
 
 table thead {
@@ -479,11 +537,11 @@ table thead {
   padding: 0;
 }
 
-table thead th:first-child {
+table thead tr:first-child th:first-child {
   border-top-left-radius: var(--border-radius);
 }
 
-table thead th:last-child {
+table thead tr:first-child th:last-child {
   border-top-right-radius: var(--border-radius);
 }
 
@@ -518,7 +576,7 @@ blockquote footer {
 /* Scrollbars */
 * {
   scrollbar-width: thin;
-    scrollbar-color: rgb(202, 202, 232) auto;
+  scrollbar-color: var(--color-scrollbar) transparent;
 }
 
 *::-webkit-scrollbar {
@@ -531,6 +589,6 @@ blockquote footer {
 }
 
 *::-webkit-scrollbar-thumb {
-    background-color: rgb(202, 202, 232);
+  background-color: var(--color-scrollbar);
   border-radius: 10px;
 }