Merge pull request #13 from markteekman/develop

Develop

package.json

@@ -1,13 +1,14 @@
 {
   "name": "accessible-astro-starter",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "scripts": {
     "start": "astro dev",
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.20.12",
+    "astro": "^0.21.2",
+    "autoprefixer": "^10.4.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0"
   }

postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+  },
+};

src/components/Header.astro

@@ -7,32 +7,31 @@ import SkipLinks from '../components/SkipLinks.astro'
 <header>
   <SkipLinks client:load />
   <section class="padding-16 color-neutral">
-    <div class="container">
-      <img src="/assets/logo.svg" alt="Your Logo">
+    <div class="container temp">
+      <img src="assets/logo.svg" alt="Your Logo">
       <ResponsiveToggle client:load />
       <Navigation client:load />
     </div>
   </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>

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 {

src/layouts/DefaultLayout.astro

@@ -21,14 +21,14 @@ 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">
     <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>