@appartmint/mint 0.9.0 → 0.9.2

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;
 
     &#{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/_image.scss

@@ -0,0 +1,33 @@
+/// _image.scss - Image styles
+/// @author App/Art Mint
+/// 
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Variables
+$shadow-color: rgba(0, 0, 0, 0.4);
+$shadow-size: 0.5rem;
+
+/// Image styles
+#{class(image)} {
+    &#{class(error)} {
+        &::after {
+            content: '❌ Image failed to load. This is a placeholder.';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 0 $shadow-size $shadow-size $shadow-size;
+            background: $shadow-color;
+            box-shadow: 0 0 $shadow-size $shadow-size $shadow-color;
+            text-align: center;
+        }
+    }
+
+    img {
+        display: block;
+    }
+}

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

@@ -2,3 +2,4 @@
 @use './buttons';
 @use './cards';
 @use './header';
+@use './image';

package/src/scss/imports/global/_animations.scss

@@ -6,8 +6,43 @@
 
 /// Imports
 @use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
 @use '../util' as *;
 
+/// Variables
+$animations: (());
+$transitions: (());
+
+/// Mixins
+/// Register an animation
+@mixin animation($animation) {
+    $animations: map-merge($animations, (&: map-merge(map.get($animations, &), $animation)));
+    $this: map.get($animations, &);
+    $animation: '';
+
+    & {
+        @each $item in $this {
+            @if (list.index($this, $item) != 1) {
+                $animation: #{$animation},;
+            }
+            $animation: #{$animation}#{$item};
+        }
+        animation: $animation;
+
+        @each $name, $items in $animations {
+            &#{class($name)} {
+                animation: $animation;
+            }
+        }
+    }
+}
+
+/// Register a transition
+@mixin transition($transition) {
+    $transitions: map-merge($transitions, ($name: $transition));
+}
+
 /// Animations
 /// Cycle through instagram colors
 @keyframes instafade {
@@ -32,7 +67,7 @@
 #{class(fall-in)} {
     opacity: 0;
     transform: translateY(-100px);
-    transition: all delay(slow), box-shadow delay(slow) delay(med-slow) !important;
+    transition: all delay(slow) ease-out, box-shadow delay(slow) delay(med-slow) ease-out !important;
     pointer-events: none;
 
     &#{class(show)}#{neg(class(loading))} {
@@ -70,6 +105,6 @@
         height: 100%;
         transform: translate(-100%, 100%);
         background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
-        transition: transform delay(med-fast) ease-in;
+        transition: transform delay(med-fast) ease-out;
     }
 }

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

@@ -51,7 +51,7 @@ a {
         white-space: nowrap;
     }
 
-    i {
+    i:last-child {
         margin-left: 0.25rem;
     }
 }
@@ -75,3 +75,14 @@ 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;
+}

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;
@@ -42,10 +17,13 @@ html, body {
     }
 }
 
-@for $i from 1 through 6 {
-    h#{$i}, #{class(h#{$i})} {
-        font-family: $font-secondary, $font-backups;
-    }
+p {
+    line-height: 1.75;
+}
+
+@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

@@ -711,3 +711,48 @@ $bootstrap5: false !default;
         }
     }
 }
+
+/// Generates flex utility classes
+/// @group Mixins
+/// 
+/// 
+@mixin flex-util () {
+    & {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+
+        &#{class(center)} {
+            justify-content: center;
+        }
+
+        &#{class(end)} {
+            justify-content: flex-end;
+        }
+
+        &#{class(between)} {
+            justify-content: space-between;
+        }
+
+        &#{class(around)} {
+            justify-content: space-around;
+        }
+
+        &#{class(even)} {
+            justify-content: space-evenly;
+        }
+    }
+}
+
+/// 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,37 @@ $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;
 
 /// Default theme
 $theme-default: light !default;