Merge pull request #18 from rustnl/trying-to-overhaul-everything

Trying to overhaul everything

src/2024-pages/industry.astro

@@ -1,7 +1,7 @@
 ---
 import IndustryLayout from "../layouts/IndustryLayout.astro";
 
-import Speaker from "../components/people/SpeakerSmall.astro";
+import Person from "../components/people/Person.astro";
 
 import Sponsor from "../components/sponsor/sponsor.astro";
 import SponsorTier from "../components/sponsor/sponsor-tier.astro";
@@ -16,7 +16,7 @@ import ButtonGroup from "../components/ButtonGroup.astro";
 
 <IndustryLayout>
     <Markdown slot="about-industry">
-        <h2 class="header space-y-6" id="about">About the industry track</h2>
+        <h2 class="space-y-6" id="about">About the industry track</h2>
         <p>The industry track was a blast!</p>
         <p>
             This track was dedicated to decision makers exploring the adoption
@@ -63,37 +63,37 @@ import ButtonGroup from "../components/ButtonGroup.astro";
         </ButtonGroup>
     </Markdown>
     <Fragment slot="speakers">
-        <Speaker
+        <Person
             name="Frédéric Ameye"
             image="frederic.png"
             description="Cybersecurity architect at Ampere"
         />
-        <Speaker
+        <Person
             name="Jakub Beránek"
             image="jakub.jpg"
             description="Rust Survey Team Co-lead"
         />
-        <Speaker
+        <Person
             name="Tiago Manczak"
             image="tiago.jpeg"
             description="Principal firmware engineer at Infineon"
         />
-        <Speaker
+        <Person
             name="Joachim den Hertog"
             image="joachim.jpeg"
             description="Senior Principal Engineer at Storio Group (formerly Albelli)"
         />
-        <Speaker
+        <Person
             name="Paul Lenz"
             image="paullenz.jpg"
             description="Director of Finance and Funding at the Rust Foundation"
         />
-        <Speaker
+        <Person
             name="Floris van der Grinten"
             image="floris.jpg"
             description="Senior Engineer at 1Password"
         />
-        <Speaker
+        <Person
             name="Ed Page"
             image="ed.jpg"
             description="Member of the Rust Cargo Team"
@@ -259,10 +259,6 @@ import ButtonGroup from "../components/ButtonGroup.astro";
 <style lang="scss">
     @import "../styles/variables.scss";
 
-    .header {
-        font-size: $font-size-2xl;
-    }
-
     .venue {
         font-size: $font-size-lg;
     }

src/2024-pages/unconf.astro

@@ -81,7 +81,7 @@ import DoubleTimetable from "../components/timetable/DoubleTimetable.astro";
 
     <section class="container sponsors" id="sponsors">
         <Sponsors>
-            <h3 class="header">Unconference sponsors</h3>
+            <h3>Unconference sponsors</h3>
             <SponsorTier name="Ecosystem partner">
                 <Sponsor
                     name="Rust Foundation"

src/components/Button.astro

@@ -1,22 +1,26 @@
 ---
+import { string } from 'astro/zod';
+
 interface Props {
     link: string;
     ty?: "primary" | "secondary";
     inFooter?: boolean;
+    scale?: number;
 }
 
-const { link, ty = "primary", inFooter = false }: Props = Astro.props;
+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;"
+    style=`text-decoration: none;color:$color-neutral-400;`
     href={link}
 >
     <slot>{link}</slot>
 </a>
 
-<style lang="scss" is:global>
+<style lang="scss" is:global define:vars={{ scale }}>
     @import "../styles/variables.scss";
 
     .button {
@@ -25,10 +29,10 @@ const { link, ty = "primary", inFooter = false }: Props = Astro.props;
         border: 1px solid transparent;
         cursor: pointer;
         display: inline-flex;
-        font-size: $font-size-md;
+        font-size: calc(var(--scale) * $font-size-md);
         font-weight: 700;
-        min-height: space(12);
-        padding-inline: space(6);
+        // min-height: calc(var(--scale) * space(12));
+        padding: calc(var(--scale) * space(3)) calc(var(--scale) * space(6));
         text-align: center;
         text-decoration: none;
         user-select: none;

src/components/DefaultSection.astro

@@ -23,8 +23,4 @@ const { header }: Props = Astro.props;
     .text {
         font-size: $font-size-lg;
     }
-    .header {
-        font-size: $font-size-xl;
-        tet-align: center;
-    }
 </style>

src/components/Divider.astro

@@ -0,0 +1,23 @@
+---
+
+---
+
+<div class="container">
+    <div class="stripes"></div>
+</div>
+
+<style lang="scss">
+    @import "../styles/variables.scss";
+
+    .container {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .stripes {
+        background: no-repeat center / 100% auto url("/images/stripes.svg");
+        height: space(1);
+        width: min(100%, 900px);
+    }
+</style>

src/components/Icon.astro

@@ -0,0 +1,12 @@
+---
+const {name} = Astro.props;
+---
+
+<img class="icon" src={`https://unpkg.com/simple-icons@v13/icons/${name}.svg`} alt={`icon of ${name}`}>
+
+<style>
+.icon {
+    height: 1em;
+    aspect-ratio: 1/1;
+}
+</style>

src/components/Location.astro

@@ -2,7 +2,7 @@
 
 ---
 
-<section class="container py-6 space-y-6">
+<section class="container space-y-12">
     <div class="location">
         <div class="image"></div>
         <div class="image"></div>

src/components/LocationDusMix.astro

@@ -2,7 +2,7 @@
 
 ---
 
-<section class="container py-24 space-y-12">
+<section class="container pt-24 pb-6 space-y-12">
     <div class="location">
         <div class="image"></div>
         <div class="image"></div>

src/components/LocationDusRooms.astro

@@ -2,7 +2,7 @@
 
 ---
 
-<section class="container py-24 space-y-12">
+<section class="container pt-24 pb-6 space-y-12">
     <div class="location">
         <div class="image"></div>
         <div class="image"></div>

src/components/LocationDusVenue.astro

@@ -2,7 +2,7 @@
 
 ---
 
-<section class="container py-24 space-y-12">
+<section class="container pt-24 pb-6 space-y-12">
     <div class="location">
         <div class="image"></div>
         <div class="image"></div>

src/components/Markdown.astro

@@ -19,14 +19,6 @@
             color: inherit;
         }
 
-        h1 {
-            font-size: $font-size-2xl;
-        }
-
-        h2 {
-            font-size: $font-size-xl;
-        }
-
         ul {
             list-style: disc;
             padding-inline-start: $font-size-lg;

src/components/page/Hero.astro

@@ -16,12 +16,23 @@ const { style = "page" }: Props = Astro.props;
 
     .hero {
         align-items: center;
-        background-color: $color-yellow-400;
+        background: $color-yellow-400;
         box-sizing: border-box;
-        color: $color-neutral-400;
+        color: white;
         display: flex;
         flex-direction: column;
-        font-size: $font-size-xl;
+        font-size: $font-size-lg;
+        @include wider_than(sm) {
+            font-size: $font-size-xl;
+        }
+        font-weight: 600;
+
+        // background:
+        // linear-gradient(rgb(0 0 0 / 50%), rgb(255 255 255 / 30%), rgb(0 0 0 / 50%)),
+        // no-repeat right 30% / cover url("images/backgrounds/background.jpg");
+        // no-repeat right 30% / cover url("images/backgrounds/background-conf-stage.webp");
+        // no-repeat right 30% / cover url("images/backgrounds/background-conf-stage-opening.jpeg");
+        // no-repeat right 30% / cover url("images/backgrounds/background-conf-stage-side.jpg");
 
         gap: space(10);
         justify-content: center;
@@ -32,6 +43,7 @@ const { style = "page" }: Props = Astro.props;
         position: relative;
         text-align: center;
         z-index: 0;
+        margin-block-end: 2rem;
 
         @include wider_than(md) {
             border-width: space(6) space(6) 0 space(6);
@@ -46,7 +58,7 @@ const { style = "page" }: Props = Astro.props;
         }
 
         &::before {
-            background-color: $color-yellow-500;
+            background: $color-yellow-500;
             clip-path: polygon(0 0, 100% 0, 100% 100%);
             content: "";
             inset: 0;
@@ -67,7 +79,7 @@ const { style = "page" }: Props = Astro.props;
             width: 100%;
         }
 
-        img {
+        svg {
             height: auto;
             max-width: 95vw;
 
@@ -89,7 +101,7 @@ const { style = "page" }: Props = Astro.props;
         }
 
         &.page {
-            min-height: 384px;
+            min-height: 84px;
 
             img {
                 max-height: 3rem;

src/components/page/footer.astro

@@ -35,7 +35,7 @@ import Menu from "./menu.astro";
         display: flex;
         flex-direction: column;
         align-items: center;
-        background-color: $color-red-400;
+        background-color: $color-red-500;
         margin-block-start: space(24);
         padding: space(8) space(4);
 
@@ -47,7 +47,6 @@ import Menu from "./menu.astro";
 
             &:first-of-type,
             &:nth-of-type(2) {
-                border-block-end: 1px solid $color-red-500;
                 margin-block-end: space(3);
                 padding-block-end: space(3);
             }

src/components/page/header.astro

@@ -66,6 +66,7 @@ const { withLogo = false, withoutMenu = false }: Props = Astro.props;
 
         .hamburger {
             margin-inline-start: auto;
+            padding: 0.5em 1em;
 
             @include wider_than(lg) {
                 display: none;

src/components/page/menu.astro

@@ -9,15 +9,14 @@ const { location }: Props = Astro.props;
 ---
 
 <div class:list={["menu", location]}>
-    <!-- <a href="/speakers">Speakers</a> --><!-- <a href="/schedule">Schedule</a> --><!-- <a href="/industry">Industry</a> -->
     <a href="/#schedule" onclick="document.querySelector('[data-menu-toggle]').click()">Schedule</a>
     <a href="/#cfp" onclick="document.querySelector('[data-menu-toggle]').click()">CFP</a>
-    <a href="/#speakers" onclick="document.querySelector('[data-menu-toggle]').click()">Speakers</a>
+    <a href="/speakers">Speakers</a>
     <a href="/about">About</a>
     <a href="mailto:2025@rustnl.org">Contact</a>
     <Button
         link="https://www.eventbrite.nl/e/rust-week-2025-tickets-1001676961757?aff=oddtdtcreator"
-        ty="secondary"
+        ty="primary"
         inFooter={location == "footer"}>Tickets</Button
     >
 </div>
@@ -36,7 +35,7 @@ const { location }: Props = Astro.props;
             gap: space(2);
 
             a {
-                color: $color-neutral-400;
+                color: #ffffff;
             }
         }
 
@@ -51,7 +50,7 @@ const { location }: Props = Astro.props;
                 width: 100%;
 
                 @include wider_than(lg) {
-                    color: $color-neutral-400;
+                    color: #ffffff;
                     width: auto;
                 }
             }