styled all articles, added transition menu

master
alicestrt 3 years ago
parent a2037fe751
commit 8a463212d7

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

@ -1,6 +1,10 @@
<template> <template>
<b-container fluid> <b-container fluid>
<transition
name="fade"
mode="out-in">
<router-view></router-view> <router-view></router-view>
</transition>
</b-container> </b-container>
</template> </template>
@ -11,4 +15,15 @@ export default {
</script> </script>
<style> <style>
.fade-enter-active,
.fade-leave-active {
transition-duration: 0.3s;
transition-property: opacity;
transition-timing-function: ease;
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
</style> </style>

@ -151,7 +151,7 @@ a {
<MenuBar/> <MenuBar/>
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/" id="leftarrow"></a> <router-link to="/" id="leftarrow"></router-link>
<a href="/simmered" id="rightarrow"></a> <a href="/simmered" id="rightarrow"></a>
</b-col> </b-col>
</b-row> </b-row>

@ -0,0 +1,231 @@
<style scoped>
@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;
}
* {
border: 0px black solid;
background-color: transparent;
}
.container_width {
max-width: 100%;
padding-left: 0px;
padding-right: 0px;
padding-top: 70px;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a {
color: gray;
}
.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 {
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;
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: 40px;
top: 30px;
color: black;
vertical-align: top;
overflow: hidden;
font-family: 'AUTHENTICSans';
}
.arrows p {
visibility: hidden;
}
.arrows:hover p {
visibility: visible;
}
.arrows a {
display: block;
}
#leftarrow {
float: left;
color: black;
}
#rightarrow {
float: right;
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;
}
.color_back {
background-color: #EDECFF;
}
.color_next {
background-color: #FBFFF0;
}
@media (max-width: 575px){
.small_icon {
display: none;
}
.title_story {
font-size: 48px;
}
.author {
font-size: 21px;
}
.content {
padding-bottom: 40px;
}
.photo {
padding-bottom: 40px;
}
}
</style>
<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="/" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<p id="onhover_left">Colophon</p>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_back">
<b-row>
<b-col md="12">
<p class="title_story">Domestic Bliss</p>
</b-col>
</b-row>
<b-row>
<b-col md="12">
<p class="author">by Alice Strete</p>
</b-col>
</b-row>
<div class='content'>
<p>A nameless, faceless girl wakes up in a pristine bed, puts on her glasses and goes to the kitchen to make breakfast. She chops up green onions, fries them up in butter and forms a circle in the pan. She cracks an egg in the middle of the circle and covers the pan with a lid. I wait. She makes a stew with kimchi, tofu, pork belly. She washes bean sprouts in a big strainer. She puts pasta to boil, asking Siri to set a timer. She makes pastries in the airfryer. She makes herself a latte. She brews tea. She waters the plants, organizes her jewellery. I play a game on my phone while watching her on the other screen. She vacuums the floor. She works at her sewing machine. She goes to the post office. She does laundry at a laundromat. I eat my lunch. She goes to the supermarket. She stops at the 7/11. She watches a series on her ipad. She goes to sleep. I go to sleep.
</p><p>
At some point this summer I entered the world of Korean silent vlogs and never left. I'm obviously not the only one. Some of these vloggers have millions of subscribers. Lots of articles have started popping up in the last few months of others getting lost in the calm sea of these videos. They're all women - vloggers and watchers alike. I dont know what to make of that.
</p><p>
Here's a quote from Kristin Ross's essay The French Quotidian from the book The Everyday, edited by Stephen Johnstone:
</p><p>
"Sometime in 1946, the French philosopher Henri Lefebvre discovered the quotidian. He discovered it, that is, in the sense that he proclaimed that most insignificant of categories, the everyday, to be worthy of theoretical attention. And he went on to spend the next several decades, until his death in 1991, paying very close attention to that rapidly changing and elusive phenomenon. [...] Certainly the everyday consisted of that which is taken for granted: the sequence of regular, unvarying repetition. But in that very triviality and baseness lay its seriousness, in the poverty and tedium of the routine lay the potential for creative energy. After all, people do not make revolutions because of abstract ideological principles; they make them because they want to change their lives."
</p><p>
Since reading this, I've come to think of these routine vlogs as revolutionary in their own way. We're led to think that our lives need to be extraordinary, we need to leave some sort of mark on the world, that what we do needs to matter. Surely the things we do around the house don't fall into the category of things that matter. We split our days between things we need to do and things we want to do, and those two categories look completely different. I'm aware that my argument may look like a glorification of housework, but that's not the point I'm trying to make. I think the care we put into even the smallest of tasks influences the way we relate to our environment, and the emotions we associate with different activities that we do.
</p><p>
The word routine often comes up in association with others like 'boring' or 'drudgery' or 'tedious'. But routines are part of the dynamic of our daily lives. They are personal and can be a real act of care towards ourselves and others. They embody our experiences and our environment, and are therefore an inexhaustible source for self-reflection.
</p><p>
For me, the way I move through the world matters. That includes the things I do inside the house. I look at my plants closely, several times a day, watching for new growth, sometimes cleaning their leaves. I make sure to fold my laundry in a way that will give me comfort the next time I reach in my drawer to pick something out. I take so much pleasure in cooking a nice meal, that it brightens up my whole day. Can this attitude be influenced by a YouTube video in which a stranger takes pleasure in the same activities? Most likely.
</p>
</div>
</b-col>
<b-col md="4" class="color_next">
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/twoberries" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<p id="onhover_right">Floating on Habit</p>
</b-col>
</b-row>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from '../MenuBar'
export default {
name: 'EditorNote3',
data: function() {
return {
}
},
components: {
MenuBar
}
}
</script>

@ -13,11 +13,44 @@
font-family: 'ED Regular'; font-family: 'ED Regular';
src: url('../../../fonts/ED-Regular.otf'); 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; border: 0px black solid;
background-color: transparent; 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 { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -38,12 +71,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
font-weight: lighter;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
/*padding-bottom: 40px;*/ padding-bottom: 40px;
color: #1B75BC; color: black;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -54,60 +89,81 @@ a {
} }
.title_story { .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 { .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; vertical-align: top;
position: fixed;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans';
} }
.arrows p {
visibility: hidden;
}
.arrows:hover p {
visibility: visible;
}
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: #FA00FF; color: black;
} }
#rightarrow { #rightarrow {
float: right; 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 { .image_container {
padding-top: 5px; padding-top: 5px;
} }
.photo { .photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
padding: 12px; padding: 12px;
margin-top: 40%;
} }
.img-fluid { .img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg); 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 { .small_icon {
@ -119,6 +175,14 @@ a {
max-width: 100%; max-width: 100%;
} }
.color_back {
background-color: #FFB37B;
}
.color_next {
background-color: #FFFFF3;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
@ -145,22 +209,28 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row>
<b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/whatwecan" id="leftarrow"></a> <a href="/workfromhome" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<a href="/anise" id="rightarrow"></a> <p id="onhover_left">Freestyle Platouaș</p>
</b-col> </b-col>
</b-row> </b-row>
<b-container fluid>
<div class="image_container">
<b-img class="photo" src="media/sylvie/SIR[PRIZE].png"> </b-img>
<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/lychee.png"> </b-img>
</div> </div>
</b-container>
</b-col> </b-col>
</b-row>
<b-col md="4" class="color_back">
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="title_story">[each] TUESDAY AFTER<br>NOON</p> <p class="title_story">[each] TUESDAY AFTER<br>NOON</p>
@ -168,13 +238,10 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">essay by Sylvie van Wijk</p> <p class="author">by Sylvie van Wijk</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
<b-col md="4">
<div class='content'> <div class='content'>
@ -224,16 +291,13 @@ A concluding consideration: its a hot paradox. The practice of collecting cas
</div> </div>
</b-col> </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="/popcorn" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<b-img class="photo" src="media/sylvie/SIR[PRIZE].png"> </b-img> <p id="onhover_right">Yes, Chef</p>
</b-col>
</b-row>
</div>
</b-container>
</b-col> </b-col>
</b-row> </b-row>

@ -1,18 +1,16 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face { @font-face {
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/happy-times-NG_regular_master.otf'); src: url('../../../fonts/AUTHENTICSans-60.otf');
} font-weight: lighter;
@font-face {
font-family: 'Semi Light Dots';
src: url('../../../fonts/AC1-SemiLightDots.otf');
} }
@font-face { @font-face {
font-family: 'ED Regular'; font-family: 'AUTHENTICSans';
src: url('../../../fonts/ED-Regular.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
@ -38,12 +36,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
font-weight: lighter;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
/*padding-bottom: 40px;*/ padding-bottom: 40px;
color: #1B75BC; color: black;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -54,21 +54,37 @@ a {
} }
.title_story { .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 { .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; vertical-align: top;
position: fixed;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans';
}
.arrows p {
visibility: hidden;
}
.arrows:hover p {
visibility: visible;
} }
.arrows a { .arrows a {
@ -77,37 +93,30 @@ a {
#leftarrow { #leftarrow {
float: left; float: left;
color: #FA00FF; color: black;
} }
#rightarrow { #rightarrow {
float: right; float: right;
color: #FA00FF; color: black;
} }
.image_container { #onhover_right {
padding-top: 5px; font-size: 15px;
margin-top: 60px;
text-align: right;
} }
.photo { #onhover_left {
-webkit-filter: grayscale(100%); font-size: 15px;
filter: grayscale(100%); margin-top: 60px;
width: auto; text-align: left;
max-height: 100%;
max-width: 100%;
padding: 12px;
} }
.img-fluid { .image_container {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg); padding-top: 5px;
} }
.author {
font-size: 20px;
font-family: 'ED-regular', sans-serif;;
text-align: center;
color: #FA00FF;
}
.small_icon { .small_icon {
@ -124,11 +133,20 @@ a {
} }
.purple { .purple {
background-color: purple; color: #9E00FF;
} }
.pink { .pink {
background-color: pink; color: pink;
}
.color_back {
background-color: #FFFFFF;
}
.color_next {
background-color: #EDECFF;
} }
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
@ -156,22 +174,18 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row>
<b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/whatwecan" id="leftarrow"></a> <a href="/potato" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<a href="/anise" id="rightarrow"></a> <p id="onhover_left">One Way with Potatoes</p>
</b-col> </b-col>
</b-row> </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/lychee.png"> </b-img>
</div>
</b-col> </b-col>
</b-row> <b-col md="4" class="color_back">
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="title_story"><span class="purple">Cooking Apart Together:</span> <span class="pink">Dinner</span><span class="purple"> for Breakfast & Autumn</span><span class="pink"> for Spring</span> <p class="title_story"><span class="purple">Cooking Apart Together:</span> <span class="pink">Dinner</span><span class="purple"> for Breakfast & Autumn</span><span class="pink"> for Spring</span>
@ -180,13 +194,12 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author"><span class="purple">essay by</span><span class="pink"> Louisa Bufardeci</span><span class="purple"> & Inge Hoonte</span></p> <p class="author"><span class="purple">by</span><span class="pink"> Louisa Bufardeci</span><span class="purple"> & Inge Hoonte</span></p>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
<b-col md="5">
<div class='content'> <div class='content'>
@ -299,7 +312,14 @@ In our house we all eat different foods for dinner. Usually my partner has some
</div> </div>
</b-col> </b-col>
<b-col md="4" class="color_next">
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/threeeggs" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<p id="onhover_right">Me, My Mom and Those Three Eggs</p>
</b-col>
</b-row>
</b-col>
</b-row> </b-row>
</b-container> </b-container>

@ -1,23 +1,23 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face { @font-face {
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/happy-times-NG_regular_master.otf'); src: url('../../../fonts/AUTHENTICSans-60.otf');
} font-weight: lighter;
@font-face {
font-family: 'Semi Light Dots';
src: url('../../../fonts/AC1-SemiLightDots.otf');
} }
@font-face { @font-face {
font-family: 'ED Regular'; font-family: 'AUTHENTICSans';
src: url('../../../fonts/ED-Regular.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -38,12 +38,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
font-size: 18px; font-weight: lighter;
font-size: 16px;
line-height: 24px; line-height: 24px;
/*padding-bottom: 40px;*/ padding-bottom: 40px;
color: #1B75BC; color: #00C4D0;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -54,75 +56,80 @@ a {
} }
.title_story { .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: #00C4D0;
text-align: left;
}
.author {
font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #00C4D0;
} }
.arrows { .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; vertical-align: top;
position: fixed;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans';
} }
.arrows p {
visibility: hidden;
}
.arrows:hover p {
visibility: visible;
}
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: #FA00FF; color: black;
} }
#rightarrow { #rightarrow {
float: right; float: right;
color: #FA00FF; color: black;
} }
.image_container { #onhover_right {
padding-top: 5px; font-size: 15px;
margin-top: 60px;
text-align: right;
} }
.photo { #onhover_left {
-webkit-filter: grayscale(100%); font-size: 15px;
filter: grayscale(100%); margin-top: 60px;
width: auto; text-align: left;
max-height: 100%;
max-width: 100%;
padding: 12px;
} }
.image_container {
.img-fluid { padding-top: 5px;
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;
}
.dialogue { .color_back {
/*font-family: 'ED-Regular', sans-serif;*/ background-color: #D7FFE9;
margin-left: 36px;
} }
.small_icon { .color_next {
max-width: 60%; background-color: #5FC34F;
padding-top: 100px;
}
.zoom {
max-width: 100%;
} }
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
@ -149,22 +156,21 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row >
<b-col md="3" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/soulsoup" id="leftarrow"></a> <a href="/vodka" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<a href="/whatwecan" id="rightarrow"></a> <p id="onhover_left">Spoiled</p>
</b-col> </b-col>
</b-row> </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/phone.png"> </b-img>
</div>
</b-col> </b-col>
</b-row>
<b-col md="5" class="color_back">
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="title_story">How to Poach an Egg (Perfectly)</p> <p class="title_story">How to Poach an Egg (Perfectly)</p>
@ -172,13 +178,10 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">a poem by Valentina Vella</p> <p class="author">by Valentina Vella</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
<b-col md="6">
<div class='content'> <div class='content'>
<p class="monologue"> <p class="monologue">
@ -271,7 +274,14 @@ And buying up our housing stock).<br>
</p> </p>
</div> </div>
</b-col> </b-col>
<b-col md="4" class="color_next">
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<p id="onhover_right">Colophon</p>
</b-col>
</b-row>
</b-col>
</b-row> </b-row>

@ -1,23 +1,23 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face { @font-face {
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/happy-times-NG_regular_master.otf'); src: url('../../../fonts/AUTHENTICSans-60.otf');
} font-weight: lighter;
@font-face {
font-family: 'Semi Light Dots';
src: url('../../../fonts/AC1-SemiLightDots.otf');
} }
@font-face { @font-face {
font-family: 'ED Regular'; font-family: 'AUTHENTICSans';
src: url('../../../fonts/ED-Regular.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -38,12 +38,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
font-weight: lighter;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
/*padding-bottom: 40px;*/ padding-bottom: 40px;
color: #1B75BC; color: #7C9C21;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -54,70 +56,79 @@ a {
} }
.title_story { .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: #7C9C21;
text-align: left;
}
.author {
font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #7C9C21;
} }
.arrows { .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; vertical-align: top;
position: fixed;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans';
} }
.arrows p {
visibility: hidden;
}
.arrows:hover p {
visibility: visible;
}
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: #FA00FF; color: black;
} }
#rightarrow { #rightarrow {
float: right; float: right;
color: #FA00FF; color: black;
} }
.image_container { #onhover_right {
padding-top: 5px; font-size: 15px;
margin-top: 60px;
text-align: right;
} }
.photo { #onhover_left {
-webkit-filter: grayscale(100%); font-size: 15px;
filter: grayscale(100%); margin-top: 60px;
width: auto; text-align: left;
max-height: 100%;
max-width: 100%;
padding: 12px;
} }
.image_container {
.img-fluid { padding-top: 5px;
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
} }
.author {
font-size: 20px; .color_back {
font-family: 'ED-regular', sans-serif;; background-color: #EDECFF;
text-align: center;
color: #FA00FF;
} }
.color_next {
background-color: #FBFFF0;
.small_icon {
max-width: 60%;
padding-top: 100px;
} }
.zoom {
max-width: 100%;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
@ -145,24 +156,21 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row >
<b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/phone" id="leftarrow"></a> <a href="/threeeggs" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<a href="/lychee" id="rightarrow"></a> <p id="onhover_left">Me, My Mom and Those Three Eggs</p>
</b-col> </b-col>
</b-row> </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/clothes.png"> </b-img>
</div>
</b-col> </b-col>
</b-row>
<b-col md="4" class="color_back">
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="title_story">A Jar of Green Olives</p> <p class="title_story">A Jar of Green Olives</p>
@ -170,13 +178,10 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Raluca Chereji</p> <p class="author">by Raluca Chereji</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
<b-col md="5">
<div class='content'> <div class='content'>
<p>One day, I bought a jar of green olives from my local Billa. A spur of the moment purchase because they were on sale, I took them home and mindlessly started snacking. My mom noticed, and when the jar was finished, she went and bought another one. Id get home from work at 5.30, make a beeline straight for the fridge, open the olives and fish them out with my fingers. Popping them like candy, two, three, four at a time. Id offer my mom one, shed usually decline. Wed share a bowl over dinner, alongside whatever meal shed cooked during the day whilst I was away, alongside an overly tart, overly salted green salad, another staple of our newfound routine. We were learning as we went, adapting to each other and constantly adjusting our expectations, making up for the last 11 years spent apart, she in Romania, and I in the UK. For the first time since high school, we were both in the same place, and she wasnt going anywhere.</p> <p>One day, I bought a jar of green olives from my local Billa. A spur of the moment purchase because they were on sale, I took them home and mindlessly started snacking. My mom noticed, and when the jar was finished, she went and bought another one. Id get home from work at 5.30, make a beeline straight for the fridge, open the olives and fish them out with my fingers. Popping them like candy, two, three, four at a time. Id offer my mom one, shed usually decline. Wed share a bowl over dinner, alongside whatever meal shed cooked during the day whilst I was away, alongside an overly tart, overly salted green salad, another staple of our newfound routine. We were learning as we went, adapting to each other and constantly adjusting our expectations, making up for the last 11 years spent apart, she in Romania, and I in the UK. For the first time since high school, we were both in the same place, and she wasnt going anywhere.</p>
@ -201,6 +206,14 @@ I still buy olives on my way home.
</div> </div>
</b-col> </b-col>
<b-col md="4" class="color_next">
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<p id="onhover_right">Spoiled</p>
</b-col>
</b-row>
</b-col>
</b-row> </b-row>
</b-container> </b-container>

@ -1,23 +1,23 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../../fonts/happy-times-NG_regular_master.otf');
}
@font-face { @font-face {
font-family: 'Semi Light Dots'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AC1-SemiLightDots.otf'); src: url('../../../fonts/AUTHENTICSans-60.otf');
font-weight: lighter;
} }
@font-face { @font-face {
font-family: 'ED Regular'; font-family: 'AUTHENTICSans';
src: url('../../../fonts/ED-Regular.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -38,12 +38,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
font-weight: lighter;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
/*padding-bottom: 40px;*/ padding-bottom: 40px;
color: #1B75BC; color: #0085FF;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -54,60 +56,80 @@ a {
} }
.title_story { .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: #0085FF;
text-align: left;
}
.author {
font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #0085FF;
} }
.arrows { .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; vertical-align: top;
position: fixed;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans';
}
.arrows p {
visibility: hidden;
} }
.arrows:hover p {
visibility: visible;
}
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: #FA00FF; color: black;
} }
#rightarrow { #rightarrow {
float: right; 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 { .image_container {
padding-top: 5px; padding-top: 5px;
} }
.photo { .photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
padding: 12px; padding: 20px;
} }
.img-fluid { .img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg); 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 { .small_icon {
@ -119,6 +141,15 @@ a {
max-width: 100%; max-width: 100%;
} }
.color_back {
background-color: #FFFFF3;
}
.color_next {
background-color: #FFE5A1;
;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
@ -146,23 +177,19 @@ a {
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row>
<b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/phone" id="leftarrow"></a> <a href="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<a href="/lychee" id="rightarrow"></a> <p id="onhover_left">[each] Tuesday Afternoon</p>
</b-col> </b-col>
</b-row> </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/clothes.png"> </b-img>
</div>
</b-col> </b-col>
</b-row>
<b-col md="4" class="color_back">
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="title_story">Yes, Chef</p> <p class="title_story">Yes, Chef</p>
@ -170,13 +197,10 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Esmeralda Anstrauta</p> <p class="author">by Esmeralda Anstrauta</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
<b-col md="5">
<div class='content'> <div class='content'>
<p> <p>
@ -189,6 +213,14 @@ Don't get me wrong, I dearly love being a chef and the starched-white aesthetics
</p> </p>
</div> </div>
</b-col>
<b-col md="4" class="color_next">
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/potato" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<p id="onhover_right">One Way with Potatoes</p>
</b-col>
</b-row>
</b-col> </b-col>
</b-row> </b-row>

@ -1,23 +1,24 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../../fonts/happy-times-NG_regular_master.otf');
}
@font-face { @font-face {
font-family: 'Semi Light Dots'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AC1-SemiLightDots.otf'); src: url('../../../fonts/AUTHENTICSans-60.otf');
font-weight: lighter;
} }
@font-face { @font-face {
font-family: 'ED Regular'; font-family: 'AUTHENTICSans';
src: url('../../../fonts/ED-Regular.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -38,12 +39,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
font-weight: lighter;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
/*padding-bottom: 40px;*/ padding-bottom: 40px;
color: #1B75BC; color: #AC5300;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -54,60 +57,80 @@ a {
} }
.title_story { .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: #AC5300;
text-align: left;
}
.author {
font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #AC5300;
} }
.arrows { .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; vertical-align: top;
position: fixed;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans';
}
.arrows p {
visibility: hidden;
} }
.arrows:hover p {
visibility: visible;
}
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: #FA00FF; color: black;
} }
#rightarrow { #rightarrow {
float: right; 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 { .image_container {
padding-top: 5px; padding-top: 5px;
} }
.photo { .photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
padding: 12px; padding: 20px;
} }
.img-fluid { .img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg); 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 { .small_icon {
@ -119,6 +142,15 @@ a {
max-width: 100%; max-width: 100%;
} }
.color_back {
background-color: #FFE5A1;
}
.color_next {
background-color: #FFFFFF;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
@ -146,23 +178,19 @@ a {
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row>
<b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/phone" id="leftarrow"></a> <a href="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<a href="/lychee" id="rightarrow"></a> <p id="onhover_left">Yes, Chef</p>
</b-col> </b-col>
</b-row> </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/clothes.png"> </b-img>
</div>
</b-col> </b-col>
</b-row>
<b-col md="4" class="color_back">
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="title_story">One Way with Potatoes</p> <p class="title_story">One Way with Potatoes</p>
@ -170,13 +198,10 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Honey Jones-Hughes</p> <p class="author">by Honey Hughes-Jones</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
<b-col md="5">
<div class='content'> <div class='content'>
<p> <p>
@ -206,6 +231,14 @@ hot as it goes, until their edges crisp.
</p> </p>
</div> </div>
</b-col>
<b-col md="4" class="color_next">
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/bowl" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<p id="onhover_right">Cooking Apart Together</p>
</b-col>
</b-row>
</b-col> </b-col>
</b-row> </b-row>

@ -1,23 +1,23 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face { @font-face {
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/happy-times-NG_regular_master.otf'); src: url('../../../fonts/AUTHENTICSans-60.otf');
} font-weight: lighter;
@font-face {
font-family: 'Semi Light Dots';
src: url('../../../fonts/AC1-SemiLightDots.otf');
} }
@font-face { @font-face {
font-family: 'ED Regular'; font-family: 'AUTHENTICSans';
src: url('../../../fonts/ED-Regular.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -38,12 +38,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
font-weight: lighter;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
/*padding-bottom: 40px;*/ padding-bottom: 40px;
color: #1B75BC; color: #FF3D00;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -54,70 +56,79 @@ a {
} }
.title_story { .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: #FF3D00;
text-align: left;
}
.author {
font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #FF3D00;
} }
.arrows { .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; vertical-align: top;
position: fixed;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans';
}
.arrows p {
visibility: hidden;
} }
.arrows:hover p {
visibility: visible;
}
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: #FA00FF; color: black;
} }
#rightarrow { #rightarrow {
float: right; float: right;
color: #FA00FF; color: black;
} }
.image_container { #onhover_right {
padding-top: 5px; font-size: 15px;
margin-top: 60px;
text-align: right;
} }
.photo { #onhover_left {
-webkit-filter: grayscale(100%); font-size: 15px;
filter: grayscale(100%); margin-top: 60px;
width: auto; text-align: left;
max-height: 100%;
max-width: 100%;
padding: 12px;
} }
.image_container {
.img-fluid { padding-top: 5px;
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
} }
.author {
font-size: 20px; .color_back {
font-family: 'ED-regular', sans-serif;; background-color: #EDECFF;
text-align: center;
color: #FA00FF;
} }
.color_next {
background-color: #FBFFF0;
.small_icon {
max-width: 60%;
padding-top: 100px;
} }
.zoom {
max-width: 100%;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
@ -145,22 +156,20 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row >
<b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/simmered" id="leftarrow"></a> <a href="/bowl" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<a href="/phone" id="rightarrow"></a> <p id="onhover_left">Cooking Apart Together</p>
</b-col> </b-col>
</b-row> </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/cauliflower.png"> </b-img>
</div>
</b-col> </b-col>
</b-row>
<b-col md="4" class="color_back">
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
@ -169,14 +178,14 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Patricia Cîrtog</p> <p class="author">by Patricia Cîrtog</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
<b-col md="5">
<div class='content'> <div class='content'>
@ -192,6 +201,14 @@ In college, I dont eat omelet anymore. If I dont hear the sound of my moth
<p>So now, I encourage you to close your eyes with me and feel the warmth of any of your mothers home cooked meals.</p> <p>So now, I encourage you to close your eyes with me and feel the warmth of any of your mothers home cooked meals.</p>
</div> </div>
</b-col>
<b-col md="4" class="color_next">
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/olives" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<p id="onhover_right">A Jar of Green Olives</p>
</b-col>
</b-row>
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>

@ -1,18 +1,4 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../../fonts/happy-times-NG_regular_master.otf');
}
@font-face {
font-family: 'Semi Light Dots';
src: url('../../../fonts/AC1-SemiLightDots.otf');
}
@font-face {
font-family: 'ED Regular';
src: url('../../../fonts/ED-Regular.otf');
}
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
@ -26,31 +12,12 @@
font-weight: 400; font-weight: 400;
} }
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; 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 { .container_width {
max-width: 100%; max-width: 100%;
@ -296,11 +263,7 @@ export default {
return { return {
} }
}, },
mounted(){
window.onload = function() {
document.body.classList.add('loaded');
}
},
components: { components: {
MenuBar MenuBar
} }

@ -13,11 +13,44 @@
font-family: 'ED Regular'; font-family: 'ED Regular';
src: url('../../../fonts/ED-Regular.otf'); 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; border: 0px black solid;
background-color: transparent; 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 { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -38,12 +71,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
font-weight: lighter;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
/*padding-bottom: 40px;*/ padding-bottom: 40px;
color: #1B75BC; color: #7000FF;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -54,60 +89,81 @@ a {
} }
.title_story { .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: #7000FF;
text-align: left;
}
.author {
font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #7000FF;
} }
.arrows { .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; vertical-align: top;
position: fixed;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans';
}
.arrows p {
visibility: hidden;
} }
.arrows:hover p {
visibility: visible;
}
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: #FA00FF; color: black;
} }
#rightarrow { #rightarrow {
float: right; 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 { .image_container {
padding-top: 5px; padding-top: 5px;
} }
.photo { .photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
padding: 12px; padding: 12px;
margin-top: 40%;
} }
.img-fluid { .img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg); 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 { .small_icon {
@ -119,6 +175,15 @@ a {
max-width: 100%; max-width: 100%;
} }
.color_back {
background-color: #FFF5F5;
}
.color_next {
background-color: #D7FFE9;
;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
@ -146,23 +211,27 @@ a {
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row>
<b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/phone" id="leftarrow"></a> <a href="/olives" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<a href="/lychee" id="rightarrow"></a> <p id="onhover_left">A Jar of Green Olives</p>
</b-col> </b-col>
</b-row> </b-row>
<b-container fluid>
<div class="image_container">
<b-img class="photo" src="media/ana.jpg"> </b-img>
<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/clothes.png"> </b-img>
</div> </div>
</b-container>
</b-col> </b-col>
</b-row>
<b-col md="4" class="color_back">
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="title_story">Spoiled</p> <p class="title_story">Spoiled</p>
@ -170,13 +239,10 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Ana-Maria Gușu</p> <p class="author">by Ana-Maria Gușu</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
<b-col md="5">
<div class='content'> <div class='content'>
<p> <p>
@ -204,6 +270,14 @@ a {
</p> </p>
</div> </div>
</b-col>
<b-col md="4" class="color_next">
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/mittens" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<p id="onhover_right">How to Poach an Egg (Perfectly)</p>
</b-col>
</b-row>
</b-col> </b-col>
</b-row> </b-row>

@ -52,6 +52,7 @@ import potato from './components/edition3/potato'
import vodka from './components/edition3/vodka' import vodka from './components/edition3/vodka'
import workfromhome from './components/edition3/workfromhome' import workfromhome from './components/edition3/workfromhome'
import bowl from './components/edition3/bowl' import bowl from './components/edition3/bowl'
import EditorNote3 from './components/edition3/EditorNote3'
@ -101,7 +102,8 @@ const router = new VueRouter({
{ path: '/potato', component: potato }, { path: '/potato', component: potato },
{ path: '/vodka', component: vodka }, { path: '/vodka', component: vodka },
{ path: '/workfromhome', component: workfromhome }, { path: '/workfromhome', component: workfromhome },
{ path: '/bowl', component: bowl } { path: '/bowl', component: bowl },
{ path: '/EditorNote3', component: EditorNote3 }
] ]

Loading…
Cancel
Save