From a5f0a0f205bf9c492bba4961a72183f5ba910e34 Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Thu, 20 Apr 2023 10:17:59 +0200
Subject: [PATCH] enhetsbredder
---
src/App.vue | 2 +-
src/assets/main.css | 2 +-
src/components/Navbar.vue | 33 ++++++++++++++++++++++++---------
src/style.scss | 4 ++++
4 files changed, 30 insertions(+), 11 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 4ac04cb..5dfb204 100644
--- a/src/App.vue
+++ b/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);
}
diff --git a/src/assets/main.css b/src/assets/main.css
index e8667cd..3c0a06b 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -3,7 +3,7 @@
#app {
max-width: 1280px;
margin: 0 auto;
- padding: 2rem;
+ qpadding: 2rem;
font-weight: normal;
}
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 1e4daa4..dac9a43 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,29 +1,29 @@
<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
diff --git a/src/style.scss b/src/style.scss
index ee2b8b3..438fccd 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -4,3 +4,7 @@ $white:#FFFFFF;
$grey:#D9D9D9;
$red:#EE6D6D;
+
+$desktop-min: 800px;
+$phone-min : 360px;
+
--
GitLab