Merge pull request #27 from rustnl/update-deps

update deps

Author: jdonszelmann

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"
+                }
+            }
+        }
+    }
+});

public/images/people/jonathan.png

@@ -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>

src/2024-pages/boat.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>

src/2024-pages/industry.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;

src/2024-pages/live.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>

src/2024-pages/workshops.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>

src/components/Button.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;
     }
 

src/components/ButtonGroup.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>

src/components/DefaultSection.astro

@@ -7,7 +7,7 @@
 </div>
 
 <style lang="scss">
-    @import "../styles/variables.scss";
+    @use "../styles/variables.scss";
 
     .container {
         width: 100%;