alicestrt
/
magiun_website
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

whole lotta changes

Browse Source
master
alicestrt 4 years ago
parent 0197b3ccfb
commit 09a8056656
21 changed files with 915 additions and 241 deletions
Show Stats Download Patch File Download Diff File

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

4
public/index.html
Unescape Escape View File

@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>magiun_logo.png">
<title>Alice Strete</title> <title>Magiun</title>
</head> </head>
<body> <body>
<noscript> <noscript>

BIN
public/magiun_logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

86
src/components/AboutPage.vue
Unescape Escape View File

@ -1,53 +1,85 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
.about-text {
font-size: 18px;
color: #212322;
text-align: justify;
}
h3 { * {
font-family: "Open Sans", sans-serif; border: 0px black solid;
font-size: 30px; background-color: #ffe6e6;
font-weight: bold;
} }
p { .about-text {
font-family: "Inconsolata", monospace; padding-right: 50px;
padding-top: 40px;
font-family: 'Roboto Mono', monospace;
font-size: 15px;
padding-left: 20px;
} }
a:hover { a:hover {
color: hotpink; color: #333042;
text-decoration: none; text-decoration: none;
} }
a { a {
color: gray; color: #ff4c2b;
}
.container_width {
max-width: 100%;
padding-left: 0px;
padding-right: 0px;
padding-top: 70px;
}
.title_story {
font-size: 80px;
font-family: 'Permanent Marker', cursive;
padding-left: 20px;
padding-top: 70px;
color: #333042
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
} }
</style> </style>
<template> <template>
<div> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row class="about-text">
<b-col md="10">
<p>I'm Alice, a Romanian artist/researcher based in Rotterdam, and you're looking at my portfolio.</p>
<p>For more information/questions/collaboration enquiries, drop me an <a href="mailto:alice.strt@gmail.com">email</a>.
You can also find me on <a href="https://www.instagram.com/alicestrt/" target="_blank">Instagram</a> and <a href="https://post.lurk.org/@alcstrt" target="_blank">Mastodon</a>.
</p>
<b-row>
<b-col md="8">
<p class="title_story">About Magiun</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row class="about-text">
<b-col md="8">
<p>Magiun is a magazine about everyday food. It publishes stories, poems, essays, recipes, photos and illustrations.</p>
</div> <p></p>
<p>This first edition deals with eating in quarantine - the struggles, the joys, the unexpected discoveries, the newly added anxieties. It came about as a desire to talk about our ever changing relationship to food, and how unexpected external factors (such as a global quarantine) can bring out new ways of relating to what we grow, buy, eat and share. The contributions were written and sent throughout April 2020. The hope is that there will be more editions to come.</p>
<p></p>
<p>Magiun is the name of a Romanian jam made out of plums, with no extra sugar added. It has a very thick consistency and a dark violet color, sometimes even black. The most well-known variety, <a href="https://en.wikipedia.org/wiki/Magiun_of_Topoloveni">Magiun de Topoloveni</a>, is the first Romanian certified natural product and protected by European Union. I grew up with a less well-known king of magiun, the one my grandparents used to prepare year after year in their yard, from plums I begrudgingly helped pick from our orchard. The making of magiun was a night-long affair, during which purple, fleshy plums melted away into a thick, sticky, dark brown paste. </p>
<p>Throughout these past weeks, this container of magiun my mother sent me in a package has been one of my main comforts, a thin layer (to save it) on a slice of bread every other day. It is now almost empty.</p>
<p></p>
<p>This magazine has been dreamed of and developed by <a href="http://alicestrete.me/">Alice Strete</a>. </p>
<p>The website has been made using Bootstrap-Vue. All content (text, images, illustrations) is licensed under the Free Art License, unless specified otherwise.</p>
<p>This project has been developed with the help of CBK Rotterdam, through the use of the PPR funding opportunity.</p>
</b-col>
</b-row>
</b-container>
</template> </template>
@ -55,7 +87,7 @@ You can also find me on <a href="https://www.instagram.com/alicestrt/" target="_
import MenuBar from './MenuBar' import MenuBar from './MenuBar'
export default { export default {
name: 'AboutPage', name: 'EditorNote',
components: { components: {
MenuBar MenuBar
} }

117
src/components/EditorNote.vue
Unescape Escape View File

@ -0,0 +1,117 @@
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
* {
border: 0px black solid;
background-color: #ffe6e6;
}
.about-text {
padding-right: 50px;
padding-top: 40px;
font-family: 'Roboto Mono', monospace;
font-size: 15px;
padding-left: 20px;
}
a:hover {
color: hotpink;
text-decoration: none;
}
a {
color: gray;
}
.container_width {
max-width: 100%;
padding-left: 0px;
padding-right: 0px;
padding-top: 70px;
}
.title_story {
font-size: 80px;
font-family: 'Permanent Marker', cursive;
padding-left: 20px;
padding-top: 70px;
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
</style>
<template>
<b-container fluid class="p-0">
<MenuBar/>
<b-row>
<b-col md="8">
<p class="title_story">We're still eating</p>
<b-row>
<b-col md="6">
<p class="author">a note by Alice Strete</p>
</b-col>
</b-row>
</b-col>
<b-col md="1">
</b-col>
<b-col md="2" class="small_icon">
<a href="/"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun_gimp.gif"> </b-img></a>
</b-col>
<b-col md="1">
</b-col>
</b-row>
<b-row class="about-text">
<b-col md="8">
<p>
On the 13th of March, 2020, I began my self-imposed, prolongued stay-at-home quarantine. In the outside world, supermarkets were being stripped of toilet paper, cleaning products, flour and milk, but people were still crowding bars and restaurants. My mood fluctuated between panic and boredom, accentuated by thoughts of not being able to visit my family, to walk outside without being freaked out by the proximity of people, or to stay sane indoors without being freaked out by the proximity of people. Alongside this, another kind of panic creeped in – there were no eggs in the shops. What was I supposed to do without eggs? What else was next on the list of endangered essential foods? And how long will this last? </p>
<p> Even though everyone’s experience differs greatly, food is still a central element during this lockdown. Since the pandemic measures have started, things have normalized a bit in the grocery department. Still, in the almost 7 weeks since, I’ve felt my previously unyielding enthusiasm towards cooking and eating starting to falter. I’m not a meal planner. I do my grocery shopping on the spur of the moment, based on mood swings, a random page I opened the cookbook at, a video I saw on YouTube, a memory I have from childhood. I shop for one or two meals, not for an entire week of them. (I now know I spent way too much money this way, but bear with me.) So when going to the supermarket became something to dread, I collapsed. I had no desire to cook with what I already had in my cupboards. I had no intention to use the dozen cans I managed to hoard days before everyone else started hoarding. A missing ingredient became a reason to give up cooking a meal altogether, rather than head over to the nearest shop to satisfy my cravings. But still, I ate it all and it didn’t bring me much joy. </p>
<p>The anxiety of going shopping has become so great, that I never even bring my wallet when going for a walk, knowing there’s no chance I’ll spontaneously pop in a shop for a treat. Of course, I’m incredibly lucky to even have the option of going outside, or going shopping, or ordering groceries online. And I’m also happy to notice some positive change in my habits – saving more money on food because of no impulse-buying, reusing leftovers more creatively, throwing out significantly less food, baking more, getting more excited for that one special holiday brunch I made for Easter.</p>
<p>Asking friends and family confirmed some of my thoughts – I was not alone in feeling differently about food, or changing the way I do things. But not everyone had gone in the same direction. The non-bread bakers started baking bread, the rarely-cooks started documenting their newly discovered interest in cooking, the meal-planners stopped making plans, the improvisers went on planned meals, the social-eaters started seeking more solitary meals (me), the every-day-cooks started dreading meal times (also me).</p>
<p>Among plenty news stories on the impact of COVID-19 on food security, the food industry, HORECA, or food logistics, I wanted to learn more about changes that happened on an intimate level, inside homes, fridges, pantries, and on plates. The result of my open call materialized itself in musings over cultural eating habits, declarations of gratitude, organized meal plans, recipes, improvisations, family conversations, and lots of photos. I hope you enjoy them as much as I do.</p>
</b-col>
</b-row>
</b-container>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'EditorNote',
components: {
MenuBar
}
}
</script>

18
src/components/MenuBar.vue
Unescape Escape View File

@ -1,12 +1,13 @@
<template> <template>
<b-row class="mb-5-menu"> <b-row class="mb-5-menu">
<b-navbar toggleable="lg"> <b-navbar fixed=top>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav> <b-collapse id="nav-collapse" is-nav>
<b-navbar-nav> <b-nav align="right">
<b-nav-item to='/'>Home</b-nav-item> <b-nav-item to='/'>Home</b-nav-item>
<b-nav-item to='/about'>About</b-nav-item> <b-nav-item to='/about'>About</b-nav-item>
</b-navbar-nav> <b-nav-item to='/editornote'>Editor's note</b-nav-item>
</b-nav>
</b-collapse> </b-collapse>
</b-navbar> </b-navbar>
</b-row> </b-row>
@ -23,4 +24,15 @@ export default {
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap'); @import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
* {
max-width: 100%;
}
a {
color: #333042;
font-family: 'Permanent Marker', cursive;
}
a:hover {
color: #ff4c2b;
}
</style> </style>

107
src/components/SplashPage.vue
Unescape Escape View File

@ -7,12 +7,12 @@
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #ffe6e6 !important;
} }
a:hover { a:hover {
color: hotpink; color: #333042;
text-decoration: none; text-decoration: none;
} }
@ -27,81 +27,141 @@ a {
} }
#mag_title { #mag_title {
font-size: 70px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Permanent Marker', cursive;
padding-left: 50px;
color: #333042;
}
#mag_subtitle {
font-size: 30px;
font-family: 'Permanent Marker', cursive;
margin-top: 40px;
padding-left: 40px; padding-left: 40px;
color: #333042;
} }
#icons img { #icons img {
width: 100%; width: 100%;
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px;
padding-right: 0px;
} }
#sparkle {
padding-top: 50px;
}
</style> </style>
<template> <template>
<div> <div>
<MenuBar/> <MenuBar/>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<b-row>
<b-col md="12" id="sparkle">
<b-img class="img-fluid" center src="media/print.gif"></b-img>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="6"> <b-col md="6">
<p id="mag_title">Magiun</p> <a href="/about"><p id="mag_title">Magiun</p></a>
</b-col> </b-col>
<b-col md="6">
<p id="mag_subtitle">#1 On eating in isolation</p>
</b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="6"> <b-col md="6">
<b-img class="img-fluid" id="magi" center src="media/magiun.gif"></b-img> <a href="/about"><b-img class="img-fluid" id="magi" center src="media/magiun_gimp.gif"></b-img></a>
</b-col> </b-col>
<b-col md="6"> <b-col md="6">
<b-container fluid id="icons"> <b-container fluid id="icons">
<b-row> <b-row>
<b-col md="3"> <b-col md="3">
<a href="/eggs"> <b-img class="img-fluid" center src="media/egg_small.png"></b-img></a> <div class="zoom">
<a href="/eggs"> <b-img class="img-fluid" center alt="Responsive image" src="media/egg_small.png"></b-img></a>
</div>
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/scooter"><b-img class="img-fluid" center src="media/scooter.png"></b-img></a> <div class="zoom">
<a href="/scooter"><b-img class="img-fluid" center alt="Responsive image" src="media/scooter.png"></b-img></a>
</div>
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/pesto"><b-img class="img-fluid" center src="media/basil.png"></b-img></a> <div class="zoom">
<a href="/pesto"><b-img class="img-fluid" center alt="Responsive image" src="media/basil.png"></b-img></a>
</div>
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/bbq"><b-img class="img-fluid" center src="media/bbq.png"></b-img></a> <div class="zoom">
<a href="/bbq"><b-img class="img-fluid" center alt="Responsive image" src="media/bbq.png"></b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="3"> <b-col md="3">
<div class="zoom">
<a href="/cart"><b-img class="img-fluid" center src="media/cart_small.png"></b-img></a> <a href="/cart"><b-img class="img-fluid" center src="media/cart_small.png"></b-img></a>
</div>
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/breakfast"><b-img class="img-fluid" center src="media/avo_small.png"></b-img></a> <div class="zoom">
<a href="/breakfast"><b-img class="img-fluid" center alt="Responsive image" src="media/avo_small.png"></b-img></a>
</div>
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/noodles"><b-img class="img-fluid" center src="media/noodles_small.png"></b-img></a> <div class="zoom">
<a href="/noodles"><b-img class="img-fluid" center alt="Responsive image" src="media/noodles_small.png"></b-img></a>
</div>
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/recipe"><b-img class="img-fluid" center src="media/recipe_small.png"></b-img></a> <div class="zoom">
<a href="/recipe"><b-img class="img-fluid" center alt="Responsive image" src="media/recipe_small.png"></b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="3"> <b-col md="3">
<a href="/onion"><b-img class="img-fluid" center src="media/onion.png"></b-img></a> <div class="zoom">
<a href="/onion"><b-img class="img-fluid" center alt="Responsive image" src="media/onion.png"></b-img></a>
</div>
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/leekpilaf"><b-img class="img-fluid" center src="media/leek.png"></b-img></a> <div class="zoom">
<a href="/leekpilaf"><b-img class="img-fluid" center alt="Responsive image" src="media/leek.png"></b-img></a>
</div>
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/ricecooker"><b-img class="img-fluid" center src="media/rice.png"></b-img></a> <div class="zoom">
<a href="/ricecooker"><b-img class="img-fluid" center alt="Responsive image" src="media/rice.png"></b-img></a>
</div>
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/cake"><b-img class="img-fluid" center src="media/cake_small.png"></b-img></a> <div class="zoom">
<a href="/cake"><b-img class="img-fluid" center alt="Responsive image" src="media/cake_small.png"></b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
@ -113,8 +173,9 @@ a {
<b-col md="3"> <b-col md="3">
</b-col> </b-col>
<b-col md="3"> <b-col md="3">
<a href="/pretzel"><b-img class="img-fluid" center src="media/pretzel_small.png"></b-img></a> <div class="zoom">
<a href="/pretzel"><b-img class="img-fluid" center alt="Responsive image" src="media/pretzel_small.png"></b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>

64
src/components/bbq.vue
Unescape Escape View File

@ -1,5 +1,8 @@
<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');
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #ffe6e6; background-color: #ffe6e6;
@ -20,50 +23,91 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 25px;
}
.small_img {
max-width: 60%;
padding-bottom: 40px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
} }
.zoom:hover {
transform: scale(1.1);}
.bbq_images {
padding-top: 40px;
}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">Balcony Marinade</p> <p class="title_story">Balcony Marinade</p>
<b-row>
<b-col md="6">
<p class="author">a recipe by Madyasa Vijber</p>
</b-col>
</b-row>
</b-col> </b-col>
<b-col md="2">
<a href="/pesto"><b-img class="img-fluid" src="media/basil.png"> </b-img></a>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/pesto"><b-img center class="img-fluid" alt="Responsive image" src="media/basil_prev.png"> </b-img></a>
</div>
</b-col> </b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/cart"><b-img class="img-fluid" src="media/cart.png"> </b-img></a> <div class="zoom">
<a href="/cart"><b-img center class="img-fluid" alt="Responsive image" src="media/cart_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row>
<b-row class="bbq_images">
<b-col md="2"> <b-col md="2">
</b-col> </b-col>
<b-col md="4"> <b-col md="4">
<b-img center class="img-fluid" src="media/bbq/bag.jpg"></b-img> <b-img center class="small_img" src="media/bbq/bag.jpg"></b-img>
</b-col> </b-col>
<b-col md="4"> <b-col md="4">
<b-img center class="img-fluid" src="media/bbq/convo.PNG"></b-img> <b-img center class="small_img" src="media/bbq/convo.PNG"></b-img>
</b-col> </b-col>

52
src/components/breakfast.vue
Unescape Escape View File

@ -11,9 +11,10 @@
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
@ -35,8 +36,8 @@ a {
padding-left: 20px; padding-left: 20px;
} }
#egg_images img { .egg_images img {
width: 100%; max-width: 90%;
padding-top: 40px; padding-top: 40px;
} }
@ -44,25 +45,54 @@ a {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
} }
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">Breakfasts</p> <p class="title_story">Breakfasts</p>
</b-col> <b-row>
<b-col md="6">
<p class="author">a reflection by Laura Vlasa</p>
<b-col md="2"> </b-col>
<a href="/cart"><b-img class="img-fluid" src="media/cart.png"> </b-img></a> </b-row>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/cart"><b-img center class="img-fluid" alt="Responsive image" src="media/cart_prev.png"> </b-img></a>
</div>
</b-col> </b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/noodles"><b-img class="img-fluid" src="media/noodles.png"> </b-img></a> <div class="zoom">
<a href="/noodles"><b-img center class="img-fluid" alt="Responsive image" src="media/noodles_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
@ -84,7 +114,7 @@ I've attached some photos in hopes that I would somewhat get the validation I wa
</div> </div>
</b-col> </b-col>
<b-col md="7"> <b-col md="7">
<b-container fluid id="egg_images"> <b-container fluid class="egg_images">
<b-row> <b-row>
<b-col md="6"> <b-col md="6">
<b-img class="img-fluid" src="media/breakfast/breakfast2.jpg"> </b-img> <b-img class="img-fluid" src="media/breakfast/breakfast2.jpg"> </b-img>

93
src/components/cake.vue
Unescape Escape View File

@ -11,9 +11,10 @@
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
@ -36,32 +37,68 @@ a {
} }
#egg_images img { #egg_images img {
width: 100%; max-width: 80%;
padding-top: 40px; padding-top: 40px;
} }
#recipe_block {
padding-top: 20px;
margin-top: 20px;
font-size: 15px;
font-family: 'Roboto Mono', monospace;
border: 1px black solid;
}
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
} }
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">The bite that keeps on chewing</p> <p class="title_story">The bite that keeps on chewing</p>
</b-col> <b-row>
<b-col md="2"> <b-col md="6">
<a href="/ricecooker"><b-img class="img-fluid" src="media/rice.png"> </b-img></a> <p class="author">an essay and recipe by Ioana Tomici</p>
</b-col> </b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/pretzel"><b-img class="img-fluid" src="media/pretzel.png"> </b-img></a> <div class="zoom">
<a href="/ricecooker"><b-img center class="img-fluid" alt="Responsive image" src="media/rice_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/pretzel"><b-img center class="img-fluid" alt="Responsive image" src="media/pretzel_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
@ -84,16 +121,48 @@ a {
<b-col md="7"> <b-col md="7">
<b-container fluid id="egg_images"> <b-container fluid id="egg_images">
<b-row> <b-row>
<b-col md="2"> <b-col md="3">
</b-col> </b-col>
<b-col md="8"> <b-col md="8">
<b-img class="img-fluid" src="media/cake/black_sesame_mochi_cake.jpg"> </b-img> <b-img class="img-fluid" src="media/cake/black_sesame_mochi_cake.jpg"> </b-img>
</b-col> </b-col>
<b-col md="2"> <b-col md="1">
</b-col>
</b-row>
<b-row id="recipe_block">
<b-col md="6">
<p>The recipe is as follows:</p>
<p></p>
<p>60g (1/4 cup) unsalted butter, melted + more for greasing the pan</p>
<p>100g (3/4 cup) black sesame seeds</p>
<p>250g (1 and ¼ cup) sugar, divided in 150g and 100g</p>
<p>255g (2 cups) glutinous rice flour</p>
<p>5g (1 tsp) baking powder</p>
<p>5g (1 tsp) salt, divided in 2</p>
</b-col>
<b-col md="6">
<p></p>
<p>2 large eggs</p>
<p>250ml (1 cup) whole milk</p>
<p> 5ml (1 tsp) vanilla extract, or one pack vanilla sugar</p>
<p>125ml (1/2 cup) heavy cream + an extra 75ml (5 tbsp)</p>
<p>Squeeze of lemon juice</p>
<p>Toasted white sesame seeds, for sprinkling</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<p>The recipe is as follows</p> <b-col class="content" md="10">
<p>Preheat oven to 180°C. Grease cake pan (24cm diameter) with a generous amount of butter. You can line the bottom of the pan with baking paper to minimize stick-anxiety but make sure to add another layer of butter on top of the paper.</p>
<p>Toast black sesame seeds in a pan over medium heat for 2-3 minutes, stirring frequently to prevent burning. The amazing smell of sesame is gonna be your queue turn off the heat. Break down the sesame seeds either in a food processor or with a mortar and pestle. Decide for yourself whether you like chunky bits or a fine powder and see what can be done with the tools you have at hand. Either way, the end result will be awesome. </p>
<p>Scoop out about 30g (1/4 cup) of the toasted seeds and set aside. Add 150g of sugar to food processor/mortar and blend with sesame seeds, breaking down any lumps. Sprinkle some sesame sugar over the greased cake pan and tap it so the sugar coats the pan in a thin layer (as if you were flouring the pan). This makes for insane crust action that contrasts nicely with the chewiness of the cake and also helps it release from the pan. Tap out excess sesame sugar from the cake pan into a large bowl and add the remaining sesame sugar from the food processor/mortar. Add flour, baking powder and 2,5g (1/2 tsp) of salt to the bowl and whisk to combine. </p>
<p>In a medium bowl whisk eggs and melted butter until creamy. Whisk in milk, vanilla and 125ml of heavy cream. Add wet ingredients to the dry ones and stir to combine. Transfer batter to greased and sesame sugared pan. Place cake pan in the middle of your oven and bake for 45-55 minutes (if your cake pan has a smaller diameter, it will take longer). If your oven has weird heat distribution like mine, rotate the pan halfway through the baking process to ensure an even rise. Stick a toothpick/skewer in the cake to test if its ready (the toothpick should come out clean). When you take the cake out of the oven, run a knife along the inner edges of the pan to gently release the cake from the sides. Let it cool in the pan for at least 10 minutes. Don’t worry if the cake sinks back to it’s original height, you haven’t messed it up.</p>
<p>For the black sesame caramel, whisk the remaining 30g (1/4 cup) of the toasted black sesame with 75ml (5 tbsp) of the heavy cream and 2,5g (1/2 tsp) salt. In a medium saucepan, bring 50ml (3 tbsp) of water and remaining 100g of sugar to a boil and add a squeeze of lemon juice. Stir frequently to dissolve sugar, until the mixture becomes slightly golden, like honey, 3-5 minutes, When the color turns golden, quickly remove syrup from heat and carefully (it’s gonna bubble) add the cream mixture with sesame seeds. Immediately pour onto center of cooled cake and spread it to the edges. Sprinkle toasted white sesame seeds on top. Let it cool down completely before attempting to devour. </p>
<p>Enjoy and try not to cry too much as the chewy cake fills whatever void lies inside you. </p>
<p>Recipe courtesy of Sarah Jampel.</p>
</b-col>
</b-row> </b-row>
</b-container> </b-container>

89
src/components/cart.vue
Unescape Escape View File

@ -12,6 +12,8 @@
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
} }
@ -35,32 +37,59 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
.image_container { .image_container {
padding-top: 40px; padding-top: 40px;
} }
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">My Quarantine Kitchen Story</p> <p class="title_story">My Quarantine Kitchen Story</p>
</b-col> <b-row>
<b-col md="2"> <b-col md="6">
<a href="/bbq"><b-img class="img-fluid" src="media/bbq.png"> </b-img></a> <p class="author">an essay by Samantha Tirthdas van der Kleij</p>
</b-col> </b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/breakfast"><b-img class="img-fluid" src="media/avo.png"> </b-img></a> <div class="zoom">
<a href="/bbq"><b-img center class="img-fluid" alt="Responsive image" src="media/bbq_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/breakfast"><b-img center class="img-fluid" alt="Responsive image" src="media/avo_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
@ -69,23 +98,13 @@ a {
<b-row> <b-row>
<b-col md="5"> <b-col md="5">
<div class='content'> <div class='content'>
<p>I first came to the Netherlands with zero domestic skills whatsoever. However, I quickly understood that my previous dining-out-forever lifestyle would be ridiculously expensive in the Netherlands and thus I began to learn some domestic skills. However, just a little over a month into coming back to the Netherlands permanently, the Covid19 pandemic hit. Soon after, the Dutch prime minister began his address to the nation, then social distancing and work-from-home measures came into effect. Meanwhile, back home in the Philippines, my older sister and her fiance were in 14-day home quarantine because her boyfriend came into contact with someone whose family had contracted Covid19 (fortunately my sister and her boyfriend never showed any symptoms throughout their quarantine) and my dad was in home isolation as well and was exhibiting some symptoms (which also very fortunately turned out to be just a bad cough that came with a flu). With much paranoia, I urged my partner that we must stay at home in isolation as far as possible, including avoiding going to the supermarket for fear of coming into contact with strangers. He indulged my pandemic paranoia and obliged.  <p>I first came to the Netherlands with zero domestic skills whatsoever. However, I quickly understood that my previous dining-out-forever lifestyle would be ridiculously expensive in the Netherlands and thus I began to learn some domestic skills. However, just a little over a month into coming back to the Netherlands permanently, the Covid19 pandemic hit. Soon after, the Dutch prime minister began his address to the nation, then social distancing and work-from-home measures came into effect. Meanwhile, back home in the Philippines, my older sister and her fiance were in 14-day home quarantine because her boyfriend came into contact with someone whose family had contracted Covid19 (fortunately my sister and her boyfriend never showed any symptoms throughout their quarantine) and my dad was in home isolation as well and was exhibiting some symptoms (which also very fortunately turned out to be just a bad cough that came with a flu). With much paranoia, I urged my partner that we must stay at home in isolation as far as possible, including avoiding going to the supermarket for fear of coming into contact with strangers. He indulged my pandemic paranoia and obliged.</p>
</p> <p>Our first online grocery delivery with Jumbo went well without a hitch; we had two weeks worth of food. As the days passed my anxiety dissipated largely due to the fact that my dad and my sister turned out to be okay (our worst fears fortunately did not actualise). Whatever residual anxiety and frustration I still had was mostly channelled into sending donations back home to my university alma matter's public hospital (a Covid19 referral hospital) and some other great Covid19 relief initiatives of my sorority sisters and my law school classmates. My emotions having calmed down, I had to pre-occupy myself with something other than fighting the urge to yell at the people I saw outside our window who were NOT observing social distancing guidelines. I did not want to be the new neighbourhood crazy person who yells at random strangers from their balcony (not a great look for me). And so, it was best that I return to my domestic-skills-acquisition lessons.</p>
<p> <p>As our food supplies were depleted, we tried to book another delivery slot with Jumbo but the soonest date we could get our hands on was almost a month away and all the other supermarket delivery platforms were just as far off. Still determined to stay away from any place that had more that 2 people, I scrambled to find alternative suppliers online. After hours upon hours of searching on the internet, my partner and I were able to find alternative food suppliers. We had toko4all.nl (mylittlephilippines) for asian ingredients; mushroomxl.nl for produce; beefensteak.nl for meats; boerthijsbezorgt.nl for dairy and a few produce items; and kaasmarktonline.nl (Van den Herik) for cheese. It was really interesting to find out about these small and medium scale businesses as each of them seemed to have their own story as traders and farmers. For the most part, their services felt very personal because we got to talk to them on the phone for one reason or another even if we ordered everything online. Strangely enough the packaging that their products were delivered in seemed to match our impression of their "personalities". We almost always get sweet little freebies from toko4all.nl (mylittlephilippines), and the couple that owns it even personally delivered our order to our door one time when they struggled to send our order via their normal delivery provider. They're clearly my favourite supplier discovery (I might be biased because I love getting free snacks) but generally all of our alternative suppliers really provide high-quality products and excellent customer service. My partner and I have decided to keep some of them as food suppliers post-pandemic, augmenting them with supermarket purchases only for a handful of products that are too expensive for us to continue purchasing regularly or household products we need but are not available from our alternative suppliers. I'm not really sure why we never considered getting our food from sources other than the supermarket, but this experience has definitely taught us a different way of doing things in our household.</p>
Our first online grocery delivery with Jumbo went well without a hitch; we had two weeks worth of food. As the days passed my anxiety dissipated largely due to the fact that my dad and my sister turned out to be okay (our worst fears fortunately did not actualise). Whatever residual anxiety and frustration I still had was mostly channelled into sending donations back home to my university alma matter's public hospital (a Covid19 referral hospital) and some other great Covid19 relief initiatives of my sorority sisters and my law school classmates. My emotions having calmed down, I had to pre-occupy myself with something other than fighting the urge to yell at the people I saw outside our window who were NOT observing social distancing guidelines. I did not want to be the new neighbourhood crazy person who yells at random strangers from their balcony (not a great look for me). And so, it was best that I return to my domestic-skills-acquisition lessons.  <p>But of course because they weren't supermarkets, the product options weren't as extensive. We just had to work with whatever products they had on hand and whatever bulk quantities we had to buy them in (either to meet minimum delivery requirements or to optimise delivery costs). My domestic skills lessons had become a domestic skills mission boot camp. I took over the kitchen full-time and my partner was demoted from chef to dishwasher.</p>
</p> <p>First step was to plan a menu schedule based on what our alternative suppliers had on hand. It felt like I was on that cooking show where they had those mystery ingredient challenges - challenge accepted. I learned a slew of new recipes from my own asian background plus a lot of other culinary cultures. I also summoned my memories of my paternal grandmother's food preservation techniques and dishes. This was largely guesswork because, while my huge paternal family is almost ALWAYS EATING when we're all together (my partner can attest to this from his being politely over-fed by random family members of mine), I never paid much attention to the cooking and only pretty much took part in the eating of the food.</p>
<p> <p>Planning a month's worth of meals may seem overly dramatic, but it was really more to ensure that the food we ordered would not go to waste and that we would have enough food until the next delivery. We did deviate from the menu schedule on occasion and moved around some of the dishes, such as when certain ingredients were about to go bad sooner than we anticipated. Although now we know better the approximate shelf life of our food and try to arrange our fridge and pantry according to expiration date. The desserts and sweets are not projected on the menu plan and are randomly rationed based on intensity-of-craving-in-relation-to-sanity-levels because my will power (won't power) is as erratic as the Dutch weather.</p>
As our food supplies were depleted, we tried to book another delivery slot with Jumbo but the soonest date we could get our hands on was almost a month away and all the other supermarket delivery platforms were just as far off. Still determined to stay away from any place that had more that 2 people, I scrambled to find alternative suppliers online. After hours upon hours of searching on the internet, my partner and I were able to find alternative food suppliers. We had toko4all.nl (mylittlephilippines) for asian ingredients; mushroomxl.nl for produce; beefensteak.nl for meats; boerthijsbezorgt.nl for dairy and a few produce items; and kaasmarktonline.nl (Van den Herik) for cheese. It was really interesting to find out about these small and medium scale businesses as each of them seemed to have their own story as traders and farmers. For the most part, their services felt very personal because we got to talk to them on the phone for one reason or another even if we ordered everything online. Strangely enough the packaging that their products were delivered in seemed to match our impression of their "personalities". We almost always get sweet little freebies from toko4all.nl (mylittlephilippines), and the couple that owns it even personally delivered our order to our door one time when they struggled to send our order via their normal delivery provider. They're clearly my favourite supplier discovery (I might be biased because I love getting free snacks) but generally all of our alternative suppliers really provide high-quality products and excellent customer service. My partner and I have decided to keep some of them as food suppliers post-pandemic, augmenting them with supermarket purchases only for a handful of products that are too expensive for us to continue purchasing regularly or household products we need but are not available from our alternative suppliers. I'm not really sure why we never considered getting our food from sources other than the supermarket, but this experience has definitely taught us a different way of doing things in our household.  <p>The social distancing guidelines and the semi-self-imposed home quarantine has definitely accelerated my domestic skills acquisition, although my partner still maintains ardently that he's the better cook despite his demotion to dishwasher. Oddly enough, I've found joy and calm in this new process as it becomes our new normal and we learn to cope together.
</p>
<p>
But of course because they weren't supermarkets, the product options weren't as extensive. We just had to work with whatever products they had on hand and whatever bulk quantities we had to buy them in (either to meet minimum delivery requirements or to optimise delivery costs). My domestic skills lessons had become a domestic skills mission boot camp. I took over the kitchen full-time and my partner was demoted from chef to dishwasher. 
</p>
<p>
First step was to plan a menu schedule based on what our alternative suppliers had on hand. It felt like I was on that cooking show where they had those mystery ingredient challenges - challenge accepted. I learned a slew of new recipes from my own asian background plus a lot of other culinary cultures. I also summoned my memories of my paternal grandmother's food preservation techniques and dishes. This was largely guesswork because, while my huge paternal family is almost ALWAYS EATING when we're all together (my partner can attest to this from his being politely over-fed by random family members of mine), I never paid much attention to the cooking and only pretty much took part in the eating of the food. Planning a month's worth of meals may seem overly dramatic, but it was really more to ensure that the food we ordered would not go to waste and that we would have enough food until the next delivery. We did deviate from the menu schedule on occasion and moved around some of the dishes, such as when certain ingredients were about to go bad sooner than we anticipated. Although now we know better the approximate shelf life of our food and try to arrange our fridge and pantry according to expiration date. The desserts and sweets are not projected on the menu plan and are randomly rationed based on intensity-of-craving-in-
</p>
<p>
The social distancing guidelines and the semi-self-imposed home quarantine has definitely accelerated my domestic skills acquisition, although my partner still maintains ardently that he's the better cook despite his demotion to dishwasher. Oddly enough, I've found joy and calm in this new process as it becomes our new normal and we learn to cope together. 
</p> </p>
</div> </div>
@ -94,10 +113,10 @@ The social distancing guidelines and the semi-self-imposed home quarantine has d
<b-container fluid> <b-container fluid>
<div class="image_container"> <div class="image_container">
<b-row> <b-row>
<b-col md="1"> <b-col md="3">
</b-col> </b-col>
<b-col md="10"> <b-col md="8">
<b-img class="img-fluid" src="media/cart/Food_Tocilog.jpg"> </b-img> <b-img class="img-fluid" src="media/cart/Food_Tocilog.jpg"> </b-img>
</b-col> </b-col>
<b-col md="1"> <b-col md="1">
@ -110,10 +129,10 @@ The social distancing guidelines and the semi-self-imposed home quarantine has d
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="1"> <b-col md="3">
</b-col> </b-col>
<b-col md="10"> <b-col md="8">
<b-img class="img-fluid" src="media/cart/1Planner.JPG"> </b-img> <b-img class="img-fluid" src="media/cart/1Planner.JPG"> </b-img>
</b-col> </b-col>
@ -128,10 +147,10 @@ The social distancing guidelines and the semi-self-imposed home quarantine has d
</b-row> </b-row>
<b-row> <b-row>
<b-col md="1"> <b-col md="3">
</b-col> </b-col>
<b-col md="10"> <b-col md="8">
<b-img class="img-fluid" src="media/cart/2Planner.JPG"> </b-img> <b-img class="img-fluid" src="media/cart/2Planner.JPG"> </b-img>
</b-col> </b-col>
@ -147,10 +166,10 @@ The social distancing guidelines and the semi-self-imposed home quarantine has d
</b-row> </b-row>
<b-row> <b-row>
<b-col md="1"> <b-col md="3">
</b-col> </b-col>
<b-col md="10"> <b-col md="8">
<b-img class="img-fluid" src="media/cart/3Planner.JPG"> </b-img> <b-img class="img-fluid" src="media/cart/3Planner.JPG"> </b-img>
</b-col> </b-col>
@ -166,10 +185,10 @@ The social distancing guidelines and the semi-self-imposed home quarantine has d
</b-row> </b-row>
<b-row> <b-row>
<b-col md="1"> <b-col md="3">
</b-col> </b-col>
<b-col md="10"> <b-col md="8">
<b-img class="img-fluid" src="media/cart/4Planner.jpg"> </b-img> <b-img class="img-fluid" src="media/cart/4Planner.jpg"> </b-img>
</b-col> </b-col>

48
src/components/eggs.vue
Unescape Escape View File

@ -11,9 +11,10 @@
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
@ -35,8 +36,8 @@ a {
padding-left: 20px; padding-left: 20px;
} }
#egg_images img { .egg_images img {
width: 100%; max-width: 90%;
padding-top: 40px; padding-top: 40px;
} }
@ -44,27 +45,54 @@ a {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
} }
.small_icon { .small_icon {
max-width: 20%; max-width: 20%;
padding-top: 70px;
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.zoom {
transition: transform 1s;
} }
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">Egg story</p> <p class="title_story">Egg story</p>
</b-col> <b-row>
<b-col md="2"> <b-col md="6">
<a href="/pretzel"><b-img class="img-fluid" src="media/pretzel.png"> </b-img></a> <p class="author">an essay by Amy Gowen</p>
</b-col> </b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/pretzel"><b-img center class="img-fluid" alt="Responsive image" src="media/pretzel_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/scooter"><b-img class="img-fluid" src="media/scooter.png"> </b-img></a> <div class="zoom">
<a href="/scooter"><b-img center class="img-fluid" alt="Responsive image" src="media/scooter_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
@ -113,7 +141,7 @@ Since then, I’ve received practically a galleries worth of images of omelets v
And as some may count this current period through the changing of days, the passing of weeks and the tick of the clock. In our household, the marker of time rests amongst the eggs, the oil and the pan, between the omelets made and the omelets ate.</p></div> And as some may count this current period through the changing of days, the passing of weeks and the tick of the clock. In our household, the marker of time rests amongst the eggs, the oil and the pan, between the omelets made and the omelets ate.</p></div>
</b-col> </b-col>
<b-col md="7"> <b-col md="7">
<b-container fluid id="egg_images"> <b-container fluid class="egg_images">
<b-row> <b-row>
<b-col md="6"> <b-col md="6">
<b-img class="img-fluid" src="media/eggs/egg1.png"> </b-img> <b-img class="img-fluid" src="media/eggs/egg1.png"> </b-img>

64
src/components/leekpilaf.vue
Unescape Escape View File

@ -20,52 +20,92 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
}
.leek_scans {
max-width: 60%;
padding-bottom: 20px;
padding-top: 20px;
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
} }
#leek_scans { .small_icon {
max-width: 70%; max-width: 20%;
padding-top: 70px;
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">Leek pilaf</p> <p class="title_story">Leek pilaf</p>
<b-row>
<b-col md="6">
<p class="author">a recipe by Artemis</p>
</b-col> </b-col>
<b-col md="2"> </b-row>
<a href="/onion"><b-img class="img-fluid" src="media/onion.png"> </b-img></a> </b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/onion"><b-img center class="img-fluid" alt="Responsive image" src="media/onion_prev.png"> </b-img></a>
</div>
</b-col> </b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/ricecooker"><b-img class="img-fluid" src="media/rice.png"> </b-img></a> <div class="zoom">
<a href="/ricecooker"><b-img center class="img-fluid" alt="Responsive image" src="media/rice_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="6" id="leek_scans"> <b-col md="2">
<p></p>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/leek/leek-pilaf-1.JPG"></b-img> <b-img class="img-fluid" src="media/leek/leek-pilaf-1.JPG"></b-img>
</b-col> </b-col>
<b-col md="6"> <b-col md="4" >
<b-img class="img-fluid" src="media/leek/leek-pilaf-2.png"></b-img> <b-img class="img-fluid" src="media/leek/leek-pilaf-2.JPG"></b-img>
</b-col> </b-col>
<b-col md="2">
<p></p>
</b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">

47
src/components/noodles.vue
Unescape Escape View File

@ -12,6 +12,8 @@
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
} }
@ -35,9 +37,10 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
.image_container { .image_container {
@ -45,22 +48,50 @@ a {
padding-top: 40px; padding-top: 40px;
} }
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">Luo Shi Fen</p> <p class="title_story">Luo Shi Fen</p>
</b-col> <b-row>
<b-col md="2"> <b-col md="6">
<a href="/breakfast"><b-img class="img-fluid" src="media/avo.png"> </b-img></a> <p class="author">a visual recipe by biyibiyibiyi</p>
</b-col> </b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/recipe"><b-img class="img-fluid" src="media/recipe.png"> </b-img></a> <div class="zoom">
<a href="/breakfast"><b-img center class="img-fluid" alt="Responsive image" src="media/avo_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/recipe"><b-img center class="img-fluid" alt="Responsive image" src="media/recipe_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>

54
src/components/onion.vue
Unescape Escape View File

@ -12,6 +12,8 @@
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
} }
@ -35,9 +37,10 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
.image_container { .image_container {
@ -45,22 +48,55 @@ a {
padding-top: 10px; padding-top: 10px;
} }
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.image_container img {
max-width: 80%
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">Something light, like a salad</p> <p class="title_story">Something light, like a salad</p>
</b-col> <b-row>
<b-col md="2"> <b-col md="6">
<a href="/recipe"><b-img class="img-fluid" src="media/recipe.png"> </b-img></a> <p class="author">an essay by Simon Browne</p>
</b-col> </b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/leekpilaf"><b-img class="img-fluid" src="media/leek.png"> </b-img></a> <div class="zoom">
<a href="/recipe"><b-img center class="img-fluid" alt="Responsive image" src="media/recipe_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/leekpilaf"><b-img center class="img-fluid" alt="Responsive image" src="media/leek_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
@ -101,8 +137,6 @@ Cooking, something I once loved, has become a chore. It's part of the upside-dow
I look up spring onion on wikipedia.org. It says they are native to China. I wonder how they travelled west, and how they were prepared to be eaten along the way, this new curious vegetable, this herald of spring. I wonder if a recipe (or lack thereof) travelled with them. Perhaps early European spring onion eaters decided on the most minimal preparation as a celebration of the new season, and a fitting way to respect its produce. A long onion, held in the hand, and eaten raw. A defiance of winter's imperative for heat and "cooked" meals, and a totemic gesture towards warmer, brighter and better days. I look up spring onion on wikipedia.org. It says they are native to China. I wonder how they travelled west, and how they were prepared to be eaten along the way, this new curious vegetable, this herald of spring. I wonder if a recipe (or lack thereof) travelled with them. Perhaps early European spring onion eaters decided on the most minimal preparation as a celebration of the new season, and a fitting way to respect its produce. A long onion, held in the hand, and eaten raw. A defiance of winter's imperative for heat and "cooked" meals, and a totemic gesture towards warmer, brighter and better days.
</p> </p>
</p>
</div> </div>
</b-col> </b-col>

87
src/components/pesto.vue
Unescape Escape View File

@ -12,6 +12,8 @@
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
} }
@ -35,53 +37,82 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
.image_container { .image_container {
padding-top: 10px;
}
padding-top: 40px; .author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
} }
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">Bulk Pesto</p> <p class="title_story">Bulk Pesto</p>
<b-row>
<b-col md="6">
<p class="author">a photo diary by Wakest</p>
</b-col>
</b-row>
</b-col> </b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/scooter"><b-img class="img-fluid" src="media/scooter.png"> </b-img></a> <div class="zoom">
<a href="/scooter"><b-img center class="img-fluid" alt="Responsive image" src="media/scooter_prev.png"> </b-img></a>
</div>
</b-col> </b-col>
<b-col md="2"> <b-col md="2" class="small_icon">
<a href="/bbq"><b-img class="img-fluid" src="media/bbq.png"> </b-img></a> <div class="zoom">
<a href="/bbq"><b-img center class="img-fluid" alt="Responsive image" src="media/bbq_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="2"> <b-col md="2">
<p></p>
</b-col> </b-col>
<b-col md="8"> <b-col md="8">
<b-container fluid>
<div class="image_container"> <div class="image_container">
<b-row> <b-row>
<b-col md="6"> <b-col md="4">
<b-img class="img-fluid" src="media/pesto/1.jpg"> </b-img> <b-img class="img-fluid" center src="media/pesto/1.jpg"> </b-img>
</b-col> </b-col>
<b-col md="6"> <b-col md="4">
<b-img class="img-fluid" src="media/pesto/2.jpg"> </b-img> <b-img class="img-fluid" center src="media/pesto/2.jpg"> </b-img>
</b-col> </b-col>
<b-col md="2"> <b-col md="4">
<b-img class="img-fluid" center src="media/pesto/3.jpg"> </b-img>
</b-col> </b-col>
@ -93,12 +124,16 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="6"> <b-col md="4">
<b-img class="img-fluid" src="media/pesto/3.jpg"> </b-img> <b-img class="img-fluid" src="media/pesto/5.jpg"> </b-img>
</b-col> </b-col>
<b-col md="6"> <b-col md="4">
<b-img class="img-fluid" src="media/pesto/5.jpg"> </b-img> <b-img class="img-fluid" src="media/pesto/4.jpg"> </b-img>
</b-col>
<b-col md="4">
<b-img class="img-fluid" src="media/pesto/6.jpg"> </b-img>
</b-col> </b-col>
@ -110,19 +145,13 @@ a {
</b-col> </b-col>
</b-row> </b-row>
<b-row>
<b-col md="6">
<b-img class="img-fluid" src="media/pesto/4.jpg"> </b-img>
</b-col>
<b-col md="6">
<b-img class="img-fluid" src="media/pesto/6.jpg"> </b-img>
</b-col>
</b-row>
</div> </div>
</b-container> </b-col>
<b-col md="2">
<p></p>
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>

59
src/components/pretzel.vue
Unescape Escape View File

@ -12,6 +12,8 @@
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
} }
@ -35,32 +37,63 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
.image_container { .image_container {
padding-top: 10px; padding-top: 40px;
}
.image_container img {
max-width: 80%;
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
} }
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">A list</p> <p class="title_story">A list</p>
</b-col> <b-row>
<b-col md="2"> <b-col md="6">
<a href="/cake"><b-img class="img-fluid" src="media/cake.png"> </b-img></a> <p class="author">a list by Alice Strete</p>
</b-col> </b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/eggs"><b-img class="img-fluid" src="media/egg.png"> </b-img></a> <div class="zoom">
<a href="/cake"><b-img center class="img-fluid" alt="Responsive image" src="media/cake_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/eggs"><b-img center class="img-fluid" alt="Responsive image" src="media/egg_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
@ -97,9 +130,9 @@ a {
<b-container fluid> <b-container fluid>
<div class="image_container"> <div class="image_container">
<b-row> <b-row>
<b-col md="1"> <b-col md="3">
</b-col> </b-col>
<b-col md="10"> <b-col md="8">
<b-img class="img-fluid" src="media/pretzel/pretzels.JPG"> </b-img> <b-img class="img-fluid" src="media/pretzel/pretzels.JPG"> </b-img>
</b-col> </b-col>
@ -113,10 +146,10 @@ a {
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="1"> <b-col md="3">
</b-col> </b-col>
<b-col md="10"> <b-col md="8">
<b-img class="img-fluid" src="media/pretzel/masto.PNG"> </b-img> <b-img class="img-fluid" src="media/pretzel/masto.PNG"> </b-img>
</b-col> </b-col>

62
src/components/recipe.vue
Unescape Escape View File

@ -12,6 +12,8 @@
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
} }
@ -35,32 +37,62 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
.image_container { .image_container {
padding-top: 10px; padding-top: 40px;
}
.image_container img {
max-width: 90%
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
} }
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">Party of 3</p> <p class="title_story">Party of 3</p>
</b-col> <b-row>
<b-col md="2"> <b-col md="6">
<a href="/noodles"><b-img class="img-fluid" src="media/noodles.png"> </b-img></a> <p class="author">an essay by Daria Groza</p>
</b-col> </b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/onion"><b-img class="img-fluid" src="media/onion.png"> </b-img></a> <div class="zoom">
<a href="/noodles"><b-img center class="img-fluid" alt="Responsive image" src="media/noodles_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/onion"><b-img center class="img-fluid" alt="Responsive image" src="media/onion_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
@ -104,9 +136,9 @@ a {
<b-container fluid> <b-container fluid>
<div class="image_container"> <div class="image_container">
<b-row> <b-row>
<b-col md="1"> <b-col md="3">
</b-col> </b-col>
<b-col md="10"> <b-col md="8">
<b-img class="img-fluid" src="media/recipe/1.jpg"> </b-img> <b-img class="img-fluid" src="media/recipe/1.jpg"> </b-img>
</b-col> </b-col>
@ -120,10 +152,10 @@ a {
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="1"> <b-col md="3">
</b-col> </b-col>
<b-col md="10"> <b-col md="8">
<b-img class="img-fluid" src="media/recipe/2.jpg"> </b-img> <b-img class="img-fluid" src="media/recipe/2.jpg"> </b-img>
</b-col> </b-col>
@ -132,7 +164,9 @@ a {
</b-col> </b-col>
</b-row> </b-row>
<b-row>
<p></p>
</b-row>
</div> </div>

46
src/components/ricecooker.vue
Unescape Escape View File

@ -20,33 +20,63 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
color: #333042
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
}
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
} }
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">When the oven is broken</p> <p class="title_story">When the oven is broken</p>
</b-col> <b-row>
<b-col md="2"> <b-col md="6">
<a href="/leekpilaf"><b-img class="img-fluid" src="media/leek.png"> </b-img></a> <p class="author">a visual story by Angeliki Diakrousi</p>
</b-col> </b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/cake"><b-img class="img-fluid" src="media/cake.png"> </b-img></a> <div class="zoom">
<a href="/leekpilaf"><b-img center class="img-fluid" alt="Responsive image" src="media/leek_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/cake"><b-img center class="img-fluid" alt="Responsive image" src="media/cake_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>

51
src/components/scooter.vue
Unescape Escape View File

@ -12,6 +12,8 @@
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px;
} }
@ -25,48 +27,79 @@ a {
color: gray; color: gray;
} }
.content { .content_poem {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 150px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Viga', sans-serif; font-family: 'Permanent Marker', cursive;
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 70px;
} }
.image_container { .image_container {
padding-top: 40px; padding-top: 40px;
} }
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
</style> </style>
<template> <template>
<b-container fluid class="container_width"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row>
<b-col md="8"> <b-col md="8">
<p class="title_story">acknowledgements</p> <p class="title_story">acknowledgements</p>
<b-row>
<b-col md="6">
<p class="author">a poem by Tash Berting</p>
</b-col>
</b-row>
</b-col> </b-col>
<b-col md="2"> <b-col md="2" class="small_icon">
<a href="/eggs"><b-img class="img-fluid" src="media/egg.png"> </b-img></a> <div class="zoom">
<a href="/eggs"><b-img center class="img-fluid" alt="Responsive image" src="media/egg_prev.png"> </b-img></a>
</div>
</b-col> </b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/pesto"><b-img class="img-fluid" src="media/basil.png"> </b-img></a> <div class="zoom">
<a href="/pesto"><b-img center class="img-fluid" alt="Responsive image" src="media/basil_next.png"> </b-img></a>
</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="5"> <b-col md="5">
<div class='content'> <div class='content_poem'>
<p> <p>
my lungs<br> my lungs<br>
they need to say<br> they need to say<br>

6
src/main.js
Unescape Escape View File

@ -16,6 +16,7 @@ Vue.directive('b-popover', VBPopover)
import SplashPage from './components/SplashPage' import SplashPage from './components/SplashPage'
import AboutPage from './components/AboutPage' import AboutPage from './components/AboutPage'
import EditorNote from './components/EditorNote'
import leekpilaf from './components/leekpilaf' import leekpilaf from './components/leekpilaf'
import eggs from './components/eggs' import eggs from './components/eggs'
import breakfast from './components/breakfast' import breakfast from './components/breakfast'
@ -39,6 +40,7 @@ const router = new VueRouter({
routes: [ routes: [
{ path: '/', component: SplashPage }, { path: '/', component: SplashPage },
{ path: '/about', component: AboutPage }, { path: '/about', component: AboutPage },
{ path: '/editornote', component: EditorNote },
{ path: '/leekpilaf', component: leekpilaf }, { path: '/leekpilaf', component: leekpilaf },
{ path: '/breakfast', component: breakfast }, { path: '/breakfast', component: breakfast },
{ path: '/pesto', component: pesto }, { path: '/pesto', component: pesto },
@ -53,10 +55,6 @@ const router = new VueRouter({
{ path: '/scooter', component: scooter }, { path: '/scooter', component: scooter },
{ path: '/eggs', component: eggs }, { path: '/eggs', component: eggs },
] ]
}) })

Write Preview
Loading…
Cancel
Save