From 5458b128f176a740f90bc0e11616fc178028138e Mon Sep 17 00:00:00 2001
From: simoon <info@simonbrowne.biz>
Date: Wed, 1 Dec 2021 16:16:08 +0100
Subject: [PATCH] adjusted typography in vue files

---
 src/components/edition3/EditorNote3.vue  | 46 ++++++-------
 src/components/edition3/bananas.vue      | 49 +++++++------
 src/components/edition3/bowl.vue         | 87 +++++++++++------------
 src/components/edition3/colophon3.vue    | 88 +++++++++++++-----------
 src/components/edition3/mittens.vue      | 53 +++++++-------
 src/components/edition3/olives.vue       | 44 ++++++------
 src/components/edition3/popcorn.vue      | 56 +++++++--------
 src/components/edition3/potato.vue       | 44 ++++++------
 src/components/edition3/threeeggs.vue    | 42 +++++------
 src/components/edition3/twoberries.vue   | 47 ++++++-------
 src/components/edition3/vodka.vue        | 46 +++++--------
 src/components/edition3/workfromhome.vue | 75 +++++++++-----------
 12 files changed, 323 insertions(+), 354 deletions(-)

diff --git a/src/components/edition3/EditorNote3.vue b/src/components/edition3/EditorNote3.vue
index 12afae5..b099e3f 100644
--- a/src/components/edition3/EditorNote3.vue
+++ b/src/components/edition3/EditorNote3.vue
@@ -1,14 +1,14 @@
 <style scoped>
+
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
 
@@ -36,16 +36,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -53,31 +49,32 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
+
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
@@ -106,30 +103,29 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
 .image_container {
   padding-top: 5px;
 }
 
-
 .color_back {
-  background-color: #EDECFF;
+  background-color: #FFFFFF;
 }
 
 .color_next {
-  background-color: #FBFFF0;
-
+  background-color: #FFE9FA;
 }
 
-
 @media (max-width: 575px){
      .small_icon {
        display: none;
diff --git a/src/components/edition3/bananas.vue b/src/components/edition3/bananas.vue
index e586267..e44dfca 100644
--- a/src/components/edition3/bananas.vue
+++ b/src/components/edition3/bananas.vue
@@ -2,24 +2,23 @@
 
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
-@keyframes slideInFromLeft {
+/*@keyframes slideInFromLeft {
   0% {
     transform: translateX(-100%);
   }
   100% {
     transform: translateX(0);
   }
-}
+}*/
 
 * {
     border: 0px black solid;
@@ -46,16 +45,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -63,47 +58,46 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
+
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
-visibility: hidden;
+  visibility: hidden;
 }
 
 .arrows:hover p {
   visibility: visible;
-
 }
+
 .arrows a {
     display: block;
 }
 
-
-
 #leftarrow {
   float: left;
   color: black;
@@ -116,15 +110,18 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
+
 .image_container {
   padding-top: 5px;
 }
diff --git a/src/components/edition3/bowl.vue b/src/components/edition3/bowl.vue
index 3a698ab..2a0e99e 100644
--- a/src/components/edition3/bowl.vue
+++ b/src/components/edition3/bowl.vue
@@ -1,14 +1,14 @@
 <style scoped>
+
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
 * {
@@ -34,16 +34,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -51,41 +47,40 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
-
-  .title_story {
-    font-size: 35px;
-    font-family: 'AUTHENTICSans', sans-serif;
-    font-weight: 400;
-    padding-top: 70px;
-    color: black;
-    text-align: left;
-  }
-  .author {
-    font-size: 20px;
-    font-family: 'AUTHENTICSans', sans-serif;
-    font-weight: 400;
-    text-align: right;
-    color: black;
-  }
-
-
-  .arrows {
-    font-size: 40px;
-    top: 30px;
-    color: black;
-    vertical-align: top;
-    overflow: hidden;
-    font-family: 'AUTHENTICSans';
-  }
-
-  .arrows p {
+}
+
+.title_story {
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
+  color: black;
+  text-align: left;
+}
+
+.author {
+  font-size: 36px;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  text-align: right;
+  color: black;
+}
+
+.arrows {
+  font-size: 40px;
+  top: 48px;
+  color: black;
+  vertical-align: top;
+  overflow: hidden;
+  font-family: 'AUTHENTICSansCondensed';
+}
+
+.arrows p {
   visibility: hidden;
-  }
+}
 
-  .arrows:hover p {
+.arrows:hover p {
     visibility: visible;
-  }
+}
 
 .arrows a {
     display: block;
@@ -103,13 +98,15 @@ a {
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
 
@@ -122,14 +119,12 @@ a {
   float: left;
   margin-top: 150px;
   filter: grayscale(80%) contrast(80%) opacity(50%);
-
 }
 
 #illustration:hover {
   filter: grayscale(0%);
 }
 
-
 .small_icon {
   max-width: 60%;
   padding-top: 100px;
@@ -148,7 +143,7 @@ a {
 }
 
 .pink {
-  color: pink;
+  color: #FF5C00;
 }
 
 .color_back {
diff --git a/src/components/edition3/colophon3.vue b/src/components/edition3/colophon3.vue
index 0f7174f..66a8c28 100644
--- a/src/components/edition3/colophon3.vue
+++ b/src/components/edition3/colophon3.vue
@@ -2,18 +2,15 @@
 
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
-
-
 * {
     border: 0px black solid;
     background-color: transparent;
@@ -49,16 +46,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -66,29 +59,35 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
 
+.author {
+  font-size: 36px;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  text-align: right;
+  color: black;
+}
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
-visibility: hidden;
+  visibility: hidden;
 }
 
 .arrows:hover p {
@@ -96,11 +95,10 @@ visibility: hidden;
 
 }
 .arrows a {
-    display: block;
+  display: block;
 }
 
 
-
 #leftarrow {
   float: left;
   color: black;
@@ -113,15 +111,18 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
+
 .image_container {
   padding-top: 5px;
 }
@@ -138,7 +139,9 @@ visibility: hidden;
   filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
 }
 
-
+hr.divider {
+  border-top: 1px solid black;
+}
 
 .small_icon {
   max-width: 60%;
@@ -151,6 +154,7 @@ visibility: hidden;
 
 .color_back {
   background-color: #5FC44F;
+  max-height: 100%;
 }
 
 .color_next {
@@ -179,6 +183,11 @@ visibility: hidden;
      }
    }
 
+#authentic-sans-link {
+  color: black;
+  text-decoration: underline;
+}
+
 </style>
 
 <template>
@@ -205,32 +214,29 @@ visibility: hidden;
           </b-row>
 
 <div class='content'>
-<p>Magiun Magazine,
-Issue 3, Winter 2021</p>
-<p>
-Magiun publishes thoughts
-on everyday food.</p>
-<p>
-This publication has been put together by Alice Strete, with Simon Browne</p>
-<p>
-------------------------------------------
-</p>
-<p>
-Contributions by:<br>
-Alina, Ileana, Sylvie, Esmeralda, Honey, Louise, Inge, Patricia,<br>
+  <br>
+  <p>Magiun Magazine,<br>
+  Issue 3, Winter 2021</p>
+  <p>Magiun publishes thoughts<br>
+  on everyday food.</p>
+  <p>This publication has been put together by Alice Strete, with Simon Browne</p>
+<hr class="divider">
+  <p>Contributions by:<br>
+Alina, Ileana, Sylvie, Esmeralda,<br>
+Honey, Louise, Inge, Patricia,<br>
 Raluca, Ana-Maria, Valentina </p>
 
 <p>
-Typeface:
-Authentic Sans, designed by
+Typeface:<br>
+<a id="authentic-sans-link" href="https://authentic.website/shop.html#sans" target="blank">Authentic Sans</a>, designed by<br>
 Christina Janus and Desmond Wong
 </p>
 <p>
-Graphic design:
+Graphic design:<br>
 Simon Browne
 </p>
 <p>
-Illustration:
+Illustration:<br>
 Alice Strete
 </p>
 
diff --git a/src/components/edition3/mittens.vue b/src/components/edition3/mittens.vue
index 7e0be12..6dd5aba 100644
--- a/src/components/edition3/mittens.vue
+++ b/src/components/edition3/mittens.vue
@@ -1,23 +1,21 @@
 <style scoped>
+
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
-
 * {
     border: 0px black solid;
     background-color: transparent;
 }
 
-
 .container_width {
   max-width: 100%;
   padding-left: 0px;
@@ -25,7 +23,6 @@
   padding-top: 70px;
 }
 
-
 a:hover {
   color: hotpink;
   text-decoration: none;
@@ -36,48 +33,52 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
-  font-size: 16px;
+  font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
+.monologue {
+  font-family: 'AUTHENTICSansLight';
+  font-size: 18px;
+  line-height: 24px;
+  padding-bottom: 40px;
+  color: black;
+  text-align: left;
+}
 .controls {
   padding-top: 12px;
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
@@ -116,20 +117,22 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
+
 .image_container {
   padding-top: 5px;
 }
 
-
 .color_back {
   background-color: #D7FFE9;
 }
diff --git a/src/components/edition3/olives.vue b/src/components/edition3/olives.vue
index fc4c88d..5eb31e1 100644
--- a/src/components/edition3/olives.vue
+++ b/src/components/edition3/olives.vue
@@ -1,23 +1,21 @@
 <style scoped>
+
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
-
 * {
     border: 0px black solid;
     background-color: transparent;
 }
 
-
 .container_width {
   max-width: 100%;
   padding-left: 0px;
@@ -25,7 +23,6 @@
   padding-top: 70px;
 }
 
-
 a:hover {
   color: hotpink;
   text-decoration: none;
@@ -36,16 +33,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -53,35 +46,35 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
-visibility: hidden;
+  visibility: hidden;
 }
 
 .arrows:hover p {
@@ -106,15 +99,18 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
+
 .image_container {
   padding-top: 5px;
 }
diff --git a/src/components/edition3/popcorn.vue b/src/components/edition3/popcorn.vue
index 96e42b6..4f90785 100644
--- a/src/components/edition3/popcorn.vue
+++ b/src/components/edition3/popcorn.vue
@@ -2,22 +2,28 @@
 
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
-
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
+/*@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}*/
+
 * {
     border: 0px black solid;
     background-color: transparent;
 }
 
-
 .container_width {
   max-width: 100%;
   padding-left: 0px;
@@ -25,7 +31,6 @@
   padding-top: 70px;
 }
 
-
 a:hover {
   color: hotpink;
   text-decoration: none;
@@ -36,16 +41,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -53,47 +54,45 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
-visibility: hidden;
+  visibility: hidden;
 }
 
 .arrows:hover p {
   visibility: visible;
-
 }
+
 .arrows a {
     display: block;
 }
 
-
-
 #leftarrow {
   float: left;
   color: black;
@@ -106,15 +105,18 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
+
 .image_container {
   padding-top: 5px;
 }
diff --git a/src/components/edition3/potato.vue b/src/components/edition3/potato.vue
index 4890c4e..f1a550c 100644
--- a/src/components/edition3/potato.vue
+++ b/src/components/edition3/potato.vue
@@ -2,14 +2,13 @@
 
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
 
@@ -48,16 +47,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -65,47 +60,45 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
-visibility: hidden;
+  visibility: hidden;
 }
 
 .arrows:hover p {
   visibility: visible;
-
 }
+
 .arrows a {
     display: block;
 }
 
-
-
 #leftarrow {
   float: left;
   color: black;
@@ -118,15 +111,18 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
+
 .image_container {
   padding-top: 5px;
 }
diff --git a/src/components/edition3/threeeggs.vue b/src/components/edition3/threeeggs.vue
index c0d4bdc..837c8b6 100644
--- a/src/components/edition3/threeeggs.vue
+++ b/src/components/edition3/threeeggs.vue
@@ -1,23 +1,21 @@
 <style scoped>
+
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
-
 * {
     border: 0px black solid;
     background-color: transparent;
 }
 
-
 .container_width {
   max-width: 100%;
   padding-left: 0px;
@@ -36,16 +34,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -53,31 +47,31 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
@@ -93,7 +87,6 @@ visibility: hidden;
 }
 
 
-
 #leftarrow {
   float: left;
   color: black;
@@ -106,15 +99,18 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
+
 .image_container {
   padding-top: 5px;
 }
diff --git a/src/components/edition3/twoberries.vue b/src/components/edition3/twoberries.vue
index d978e77..f6730ab 100644
--- a/src/components/edition3/twoberries.vue
+++ b/src/components/edition3/twoberries.vue
@@ -2,14 +2,13 @@
 
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
 
@@ -35,12 +34,12 @@ a:hover {
 a {
   color: gray;
 }
+
 #illustration {
   width: 100%;
   float: left;
   margin-top: 150px;
   filter: grayscale(80%) contrast(80%) opacity(50%);
-
 }
 
 #illustration:hover {
@@ -48,16 +47,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -65,47 +60,46 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
+
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
-visibility: hidden;
+  visibility: hidden;
 }
 
 .arrows:hover p {
   visibility: visible;
-
 }
+
 .arrows a {
     display: block;
 }
 
-
-
 #leftarrow {
   float: left;
   color: black;
@@ -118,15 +112,18 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
+
 .image_container {
   padding-top: 5px;
 }
diff --git a/src/components/edition3/vodka.vue b/src/components/edition3/vodka.vue
index bcdb924..a8fb562 100644
--- a/src/components/edition3/vodka.vue
+++ b/src/components/edition3/vodka.vue
@@ -2,25 +2,20 @@
 
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
-
-
 * {
     border: 0px black solid;
     background-color: transparent;
 }
 
-
-
 .container_width {
   max-width: 100%;
   padding-left: 0px;
@@ -28,7 +23,6 @@
   padding-top: 70px;
 }
 
-
 a:hover {
   color: hotpink;
   text-decoration: none;
@@ -39,16 +33,12 @@ a {
 }
 
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -56,46 +46,46 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
+}
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
-visibility: hidden;
+  visibility: hidden;
 }
 
 .arrows:hover p {
   visibility: visible;
 
 }
+
 .arrows a {
     display: block;
 }
 
-
 #leftarrow {
   float: left;
   color: black;
@@ -108,13 +98,15 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
 
diff --git a/src/components/edition3/workfromhome.vue b/src/components/edition3/workfromhome.vue
index e670e4d..a760df5 100644
--- a/src/components/edition3/workfromhome.vue
+++ b/src/components/edition3/workfromhome.vue
@@ -2,25 +2,21 @@
 
 @font-face {
   font-family: 'AUTHENTICSansLight';
-  src: url('../../../fonts/AUTHENTICSans-60.otf');
-  font-weight: lighter;
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 100;
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
-  src: url('../../../fonts/AUTHENTICSans-90.otf');
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed';
+  src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
 }
 
 
-
 * {
     border: 0px black solid;
     background-color: transparent;
 }
 
-
-
 .container_width {
   max-width: 100%;
   padding-left: 0px;
@@ -28,7 +24,6 @@
   padding-top: 70px;
 }
 
-
 a:hover {
   color: hotpink;
   text-decoration: none;
@@ -38,17 +33,24 @@ a {
   color: gray;
 }
 
+#illustration {
+  width: 100%;
+  float: left;
+  margin-top: 150px;
+  filter: grayscale(80%) contrast(80%) opacity(50%);
+}
+
+#illustration:hover {
+  filter: grayscale(0%);
+}
+
 .content {
-  /*padding-right: 50px;*/
-  /*padding-left: 60px;*/
   font-family: 'AUTHENTICSansLight';
-  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
-
 }
 
 .controls {
@@ -56,60 +58,46 @@ a {
   height: 120px;
   z-index: 1;
   position: relative;
-  }
-
-  #illustration {
-    width: 80%;
-    float: left;
-    margin-top: 150px;
-    filter: grayscale(80%) contrast(80%) opacity(50%);
-
-  }
+}
 
-  #illustration:hover {
-    filter: grayscale(0%);
-  }
 
 .title_story {
-  font-size: 48px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
-  padding-top: 70px;
+  font-size: 72px;
+  line-height: 100%;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
+  padding-top: 96px;
   color: black;
   text-align: left;
 }
+
 .author {
   font-size: 36px;
-  font-family: 'AUTHENTICSans', sans-serif;
-  font-weight: 400;
+  font-family: 'AUTHENTICSansCondensed', sans-serif;
   text-align: right;
   color: black;
 }
 
-
 .arrows {
   font-size: 40px;
-  top: 30px;
+  top: 48px;
   color: black;
   vertical-align: top;
   overflow: hidden;
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansCondensed';
 }
 
 .arrows p {
-visibility: hidden;
+  visibility: hidden;
 }
 
 .arrows:hover p {
   visibility: visible;
-
 }
+
 .arrows a {
     display: block;
 }
 
-
-
 #leftarrow {
   float: left;
   color: black;
@@ -122,15 +110,18 @@ visibility: hidden;
 
 #onhover_right {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-right: 96px;
   text-align: right;
 }
 
 #onhover_left {
   font-size: 15px;
-  margin-top: 60px;
+  margin-top: 24px;
+  margin-left: 96px;
   text-align: left;
 }
+
 .image_container {
   padding-top: 5px;
 }
@@ -138,7 +129,8 @@ visibility: hidden;
 .photo {
   max-height: 100%;
   max-width: 100%;
-  padding: 20px;
+  padding: 12px;
+  margin-bottom: 12px;
 }
 
 
@@ -165,6 +157,7 @@ visibility: hidden;
   background-color: #FFB37B;
 }
 
+
 @media (max-width: 575px){
      .small_icon {
        display: none;