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;*/
-  color: #1B75BC;
+  padding-bottom: 40px;
+  color: black;
   text-align: left;
 }
 
@@ -54,59 +59,71 @@ a {
   }
 
 .title_story {
-  font-size: 80px;
-  font-family: 'Semi Light Dots', sans-serif;
-  padding-top: 20px;
-  color: #FA00FF;
+  font-size: 48px;
+  font-family: 'AUTHENTICSans', sans-serif;
+  padding-top: 70px;
+  color: black;
   text-align: center;
 }
 
 .arrows {
-  font-size: 80px;
-  font-family: 'Semi Light Dots', sans-serif;
-  top: 36px;
-  color: #FA00FF;
+  font-size: 40px;
+  top: 20px;
+  color: black;
   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,39 +171,49 @@ a {
 <template>
   <b-container fluid class="p-0">
     <MenuBar/>
-    <b-row class="controls">
-        <b-col md="12" class="arrows">
-          <a href="/whatwecan" id="leftarrow">←</a>
-          <a href="/anise" id="rightarrow">→</a>
-        </b-col>
-      </b-row>
+    <div class="bodyyy">
+
 
     <b-row>
-      <b-col md="4">
+      <b-col md="4" class="color_back">
+        <b-row class="controls">
+            <b-col md="12" class="arrows">
+              <a href="/whatwecan" id="leftarrow">⟵</a>
+              <p class="onhover">Editor's note</p>
+            </b-col>
+          </b-row>
+
         <b-row>
-          <b-col md="6" offset-md="3">
-        <div class="zoom">
-          <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img>
-        </div>
+          <b-col md="12">
+            <b-container fluid>
+              <div class="image_container">
+
+              <b-img class="photo" src="media/twoberries/oul.png"> </b-img>
+
+
+          </div>
+
+          </b-container>
       </b-col>
       </b-row>
-      <b-row>
-        <b-col md="12">
-        <p class="title_story">Floating on Habit</p>
       </b-col>
-      </b-row>
+
+      <b-col md="4" class="color_back">
         <b-row>
           <b-col md="12">
-            <p class="author">essay and illustration by Alina Turdean</p>
-
-          </b-col>
+          <p class="title_story">Floating on Habit</p>
+        </b-col>
         </b-row>
-      </b-col>
+          <b-row>
+            <b-col md="12">
+              <p class="author">essay and illustration by Alina Turdean</p>
 
-      <b-col md="4">
+            </b-col>
+          </b-row>
 
 <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-container fluid>
-          <div class="image_container">
-
-          <b-img class="photo" src="media/twoberries/oul.png"> </b-img>
-
-
-      </div>
-
-      </b-container>
+      <b-col md="4" class="color_next">
+        <b-row class="controls">
+            <b-col md="12" class="arrows">
+              <a href="/workfromhome" id="rightarrow">⟶</a>
+            </b-col>
+          </b-row>
       </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>