From c80fe7f3b9661e4103696050df2371ae595684ef Mon Sep 17 00:00:00 2001 From: KJ Roelke Date: Sun, 22 Mar 2026 16:11:16 -0500 Subject: [PATCH] fix up theme --- inc/theme/class-gutenberg-handler.php | 4 +- src/styles/abstracts/_bs-breakpoints.scss | 117 +++++++++++++++ src/styles/abstracts/_bs_breakpoints.scss | 172 ---------------------- src/styles/abstracts/_mixins.scss | 2 +- 4 files changed, 120 insertions(+), 175 deletions(-) create mode 100644 src/styles/abstracts/_bs-breakpoints.scss delete mode 100644 src/styles/abstracts/_bs_breakpoints.scss diff --git a/inc/theme/class-gutenberg-handler.php b/inc/theme/class-gutenberg-handler.php index f75503c..0e47faf 100644 --- a/inc/theme/class-gutenberg-handler.php +++ b/inc/theme/class-gutenberg-handler.php @@ -32,7 +32,7 @@ public function enqueue_block_assets() { 'editor' => 'style', ); foreach ( $files as $handle => $type ) { - $assets = require_once get_stylesheet_directory() . "/build/admin/{$handle}.asset.php"; + $assets = require get_stylesheet_directory() . "/build/admin/{$handle}.asset.php"; if ( 'style' === $type || 'both' === $type ) { wp_enqueue_style( $handle, @@ -80,4 +80,4 @@ public function register_theme_blocks() { $blocks_path = get_template_directory() . '/build'; wp_register_block_types_from_metadata_collection( $blocks_path . '/js/blocks', $blocks_path . '/blocks-manifest.php' ); } -} +} \ No newline at end of file diff --git a/src/styles/abstracts/_bs-breakpoints.scss b/src/styles/abstracts/_bs-breakpoints.scss new file mode 100644 index 0000000..1ad77b2 --- /dev/null +++ b/src/styles/abstracts/_bs-breakpoints.scss @@ -0,0 +1,117 @@ +@use "sass:map"; +@use "sass:list"; + +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px, +); + +/** +* Media of at least the minimum breakpoint width. +* No query for the smallest breakpoint. +* Makes the @content apply to the given breakpoint and wider. +*/ +@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { + $min: map.get($breakpoints, $name); + + @if $min { + @media screen and (width >= $min) { + @content; + } + } @else { + @content; + } +} + +/** +* Media of at most the maximum breakpoint width. +* No query for the largest breakpoint. +* Makes the @content apply to the given breakpoint and narrower. +*/ +@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { + $max: map.get($breakpoints, $name); + + @if $max { + @media screen and (width <= $max) { + @content; + } + } @else { + @content; + } +} + +/** +* Media that spans multiple breakpoint widths. +* Makes the @content apply between the min and max breakpoints +*/ +@mixin media-breakpoint-between( + $lower, + $upper, + $breakpoints: $grid-breakpoints +) { + $min: map.get($breakpoints, $lower); + $max: map.get($breakpoints, $upper); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include media-breakpoint-up($lower, $breakpoints) { + @content; + } + } @else if $min == null { + @include media-breakpoint-down($upper, $breakpoints) { + @content; + } + } +} + +/** +* Media between the breakpoint's minimum and maximum widths. +* No minimum for the smallest breakpoint, and no maximum for the largest one. +* Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. +*/ +@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { + $min: map.get($breakpoints, $name); + $next: get-next-breakpoint($name, $breakpoints); + $max: map.get($breakpoints, $next); + + @if $min != null and $max != null { + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if $max == null { + @include media-breakpoint-up($name, $breakpoints) { + @content; + } + } @else if $min == null { + @include media-breakpoint-down($next, $breakpoints) { + @content; + } + } +} + +/** +* Returns the maximum width for the given breakpoint name. +* The maximum is calculated as the next breakpoint's minimum width. +* Returns null for the largest breakpoint. +*/ +@function get-next-breakpoint($name, $breakpoints: $grid-breakpoints) { + $breakpoint-names: map.keys($breakpoints); + $n: list.index($breakpoint-names, $name); + + @if not $n { + @error "breakpoint `#{$name}` not found in `#{$breakpoints}`"; + } + + @if $n < list.length($breakpoint-names) { + @return list.nth($breakpoint-names, $n + 1); + } @else { + @return null; + } +} diff --git a/src/styles/abstracts/_bs_breakpoints.scss b/src/styles/abstracts/_bs_breakpoints.scss deleted file mode 100644 index 7b01528..0000000 --- a/src/styles/abstracts/_bs_breakpoints.scss +++ /dev/null @@ -1,172 +0,0 @@ -@use "sass:map"; -@use "sass:list"; - -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1400px, -); - -/** -* Breakpoint viewport sizes and media queries. -* -* Breakpoints are defined as a map of (name: minimum width), order from small to large: -* -* (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px) -* -* The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. -* -* Name of the next breakpoint, or null for the last breakpoint. -* -* >> breakpoint-next(sm) -* md -* >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) -* md -* >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl)) -* md -*/ -@function breakpoint-next( - $name, - $breakpoints: $grid-breakpoints, - $breakpoint-names: map.keys($breakpoints) -) { - $n: list.index($breakpoint-names, $name); - - @if not $n { - @error "breakpoint `#{$name}` not found in `#{$breakpoints}`"; - } - - @return if( - $n < list.length($breakpoint-names), - list.nth($breakpoint-names, $n + 1), - null - ); -} - -/** -* Minimum breakpoint width. Null for the smallest (first) breakpoint. -* >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) -* 576px -*/ -@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { - $min: map.get($breakpoints, $name); - - @return if($min != 0, $min, null); -} - -/** -* Maximum breakpoint width. -* The maximum value is reduced by 0.02px to work around the limitations of -* `min-` and `max-` prefixes and viewports with fractional widths. -* See https://www.w3.org/TR/mediaqueries-4/#mq-min-max -* Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. -* See https://bugs.webkit.org/show_bug.cgi?id=178261 -* -* >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) -* 767.98px -*/ -@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { - $max: map.get($breakpoints, $name); - - @return if($max and $max > 0, $max - 0.02, null); -} - -/** -* Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. -* Useful for making responsive utilities. -* -* >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) -* "" (Returns a blank string) -* >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) -* "-sm" -*/ -@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { - @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); -} - -/** -* Media of at least the minimum breakpoint width. No query for the smallest breakpoint. -* Makes the @content apply to the given breakpoint and wider. -*/ -@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { - $min: breakpoint-min($name, $breakpoints); - - @if $min { - @media (min-width: $min) { - @content; - } - } @else { - @content; - } -} - -/** -* Media of at most the maximum breakpoint width. No query for the largest breakpoint. -* Makes the @content apply to the given breakpoint and narrower. -*/ -@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { - $max: breakpoint-max($name, $breakpoints); - - @if $max { - @media (max-width: $max) { - @content; - } - } @else { - @content; - } -} - -/** -* Media that spans multiple breakpoint widths. -* Makes the @content apply between the min and max breakpoints -*/ -@mixin media-breakpoint-between( - $lower, - $upper, - $breakpoints: $grid-breakpoints -) { - $min: breakpoint-min($lower, $breakpoints); - $max: breakpoint-max($upper, $breakpoints); - - @if $min != null and $max != null { - @media (min-width: $min) and (max-width: $max) { - @content; - } - } @else if $max == null { - @include media-breakpoint-up($lower, $breakpoints) { - @content; - } - } @else if $min == null { - @include media-breakpoint-down($upper, $breakpoints) { - @content; - } - } -} - -/** -* Media between the breakpoint's minimum and maximum widths. -* No minimum for the smallest breakpoint, and no maximum for the largest one. -* Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. -*/ -@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { - $min: breakpoint-min($name, $breakpoints); - $next: breakpoint-next($name, $breakpoints); - $max: breakpoint-max($next, $breakpoints); - - @if $min != null and $max != null { - @media (min-width: $min) and (max-width: $max) { - @content; - } - } @else if $max == null { - @include media-breakpoint-up($name, $breakpoints) { - @content; - } - } @else if $min == null { - @include media-breakpoint-down($next, $breakpoints) { - @content; - } - } -} diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss index 42c5a2f..820e00f 100644 --- a/src/styles/abstracts/_mixins.scss +++ b/src/styles/abstracts/_mixins.scss @@ -1,4 +1,4 @@ -@forward "./bs_breakpoints"; +@forward "./bs-breakpoints"; @use "./functions" as fn; @mixin interaction() {