added style to twoberries

fonts/AUTHENTIC SANS 210330/info.txt

@@ -0,0 +1,5 @@
+AUTHENTIC SANS
+A typeface intended for situations where Oriya Sangam MN seems too sophisticated and LiHei Pro too vulgar, or vice versa. AUTHENTIC Sans explores the semiotic and aesthetic idiosyncrasies of the anonymous Latin glyphs included with CJK system fonts; the typeface aims to subvert the Eurocentric standards of typographic quality and refinement. Distributed freely under the WTFPL, AUTHENTIC Sans is a reflection of the studio praxis: expanding and redefining the visual and cultural boundaries of default systems.
+
+LICENSE
+AUTHENTIC Sans is released freely under the WTFPL (http://www.wtfpl.net/)

fonts/AUTHENTIC SANS 210330/wtfpl.txt

@@ -0,0 +1,14 @@
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.
+

src/components/edition3/twoberries.vue

@@ -13,8 +13,13 @@
   font-family: 'ED Regular';
   src: url('../../../fonts/ED-Regular.otf');
 }
+
+@font-face {
+  font-family: 'AUTHENTICSans';
+  src: url('../../../fonts/AUTHENTICSans-60.otf');
+}
 * {
-    border: 0px black solid;
+    border: 1px black solid;
     background-color: transparent;
 }
 
@@ -38,11 +43,11 @@ a {
 .content {
   /*padding-right: 50px;*/
   /*padding-left: 60px;*/
-  font-family: 'Happy Times';
+  font-family: 'AUTHENTICSans';
   font-size: 18px;
   line-height: 24px;
-  /*padding-bottom: 40px;*/
+  padding-bottom: 40px;
-  color: #1B75BC;
+  color: black;
   text-align: left;
 }
 
@@ -54,59 +59,71 @@ a {
   }
 
 .title_story {
-  font-size: 80px;
+  font-size: 48px;
-  font-family: 'Semi Light Dots', sans-serif;
+  font-family: 'AUTHENTICSans', sans-serif;
-  padding-top: 20px;
+  padding-top: 70px;
-  color: #FA00FF;
+  color: black;
   text-align: center;
 }
 
 .arrows {
-  font-size: 80px;
+  font-size: 40px;
-  font-family: 'Semi Light Dots', sans-serif;
+  top: 20px;
-  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 {
+  font-size: 15px;
+  margin-top: 60px;
+}
 .image_container {
   padding-top: 5px;
 }
 
 .photo {
--webkit-filter: grayscale(100%);
-        filter: grayscale(100%);
-        width: auto;
   max-height: 100%;
   max-width: 100%;
   padding: 12px;
+  margin-top: 40%;
 }
 
+
 .img-fluid {
   filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
 }
 
 .author {
   font-size: 20px;
-  font-family: 'ED-regular', sans-serif;;
+  font-family: 'AUTHENTICSans', sans-serif;;
   text-align: center;
-  color: #FA00FF;
+  color: black;
 }
 
 
@@ -119,6 +136,15 @@ a {
   max-width: 100%;
 }
 
+.color_back {
+  background-color: #FFE9FA;
+}
+
+.color_next {
+  background-color: #EDECFF;
+}
+
+
 @media (max-width: 575px){
      .small_icon {
        display: none;
@@ -145,22 +171,34 @@ a {
 <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">⟵</a>
-          <a href="/anise" id="rightarrow">→</a>
+              <p class="onhover">Editor's note</p>
             </b-col>
           </b-row>
 
         <b-row>
-      <b-col md="4">
+          <b-col md="12">
-        <b-row>
+            <b-container fluid>
-          <b-col md="6" offset-md="3">
+              <div class="image_container">
-        <div class="zoom">
+
-          <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img>
+              <b-img class="photo" src="media/twoberries/oul.png"> </b-img>
+
+
           </div>
+
+          </b-container>
       </b-col>
       </b-row>
+      </b-col>
+
+      <b-col md="4" class="color_back">
         <b-row>
           <b-col md="12">
           <p class="title_story">Floating on Habit</p>
@@ -172,12 +210,10 @@ a {
 
             </b-col>
           </b-row>
-      </b-col>
-
-      <b-col md="4">
 
 <div class='content'>
 
+
 <p>7:30 alarm ON, 2 to 3 snoozes, 1 espresso ristretto, 1 cup of tea - ginger or mint, even licorice to be daring, 3 sun salutations, stretch, stretch, 200 crunches, breath, meditate (but no more than 10minutes), shower, breakfast: oats, banana, 2 berries of choice, yogurt. Repeat.</p>
 <p>
 I always relied on routine to find my balance. My eating routines regulate my irregularities.
@@ -200,19 +236,16 @@ But blandness aside, I like this certainty of a particular food or a recipe that
 </div>
 
       </b-col>
-      <b-col md="4">
+      <b-col md="4" class="color_next">
-        <b-container fluid>
+        <b-row class="controls">
-          <div class="image_container">
+            <b-col md="12" class="arrows">
-
+              <a href="/workfromhome" id="rightarrow">⟶</a>
-          <b-img class="photo" src="media/twoberries/oul.png"> </b-img>
+            </b-col>
-
+          </b-row>
-
-      </div>
-
-      </b-container>
       </b-col>
 
 </b-row>
+</div>
       </b-container>
 </template>
 

src/components/edition3/workfromhome.vue

@@ -146,7 +146,7 @@ a {
     <MenuBar/>
     <b-row class="controls">
       <b-col md="12" class="arrows">
-        <a href="/knife" id="leftarrow">←</a>
+        <a href="/twoberries" id="leftarrow">←</a>
         <a href="/soulsoup" id="rightarrow">→</a>
       </b-col>
     </b-row>