@appartmint/mint 0.9.1 → 0.9.6

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

@@ -7,42 +7,28 @@
 /// Imports
 @use '../util' as *;
 
-/// CSS variables
+/// CSS Variables
 :root {
-    @include css-var(delay-instant, delay(instant));
-    @include css-var(delay-fast, delay(fast));
-    @include css-var(delay-med-fast, delay(med-fast));
-    @include css-var(delay-default, delay(default));
-    @include css-var(delay-med-slow, delay(med-slow));
-    @include css-var(delay-slow, delay(slow));
-}
-
-/// Styles
-#{class(sr-only)} {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
-    border: 0 !important;
+    @include css-var(header-height, $header-height);
+    @include css-var-ref(header-bg, $header-bg);
+    @include css-var-ref(header-fg, $header-fg);
 }
 
+/// Header Styles
 #{id(header)} {
     display: flex;
     flex-direction: column;
     position: relative;
     width: 100%;
-    color: css-var(fg);
+    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(height);
-        padding: calc((css-var(height) - css-var(btn-height)) / 2);
+        height: css-var(header-height);
+        padding: calc(css-var(header-height) / 2);
 
         #{controls(wrapper)} {
             display: inline-block;
@@ -80,7 +66,7 @@
 
     &.mint-right {
         #{id(wrapper)} {
-            top: css-var(height);
+            top: css-var(header-height);
             right: -100%;
             left: unset;
 
@@ -103,7 +89,7 @@
 
     &.mint-left {
         #{id(wrapper)} {
-            top: css-var(height);
+            top: css-var(header-height);
             left: -100%;
 
             &#{class(open)} {
@@ -118,7 +104,7 @@
         top: 0;
         left: 0;
         width: 100%;
-        height: css-var(height);
+        height: css-var(header-height);
         background: css-var(header-bg);
         z-index: -1;
     }
@@ -140,17 +126,30 @@
     a, button {
         display: flex;
         align-items: center;
-        padding: calc((css-var(height) - css-var(btn-height)) / 2);
+        width: 100%;
+        margin: 0;
+        border: 0;
+        color: css-var(header-fg);
+        background: css-var(trans);
     }
     
+    h1 {
+        display: flex;
+        white-space: nowrap;
+        margin: 0;
+    }
+
+    #{class(logo)} {
+        text-decoration: none;
+        
+        img {
+            max-width: css-var(header-height);
+        }
+    }
+
     #{controls(wrapper)} {
         display: none;
     }
-    
-    #{id(logo)} {
-        margin: calc((css-var(height) - css-var(btn-height)) / 2);
-        padding: 0;
-    }
 
     #{id(wrapper)} {
         display: flex;
@@ -159,12 +158,12 @@
         top: -100%;
         left: 0;
         width: 100%;
-        height: calc(100vh - css-var(height));
+        height: calc(100vh - css-var(header-height));
         transition: none;
         z-index: -2;
         
         &#{class(open)} {
-            top: css-var(height);
+            top: css-var(header-height);
         }
     }
 
@@ -172,7 +171,7 @@
         position: absolute;
         top: 0;
         right: 0;
-        height: css-var(height);
+        height: css-var(header-height);
     }
     
     #{class(dropdown)} {
@@ -182,13 +181,13 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            min-width: css-var(height);
-            height: css-var(height);
-            padding: calc((css-var(height) - css-var(btn-height)) / 2);
+            min-width: css-var(header-height);
+            height: css-var(header-height);
+            padding: calc(css-var(header-height) / 2);
         }
 
         li {
-            padding: calc((css-var(height) - css-var(btn-height)) / 2);
+            padding: calc(css-var(header-height) / 2);
             line-height: 1;
             cursor: pointer;
         }

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 {
@@ -75,3 +88,20 @@ img {
 #{class(noglow)} {
     box-shadow: none !important;
 }
+
+#{class(sr-only)} {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    border: 0 !important;
+}
+
+#{class(list)} {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}

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/global/_text.scss

@@ -7,31 +7,6 @@
 /// Imports
 @use '../util' as *;
 
-/// Fonts
-$font-primary: 'Palanquin' !default;
-$font-secondary: 'JosefinSans' !default;
-$font-backups: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
-
-/// Font Sizes
-$font-size-mobile: (
-    h1: 2.5rem,
-    h2: 2rem,
-    h3: 1.75rem,
-    h4: 1.5rem,
-    h5: 1.25rem,
-    h6: 1.125rem,
-    p: 1rem,
-) !default;
-$font-size-desktop: (
-    h1: 3rem,
-    h2: 2.5rem,
-    h3: 2rem,
-    h4: 1.75rem,
-    h5: 1.5rem,
-    h6: 1.25rem,
-    p: 1.125rem,
-) !default;
-
 /// Text Styles
 html, body {
     font-family: $font-primary, $font-backups;
@@ -46,11 +21,9 @@ p {
     line-height: 1.75;
 }
 
-@for $i from 1 through 6 {
-    h#{$i}, #{class(h#{$i})} {
-        font-family: $font-secondary, $font-backups;
-        line-height: 1;
-    }
+@include headers () {
+    font-family: $font-secondary, $font-secondary-backups;
+    line-height: 1;
 }
 
 @each $tag in map-keys($font-size-mobile) {

package/src/scss/imports/global/_themes.scss

@@ -108,8 +108,4 @@ a {
             color: css-var(venmo);
         }
     }
-    
-    i {
-        transition: color delay(slow);
-    }
 }

package/src/scss/imports/util/_util.scss

@@ -744,3 +744,15 @@ $bootstrap5: false !default;
         }
     }
 }
+
+/// Selector for all headers
+/// @group Mixins
+/// 
+/// 
+@mixin headers () {
+    @for $i from 1 through 6 {
+        h#{$i}, #{class(h#{$i})} {
+            @content;
+        }
+    }
+}

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

@@ -34,7 +34,7 @@ $grey: #888 !default;
 $trans-light: rgba(255, 255, 255, 0) !default;
 $trans-dark: rgba(0, 0, 0, 0) !default;
 
-$brand: #4682b4 !default;
+$brand: #bada55 !default;
 $accent: #483d8b !default;
 $success: #208a20 !default;
 $danger: #ff4d4d !default;
@@ -44,8 +44,38 @@ $info: $brand !default;
 $fore: lighten($black, 10%) !default;
 $back: darken($white, 10%) !default;
 
+$header-bg: brand-4 !default;
+$header-fg: back !default;
+
+/// Fonts
+$font-primary: sans-serif !default;
+$font-secondary: serif !default;
+$font-backups: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$font-secondary-backups: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+
+/// Font Sizes
+$font-size-mobile: (
+    h1: 2.5rem,
+    h2: 2rem,
+    h3: 1.75rem,
+    h4: 1.5rem,
+    h5: 1.25rem,
+    h6: 1.125rem,
+    p: 1rem,
+) !default;
+$font-size-desktop: (
+    h1: 3rem,
+    h2: 2.5rem,
+    h3: 2rem,
+    h4: 1.75rem,
+    h5: 1.5rem,
+    h6: 1.25rem,
+    p: 1.125rem,
+) !default;
+
 /// Structure
-$nav-height: 4rem !default;
+$header-height: 4rem !default;
+$grid-gap: 2rem !default;
 
 /// Default theme
 $theme-default: light !default;
@@ -53,3 +83,10 @@ $theme-default: light !default;
 /// Outline width
 $outline-width: 0.125rem !default;
 $border-radius: 0.25rem !default;
+
+/// Cards
+$card-padding: 1.5rem !default;
+$card-radius: 1rem !default;
+$card-shadow-color: glow-2 !default;
+$card-shadow-size: 0 0 2rem -0.5rem !default;
+$card-logo-size: 4rem !default;