From ab0be67d025957bbc930d3c9baace14d273b87ce Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Tue, 23 Nov 2021 16:12:41 +0100
Subject: [PATCH 1/5] Update Astro to 0.21.2

---
 package.json                    | 2 +-
 src/layouts/DefaultLayout.astro | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index eb2f356..3d2622a 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.20.12",
+    "astro": "^0.21.2",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0"
   }
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
index 3db1c10..86627b0 100644
--- a/src/layouts/DefaultLayout.astro
+++ b/src/layouts/DefaultLayout.astro
@@ -21,7 +21,7 @@ let subtitle = 'Accessible Astro Starter'
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap" rel="stylesheet">
 
     <!-- global css -->
-    <link rel="stylesheet" href={Astro.resolve('../styles/globals.css')} />
+    <link rel="stylesheet" href={Astro.resolve('../styles/globals.scss')} />
 
     <!-- open graph -->
     <meta property="og:title" content="Accessible Astro Starter">

From 232e64e836f1508845da6b4965f18d8825cfb099 Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Tue, 23 Nov 2021 16:15:35 +0100
Subject: [PATCH 2/5] Manually add autoprefixer and postcss config

https://docs.astro.build/migration/0.21.0/#autoprefixer
---
 package.json       | 1 +
 postcss.config.cjs | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 postcss.config.cjs

diff --git a/package.json b/package.json
index 3d2622a..8e8f0b2 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "astro": "^0.21.2",
+    "autoprefixer": "^10.4.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0"
   }
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 0000000..a47ef4f
--- /dev/null
+++ b/postcss.config.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

From a5eab1fb53d6fa7561eadf9342727ca60a0e823e Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Tue, 23 Nov 2021 16:15:59 +0100
Subject: [PATCH 3/5] Temporarily set these style tags to global (Astro bug
 pending)

---
 src/components/Header.astro     | 17 ++++++++---------
 src/components/Navigation.astro |  8 ++++----
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 2f7f4f2..fba3e37 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -7,7 +7,7 @@ import SkipLinks from '../components/SkipLinks.astro'
 <header>
   <SkipLinks client:load />
   <section class="padding-16 color-neutral">
-    <div class="container">
+    <div class="container temp">
       <img src="/assets/logo.svg" alt="Your Logo">
       <ResponsiveToggle client:load />
       <Navigation client:load />
@@ -15,24 +15,23 @@ import SkipLinks from '../components/SkipLinks.astro'
   </section>
 </header>
 
-<style lang="scss">
+<style lang="scss" global>
   @use '../styles/base/breakpoint' as *;
 
-  .container {
-    gap: 1rem;
-
-    img {
-      max-height: 40px;
-    }
-
+  .container.temp {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
+    gap: 1rem;
 
     @include breakpoint(medium) {
       flex-wrap: nowrap;
     }
+
+    img {
+      max-height: 40px;
+    }
   }
 </style>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index a7f0a9b..1d0031d 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -53,20 +53,20 @@
 
 </script>
 
-<style lang="scss">
+<style lang="scss" global>
   @use '../styles/base/breakpoint' as *;
 
   nav {
     display: none;
     flex-basis: 100%;
 
-    &.show {
+    @include breakpoint(medium) {
       display: block;
+      flex-basis: auto;
     }
 
-    @include breakpoint(medium) {
+    &.show {
       display: block;
-      flex-basis: auto;
     }
 
     > ul {

From 9785cab011a059163421f9ab2a41eb9667f31ada Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Tue, 23 Nov 2021 16:16:48 +0100
Subject: [PATCH 4/5] Update version to 1.1.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8e8f0b2..5a75b04 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "accessible-astro-starter",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "scripts": {
     "start": "astro dev",

From adb834a9ae809d6e58859243a4c47c4f3c12ff7a Mon Sep 17 00:00:00 2001
From: Mark Teekman <mark.teekman@gmail.com>
Date: Tue, 23 Nov 2021 16:30:19 +0100
Subject: [PATCH 5/5] Resolve paths

---
 src/components/Header.astro     | 2 +-
 src/layouts/DefaultLayout.astro | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index fba3e37..3dd5409 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -8,7 +8,7 @@ import SkipLinks from '../components/SkipLinks.astro'
   <SkipLinks client:load />
   <section class="padding-16 color-neutral">
     <div class="container temp">
-      <img src="/assets/logo.svg" alt="Your Logo">
+      <img src="assets/logo.svg" alt="Your Logo">
       <ResponsiveToggle client:load />
       <Navigation client:load />
     </div>
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
index 86627b0..ba327e9 100644
--- a/src/layouts/DefaultLayout.astro
+++ b/src/layouts/DefaultLayout.astro
@@ -28,7 +28,7 @@ let subtitle = 'Accessible Astro Starter'
     <meta property="og:description" content="A starter project with accessible features using Astro static site builder. Contains accessible landmarks, skip links, a dark mode color scheme, better focus outline and keyboard menu navigation.">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://accessible-astro.markteekman.nl/">
-    <meta property="og:image" content="/assets/social-preview-image.png">
+    <meta property="og:image" content="assets/social-preview-image.png">
 
     <!-- page title -->
     <title>{title} - {subtitle}</title>