styled freestyle

src/components/edition3/twoberries.vue

@@ -15,14 +15,43 @@
 }
 
 @font-face {
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansLight';
   src: url('../../../fonts/AUTHENTICSans-60.otf');
+  font-weight: lighter;
+}
+
+@font-face {
+  font-family: 'AUTHENTICSans';
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 400;
+}
+
+@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
+
 * {
-    border: 1px black solid;
+    border: 0px black solid;
     background-color: transparent;
 }
 
+.fadein {
+    opacity: 0;
+    -moz-transition: opacity 1.5s;
+    -webkit-transition: opacity 1.5s;
+    -o-transition: opacity 1.5s;
+    transition: opacity 1.5s;
+}
+
+body.loaded .fadein {
+    opacity: 1;
+}
+
 .container_width {
   max-width: 100%;
   padding-left: 0px;
@@ -43,12 +72,14 @@ a {
 .content {
   /*padding-right: 50px;*/
   /*padding-left: 60px;*/
-  font-family: 'AUTHENTICSans';
+  font-family: 'AUTHENTICSansLight';
+  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
   padding-bottom: 40px;
   color: black;
   text-align: left;
+
 }
 
 .controls {
@@ -61,14 +92,22 @@ a {
 .title_story {
   font-size: 48px;
   font-family: 'AUTHENTICSans', sans-serif;
+  font-weight: 400;
   padding-top: 70px;
   color: black;
-  text-align: center;
+  text-align: left;
+}
+.author {
+  font-size: 36px;
+  font-family: 'AUTHENTICSans', sans-serif;
+  font-weight: 400;
+  text-align: right;
+  color: black;
 }
 
 .arrows {
   font-size: 40px;
-  top: 20px;
+  top: 30px;
   color: black;
   vertical-align: top;
   overflow: hidden;
@@ -99,9 +138,16 @@ visibility: hidden;
   color: black;
 }
 
-.onhover {
+#onhover_right {
+  font-size: 15px;
+  margin-top: 60px;
+  text-align: right;
+}
+
+#onhover_left {
   font-size: 15px;
   margin-top: 60px;
+  text-align: left;
 }
 .image_container {
   padding-top: 5px;
@@ -119,12 +165,6 @@ visibility: hidden;
   filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
 }
 
-.author {
-  font-size: 20px;
-  font-family: 'AUTHENTICSans', sans-serif;;
-  text-align: center;
-  color: black;
-}
 
 
 .small_icon {
@@ -171,15 +211,14 @@ visibility: hidden;
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
-    <div class="bodyyy">
 
 
     <b-row>
       <b-col md="4" class="color_back">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/whatwecan" id="leftarrow">⟵</a>
+              <a href="/whatwecan" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
-              <p class="onhover">Editor's note</p>
+              <p id="onhover_left">Editor's note</p>
             </b-col>
           </b-row>
 
@@ -206,7 +245,7 @@ visibility: hidden;
         </b-row>
           <b-row>
             <b-col md="12">
-              <p class="author">essay and illustration by Alina Turdean</p>
+              <p class="author">by Alina Turdean</p>
 
             </b-col>
           </b-row>
@@ -239,13 +278,13 @@ But blandness aside, I like this certainty of a particular food or a recipe that
       <b-col md="4" class="color_next">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-              <a href="/workfromhome" id="rightarrow">⟶</a>
+              <a href="/workfromhome" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <p id="onhover_right">Freestyle Platouaș</p>
             </b-col>
           </b-row>
       </b-col>
 
 </b-row>
-</div>
       </b-container>
 </template>
 
@@ -257,9 +296,15 @@ export default {
         return {
         }
     },
+    mounted(){
+    window.onload = function() {
+        document.body.classList.add('loaded');
+      }
+    },
     components: {
         MenuBar
     }
 }
 
+
 </script>

src/components/edition3/workfromhome.vue

@@ -13,11 +13,44 @@
   font-family: 'ED Regular';
   src: url('../../../fonts/ED-Regular.otf');
 }
+@font-face {
+  font-family: 'AUTHENTICSansLight';
+  src: url('../../../fonts/AUTHENTICSans-60.otf');
+  font-weight: lighter;
+}
+
+@font-face {
+  font-family: 'AUTHENTICSans';
+  src: url('../../../fonts/AUTHENTICSans-90.otf');
+  font-weight: 400;
+}
+
+@keyframes slideInFromLeft {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
 * {
     border: 0px black solid;
     background-color: transparent;
 }
 
+.fadein {
+    opacity: 0;
+    -moz-transition: opacity 1.5s;
+    -webkit-transition: opacity 1.5s;
+    -o-transition: opacity 1.5s;
+    transition: opacity 1.5s;
+}
+
+body.loaded .fadein {
+    opacity: 1;
+}
+
 .container_width {
   max-width: 100%;
   padding-left: 0px;
@@ -38,12 +71,14 @@ a {
 .content {
   /*padding-right: 50px;*/
   /*padding-left: 60px;*/
-  font-family: 'Happy Times';
+  font-family: 'AUTHENTICSansLight';
+  font-weight: lighter;
   font-size: 18px;
   line-height: 24px;
-  /*padding-bottom: 40px;*/
+  padding-bottom: 40px;
-  color: #1B75BC;
+  color: black;
   text-align: left;
+
 }
 
 .controls {
@@ -54,59 +89,80 @@ a {
   }
 
 .title_story {
-  font-size: 80px;
+  font-size: 48px;
-  font-family: 'Semi Light Dots', sans-serif;
+  font-family: 'AUTHENTICSans', sans-serif;
-  padding-top: 20px;
+  font-weight: 400;
-  color: #FA00FF;
+  padding-top: 70px;
-  text-align: center;
+  color: black;
+  text-align: left;
+}
+.author {
+  font-size: 36px;
+  font-family: 'AUTHENTICSans', sans-serif;
+  font-weight: 400;
+  text-align: right;
+  color: black;
 }
 
 .arrows {
-  font-size: 80px;
+  font-size: 40px;
-  font-family: 'Semi Light Dots', sans-serif;
+  top: 30px;
-  top: 36px;
+  color: black;
-  color: #FA00FF;
   vertical-align: top;
-  position: fixed;
   overflow: hidden;
+  font-family: 'AUTHENTICSans';
 }
 
+.arrows p {
+visibility: hidden;
+}
+
+.arrows:hover p {
+  visibility: visible;
+
+}
 .arrows a {
     display: block;
 }
 
+
+
 #leftarrow {
   float: left;
-  color: #FA00FF;
+  color: black;
 }
 
 #rightarrow {
   float: right;
-  color: #FA00FF;
+  color: black;
+}
+
+#onhover_right {
+  font-size: 15px;
+  margin-top: 60px;
+  text-align: right;
 }
 
+#onhover_left {
+  font-size: 15px;
+  margin-top: 60px;
+  text-align: left;
+}
 .image_container {
   padding-top: 5px;
 }
 
 .photo {
-
-        width: auto;
   max-height: 100%;
   max-width: 100%;
-  padding: 12px;
+  padding: 20px;
 }
 
+
 .img-fluid {
   filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
 }
 
-.author {
-  font-size: 20px;
-  font-family: 'ED-regular', sans-serif;;
-  text-align: center;
-  color: #FA00FF;
-}
 
 
 .small_icon {
@@ -118,6 +174,14 @@ a {
   max-width: 100%;
 }
 
+.color_back {
+  background-color: #EDECFF;
+}
+
+.color_next {
+  background-color: #FFB37B;
+}
+
 @media (max-width: 575px){
      .small_icon {
        display: none;
@@ -144,21 +208,18 @@ a {
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
+
+    <b-row>
+      <b-col md="4" class="color_back">
         <b-row class="controls">
             <b-col md="12" class="arrows">
-        <a href="/twoberries" id="leftarrow">←</a>
+              <a href="/twoberries" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
-        <a href="/soulsoup" id="rightarrow">→</a>
+              <p id="onhover_left">Floating on Habit</p>
             </b-col>
           </b-row>
-    <b-row>
+
-      <b-col md="4">
-        <b-row>
-          <b-col md="6" offset-md="3">
-            <div class="zoom">
-              <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini.png"></b-img>
-            </div>
       </b-col>
-        </b-row>
+      <b-col md="4" class="color_back">
         <b-row>
           <b-col md="12">
             <p class="title_story">Freestyle Platouaș</p>
@@ -166,57 +227,64 @@ a {
         </b-row>
         <b-row>
           <b-col md="12">
-            <p class="author">essay and photos by Ileana Sebe</p>
+            <p class="author">by Ileana Sebe</p>
           </b-col>
         </b-row>
-      </b-col>
-      <b-col md="4">
         <div class='content'>
           <p>Work from home has come with new eating habits, <br>
 some of them not the healthiest ones,<br>
  at least not what was considered healthy before the covid period.
-</p><p>
-I for myself took the lunch break very late in the afternoon, <br>
-when hunger was beyond its peak point.
-</p><p>
-I ate more often by the computer which never happened while working in an office building and sharing lunch with colleagues.
-</p><p>
-So, when hunger kicked in big time, the only thing to do was to grab on a plate of food I like and had in the fridge or pantry and create a freestyle salty & sweet mix.
-</p><p>
-Not the usual combinations, but very satisfying for my taste buds and so easy to make.
 </p>
-        </div>
+
-      </b-col>
-      <b-col md="4">
-        <b-container fluid>
   <div class="image_container">
 <b-row>
-              <b-col md="10" offset-md="2">
+    <b-col md="12">
       <b-img class="photo" src="media/ileana/ileana_1.jpg"> </b-img>
     </b-col>
   </b-row>
+</div>
+
+  <p>
+I for myself took the lunch break very late in the afternoon, <br>
+when hunger was beyond its peak point.
+</p>
 <b-row>
-              <b-col md="10" offset-md="2">
+    <b-col md="12">
       <b-img class="photo" src="media/ileana/ileana_2.jpg"> </b-img>
     </b-col>
-            </b-row>
+  </b-row><p>
+I ate more often by the computer which never happened while working in an office building and sharing lunch with colleagues.
+</p>
 <b-row>
-              <b-col md="10" offset-md="2">
+  <b-col md="12">
     <b-img class="photo" src="media/ileana/ileana_3.jpg"> </b-img>
   </b-col>
 </b-row>
+<p>
+So, when hunger kicked in big time, the only thing to do was to grab on a plate of food I like and had in the fridge or pantry and create a freestyle salty & sweet mix.
+</p>
 <b-row>
-              <b-col md="10" offset-md="2">
+  <b-col md="12">
     <b-img class="photo" src="media/ileana/ileana_4.jpg"> </b-img>
   </b-col>
 </b-row>
+<p>
+Not the usual combinations, but very satisfying for my taste buds and so easy to make.
+</p>
 <b-row>
-              <b-col md="10" offset-md="2">
+  <b-col md="12">
     <b-img class="photo" src="media/ileana/ileana_5.jpg"> </b-img>
   </b-col>
 </b-row>
         </div>
-        </b-container>
+      </b-col>
+      <b-col md="4" class="color_next">
+        <b-row class="controls">
+            <b-col md="12" class="arrows">
+              <a href="/bananas" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
+              <p id="onhover_right">[each] Tuesday Afternoon</p>
+            </b-col>
+          </b-row>
       </b-col>
     </b-row>
   </b-container>