basic setup

2026-05-18 15:13:23 -04:00
parent c4113658f7
commit a54e63323f
33 changed files with 2563 additions and 43 deletions
--- a/styles/_functions.scss
+++ b/styles/_functions.scss
@@ -0,0 +1,187 @@
+@use 'sass:math';
+
+/* Breakpoints */
+$mobile-breakpoint: get('breakpoints.mobile');
+
+// Viewport Sizes
+$desktop-width: get('viewports.desktop.width');
+$desktop-height: get('viewports.desktop.height');
+
+$mobile-width: get('viewports.mobile.width');
+$mobile-height: get('viewports.mobile.height');
+
+// Breakpoint
+@mixin mobile {
+    @media (max-width: #{$mobile-breakpoint * 1px - 1px}) {
+        @content;
+    }
+}
+
+@mixin desktop {
+    @media (min-width: #{$mobile-breakpoint * 1px}) {
+        @content;
+    }
+}
+
+@function mobile-vw($pixels, $base-vw: $mobile-width) {
+    $px: math.div($pixels, $base-vw);
+    $perc: math.div($px, 1px);
+    @return calc($perc * 100vw);
+}
+
+@function mobile-vh($pixels, $base-vh: $mobile-height) {
+    $px: math.div($pixels, $base-vh);
+    $perc: math.div($px, 1px);
+    @return calc($perc * 100vh);
+}
+
+@function desktop-vw($pixels, $base-vw: $desktop-width) {
+    $px: math.div($pixels, $base-vw);
+    $perc: math.div($px, 1px);
+    @return calc($perc * 100vw);
+}
+
+@function desktop-vh($pixels, $base-vh: $desktop-height) {
+    $px: math.div($pixels, $base-vh);
+    $perc: math.div($px, 1px);
+    @return calc($perc * 100vh);
+}
+
+@function columns($columns) {
+    @return calc(
+        (#{$columns} * var(--layout-column-width)) +
+            ((#{$columns} - 1) * var(--layout-column-gap))
+    );
+}
+
+@mixin child-grid($columns) {
+    grid-template-columns: repeat($columns, minmax(0, 1fr));
+    column-gap: var(--layout-columns-gap);
+    display: grid;
+}
+
+@mixin reduced-motion {
+    @media (prefers-reduced-motion: reduce) {
+        @content;
+    }
+}
+
+@mixin fill($position: absolute) {
+    position: #{$position};
+    bottom: 0;
+    right: 0;
+    left: 0;
+    top: 0;
+}
+
+@mixin fade-on-ready($class: 'ready', $duration: 400ms) {
+    opacity: 0;
+    transition: opacity $duration ease;
+
+    &.#{$class} {
+        opacity: 1;
+    }
+}
+
+// Clamp text block to number of lines
+@mixin line-clamp($lines: 3, $mobile-lines: $lines) {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $lines;
+
+    @include mobile {
+        -webkit-line-clamp: $mobile-lines;
+    }
+}
+
+// Flip animations
+@keyframes flip-r {
+    50% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    51% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+}
+@keyframes flip-l {
+    50% {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    51% {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+@keyframes flip-d {
+    50% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    51% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+}
+@keyframes flip-u {
+    50% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    51% {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+@mixin flip-animation(
+    $direction: 'r',
+    $duration: 600ms,
+    $easing: var(--ease-out-expo),
+    $iteration-count: 1
+) {
+    overflow: hidden;
+    animation: flip-#{$direction} $duration $easing $iteration-count forwards;
+}
+
+@mixin link-hover {
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: var(--theme-fg);
+        transform-origin: left;
+        transform: scaleX(0);
+        transition: transform 300ms var(--ease-out-quad);
+    }
+    @include desktop {
+        &:hover::before {
+            transform: scaleX(1);
+        }
+    }
+}
+
+@mixin stagger-animate($stagger: 100, $num-children: 10, $base-delay: 0) {
+    @for $i from 0 through $num-children {
+        &:nth-child(#{$i + 1}) {
+            transition-delay: #{$stagger * $i + $base-delay}ms;
+        }
+    }
+}
+
+@mixin hover {
+    @include desktop {
+        &:hover {
+            @content;
+        }
+    }
+}