better css

2026-07-29 04:09:53 -07:00
parent de217ffd19
commit 1dad86b494
2 changed files with 15 additions and 57 deletions
@@ -1,67 +1,21 @@
-* {    
-    transition: opacity 0.5s ease-out;
+:root {
+    color-scheme: light dark;
 }
-
-body {
-    font-family: sans-serif;
-    font-size: 2vh;
+.header,form {
+    border-bottom: solid lightgrey;
 }
-
-h1{
-    font-size: 5vh;
-}
-
-form {
-    border: solid lightgray;
-}
-
-form.delete {
-    opacity: 0;
-}
-
-textarea {
-    resize: both;
-}
-
-.flex {
-    display: flex;
-}
-
-input[type=number] {
-    width: 5em;
-}
-
-img {
-    height: 13em;
-    width: 13em;
-    border: solid lightgray;
-}
-
-input[type=file] {
-    width: 13em;
-}
-
 .header {
    position: sticky;
    top: 0px;
-    background-color: white;
    display: block;
-    border-bottom: solid lightgrey;
+    background-color: light-dark(#f9f9f9, #222222);
 }
-
-.username {
-    min-width: 13.05em;
+form {
+    padding-bottom: 10px;
+}
+a {
+    color:dodgerblue;
 }
-
 .hidden {
    display: none;
-}
-
-@media (max-aspect-ratio: 2/3) {
-    body {
-        font-size: 3vw;
-    }
-    h1 {
-        font-size: 7.5vw;
-    }
 }
@@ -1,7 +1,11 @@
 <!DOCTYPE html>

 <head>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
+    <link rel="icon" href="data:image/png;base64,iVBORw0KGgo=">
+    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" />
+    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css"
+        media="screen and (prefers-color-scheme: dark)" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <script type="module" src="index.js"></script>
 </head>