feat: stile della pagina principale della dashboard

2023-05-04 22:10:17 +02:00
parent 2c5d9cf543
commit b9073cebbb
5 changed files with 4900 additions and 28 deletions
@@ -10,34 +10,136 @@ body {
    width: 100%;
    min-height: 100vh;

-    font-family: 'Inter', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
+    font-family: "Open Sans", "Segoe UI", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
+
+    color: #284a36;
 }

-// Headings
+::selection {
+    background-color: #496152;
+    color: #fff;
+}

-$base-font-size: 18px;
-$heading-scale: 1.33;
+img {
+    display: block;
+}

-@function pow($number, $exponent) {
-    $value: 1;
+//
+// Components
+//

-    @if $exponent > 0 {
-        @for $i from 1 through $exponent {
-            $value: $value * $number;
+//
+// Structure
+//
+
+body {
+    display: grid;
+    grid-template-columns: auto 1fr;
+
+    .sidebar {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        background-color: #fff;
+
+        padding: 16px;
+
+        .top,
+        .bottom {
+            display: flex;
+            flex-direction: column;
+
+            gap: 8px;
+
+            .logo {
+                font-size: 6px;
+
+                padding: 16px;
+
+                font-family: "Ubuntu Mono", monospace;
+                font-weight: 700;
+
+                display: grid;
+                place-content: center;
+
+                user-select: all;
+            }
+
+            .item {
+                display: flex;
+                gap: 8px;
+                padding: 8px 16px;
+                align-items: center;
+                border-radius: 12px;
+
+                user-select: none;
+                cursor: pointer;
+
+                .icon {
+                    display: grid;
+                    place-content: center;
+
+                    color: #284a36;
+
+                    img {
+                        width: 18px;
+                        height: 18px;
+                    }
+                }
+
+                .label {
+                    color: #496152;
+                    a {
+                        color: inherit;
+                        text-decoration: none;
+                    }
+                }
+
+                &:hover {
+                    background-color: #e8ede9;
+                }
+            }
        }
    }

-    @return $value;
-}
+    .main {
+        background-color: rgb(245, 246, 250);
+        display: grid;
+        grid-template-columns: 1fr 1fr;

-@for $i from 1 through 5 {
-    h#{$i} {
-        margin: 0;
+        padding: 32px;
+        gap: 32px;

-        $factor: pow($heading-scale, 5 - $i);
-        font-size: $base-font-size * $factor;
+        height: 100vh;

-        line-height: 1.5;
+        overflow-y: auto;
+
+        .card {
+            border-radius: 32px;
+            padding: 24px 32px;
+            background-color: #fff;
+            display: grid;
+            grid-template-rows: auto 1fr;
+            gap: 8px;
+
+            .label {
+                font-weight: 600;
+            }
+
+            .graph {
+                background-color: #f4f5f9;
+
+                min-height: 300px;
+            }
+        }
+
+        @media screen and (max-width: 1100px) {
+            grid-template-columns: 1fr;
+        }
    }
 }
+
+//
+// Media Queries
+//