feat(style): add daisyUI

Author: goshatch

bun.lockb

@@ -9,6 +9,7 @@
     "@tailwindcss/postcss": "^4.0.8",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
+    "daisyui": "^5.0.2",
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.0",
     "postcss-nesting": "^13.0.1",

package.json

@@ -1,260 +1,5 @@
-/* TODO: Uncomment Tailwind when we're ready for it! */
-/* @import "tailwindcss"; */
-
-:root {
-    --color-bg: #ffffff;
-    --color-bg-secondary: rgba(223, 236, 234, 0.75);
-    --color-text: #444444;
-    --color-text-subdued: #666666;
-    --color-primary: #62a294;
-    --color-secondary: #f2be56;
-    --color-tertiary: #d1b43c;
-    --color-callout: #ffeece;
-    --color-input-border: #cccccc;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html,
-body {
-    height: 100%;
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-    font-family:
-        system-ui,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        Oxygen,
-        Ubuntu,
-        Cantarell,
-        "Open Sans",
-        "Helvetica Neue",
-        sans-serif;
-    font-size: 18px;
-    line-height: 1.8em;
-    margin: 0px;
-    background-color: var(--color-bg);
-    color: var(--color-text);
-}
-
-a {
-    color: var(--color-primary);
-    &:visited {
-        color: var(--color-tertiary);
-    }
-}
-
-header {
-    .logo {
-        color: black;
-        img {
-            max-width: 200px;
-        }
-    }
-    .content {
-        padding-top: 2rem;
-    }
-}
-
-footer {
-    background-color: var(--color-primary);
-    color: var(--color-bg);
-    font-size: 0.8em;
-    line-height: 1.2em;
-    width: 100%;
-    gap: 1rem;
-    flex: 1;
-    .content {
-        padding: 4rem 0rem;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: space-between;
-    }
-
-    a,
-    a:visited,
-    a:hover {
-        color: var(--color-bg);
-        font-weight: bold;
-    }
-}
-
-.container {
-    padding: 0rem 4rem;
-}
-
-.content {
-    width: 100%;
-    margin: 0 auto;
-    max-width: 1200px;
-}
-
-.main {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    gap: 3rem;
-}
-
-.illustration {
-    width: 50%;
-    p {
-        text-align: center;
-    }
-    img {
-        width: 100%;
-        max-width: 400px;
-    }
-}
-
-.aboutus {
-    background-color: var(--color-bg-secondary);
-    .content {
-        padding: 2rem 0 4rem 0;
-    }
-}
-
-.signup {
-    margin: 2rem auto;
-    width: 50%;
-    max-width: 500px;
-
-    form {
-        display: flex;
-        margin-bottom: 0px;
-    }
-    input {
-        padding: 0.5rem;
-        border-radius: 10px;
-        font-size: 1.5rem;
-        box-sizing: border-box;
-    }
-    input[type="email"] {
-        flex: 2;
-        border: 2px solid var(--color-input-border);
-    }
-    input[type="submit"] {
-        flex: 1;
-        margin-left: 0.5rem;
-        border: 2px solid var(--color-primary);
-        background-color: var(--color-primary);
-        color: white;
-    }
-    .error {
-        p {
-            &::before {
-                content: "⤴︎";
-                transform: scaleX(-1);
-                position: absolute;
-                left: -1.1rem;
-                top: -0.3rem;
-            }
-            margin-top: 0.2rem;
-            margin-left: 1.5rem;
-            position: relative;
-        }
-    }
-    .success {
-        background-color: var(--color-callout);
-        padding: 0.1rem 1rem;
-        border-radius: 1rem;
-        text-align: center;
-    }
-}
-
-.hero {
-    max-width: 800px;
-    h1 {
-        font-family:
-            "DM Serif Display", Georgia, Times, "Times New Roman", serif;
-        color: var(--color-primary);
-        font-weight: normal;
-        font-size: 3rem;
-        line-height: 1.2em;
-    }
-}
-
-.person-cards {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    gap: 3rem;
-    .person-card {
-        padding-left: 10rem;
-        position: relative;
-        min-height: 8rem;
-        img {
-            position: absolute;
-            top: 0px;
-            left: 0px;
-            height: 8rem;
-            width: 8rem;
-            border-radius: 50%;
-        }
-        p {
-            margin: 0;
-        }
-    }
-}
-
-@media (max-width: 900px) {
-    .main {
-        flex-direction: column;
-        gap: 0;
-    }
-
-    .person-cards {
-        flex-direction: column;
-        gap: 1rem;
-    }
-
-    .illustration,
-    .signup {
-        width: 100%;
-    }
-
-    .signup {
-        margin-top: 0;
-    }
-}
-
-@media (max-width: 600px) {
-    .hero h1 {
-        font-size: 2rem;
-    }
-
-    .signup form {
-        flex-direction: column;
-    }
-
-    .signup input[type="email"],
-    .signup input[type="submit"] {
-        flex: 1;
-        width: 100%;
-        margin-left: 0;
-        margin-bottom: 0.5rem;
-    }
-
-    .container {
-        padding: 0rem 1rem;
-    }
-
-    footer .content {
-        flex-direction: column;
-        gap: 0;
-        padding: 2rem 0rem;
-    }
-}
+@import "tailwindcss";
+@plugin "daisyui";
 
 .system-view {
     .node {
@@ -296,7 +41,6 @@ footer {
     }
 
     .parts-toolbar {
-        background: white;
         border-radius: 5px;
         padding: 0.2rem 0.5rem;
         border: 1px solid #cccccc;