major scss to css refactor, removed pageTags and simplified per page css

2025-06-06 00:51:08 +02:00
parent ddca56e868
commit a2125bdab7
34 changed files with 1639 additions and 1443 deletions
@@ -0,0 +1,185 @@
+/* @import './mixins.scss'; */
+
+/*
+Controls - for things like buttons, input, select
+*/
+
+@layer base {
+    button,
+    .button,
+    [role='button'] {
+        appearance: none;
+
+        background: #fff;
+
+        /* @include neo-brutalist-card; */
+        border: 3px solid #222;
+        border-radius: 6px;
+        box-shadow: 4px 4px 0 0 #222;
+
+        transition: all 64ms linear;
+
+        display: grid;
+        place-content: center;
+
+        &:hover {
+            transform: translate(-1px, -1px);
+            box-shadow: 5px 5px 0 0 #222;
+        }
+
+        &:active {
+            transform: translate(2px, 2px);
+            box-shadow: 2px 2px 0 0 #222;
+        }
+
+        & {
+            padding: 0.25rem 1.5rem;
+
+            text-decoration: none;
+            color: #222;
+
+            font-family: var(--font-secondary); /* TODO: check if this is a global variable and replace */
+            font-weight: 600;
+
+            cursor: pointer;
+        }
+
+        &.primary {
+            background: #1e6733;
+            color: #f4fef7;
+
+            &:hover {
+                background: #2b8b47;
+            }
+        }
+
+        &.icon {
+            padding: 0.25rem;
+            margin-right: 0.25rem;
+            margin-bottom: 0.25rem;
+        }
+
+        &.flat {
+            background: transparent;
+            color: #222;
+
+            border: none;
+            box-shadow: none;
+
+            &:hover {
+                background: #0002;
+            }
+        }
+    }
+
+    input[type='text'],
+    input[type='password'] {
+        width: 100%;
+        height: 2.5rem;
+
+        /* @include neo-brutalist-card; */
+        border: 3px solid #222;
+        border-radius: 6px;
+        box-shadow: 4px 4px 0 0 #222;
+
+        padding: 0 0.25rem;
+
+        &:hover {
+            background: #fdfdfd;
+        }
+    }
+
+    form {
+        display: grid;
+        gap: 1rem;
+        padding: 2rem;
+
+        background: #38adc1;
+
+        min-width: 40ch;
+
+        /* @include neo-brutalist-card($size: 3px, $offset: 9px); */
+        border: 3px solid #222;
+        border-radius: 6px;
+        box-shadow: 9px 9px 0 0 #222;
+
+        button,
+        .button,
+        [role='button'] {
+            padding-left: 3rem;
+            padding-right: 3rem;
+
+            &.primary {
+                background: #1c7f90;
+                color: #f4fef7;
+
+                &:hover {
+                    background: #4ea2b1;
+                }
+            }
+        }
+
+        hr {
+            border: none;
+            width: 100%;
+            height: 2px;
+            background: #0003;
+
+            margin-top: 1rem;
+        }
+
+        .right {
+            justify-self: end;
+        }
+        .left {
+            justify-self: start;
+        }
+        .center {
+            justify-self: center;
+        }
+    }
+
+    details {
+        width: 100%;
+
+        summary {
+            display: grid;
+            place-content: center;
+            place-items: center;
+
+            list-style: none;
+            &::-webkit-details-marker {
+                display: none;
+            }
+        }
+
+        .details-openned,
+        .details-closed {
+            display: contents;
+        }
+
+        &:not([open]) {
+            .details-openned {
+                display: none;
+            }
+        }
+
+        &[open] {
+            summary {
+                padding-bottom: 1rem;
+            }
+
+            .details-closed {
+                display: none;
+            }
+        }
+
+        @media screen and (max-width: 1024px) {
+            /* TODO: check if this is a global variable and replace */
+            summary {
+                place-content: stretch;
+                place-items: stretch;
+            }
+        }
+    }
+}