Merge branch 'main' into hotel-suggestions

rustnl · Jan 31, 2025 · 837360c · 837360c
2 parents 464377a + 7d00210
commit 837360c
Show file tree

Hide file tree

Showing 49 changed files with 2,402 additions and 2,428 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,4 +1,14 @@
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+    vite: {
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: "modern-compiler"
+                }
+            }
+        }
+    }
+});
diff --git a/public/images/people/jonathan.png b/public/images/people/jonathan.png
diff --git a/src/2024-pages/boat.astro b/src/2024-pages/boat.astro
@@ -122,13 +122,13 @@ import Timetable from "../components/timetable/timetable.astro";
 </CommonLayout>
 
 <style lang="scss">
-    @import "../styles/variables.scss";
+    @use "../styles/variables.scss";
 
     .boat-description {
-        font-size: $font-size-lg;
+        font-size: variables.$font-size-lg;
 
         h2 {
-            font-size: $font-size-xl;
+            font-size: variables.$font-size-xl;
         }
     }
 </style>
diff --git a/src/2024-pages/industry.astro b/src/2024-pages/industry.astro
@@ -257,9 +257,9 @@ import ButtonGroup from "../components/ButtonGroup.astro";
 >
 
 <style lang="scss">
-    @import "../styles/variables.scss";
+    @use "../styles/variables.scss";
 
     .venue {
-        font-size: $font-size-lg;
+        font-size: variables.$font-size-lg;
     }
 </style>
diff --git a/src/2024-pages/live.astro b/src/2024-pages/live.astro
@@ -28,7 +28,7 @@ import CommonLayout from "../layouts/CommonLayout.astro";
 </CommonLayout>
 
 <style lang="scss">
-    @import "../styles/variables.scss";
+    @use "../styles/variables.scss";
 
     h2 {
         font-size: font-size-2xl;

diff --git a/src/2024-pages/workshops.astro b/src/2024-pages/workshops.astro
@@ -297,8 +297,8 @@ import CommonLayout from "../layouts/CommonLayout.astro";
 </CommonLayout>
 
 <style lang="scss">
-@import "../styles/variables.scss";
+@use "../styles/variables.scss";
 h4 {
-    font-size: $font-size-lg;
+    font-size: variables.$font-size-lg;
     }
 </style>
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -1,6 +1,4 @@
 ---
-import { string } from 'astro/zod';
-
 interface Props {
     link: string;
     ty?: "primary" | "secondary";
@@ -14,45 +12,45 @@ const { link, ty = "primary", inFooter = false, scale = 1 }: Props = Astro.props
 
 <a
     class:list={["button", ty, inFooter ? "footer" : null]}
-    style=`text-decoration: none;color:$color-neutral-400;`
     href={link}
 >
     <slot>{link}</slot>
 </a>
 
 <style lang="scss" is:global define:vars={{ scale }}>
-    @import "../styles/variables.scss";
+    @use "../styles/variables.scss";
 
     .button {
+        color: variables.$color-neutral-400;
+
         align-items: center;
-        border-radius: space(1);
+        border-radius: variables.space(1);
         border: 1px solid transparent;
         cursor: pointer;
         display: inline-flex;
-        font-size: calc(var(--scale) * $font-size-md);
+        font-size: calc(var(--scale) * variables.$font-size-md);
         font-weight: 700;
-        // min-height: calc(var(--scale) * space(12));
-        padding: calc(var(--scale) * space(3)) calc(var(--scale) * space(6));
+        padding: calc(var(--scale) * variables.space(3)) calc(var(--scale) * variables.space(6));
         text-align: center;
         text-decoration: none;
         user-select: none;
 
         &.primary {
-            background-color: $color-red-400;
-            color: $color-neutral-400;
+            background-color: variables.$color-red-400;
+            color: variables.$color-neutral-400;
         }
 
         &.secondary {
-            border: 1px solid $color-red-400;
-            color: $color-red-400;
+            border: 1px solid variables.$color-red-400;
+            color: variables.$color-red-400;
         }
 
         &.footer {
             all: unset;
 
             text-decoration: underline !important;
             cursor: pointer;
-            color: $color-neutral-400;
+            color: variables.$color-neutral-400;
         }
     }
 </style>
diff --git a/src/components/ButtonGroup.astro b/src/components/ButtonGroup.astro
@@ -7,12 +7,12 @@
 </div>
 
 <style lang="scss">
-    @import "../styles/variables.scss";
+    @use "../styles/variables.scss";
 
     .button-group {
         display: flex;
         flex-wrap: wrap;
-        gap: space(3);
+        gap: variables.space(3);
         justify-content: center;
     }
 

diff --git a/src/components/DefaultSection.astro b/src/components/DefaultSection.astro
@@ -18,9 +18,9 @@ const { header }: Props = Astro.props;
 </section>
 
 <style lang="scss">
-    @import "../styles/variables.scss";
+    @use "../styles/variables.scss";
 
     .text {
-        font-size: $font-size-lg;
+        font-size: variables.$font-size-lg;
     }
 </style>
diff --git a/src/components/Divider.astro b/src/components/Divider.astro
@@ -7,7 +7,7 @@
 </div>
 
 <style lang="scss">
-    @import "../styles/variables.scss";
+    @use "../styles/variables.scss";
 
     .container {
         width: 100%;

diff --git a/src/components/Location.astro b/src/components/Location.astro
@@ -17,13 +17,13 @@
 </section>
 
 <style lang="scss">
-    @import "../styles/breakpoint.scss";
-    @import "../styles/variables.scss";
+    @use "../styles/breakpoint.scss";
+    @use "../styles/variables.scss";
 
     .location {
         position: relative;
 
-        @include wider_than(sm) {
+        @include breakpoint.wider_than(sm) {
             display: grid;
             grid-template-columns: 1fr 1fr;
             grid-template-areas:
@@ -33,7 +33,7 @@
 
         &::before {
             aspect-ratio: 16 / 9;
-            background-color: $color-neutral-500;
+            background-color: variables.$color-neutral-500;
             clip-path: polygon(0 100%, 100% 0, 100% 100%);
             content: "";
             position: absolute;
@@ -47,7 +47,7 @@
         > .ferris {
             display: none;
 
-            @include wider_than(sm) {
+            @include breakpoint.wider_than(sm) {
                 align-items: flex-start;
                 aspect-ratio: 16 / 9;
                 display: flex;
@@ -60,24 +60,24 @@
                 z-index: -2;
             }
 
-            @include wider_than(xl) {
+            @include breakpoint.wider_than(xl) {
                 top: -24px;
             }
 
             img {
-                @include wider_than(sm) {
+                @include breakpoint.wider_than(sm) {
                     rotate: -30deg;
                     width: 144px;
                 }
 
-                @include wider_than(xl) {
+                @include breakpoint.wider_than(xl) {
                     width: 288px;
                 }
             }
         }
 
         .image {
-            background-color: $color-neutral-500;
+            background-color: variables.$color-neutral-500;
             position: relative;
         }
 
@@ -91,14 +91,14 @@
                 background-image: url("/images/boat2.jpg");
             }
 
-            @include wider_than(sm) {
+            @include breakpoint.wider_than(sm) {
                 aspect-ratio: auto;
                 grid-area: a;
             }
 
             &::after {
                 aspect-ratio: 16 / 9;
-                background-color: $color-red-400;
+                background-color: variables.$color-red-400;
                 clip-path: polygon(0 0, 100% 0, 0 100%);
                 content: "";
                 left: 0;
@@ -140,56 +140,56 @@
                 background-image: url("/images/vakwerkhuis.jpg");
             }
 
-            @include wider_than(sm) {
+            @include breakpoint.wider_than(sm) {
                 grid-area: b;
             }
         }
 
         .image:nth-of-type(3) {
             display: none;
 
-            @include wider_than(sm) {
+            @include breakpoint.wider_than(sm) {
                 aspect-ratio: 16 / 9;
-                background-color: $color-yellow-400;
+                background-color: variables.$color-yellow-400;
                 grid-area: c;
                 display: flex;
                 align-items: center;
                 justify-content: center;
             }
 
             &::after {
-                @include wider_than(sm) {
-                    background-color: $color-yellow-500;
+                @include breakpoint.wider_than(sm) {
+                    background-color: variables.$color-yellow-500;
                     content: "";
                     inset: 0 50% 0 0;
                     position: absolute;
                 }
             }
 
             &:hover .ferris {
-                @include wider_than(sm) {
-                    translate: 0;
-                }
-
                 /* This timing is for the entering animation */
                 transition: translate 300ms 200ms ease-out;
-            }
 
-            &:hover .ferris-arms {
-                @include wider_than(sm) {
-                    opacity: 1;
-                    translate: 0px;
+                @include breakpoint.wider_than(sm) {
+                    translate: 0;
                 }
+            }
 
+            &:hover .ferris-arms {
                 /* This timing is for the entering animation */
                 transition:
                     opacity 200ms ease-in,
                     translate 200ms ease-out;
+
+                @include breakpoint.wider_than(sm) {
+                    opacity: 1;
+                    translate: 0px;
+                }
             }
 
             > .ferris,
             > .ferris-arms {
-                @include wider_than(sm) {
+                @include breakpoint.wider_than(sm) {
                     background-repeat: no-repeat;
                     background-size: contain;
                     height: 120px;
@@ -198,14 +198,14 @@
                     width: 144px;
                 }
 
-                @include wider_than(xl) {
+                @include breakpoint.wider_than(xl) {
                     height: 240px;
                     width: 288px;
                 }
             }
 
             > .ferris {
-                @include wider_than(sm) {
+                @include breakpoint.wider_than(sm) {
                     background-image: url("/images/ferris.png");
                     /* This timing is for the leaving animation */
                     transition: translate 300ms ease-out;
@@ -214,7 +214,7 @@
             }
 
             > .ferris-arms {
-                @include wider_than(sm) {
+                @include breakpoint.wider_than(sm) {
                     background-image: url("/images/ferris-arms.png");
                     background-position: center -12px;
                     /* This timing is for the leaving animation */