Merge SCSS mixins and variables into globals

2025-06-20 03:21:59 +02:00 · 2021-11-07 14:20:31 +00:00 · 2021-11-07 14:20:31 +00:00 · 324d816c0a
commit 324d816c0a
parent 4fadc5675b
14 changed files with 27 additions and 34 deletions
--- a/src/_globals.scss
+++ b/src/_globals.scss
@ -0,0 +1,119 @@
+$layoutWidth: 1200px;
+$accentColor: #e52b3e;
+$accentColorDarker: darken($accentColor, 5);
+$background: #070707;
+$lightBackground: #fff;
+$textColor: white;
+$lightTextColor: black;
+$layoutPadding: 20px;
+
+$noticeColor: rgba(#e52b3e, .15);
+
+$mainFont: "Fira Code", monospace;
+
+
+@mixin flexList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+@mixin cardGeneric {
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
+    transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
+        color 0.25s;
+    color: $textColor;
+    text-decoration: none;
+    margin: 20px;
+    background: $background;
+
+    &:hover,
+    &:active,
+    &:focus {
+        transform: scale(1.05);
+        box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
+            -1px 11px 33px -10px rgba($accentColor, 0.75);
+    }
+
+    @media (prefers-color-scheme: light) {
+        box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
+
+        background: $lightBackground;
+        color: $lightTextColor;
+
+        &:hover,
+        &:active,
+        &:focus {
+            transform: scale(1.05);
+            box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
+                -1px 11px 33px -10px rgba($accentColor, 0.75);
+        }
+    }
+}
+
+@mixin buttonBasic {
+    display: flex;
+    padding: 10px;
+    text-align: center;
+    background: $accentColorDarker;
+    color: white;
+    text-decoration: none;
+    box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
+    transition: box-shadow 0.25s;
+    align-items: center;
+    justify-content: center;
+    text-shadow: 0 0 10px black;
+
+    @media (prefers-color-scheme: light) {
+        background-color: $accentColor;
+    }
+
+    svg {
+        margin-left: 10px;
+    }
+
+    &:hover,
+    &:active,
+    &:hover {
+        box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
+    }
+}
+
+@mixin button {
+    @include buttonBasic;
+    border-radius: 5px;
+}
+
+@mixin homeBanner {
+    background: lighten($background, 1);
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    transition: background-color 0.25s, color 0.25s;
+
+    @media (prefers-color-scheme: light) {
+        background: darken($accentColor, 1);
+    }
+
+    > div {
+        display: flex;
+        height: 100%;
+        padding: 20px !important;
+        line-height: 50px;
+        font-size: 1.7em;
+        color: white;
+
+        > span {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        > i {
+            display: inline-flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+    }
+}