Moved duplicate container & h1 styling to global.

src/components/AllWinesPage.vue

@@ -66,23 +66,7 @@ export default {
 @import "./src/styles/variables";
 
 .container {
-  width: 90vw;
+  max-width: unset;
-  margin: 3rem auto;
-  margin-bottom: 0;
-  padding-bottom: 4rem;
-}
-
-h1 {
-  font-size: 3rem;
-  font-family: "knowit";
-  font-weight: normal;
-
-  font-family: knowit, Arial;
-  margin-bottom: 25px;
-}
-
-.label {
-  font-weight: 600;
 }
 
 #wines-container {
@@ -91,10 +75,6 @@ h1 {
   justify-content: space-evenly;
   align-items: flex-start;
 
-  @include desktop {
-    margin: 0 2rem;
-  }
-
   > div {
     justify-content: flex-start;
   }

src/components/GeneratePage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <h1 class="title" @click="startCountdown">Loddgenerator</h1>
+    <h1 class="text-center title" @click="startCountdown">Loddgenerator</h1>
     <p class="subtext">
       Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'
     </p>
@@ -54,13 +54,16 @@ export default {
 @import "../styles/variables.scss";
 @import "../styles/global.scss";
 @import "../styles/media-queries.scss";
+
+.container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+}
+
 h1 {
   cursor: pointer;
 }
-.header-link {
-  color: #333333;
-  text-decoration: none;
-}
 
 p {
   text-align: center;
@@ -74,10 +77,4 @@ p {
     margin-top: 2rem;
   }
 }
-
-.container {
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-}
 </style>

src/components/HighscorePage.vue

@@ -101,25 +101,6 @@ $elementSpacing: 3.5rem;
   margin-bottom: $elementSpacing;
 }
 
-.container {
-  width: 90vw;
-  margin: 3rem auto;
-  max-width: 1200px;
-  margin-bottom: 0;
-  padding-bottom: 3rem;
-
-  @include desktop {
-    width: 80vw;
-  }
-}
-
-h1 {
-  font-size: 3rem;
-  font-family: "knowit";
-  color: $matte-text-color;
-  font-weight: normal;
-}
-
 .filter input {
   font-size: 1rem;
   width: 30%;

src/components/PersonalHighscorePage.vue

@@ -141,24 +141,6 @@ $elementSpacing: 3rem;
   border-color: gray;
 }
 
-.container {
-  width: 90vw;  
-  margin: 3rem auto;
-  margin-bottom: 0;
-  padding-bottom: 3rem;
-  max-width: 1200px;
-
-  @include desktop {
-    width: 80vw;
-  }
-}
-
-h1 {
-  font-size: 3rem;
-  font-family: "knowit";
-  font-weight: normal;
-}
-
 .name {
   text-transform: capitalize;
   font-size: 3.5rem;

src/components/VinlottisPage.vue

@@ -116,6 +116,7 @@ h1 {
 .container{
   display: flex;
   flex-direction: column;
+  width: 100%;
 
   .header-and-notification{
     display: flex;
@@ -123,6 +124,10 @@ h1 {
     margin: auto;
   }
 
+  h1 {
+    margin-top: 0;
+  }
+
   .vipps-icon{
     margin: 1em;
   }

src/components/WinnerPage.vue

@@ -77,6 +77,11 @@ export default {
   margin-top: 2rem;
   padding: 2rem;
 }
+
+h1 {
+  color: $matte-text-color;
+}
+
 .sent-container {
   width: 100%;
   height: 90vh;

src/styles/global.scss

@@ -37,6 +37,33 @@ a {
   }
 }
 
+.container {
+  width: 90vw;
+  margin: 3rem auto;
+  margin-bottom: 0;
+  padding-bottom: 3rem;
+  max-width: 1700px;
+
+  @include desktop {
+    width: 80vw;
+  }
+
+  h1 {
+    font-family: "knowit";
+    font-weight: normal;
+    font-size: 2rem;
+
+    @include desktop {
+      font-size: 3rem;
+    }
+  }
+}
+
+.text-center {
+  text-align: center;
+}
+
+
 .subtext {
   margin-top: 0.5rem;
   font-size: 1.22rem;

src/ui/RaffleGenerator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="flex column">
     <div class="input-line">
       <label for="redCheckbox">
         <input type="checkbox" id="redCheckbox" v-model="redCheckbox" @click="generateColors"/>
@@ -208,12 +208,6 @@ export default {
 @import "../styles/global.scss";
 @import "../styles/media-queries.scss";
 
-.container {
-  margin: auto;
-  display: flex;
-  flex-direction: column;
-}
-
 .input-line {
   margin: auto;
   display: flex;