TheThomaas/my-online-cookbook
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update sass

Browse source
This commit is contained in:
TheThomaas 2025-04-21 16:19:17 +02:00
parent 7aef0505f1
commit 67290477b2
6 changed files with 32 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -18,7 +18,7 @@
"@11ty/eleventy": "^3.0.0", "@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-img": "^6.0.1", "@11ty/eleventy-img": "^6.0.1",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"sass": "^1.32.12" "sass": "^1.86.3"
}, },
"dependencies": { "dependencies": {
"alpinejs": "^2.8.2" "alpinejs": "^2.8.2"

4
src/scss/_global.scss
View file

@ -1,3 +1,5 @@
@use "mixins";
:root { :root {
--color-grey-100: #F9FAFB; --color-grey-100: #F9FAFB;
--color-grey-200: #F3F4F6; --color-grey-200: #F3F4F6;
@ -32,7 +34,7 @@ main {
section { section {
padding: 30px 0; padding: 30px 0;
@include mq(medium) { @include mixins.mq(medium) {
padding: 60px 0; padding: 60px 0;
} }
} }

9
src/scss/_mixins.scss
View file

@ -1,3 +1,6 @@
@use "sass:string";
@use "sass:map";
$breakpoints-map: ( $breakpoints-map: (
small: "all and (min-width: 576px)", small: "all and (min-width: 576px)",
medium: "all and (min-width: 768px)", medium: "all and (min-width: 768px)",
@ -9,11 +12,11 @@ $breakpoints-map: (
// ------------------------------------- // -------------------------------------
@mixin mq($breakpoint-name) { @mixin mq($breakpoint-name) {
// sanitize variable // sanitize variable
$breakpoint-name: unquote($breakpoint-name); $breakpoint-name: string.unquote($breakpoint-name);
// check if passed name is in $breakpoints-map // check if passed name is in $breakpoints-map
@if map-has-key($breakpoints-map, $breakpoint-name) { @if map.has-key($breakpoints-map, $breakpoint-name) {
$breakpoint-query: map-get($breakpoints-map, $breakpoint-name); $breakpoint-query: map.get($breakpoints-map, $breakpoint-name);
// write media query // write media query
@media #{$breakpoint-query} { @media #{$breakpoint-query} {

10
src/scss/components/_recipe.scss
View file

@ -1,3 +1,5 @@
@use "../mixins";
.c-recipe__header-image { .c-recipe__header-image {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
@ -36,7 +38,7 @@
flex-direction: column; flex-direction: column;
gap: 30px; gap: 30px;
@include mq(medium) { @include mixins.mq(medium) {
display: grid; display: grid;
grid-template-columns: 400px 1fr; grid-template-columns: 400px 1fr;
grid-template-rows: min-content 1fr; grid-template-rows: min-content 1fr;
@ -52,7 +54,7 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 12px;
@include mq(medium) { @include mixins.mq(medium) {
grid-area: tags; grid-area: tags;
margin-bottom: 0; margin-bottom: 0;
} }
@ -60,7 +62,7 @@
.c-recipe__ingredients-wrapper { .c-recipe__ingredients-wrapper {
@include mq(medium) { @include mixins.mq(medium) {
grid-area: ingredients; grid-area: ingredients;
} }
} }
@ -83,7 +85,7 @@
} }
.c-recipe__instructions-wrapper { .c-recipe__instructions-wrapper {
@include mq(medium) { @include mixins.mq(medium) {
grid-area: instructions; grid-area: instructions;
} }
} }

4
src/scss/components/_search.scss
View file

@ -1,3 +1,5 @@
@use "../mixins";
.c-search__search-toggle { .c-search__search-toggle {
margin-left: 20px; margin-left: 20px;
padding: 10px; padding: 10px;
@ -31,7 +33,7 @@
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
font-size: 1rem; font-size: 1rem;
@include mq(medium) { @include mixins.mq(medium) {
max-width: 500px; max-width: 500px;
} }
} }

26
src/scss/main.scss
View file

@ -1,15 +1,15 @@
@import "reset.scss"; @use "reset";
@import "mixins.scss"; @use "mixins";
@import "utility.scss"; @use "utility";
@import "global.scss"; @use "global";
@import "typography.scss"; @use "typography";
@import "layout.scss"; @use "layout";
@import "components/about.scss"; @use "components/about";
@import "components/card.scss"; @use "components/card";
@import "components/home.scss"; @use "components/home";
@import "components/nav.scss"; @use "components/nav";
@import "components/recipe.scss"; @use "components/recipe";
@import "components/recipe-tags.scss"; @use "components/recipe-tags";
@import "components/search.scss"; @use "components/search";