organize files

styles/window.css

@@ -0,0 +1,187 @@
+/* ---------------
+- window styling -
+---------------- */
+
+.window {
+    summary {
+        display: inline-flex;
+        min-width: 100%;
+        background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
+        opacity: .8;
+        text-align: center;
+        vertical-align: middle;
+        overflow: clip;
+        transition: .2s opacity;
+
+        div:first-child {
+            background: color-mix(in srgb, var(--accent) 40%, transparent);
+            padding: .4rem .4rem .2rem 1rem;
+            border-right: .2rem solid var(--accent);
+            border-bottom-right-radius: 1rem;
+
+            span {
+                background-color: var(--foreground);
+            }
+        }
+
+        a {
+            padding: .3rem 0rem .3rem .5rem;
+            text-decoration: none;
+            color: var(--foreground);
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        [class^="tabler--"] {
+            transform: scale(1.1);
+        }
+
+        div:nth-child(3) {
+            margin-left: auto !important;
+            padding: .2rem .5rem .2rem 0rem;
+            
+            span {
+                text-align: center;
+                vertical-align: middle;
+                background-color: var(--foreground);
+            }
+
+            /* maximize button (which does nothing) */
+            span:nth-child(2) {
+                opacity: .6;
+                cursor: not-allowed;
+            }  
+        }
+
+        /* close button */
+        div:nth-child(4) {
+            background: color-mix(in srgb, var(--accent) 40%, transparent);
+            padding: .4rem .5rem .2rem .6rem;
+            border-left: .2rem solid var(--accent);
+            border-bottom-left-radius: 1rem;
+            color: var(--foreground);
+
+            transition: background .2s;
+            transition: background-color .2s;
+        }
+
+        /* close button (animated on hover) */
+        div:nth-child(4):hover {
+            background: var(--red);
+
+            transition: background .2s;
+
+            span {
+                background-color: var(--background);
+                transition: background-color .2s;
+            }
+        }
+    }
+
+    section, article {
+        padding: .8rem;
+    }
+
+    background-color: var(--background);
+    color: var(--foreground);
+
+    border: var(--accent) solid .15rem;
+    border-radius: .6rem;
+
+    max-width: 60em;
+    overflow: clip;
+
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 2em;
+
+    transition: .2s box-shadow;
+    animation-fill-mode: backwards;
+
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+/* window styling when hovered */
+.window:hover {
+    summary {
+        opacity: 1;
+        transition: .2s opacity;
+    }
+}
+
+/* window styling when open (default state) */
+.window[open] {
+    summary {
+        opacity: 1;
+        border-bottom: .1rem solid var(--accent);
+
+        transition: .2s opacity;
+    }
+
+    border-radius: 2rem .6rem 2rem .6rem;
+}
+
+.window:hover {
+    box-shadow: var(--accent) 0px 0px 0px .3rem;
+
+    transition: .2s box-shadow;
+}
+
+/* window when its the first one on the page */
+.window:nth-child(2) {
+    margin-top: 5rem;
+
+    animation: .3s ease-out .2s 1 window-appear;
+    animation-fill-mode: backwards;
+}
+
+/* rest of the windows if they exist, to finish the rest of the animations */
+.window:nth-child(3) {
+    animation: .3s ease-out .4s 1 window-appear;
+    animation-fill-mode: backwards;
+}
+
+.window:nth-child(4) {
+    animation: .3s ease-out .6s 1 window-appear;
+    animation-fill-mode: backwards;
+}
+
+.window:nth-child(5) {
+    animation: .3s ease-out .8s 1 window-appear;
+    animation-fill-mode: backwards;
+}
+
+.window:nth-child(6) {
+    animation: .3s ease-out 1s 1 window-appear;
+    animation-fill-mode: backwards;
+}
+
+.window:nth-child(7) {
+    animation: .3s ease-out 1.2s 1 window-appear;
+    animation-fill-mode: backwards;
+}
+
+.window:nth-child(8) {
+    animation: .3s ease-out 1.4s 1 window-appear;
+    animation-fill-mode: backwards;
+}
+
+/* ------------------
+- the footer window -
+------------------ */
+
+footer {
+    max-width: 30em;
+    margin-left: auto;
+    margin-right: auto;
+
+    details > summary > a {
+        padding: .3rem 0rem .3rem 1rem !important;
+    }
+
+    section, article {
+        padding: 1rem !important;
+    }
+}