@appartmint/mint 0.9.2 → 0.9.7

package/src/scss/imports/components/_footer.scss

@@ -0,0 +1,19 @@
+/// _footer.scss - Header styles
+/// @author App/Art Mint
+/// 
+/// @group Components
+@charset 'utf-8';
+
+/// Footer Styles
+app-footer {
+    display: flex;
+    flex-direction: column;
+
+    &::before {
+        content: '';
+        display: flex;
+        flex-grow: 1;
+        height: 100%;
+        background: css-var(trans);
+    }
+}

package/src/scss/imports/components/_header.scss

@@ -5,6 +5,7 @@
 @charset 'utf-8';
 
 /// Imports
+@use 'sass:math';
 @use '../util' as *;
 
 /// CSS Variables
@@ -22,13 +23,13 @@
     width: 100%;
     color: css-var(header-fg);
     background-color: css-var(header-bg);
-    z-index: 1000;
+    z-index: 10000;
 
     &#{class(js)} {
         align-items: center;
         flex-direction: row;
         height: css-var(header-height);
-        padding: calc(css-var(header-height) / 2);
+        padding: 0 calc(css-var(header-height) / 2);
 
         #{controls(wrapper)} {
             display: inline-block;
@@ -149,6 +150,52 @@
 
     #{controls(wrapper)} {
         display: none;
+        position: relative;
+        padding: $menu-btn-padding;
+        width: $menu-bar-width + $menu-btn-padding * 2;
+        height: $menu-btn-height + $menu-btn-padding * 2;
+        margin-left: auto;
+        border-radius: $border-radius;
+        background: css-var($menu-btn-color);
+        box-shadow: $menu-btn-shadow-size css-var($menu-btn-shadow-color);
+
+        #{class(menu-icon)} {
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+
+            &, &::before, &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                left: 50%;
+                height: $menu-bar-height;
+                width: $menu-bar-width;
+                background-color: css-var($menu-bar-color);
+                transition: delay(default);
+            }
+
+            &::before {
+                transform: translate(-50%, -200%);
+            }
+
+            &::after {
+                transform: translate(-50%, 200%);
+            }
+        }
+
+        &#{expanded(true)} {
+            #{class(menu-icon)} {
+                background: transparent;
+                &::before {
+                    transform: translate(-50%, 0) rotate(45deg);
+                }
+
+                &::after {
+                    transform: translate(-50%, 0) rotate(-45deg);
+                }
+            }
+        }
     }
 
     #{id(wrapper)} {

package/src/scss/imports/components/_index.scss

@@ -1,5 +1,6 @@
 @use './backgrounds';
 @use './buttons';
 @use './cards';
+@use './footer';
 @use './header';
 @use './image';

package/src/scss/imports/global/_global.scss

@@ -12,10 +12,6 @@ html, body {
     color: css-var(fore);
     background-color: css-var(back);
     overflow-x: hidden;
-}
-
-html, body, main {
-    width: 100%;
     min-height: 100vh;
     margin: 0;
     padding: 0;
@@ -25,7 +21,24 @@ main {
     display: flex;
     flex-direction: column;
     position: relative;
+    width: 100%;
+    min-height: calc(100vh - css-var(header-height));
     z-index: 1000;
+    
+    & > router-outlet {
+        & + * {
+            width: 100%;
+            flex-grow: 1;
+        }
+    }
+
+    router-outlet {
+        flex-grow: 0;
+    }
+}
+
+app-root {
+    display: block;
 }
 
 nav {
@@ -86,3 +99,9 @@ img {
     clip: rect(0, 0, 0, 0) !important;
     border: 0 !important;
 }
+
+#{class(list)} {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}

package/src/scss/imports/global/_icons.scss

@@ -0,0 +1,6 @@
+/// Icon styles
+i {
+    &.fa-envelope {
+        transform: translateY(5%);
+    }
+}

package/src/scss/imports/global/_index.scss

@@ -1,5 +1,6 @@
 @use './animations';
 @use './global';
+@use './icons';
 @use './structure';
 @use './text';
 @use './themes';

package/src/scss/imports/global/_structure.scss

@@ -82,3 +82,40 @@ section {
     justify-content: center;
     text-align: center;
 }
+
+#{class(grid)} {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: $grid-gap;
+    margin: $grid-gap 0;
+
+    &#{class('2')} {
+        @include break(sm) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+
+    &#{class('3')} {
+        @include break(sm) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @include break(lg) {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+
+    &#{class('4')} {
+        @include break(sm) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @include break(lg) {
+            grid-template-columns: repeat(3, 1fr);
+        }
+
+        @include break(xl) {
+            grid-template-columns: repeat(4, 1fr);
+        }
+    }
+}

package/src/scss/imports/util/_vars.scss

@@ -74,11 +74,48 @@ $font-size-desktop: (
 ) !default;
 
 /// Structure
-$header-height: 4rem !default;
+$grid-gap: 2rem !default;
 
 /// Default theme
 $theme-default: light !default;
 
 /// Outline width
-$outline-width: 0.125rem !default;
-$border-radius: 0.25rem !default;
+$border-width: 0.125rem !default;
+$border-radius: 1rem !default;
+
+/// Header
+$header-height: 4rem !default;
+
+/// Default Shadows
+$shadow-color: glow-2 !default;
+$shadow-size: 0 0 2rem -0.5rem !default;
+
+/// Buttons
+$menu-bar-height: 0.4rem !default;
+$menu-bar-width: $menu-bar-height * 8 !default;
+$menu-btn-height: $menu-bar-height * 8 !default;
+$menu-btn-padding: $menu-bar-height * 1.5 !default;
+$menu-bar-color: fore !default;
+$menu-btn-color: shadow-6 !default;
+$menu-btn-shadow-color: $shadow-color !default;
+$menu-btn-shadow-size: $shadow-size !default;
+
+$btn-radius: $border-radius !default;
+$btn-fore: fore !default;
+$btn-fore-hover: back !default;
+$btn-back: brand-5 !default;
+$btn-back-alt: trans !default;
+$btn-back-alt-hover: accent-2 !default;
+$btn-border: brand-3 !default;
+$btn-padding-v: 0.5rem !default;
+$btn-padding-h: 1rem !default;
+$btn-padding-adjust: 0.75rem !default;
+
+$pill-radius: $border-radius !default;
+
+/// Cards
+$card-padding: 1.5rem !default;
+$card-radius: $border-radius !default;
+$card-shadow-color: $shadow-color !default;
+$card-shadow-size: $shadow-size !default;
+$card-logo-size: 4rem !default;