enhetsbredder

src/App.vue

@@ -47,7 +47,7 @@ nav a:first-of-type {
 @media (min-width: 1024px) {
   header {
     display: flex;
-    place-items: center;
+    qplace-items: center;
     padding-right: calc(var(--section-gap) / 2);
   }
 

src/assets/main.css

@@ -3,7 +3,7 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  qpadding: 2rem;
 
   font-weight: normal;
 }

src/components/Navbar.vue

 <template>
     <div>
         <nav>
-            <ul>
+            <ul :aria-label = "'Navigation links'">
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to home page'">
                       <Icon icon="material-symbols:home-outline-rounded" :color="iconColor" :style="{ fontSize: iconSize }" />
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to fridge page'">
                       <Icon icon="mingcute:fridge-line" :color="iconColor" :style="{ fontSize: iconSize }"/>
                     </RouterLink>
                  </li>
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to week menu page'">
                       <Icon icon="mdi:leaf-circle" :color="iconColor"  :style="{ fontSize: logoSize }" />
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to shopping list'">
                       <Icon icon="material-symbols:event-list-outline" :color="iconColor" :style="{ fontSize: iconSize }" />
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="'/'">
+                    <RouterLink :to="'/'" :aria-label="'link to settings page'">
                       <Icon icon="mdi:cog" :color="iconColor" :style="{ fontSize: iconSize }"/>
                     </RouterLink>
                 </li>
@@ -45,7 +45,7 @@ export default {
       return `32px`;
     },
     logoSize() {
-      return '40px';
+      return '32px';
     }
   }
 }
@@ -54,7 +54,10 @@ export default {
 <style scoped lang="scss">
 
 nav {
-    width: 393px;
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    width: 100%;
     background-color: base.$green;
     margin:0;
     padding:0;
@@ -67,10 +70,22 @@ ul {
     padding: 0;
     margin-right: 1em;
     margin-left: 1em;
+    margin-top: .6em;
 
 }
+
+
+
+@media only screen and (min-width: base.$desktop-min){
+    nav {
+        top:0;
+        left:0;
+        bottom:auto;
+    }
+}
+
+
 li{
-    padding-top: 0.6em;
     text-align: center;
 }
 </style>
\ No newline at end of file

src/style.scss

@@ -4,3 +4,7 @@ $white:#FFFFFF;
 $grey:#D9D9D9;
 $red:#EE6D6D;
 
+
+$desktop-min: 800px;
+$phone-min : 360px;
+