edited a bunch of vue files

master
simon 3 years ago
parent ebe64fa9b5
commit 1c65a78004

@ -7,10 +7,17 @@
font-family: 'Happy Times'; font-family: 'Happy Times';
src: url('../../fonts/happy-times-NG_regular_master.otf'); 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');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: #FFD600 !important; background-color: #FFD600;
} }
@ -20,15 +27,14 @@ body {
} }
#magi { #magi {
width: 50%; background-color: transparent;
z-index: -1;
/*padding: 20px;*/ /*padding: 20px;*/
--color-stop: #fff5f5; /*--color-stop: #fff5f5;*/
--color-bot: #333042; /*--color-bot: #333042;*/
} }
.img-fluid { .img-fluid {
fill: url(#magi) #ffcccc; /*fill: url(#magi) #ffcccc;*/
} }
#mag_title { #mag_title {
@ -37,19 +43,22 @@ body {
color: #1B75BC; color: #1B75BC;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
text-align: left; text-align: left;
/*position: fixed;*/
/*padding: 6px;*/
background-color: transparent;
z-index: 1; z-index: 1;
padding: 6px;
} }
#mag_subtitle { #mag_subtitle {
font-size: 200%; font-size: 250%;
font-family: 'Work Sans', sans-serif; font-family: 'Semi Light Dots', sans-serif;
color: #1B75BC; color: #1B75BC;
text-align: center; background-color: transparent;
height: auto; height: auto;
padding: 6px; margin-top: -230px;
text-align: left;
} }
.summary { .summary {
@ -62,10 +71,10 @@ body {
width: 60%; width: 60%;
} }
.author {
.col-md-2 { font-family: 'ED-Regular', sans-serif;;
border-right: 3px dotted #ffcccc; text-align: center;
display: table; color: #FA00FF;
} }
.container_width { .container_width {
@ -75,11 +84,13 @@ body {
#toc { #toc {
color: #1B75BC; color: #1B75BC;
font-family: 'Happy Times'; font-family: 'Happy Times';
text-align: center; font-size: 120%;
font-size: 100%;
text-align: center; text-align: center;
border: 8px dotted #1B75BC; border: 8px dotted #1B75BC;
padding: 12px; padding: 24px;
max-width: 100%;
min-width: 70%;
margin: 18px;
} }
a { a {
@ -95,33 +106,39 @@ a {
font-size: 18px; font-size: 18px;
font-family: 'Work Sans'; font-family: 'Work Sans';
letter-spacing: 1px; letter-spacing: 1px;
/*margin-top: 55px;*/ margin-top: 80px;
text-align: left;
background-colour: transparent;
} }
@media (max-width: 1217px) { @media (max-width: 1217px) {
#mag_title { #mag_title {
font-size: 500%; font-size: 500%;
padding-top: 10px; padding-top: 12px;
/*padding-left: 12px;*/
/*padding-right: 12px;*/
} }
#mag_subtitle { #mag_subtitle {
font-size: 150%; font-size: 150%;
text-align: left;
padding-top: inherit; padding-top: inherit;
/*padding-left: 20px;*/
} }
} }
@media (max-width: 575px) { @media (max-width: 575px) {
#mag_title { #mag_title {
font-size: 50px; font-size: 80px;
padding-top: inherit; padding-top: inherit;
} }
#mag_subtitle { #mag_subtitle {
font-size: 18px;
padding-top: inherit; padding-top: inherit;
text-align: right;
}
#edition {
font-size: 18px;
text-align: right;
margin-top: -36px;
background-color: transparent;
} }
.icons img { .icons img {
@ -134,21 +151,28 @@ a {
#magi { #magi {
width: 50%; width: 50%;
border: 3px double ##ffcccc; text-align: right;
border-radius: 24px 48px 72px 96px; margin-top: -24px;
} }
.col-md-2 { .col-md-2 {
border: none; border: none;
} }
#main_container {
padding-top: 64px;
}
} }
.recipe_title {
font-family: 'Bold Big Dots', monospace;
font-size: 200%;
padding-bottom: 18px;
}
#main_container { #main_container {
padding-top: 100px; padding-top: 72px;
padding-bottom: 120px; padding-bottom: 120px;
/*border-bottom: 2px #ffcccc solid;*/
} }
#print { #print {
@ -192,158 +216,58 @@ a {
</style> </style>
<template> <template>
<div> <div>
<MenuBar/> <MenuBar/>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<b-row id="main_container"> <b-row id="main_container">
<b-col md="6"> <b-col md="6">
<b-row> <b-row>
<b-col md="7" offset-md="2"> <b-col md="6" offset-md="2">
<a href="/about"><p id="mag_title">Magiun</p></a> <a href="/about"><p id="mag_title">Magiun</p></a>
</b-col> </b-col>
<b-col md="3" id="edition"> <b-col id="edition">Summer 2021
Summer 2021
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="8" offset-md="4"> <b-col md="8" offset-md="6">
<a href="/about"> <b-img class="img-fluid" id="magi" src="media/magiun2/unnamed.png"> </b-img>
<b-img class="img-fluid" id="magi" src="media/magiun2/unnamed.png"></b-img></a>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="8" offset-md="2"> <b-col md="6" offset-md="2">
<p id="mag_subtitle">#2 On adapting</p> <p id="mag_subtitle">#2 On adapting</p>
</b-col>
</b-row>
</b-col>
<b-col md="6">
<b-row>
<b-col md="8" offset-md="2" id="toc">
<p class="item"><a href="/knife">PAPER THIN</a><br>Yoana Buzova</p>
<br>
<p class="item"><a href="/simmered">SIMMERED EGG</a> <br>Dorothy Cheung</p>
<br>
<p class="item"><a href="/soulsoup">CHICKEN SOUP FOR SOUL</a><br>Patricia Cirtog</p>
<br>
<p class="item"><a href="/phone">CHRISTMAS DINNER</a><br>Valentina Vella</p>
<br>
<p class="item"><a href="/whatwecan">WE DO WHAT WE CAN<br> WITH WHAT WE HAVE</a><br>Raluca Chereji</p>
<br>
<p class="item"><a href="/lychee">HAVE YOU EATEN YET?</a><br>Witold van Ratingen</p>
<br>
<p class="item"><a href="/anise">ADAPTING TO ADAPTATIONS</a><br>Inge Hoonte</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
</b-row> <b-col md="4" offset-md="1">
<!--
<b-row> <b-row>
<b-col md="4" offset-md="4"> <b-col id="toc">
<p id="toc">Inside</p> <p class="recipe_title">Contents</p>
</b-col> <p class="item"><a href="/knife">PAPER THIN</a><br>
</b-row> <span class="author">Yoana Buzova</span>
</p>
<b-row class="icons"> <p class="item"><a href="/simmered">SIMMERED EGG</a><br>
<b-col md="2" offset-md="3"> <span class="author">Dorothy Cheung</span>
</b-col> </p>
<p class="item"><a href="/soulsoup">CHICKEN SOUP FOR SOUL</a><br>
<b-col md="2"> <span class="author">Patricia Cirtog</span>
<p class="item"><a href="/knife">Knife</a></p> </p>
<p class="item"><a href="/phone">CHRISTMAS DINNER</a><br>
</b-col> <span class="author">Valentina Vella</span>
<b-col md="2" order="0" order-sm="1"> </p>
<p class="item"><a href="/whatwecan">WE DO WHAT WE CAN<br> WITH WHAT WE HAVE</a><br>
<a href="/knife"><b-img class="img-fluid" id="knife" center alt="Responsive image" src="media/magiun2/knife_small.png"></b-img></a> <span class="author">Raluca Chereji</span>
</b-col> </p>
<p class="item"><a href="/lychee">HAVE YOU EATEN YET?</a><br>
</b-row> <span class="author">Witold van Ratingen</span>
</p>
<p class="item"><a href="/anise">ADAPTING TO ADAPTATIONS</a><br>
<b-row class="icons"> <span class="author">Inge Hoonte</span>
<b-col md="2" offset-md="3"> </p>
<a href="/simmered"><b-img class="img-fluid" id="porcini" center alt="Responsive image" src="media/magiun2/porcini_small.png"></b-img></a>
</b-col>
<b-col md="2" order="1" order-sm="0">
<p class="item"><a href="/simmered">Simmered Egg</a></p>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
</b-col>
<b-col md="2">
<p class="item"><a href="/soulsoup">Chicken soup for soul</a></p>
</b-col>
<b-col md="2" order="2" order-sm="1">
<a href="/soulsoup"><b-img class="img-fluid" id="cauliflower" center alt="Responsive image" src="media/magiun2/cauliflower_small.png"></b-img></a>
</b-col> </b-col>
</b-row> </b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/phone"><b-img class="img-fluid" id="phone" center alt="Responsive image" src="media/magiun2/phone_small.png"></b-img></a>
</b-col> </b-col>
<b-col md="2">
<p class="item"><a href="/phone">Christmas dinner</a></p>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5">
<p class="item"><a href="/whatwecan">We do what we can with what we have</a></p>
</b-col>
<b-col md="2" order="2" order-sm="1">
<a href="/whatwecan"><b-img class="img-fluid" id="clothes" center alt="Responsive image" src="media/magiun2/clothes_small.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/lychee"><b-img class="img-fluid" id="lychee" center alt="Responsive image" src="media/magiun2/lychee_small.png"></b-img></a>
</b-col>
<b-col md="2">
<p class="item"><a href="/lychee">Have you eaten yet?</a></p>
</b-col>
</b-row> </b-row>
<b-row class="icons">
<b-col md="2" offset-md="5">
<p class="item"><a href="/anise">Adapting to adaptations</a></p>
</b-col>
<b-col md="2" order="2" order-sm="1">
<a href="/anise"><b-img class="img-fluid" id="anise" center alt="Responsive image" src="media/magiun2/anise_small.png"></b-img></a>
</b-col>
</b-row> -->
<b-row> <b-row>
<b-col> <b-col>
<footer> <footer>
@ -352,11 +276,7 @@ a {
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>
</div> </div>
</template> </template>
<script> <script>

@ -21,10 +21,10 @@
font-family: 'ED Regular'; font-family: 'ED Regular';
src: url('../../fonts/ED-Regular.otf'); src: url('../../fonts/ED-Regular.otf');
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: white; background-color: transparent;
} }
.container_width { .container_width {
@ -32,14 +32,12 @@
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
} }
a { a {
@ -49,66 +47,86 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
padding-top: 40px;
font-family: 'Happy Times'; font-family: 'Happy Times';
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
padding-bottom: 40px; /*padding-bottom: 40px;*/
color: #1B75BC; color: #1B75BC;
text-align: left; text-align: left;
} }
.controls { .controls {
margin-top: 60px; padding-top: 12px;
height: 120px;
z-index: 1;
position: relative;
} }
.arrows { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Semi Light Dots', sans-serif; font-family: 'Semi Light Dots', sans-serif;
padding-top: 20px; padding-top: 20px;
color: #FA00FF; color: #FA00FF;
vertical-align: top;
text-align: center; text-align: center;
} }
.title_story { .arrows {
font-size: 80px; font-size: 80px;
font-family: 'Semi Light Dots', sans-serif; font-family: 'Semi Light Dots', sans-serif;
padding-top: 20px; top: 36px;
color: #FA00FF; color: #FA00FF;
text-align: center; vertical-align: top;
position: fixed;
overflow: hidden;
} }
.image_container { .arrows a {
display: block;
}
padding-top: 5px; #leftarrow {
float: left;
color: #FA00FF;
} }
.author { #rightarrow {
font-size: 20px; float: right;
font-family: 'ED Regular', sans-serif;;
text-align: center;
color: #FA00FF; color: #FA00FF;
} }
.image_container {
padding-top: 5px;
}
.small_icon { .photo {
max-width: 60%; -webkit-filter: grayscale(100%);
padding-top: 100px; filter: grayscale(100%);
width: auto;
max-height: 100%;
max-width: 100%;
padding: 12px;
} }
.zoom { .img-fluid {
max-width: 60%; filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
max-height: 100%;
max-width: 100%;
}
.author {
font-size: 20px;
font-family: 'ED-regular', sans-serif;;
text-align: center;
color: #FA00FF;
} }
.recipe_block { .recipe_block {
padding-top: 20px; padding: 18px;
margin-top: 20px; margin-bottom: 18px;
font-size: 15px; font-size: 15px;
font-family: 'Monospaced Dots', monospace; font-family: 'Monospaced Dots', monospace;
border: 3px dotted #FA00FF; border: 5px dotted #FA00FF;
margin-bottom: 30px; /*margin-bottom: 24px;*/
} }
#aniseillu { #aniseillu {
@ -119,8 +137,7 @@ a {
.recipe_title { .recipe_title {
font-family: 'Bold Big Dots', monospace; font-family: 'Bold Big Dots', monospace;
font-size: 200%; font-size: 200%;
padding-bottom: 20px; padding-bottom: 18px;
z-index: 10;
} }
.recipe { .recipe {
@ -128,16 +145,25 @@ a {
font-weight: bold; font-weight: bold;
} }
.small_icon {
max-width: 60%;
padding-top: 100px;
}
.zoom {
max-width: 100%;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
} }
.title_story { .title_story {
font-size: 30px; font-size: 48px;
} }
.author { .author {
font-size: 15px; font-size: 21px;
} }
} }
@ -146,20 +172,16 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row class="controls">
<b-row> <b-col md="12" class="arrows">
<b-col md="2" class="controls"> <a href="/lychee" id="leftarrow"></a>
<p class="arrows"></p> <a href="/" id="rightarrow"></a>
</b-col>
<b-col md="2" offset-md="8" class="controls">
<p class='arrows'></p>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="4"> <b-col md="4">
<b-row> <b-row>
<b-col md="10" offset-md="3"> <b-col md="6" offset-md="3">
<div class="zoom"> <div class="zoom">
<b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise.png"> </b-img> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise.png"> </b-img>
</div> </div>
@ -173,114 +195,82 @@ a {
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">essay and recipes by Inge Hoonte</p> <p class="author">essay and recipes by Inge Hoonte</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
<b-col md="5"> <b-col md="5">
<div class='content'> <div class='content'>
<p>The majority of my cooking consists of throwing together whatever's in my fridge and cupboards. And, gladly, what I've grown or surprisingly harvested from the yard that came with my new apartment!</p>
<p>The majority of my cooking consists of throwing together whatever's in my fridge and cupboards. And, gladly, what I've grown or surprisingly harvested from the yard that came with my new apartment! <p>* The last years, but even more so these months, I rarely shop for precise ingredients to make a specific dish.</p>
</p> <p>** If I have guests over for dinner, I tend to make more of an effort, and I sometimes regret not making such an effort for myself. With a handful (or two) of exceptions, I have spent this past year cooking and eating solo.</p>
* The last years, but even more so these months, I rarely shop for precise ingredients to make a specific dish.</p> <p>*** I don't mean to make that sound sadder than it is, it is how it is, but I do miss having friends over and eating together...</p>
<p> <p>**** EXCEPTIONS TO ADAPTATIONS THAT ARE STILL ADAPTATIONS</p>
** If I have guests over for dinner, I tend to make more of an effort, and I sometimes regret not making such an effort for myself. With a handful (or two) of exceptions, I have spent this past year cooking and eating solo.</p>
<p>
*** I don't mean to make that sound sadder than it is, it is how it is, but I do miss having friends over and eating together...
</p>
<p>
**** EXCEPTIONS TO ADAPTATIONS THAT ARE STILL ADAPTATIONS
</p>
<p>Like most people, the way I cook (and shop) has changed. It's more sparse, probably a bit boring, and at the same time more creative as I replace ingredients with what I have. Getting a "want/need/crave" item around meal times is no longer part of my life. In the beginning of the pandemic, I was that woman retreating, jumping back or even running away when people approached. The woman who snapped at people, and had to calm down in the quietest part of the store (if you're in need, try the dietary restriction or health food section). For a couple months, I only went to one store, close by, where I knew where everything was, so I could go in and out as fast as I could. A friend jokingly called me an old lady, I call it taking care of my mental health. I soon began shopping in the morning when it's more quiet (yep, right after granny hour), and almost a year later I still don't go around peak hours. I don't plan meals, I just grab a variety of fruit and veggies for up to a week, and add tofu, seitan, tempeh, lentils and beans, sometimes a fun (though generally low in protein) burger or an add-water-nut-burger-mix. The downside is that my meals could use a bit more spice and spunk, the upside is that I buy and eat way less candy, chocolate, cookies, chips and dessert-type things that lure your low glucose levels in the rush toward dinner time.</p> <p>Like most people, the way I cook (and shop) has changed. It's more sparse, probably a bit boring, and at the same time more creative as I replace ingredients with what I have. Getting a "want/need/crave" item around meal times is no longer part of my life. In the beginning of the pandemic, I was that woman retreating, jumping back or even running away when people approached. The woman who snapped at people, and had to calm down in the quietest part of the store (if you're in need, try the dietary restriction or health food section). For a couple months, I only went to one store, close by, where I knew where everything was, so I could go in and out as fast as I could. A friend jokingly called me an old lady, I call it taking care of my mental health. I soon began shopping in the morning when it's more quiet (yep, right after granny hour), and almost a year later I still don't go around peak hours. I don't plan meals, I just grab a variety of fruit and veggies for up to a week, and add tofu, seitan, tempeh, lentils and beans, sometimes a fun (though generally low in protein) burger or an add-water-nut-burger-mix. The downside is that my meals could use a bit more spice and spunk, the upside is that I buy and eat way less candy, chocolate, cookies, chips and dessert-type things that lure your low glucose levels in the rush toward dinner time.</p>
<p>With baking, it usually starts something like this: <p>With baking, it usually starts something like this:</p>
I have a couple overripe bananas that have been sitting there for a few days, so I make banana bread (which I bring on my bike rides). I adapt the recipe with peanut butter, nuts, cocoa powder, raisins, dates, whatever I have and feel like adding. <p>I have a couple overripe bananas that have been sitting there for a few days, so I make banana bread (which I bring on my bike rides). I adapt the recipe with peanut butter, nuts, cocoa powder, raisins, dates, whatever I have and feel like adding.</p>
Or a friend sends me a message that she's eating chocolate with green tea flavor. This leaves me craving ginger flavored chocolate, but the buying of ingredients will have to wait until the less crowded morning. Super fun to make though! See details below. <p>Or a friend sends me a message that she's eating chocolate with green tea flavor. This leaves me craving ginger flavored chocolate, but the buying of ingredients will have to wait until the less crowded morning. Super fun to make though! See details below.</p>
Or: last week after dinner, I suddenly felt like a sweet dessert. I didn't have anything readymade but I did have chocolate sprinkles, flour and oatmeal. So I looked up a recipe for cookies and started dragging the main ingredients out of the cupboards. A word of warning: although it's fun to try, you cannot just simply replace ingredients that seem similar. I've made scones with coconut creme instead of soyghurt. Not a great idea. I've subbed flour with some leftover coconut flour. Not a good idea either. The consistency requires other adaptations, and it all ends up being a wet, soggy mess. Other times adapting recipes works out great though! Chocolate sprinkle cookies.</p> <p>Or: last week after dinner, I suddenly felt like a sweet dessert. I didn't have anything readymade but I did have chocolate sprinkles, flour and oatmeal. So I looked up a recipe for cookies and started dragging the main ingredients out of the cupboards. A word of warning: although it's fun to try, you cannot just simply replace ingredients that seem similar. I've made scones with coconut creme instead of soyghurt. Not a great idea. I've subbed flour with some leftover coconut flour. Not a good idea either. The consistency requires other adaptations, and it all ends up being a wet, soggy mess. Other times adapting recipes works out great though! Chocolate sprinkle cookies.</p>
<p>* One big adaptation has been cooking with edible weeds from the garden. When I got here, the soil was covered with stinging nettles, which I removed. The next season, instead of nettles, a strange looking fragile little green thing came up, growing small thin leaves. When it started to get bigger and the field more massive, I finally realized I hadn't sown this, and that it was probably weed. I sent some pictures to my sister, who did some googling and thought it was an edible weed. I installed an app that helps identify plants, and figured out it was goose foot (melganzevoet), which people were growing and eating up until the 1950s, when it was replaced by the more sturdy and supermarket-friendly version: spinach. Goose foot is very similar to spinach, and rich in nutrients. I even ended up trading it for bread, with a neighbor who likes to bake.</p> <p>* One big adaptation has been cooking with edible weeds from the garden. When I got here, the soil was covered with stinging nettles, which I removed. The next season, instead of nettles, a strange looking fragile little green thing came up, growing small thin leaves. When it started to get bigger and the field more massive, I finally realized I hadn't sown this, and that it was probably weed. I sent some pictures to my sister, who did some googling and thought it was an edible weed. I installed an app that helps identify plants, and figured out it was goose foot (melganzevoet), which people were growing and eating up until the 1950s, when it was replaced by the more sturdy and supermarket-friendly version: spinach. Goose foot is very similar to spinach, and rich in nutrients. I even ended up trading it for bread, with a neighbor who likes to bake.</p>
<p>** My mom gave me some vouchers for free vegetarian groceries at AH. In the envelope she sent were some very uninteresting, basic vegetarian recipe cards, but there was one I hadn't made for a long time: lasagna. I easily adapted it from vegetarian to vegan, and used the purslane we got at the food coop.</p> <p>** My mom gave me some vouchers for free vegetarian groceries at AH. In the envelope she sent were some very uninteresting, basic vegetarian recipe cards, but there was one I hadn't made for a long time: lasagna. I easily adapted it from vegetarian to vegan, and used the purslane we got at the food coop.</p>
<p>*** with some non-spicy portions of my veggies to give to the cats. Of course I do research on what they're allowed to have, in small doses, and they were very interesting in trying pumpkin, sweet potato and broccoli. Especially the little cat has a sweet tooth, and wants in on the fruits as well. So far she's tried mango, kiwi, lychee, and kaki fruit. </p> <p>*** with some non-spicy portions of my veggies to give to the cats. Of course I do research on what they're allowed to have, in small doses, and they were very interesting in trying pumpkin, sweet potato and broccoli. Especially the little cat has a sweet tooth, and wants in on the fruits as well. So far she's tried mango, kiwi, lychee, and kaki fruit. </p>
<p>**** But the main exception this past year is my quest to copy Coppi's coconut macaroons. They sell them at Coppi Koffie on the Bergweg, and I love them so much that when I felt less comfortable going out in March/April 2020, I started making them myself. The first time, I made them for a friend's 40th birthday in April. Instead of a fun celebration in the park, her birthday weekend was a super stressful stay-at-home version of a Christmas dinner, where she was catering to all of her family, and her boyfriend's family. The typical running around serving everybody on your own day. So we went for a "distance walk," and ate coconut cookies. This version followed a recipe that adds flour, so they weren't macaroons at all, but crisp cookies. Slightly failed and stale, actually, although Ilse assured to thank me for this birthday gift.</p> <p>**** But the main exception this past year is my quest to copy Coppi's coconut macaroons. They sell them at Coppi Koffie on the Bergweg, and I love them so much that when I felt less comfortable going out in March/April 2020, I started making them myself. The first time, I made them for a friend's 40th birthday in April. Instead of a fun celebration in the park, her birthday weekend was a super stressful stay-at-home version of a Christmas dinner, where she was catering to all of her family, and her boyfriend's family. The typical running around serving everybody on your own day. So we went for a "distance walk," and ate coconut cookies. This version followed a recipe that adds flour, so they weren't macaroons at all, but crisp cookies. Slightly failed and stale, actually, although Ilse assured to thank me for this birthday gift.</p>
<p>I have made them four times now (I got distracted by copying Spirit's scones), and tried a different recipe each time. I'm not even remotely close to Elise's version at all. Not even after I told her that if I can make these, and make them well, all the corona isolation will have had at least some... productive outcome, upon which she revealed her ingredients to me, and when I tried it like that, it still wasn't the way she makes them, but it's been a fun challenge to keep working on adapting the recipe. By now it almost feels like, that if I finally manage to make it the way Elise makes them... All this endless solo baking, solo eating, will be over, maybe?</p> <p>I have made them four times now (I got distracted by copying Spirit's scones), and tried a different recipe each time. I'm not even remotely close to Elise's version at all. Not even after I told her that if I can make these, and make them well, all the corona isolation will have had at least some... productive outcome, upon which she revealed her ingredients to me, and when I tried it like that, it still wasn't the way she makes them, but it's been a fun challenge to keep working on adapting the recipe. By now it almost feels like, that if I finally manage to make it the way Elise makes them... All this endless solo baking, solo eating, will be over, maybe?</p>
<p>By now I've babbled on for way too long to have space for recipes, and you can figure out most of my simple baking on your own, so here's the main idea....</p> <p>By now I've babbled on for way too long to have space for recipes, and you can figure out most of my simple baking on your own, so here's the main idea....</p>
</div> </div>
<b-col class="recipe_block">
</b-col>
</b-row>
<b-row>
<b-col md="4" offset-md="2" class="recipe_block">
<b-row> <b-row>
<b-col> <b-col>
<p class="recipe_title"> POUR YOURSELF <br> A <br> QUARANTINI</p> <p class="recipe_title"> POUR YOURSELF <br> A <br> QUARANTINI</p>
</b-col> </b-col>
<b-col> <b-col>
<div class="image_container"> <div class="image_container">
<b-img class="img-fluid" id="anisecup" src="media/magiun2/anise_cup.jpeg"> </b-img> <b-img class="img-fluid" id="photo" src="media/magiun2/anise_cup.jpeg"> </b-img>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col> <b-col>
<div class="recipe"> <div class="recipe">
<p> <p>In a mid-sized pan, pour 1L of dark/organic apple juice, or apple cider. Add 2-3 cm raw ginger in thin slices. Add 1 star anise, 3 black peppercorns, 3 whole cloves, and 1 cinnamon stick (or ground). Heat the mix, but don't let it boil.</p>
In a mid-sized pan, pour 1L of dark/organic apple juice, or apple cider. Add 2-3 cm raw ginger in thin slices. Add 1 star anise, 3 black peppercorns, 3 whole cloves, and 1 cinnamon stick (or ground). Heat the mix, but don't let it boil.</p> <p>The recipe calls for 400ml of brown rum (I used Kraken, which is nice and spicy already). I used about 200ml, halved the recipe, and ended up adding too much anise in relation, don't recommend, it becomes too licorice-y.</p>
<p> <p>You can make it right before you need it and as much as you need, or store it in the fridge.</p>
The recipe calls for 400ml of brown rum (I used Kraken, which is nice and spicy already). I used about 200ml, halved the recipe, and ended up adding too much anise in relation, don't recommend, it becomes too licorice-y. <p>Optional adaptation: Start the other way around, and add all the spices to the rum, instead of the apple juice.</p>
You can make it right before you need it and as much as you need, or store it in the fridge.</p> <p>My family has a wide range of likes and dislikes and I kept this in mind too much. Mom is on a low carb diet to balance her insulin levels, so I replaced apple juice with zero sugar ginger ale, served cold. My sister doesn't like warm alcoholic drinks, nor ginger. So she got plain cold spiced rum (already infused with ginger, I hoped she wouldn't notice and she didn't). Her boyfriend appreciates fine liquors, so I added a double dose of rum to his mix. In the end, the original recipe was so completely warped, that I ended up making it again for myself on December 31st, solo, the way I wanted to make it.</p>
<p>
Optional adaptation: Start the other way around, and add all the spices to the rum, instead of the apple juice.</p>
<p>
My family has a wide range of likes and dislikes and I kept this in mind too much. Mom is on a low carb diet to balance her insulin levels, so I replaced apple juice with zero sugar ginger ale, served cold. My sister doesn't like warm alcoholic drinks, nor ginger. So she got plain cold spiced rum (already infused with ginger, I hoped she wouldn't notice and she didn't). Her boyfriend appreciates fine liquors, so I added a double dose of rum to his mix. In the end, the original recipe was so completely warped, that I ended up making it again for myself on December 31st, solo, the way I wanted to make it.</p>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
<b-col class="recipe_block">
<b-col md="4" offset-md="1" class="recipe_block">
<b-row> <b-row>
<b-col> <b-col>
<p class="recipe_title">CHOCOLATE COVERED <br>A N Y T H I N G</p> <p class="recipe_title">CHOCOLATE COVERED <br>A N Y T H I N G</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col> <b-col>
<b-img class="img-fluid" id="knife" src="media/magiun2/chocolate.jpg"> </b-img> <b-img class="img-fluid" id="photo" src="media/magiun2/chocolate.jpg"> </b-img>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col> <b-col>
<div class="recipe"> <div class="recipe">
<p>Ingredients<br>
<p>
Ingredients<br>
- One 100g bar of dark chocolate (72-85%)<br> - One 100g bar of dark chocolate (72-85%)<br>
- About 150g of cut up pieces of dried fruit <br> - About 150g of cut up pieces of dried fruit<br></p>
</p>
<p>Adaptation<br> <p>Adaptation<br>
- 75g<br> - 75g<br>
- 100g of anything that tastes great with chocolate!</p> - 100g of anything that tastes great with chocolate!</p>
<p> <p>Needed: small wooden spoon, chopsticks.</p>
Needed: small wooden spoon, chopsticks.</p> <p>Cut the candied ginger, dried fruit, raisins, nuts, etc. Put a large baking sheet on your counter (place it on a tray or oven rack, so you can move it).</p>
<p> <p>Place a small, sturdy ceramic bowl inside a pan with water. Use the burner that's closest to your working area. Bring to a boil and let it simmer low. Break the chocolate into pieces and add to the bowl. Stir with a small wooden spoon until it's all evenly melted.</p>
<p>Throw a couple pieces of fruit/nuts into the chocolate and make sure they're fully covered. Use chopsticks to retrieve them, let the excess drip back into the bowl. Lay the candy on the baking sheet, leave a bit of space in between. If you have any chocolate left at the end, you can drip it in a fun shape. When you're all done, place the sheet in the fridge for about 30min or until hard.</p>
Cut the candied ginger, dried fruit, raisins, nuts, etc. Put a large baking sheet on your counter (place it on a tray or oven rack, so you can move it).</p>
<p>
Place a small, sturdy ceramic bowl inside a pan with water. Use the burner that's closest to your working area. Bring to a boil and let it simmer low. Break the chocolate into pieces and add to the bowl. Stir with a small wooden spoon until it's all evenly melted.</p>
<p>
Throw a couple pieces of fruit/nuts into the chocolate and make sure they're fully covered. Use chopsticks to retrieve them, let the excess drip back into the bowl. Lay the candy on the baking sheet, leave a bit of space in between. If you have any chocolate left at the end, you can drip it in a fun shape. When you're all done, place the sheet in the fridge for about 30min or until hard.</p>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
</b-col>
</b-row> </b-row>
</b-container> </b-container>
</template> </template>
<script> <script>

@ -9,11 +9,13 @@
font-family: 'Semi Light Dots'; font-family: 'Semi Light Dots';
src: url('../../fonts/AC1-SemiLightDots.otf'); src: url('../../fonts/AC1-SemiLightDots.otf');
} }
@font-face {
font-family: 'ED Regular';
src: url('../../fonts/ED-Regular.otf');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: white; background-color: transparent;
} }
.container_width { .container_width {
@ -21,14 +23,12 @@
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
} }
a { a {
@ -36,18 +36,21 @@ a {
} }
.content { .content {
padding-right: 50px; /*padding-right: 50px;*/
padding-top: 40px; /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'Happy Times';
font-size: 15px; font-size: 18px;
padding-bottom: 40px; line-height: 24px;
padding-left: 60px; /*padding-bottom: 40px;*/
color: #1B75BC; color: #1B75BC;
text-align: left; text-align: left;
} }
.controls { .controls {
margin-top: 60px; padding-top: 12px;
height: 120px;
z-index: 1;
position: relative;
} }
.title_story { .title_story {
@ -58,41 +61,62 @@ a {
text-align: center; text-align: center;
} }
.image_container { .arrows {
font-size: 80px;
font-family: 'Semi Light Dots', sans-serif;
top: 36px;
color: #FA00FF;
vertical-align: top;
position: fixed;
overflow: hidden;
}
padding-top: 10px; .arrows a {
display: block;
} }
.author {
font-size: 20px; #leftarrow {
font-family: 'Poppins', sans-serif;; float: left;
text-align: center;
color: #FA00FF; color: #FA00FF;
} }
.image_container img { #rightarrow {
max-width: 80%; float: right;
margin-bottom: 10px; color: #FA00FF;
} }
.small_icon { .image_container {
max-width: 20%; padding-top: 5px;
padding-top: 100px; }
.photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%;
max-width: 100%;
padding: 12px;
} }
.zoom {
max-width: 60%; .img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
.author {
font-size: 20px;
font-family: 'ED-regular', sans-serif;;
text-align: center;
color: #FA00FF;
} }
#knife { .small_icon {
margin-top: 10px; max-width: 60%;
margin-left: 40px; padding-top: 100px;
margin-bottom: 30px;
} }
#knifeillu { .zoom {
margin-left: 40px; max-width: 100%;
margin-bottom: 0px;
} }
@media (max-width: 575px){ @media (max-width: 575px){
@ -101,10 +125,10 @@ a {
} }
.title_story { .title_story {
font-size: 30px; font-size: 48px;
} }
.author { .author {
font-size: 15px; font-size: 21px;
} }
} }
@ -113,19 +137,17 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row class="controls">
<b-col md="2" class="controls"> <b-col md="12" class="arrows">
<p>xxxxxxxxxxx</p> <a href="/" id="leftarrow"></a>
</b-col> <a href="/simmered" id="rightarrow"></a>
<b-col md="2" offset-md="8" class="controls">
<p>xxxxxxxxxxx</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="4"> <b-col md="4">
<b-row> <b-row>
<b-col md="10" offset-md="3"> <b-col md="6" offset-md="3">
<div class="zoom"> <div class="zoom">
<b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/knife.png"> </b-img> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/knife.png"> </b-img>
</div> </div>
@ -165,7 +187,7 @@ My parents emptied out the house of my grandparents and it got sold. I kept the
<b-container fluid> <b-container fluid>
<div class="image_container"> <div class="image_container">
<b-img class="img-fluid" id="knife" src="media/knife/My_Knife.jpg"> </b-img> <b-img class="photo" src="media/knife/My_Knife.jpg"> </b-img>
</div> </div>

@ -5,10 +5,17 @@
font-family: 'Happy Times'; font-family: 'Happy Times';
src: url('../../fonts/happy-times-NG_regular_master.otf'); 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');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: white; background-color: transparent;
} }
.container_width { .container_width {
@ -16,14 +23,12 @@
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
} }
a { a {
@ -31,37 +36,75 @@ a {
} }
.content { .content {
padding-right: 50px; /*padding-right: 50px;*/
padding-top: 40px; /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'Happy Times';
font-size: 15px; font-size: 18px;
padding-bottom: 40px; line-height: 24px;
padding-left: 60px; /*padding-bottom: 40px;*/
color: #1B75BC; color: #1B75BC;
text-align: left; text-align: left;
} }
.controls { .controls {
margin-top: 60px; padding-top: 12px;
height: 120px;
z-index: 1;
position: relative;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Semi Light Dots', sans-serif;
padding-top: 20px; padding-top: 20px;
color: #FA00FF; color: #FA00FF;
text-align: center; text-align: center;
} }
.image_container { .arrows {
font-size: 80px;
font-family: 'Semi Light Dots', sans-serif;
top: 36px;
color: #FA00FF;
vertical-align: top;
position: fixed;
overflow: hidden;
}
.arrows a {
display: block;
}
#leftarrow {
float: left;
color: #FA00FF;
}
#rightarrow {
float: right;
color: #FA00FF;
}
.image_container {
padding-top: 5px; padding-top: 5px;
} }
.photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%;
max-width: 100%;
padding: 12px;
}
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'ED-regular', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF; color: #FA00FF;
} }
@ -73,7 +116,7 @@ a {
} }
.zoom { .zoom {
max-width: 60%; max-width: 100%;
} }
@media (max-width: 575px){ @media (max-width: 575px){
@ -82,10 +125,10 @@ a {
} }
.title_story { .title_story {
font-size: 30px; font-size: 48px;
} }
.author { .author {
font-size: 15px; font-size: 21px;
} }
} }
@ -94,19 +137,17 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row class="controls">
<b-col md="2" class="controls"> <b-col md="12" class="arrows">
<p>xxxxxxxxxxx</p> <a href="/whatwecan" id="leftarrow"></a>
</b-col> <a href="/anise" id="rightarrow"></a>
<b-col md="2" offset-md="8" class="controls">
<p>xxxxxxxxxxx</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="4"> <b-col md="4">
<b-row> <b-row>
<b-col md="10" offset-md="3"> <b-col md="6" offset-md="3">
<div class="zoom"> <div class="zoom">
<b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee.png"> </b-img>
</div> </div>
@ -129,7 +170,7 @@ a {
<div class='content'> <div class='content'>
<p>Have You Eaten Yet? <br> <p><em>Have You Eaten Yet?</em><br>
is a Chinese greeting, a way to ask if youre well. </p> is a Chinese greeting, a way to ask if youre well. </p>
<p> <p>
In the warm season of my first culture shock, I ate things I am not proud of. I prowled the streets for dangerous food in the most informal of settings. The more closely a restaurant resembled a crack den, the stronger its seductive pull. I slipped into grubby roadside shacks to gobble up chicken hearts with chives. Drunk on sorghum liquor, Id stop at informal late-night barbecues for grilled eggplant and squid, eaten hunched over on a pink plastic stool on the sidewalk, watching the gamblers play.</p> In the warm season of my first culture shock, I ate things I am not proud of. I prowled the streets for dangerous food in the most informal of settings. The more closely a restaurant resembled a crack den, the stronger its seductive pull. I slipped into grubby roadside shacks to gobble up chicken hearts with chives. Drunk on sorghum liquor, Id stop at informal late-night barbecues for grilled eggplant and squid, eaten hunched over on a pink plastic stool on the sidewalk, watching the gamblers play.</p>

@ -5,10 +5,17 @@
font-family: 'Happy Times'; font-family: 'Happy Times';
src: url('../../fonts/happy-times-NG_regular_master.otf'); 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');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: white; background-color: transparent;
} }
.container_width { .container_width {
@ -16,14 +23,12 @@
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
} }
a { a {
@ -31,66 +36,103 @@ a {
} }
.content { .content {
padding-right: 50px; /*padding-right: 50px;*/
padding-top: 40px; /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'Happy Times';
font-size: 15px; font-size: 18px;
padding-bottom: 40px; line-height: 24px;
padding-left: 60px; /*padding-bottom: 40px;*/
color: #1B75BC; color: #1B75BC;
text-align: left; text-align: left;
} }
.controls { .controls {
margin-top: 60px; padding-top: 12px;
height: 120px;
z-index: 1;
position: relative;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Semi Light Dots', sans-serif;
padding-top: 20px; padding-top: 20px;
color: #FA00FF; color: #FA00FF;
text-align: center; text-align: center;
} }
.arrows {
font-size: 80px;
font-family: 'Semi Light Dots', sans-serif;
top: 36px;
color: #FA00FF;
vertical-align: top;
position: fixed;
overflow: hidden;
}
.arrows a {
display: block;
}
#leftarrow {
float: left;
color: #FA00FF;
}
#rightarrow {
float: right;
color: #FA00FF;
}
.image_container { .image_container {
padding-top: 5px;
}
.photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%;
max-width: 100%;
padding: 12px;
}
padding-top: 10px; .img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'ED-regular', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF; color: #FA00FF;
} }
.image_container img { .dialogue {
max-width: 80% /*font-family: 'ED-Regular', sans-serif;*/
margin-left: 36px;
} }
.small_icon { .small_icon {
max-width: 60%; max-width: 60%;
padding-top: 100px; padding-top: 100px;
} }
.zoom { .zoom {
max-width: 60%; max-width: 100%;
} }
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
} }
.title_story { .title_story {
font-size: 30px; font-size: 48px;
} }
.author { .author {
font-size: 15px; font-size: 21px;
} }
} }
@ -99,18 +141,17 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row class="controls">
<b-col md="2" class="controls"> <b-col md="12" class="arrows">
<p>xxxxxxxxxxx</p> <a href="/soulsoup" id="leftarrow"></a>
</b-col> <a href="/whatwecan" id="rightarrow"></a>
<b-col md="2" offset-md="8" class="controls">
<p>xxxxxxxxxxx</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="4"> <b-col md="4">
<b-row> <b-row>
<b-col md="10" offset-md="3"> <b-col md="6" offset-md="3">
<div class="zoom"> <div class="zoom">
<b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone.png"> </b-img> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone.png"> </b-img>
</div> </div>
@ -132,43 +173,44 @@ a {
<b-col md="5"> <b-col md="5">
<div class='content'> <div class='content'>
<p> <p class="monologue">
Two tablespoons olive oil, plus extra<br> Two tablespoons olive oil, plus extra<br>
his hair was soft and silvery<br> <span class="dialogue">his hair was soft and silvery</span><br>
three pounds yellow onions peeled and sliced into half moons<br> three pounds yellow onions peeled and sliced into half moons<br>
his hands moved gracefully across the piano<br> <span class="dialogue">his hands moved gracefully across the piano</span><br>
sea salt and ground black pepper, to taste<br> sea salt and ground black pepper, to taste<br>
he married the wrong woman<br>
<span class="dialogue">he married the wrong woman</span><br>
one tablespoon thyme leaves, minced<br> one tablespoon thyme leaves, minced<br>
I wouldnt be here if he hadnt<br> <span class="dialogue">I wouldnt be here if he hadnt</span><br>
one bay leaf<br> one bay leaf<br>
most days she didnt know who he was<br> <span class="dialogue">most days she didnt know who he was</span><br>
one clove of garlic, minced<br> one clove of garlic, minced<br>
the lockdown put an end to his daily walks<br> <span class="dialogue">the lockdown put an end to his daily walks</span><br>
one tablespoon tomato paste<br> one tablespoon tomato paste<br>
he directed operas in the eighties<br> <span class="dialogue">he directed operas in the eighties</span><br>
one 12 cups French lentils, rinsed<br> one 12 cups French lentils, rinsed<br>
he spent his 93rd year watching soccer games alone<br> <span class="dialogue">he spent his 93rd year watching soccer games alone</span><br>
one 12 tablespoons sherry/balsamic vinegar<br> one 12 tablespoons sherry/balsamic vinegar<br>
hoping to hear from us<br> <span class="dialogue">hoping to hear from us</span><br>
one 12 tablespoons gluten-free tamari soy sauce<br> one 12 tablespoons gluten-free tamari soy sauce<br>
we rarely called<br> <span class="dialogue">we rarely called</span><br>
five cups vegetable stock, plus extra<br> five cups vegetable stock, plus extra<br>
I should have called<br> <span class="dialogue">I should have called</span><br>
two cups water<br> two cups water<br>
I should have called every day or moved back home<br> <span class="dialogue">I should have called every day or moved back home</span><br>
two cloves of garlic, peeled and smashed<br> two cloves of garlic, peeled and smashed<br>
when I come back to the kitchen after hanging up the phone<br> <span class="dialogue">when I come back to the kitchen after hanging up the phone</span><br>
one 12 pound Yukon gold potatoes, peeled and chopped<br> one 12 pound Yukon gold potatoes, peeled and chopped<br>
the lentils are sticking to the bottom of the pot<br> <span class="dialogue">the lentils are sticking to the bottom of the pot</span><br>
four cups cauliflower florets (from approximately 12 a large head)<br> four cups cauliflower florets (from approximately 12 a large head)<br>
Im turning the wooden spoon mechanically<br> <span class="dialogue">Im turning the wooden spoon mechanically</span><br>
four tablespoons vegan butter, at room temperature<br> four tablespoons vegan butter, at room temperature<br>
hes dead, I mumble<br> <span class="dialogue">hes dead, I mumble</span><br>
12 cup unsweetened non-dairy milk<br> 12 cup unsweetened non-dairy milk<br>
it isnt dead says Witold, just a little burnt<br> <span class="dialogue">it isnt dead says Witold, just a little burnt</span><br>
one tablespoon nutritional yeast<br> one tablespoon nutritional yeast<br>
no, hes dead, hes dead,<br> <span class="dialogue">no, hes dead, hes dead,</span><br>
sea salt and ground black pepper, to taste.</p> sea salt and ground black pepper, to taste.</p>
</div> </div>
</b-col> </b-col>

@ -5,10 +5,17 @@
font-family: 'Happy Times'; font-family: 'Happy Times';
src: url('../../fonts/happy-times-NG_regular_master.otf'); 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');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: white; background-color: transparent;
} }
.container_width { .container_width {
@ -16,14 +23,12 @@
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
} }
a { a {
@ -31,55 +36,87 @@ a {
} }
.content { .content {
padding-right: 50px; /*padding-right: 50px;*/
padding-top: 40px; /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'Happy Times';
font-size: 15px; font-size: 18px;
padding-bottom: 40px; line-height: 24px;
padding-left: 60px; /*padding-bottom: 40px;*/
color: #1B75BC; color: #1B75BC;
text-align: left; text-align: left;
} }
.controls { .controls {
margin-top: 60px; padding-top: 12px;
height: 120px;
z-index: 1;
position: relative;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Semi Light Dots', sans-serif;
padding-top: 20px; padding-top: 20px;
color: #FA00FF; color: #FA00FF;
text-align: center; text-align: center;
} }
.arrows {
font-size: 80px;
font-family: 'Semi Light Dots', sans-serif;
top: 36px;
color: #FA00FF;
vertical-align: top;
position: fixed;
overflow: hidden;
}
.arrows a {
display: block;
}
#leftarrow {
float: left;
color: #FA00FF;
}
#rightarrow {
float: right;
color: #FA00FF;
}
.image_container { .image_container {
padding-top: 5px;
}
padding-top: 10px; .photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%;
max-width: 100%;
padding: 12px;
} }
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'ED-regular', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF; color: #FA00FF;
} }
.image_container img {
max-width: 80%;
margin-bottom: 10px;
}
.small_icon { .small_icon {
max-width: 20%;
padding-top: 100px;
}
.zoom {
max-width: 60%; max-width: 60%;
padding-top: 100px;
} }
#knife { .zoom {
margin-top: 30px; max-width: 100%;
} }
@media (max-width: 575px){ @media (max-width: 575px){
@ -88,32 +125,33 @@ a {
} }
.title_story { .title_story {
font-size: 30px; font-size: 48px;
} }
.author { .author {
font-size: 15px; font-size: 21px;
} }
} }
</style> </style>
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/knife" id="leftarrow"></a>
<a href="/soulsoup" id="rightarrow"></a>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="4"> <b-col md="4">
<b-row> <b-row>
<b-col md="10" offset-md="3"> <b-col md="6" offset-md="3">
<div class="zoom"> <div class="zoom">
<b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini.png"></b-img> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini.png"></b-img>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="title_story">Simmered Egg <br>(Hakka style)</p> <p class="title_story">Simmered Egg <br>(Hakka style)</p>
@ -122,84 +160,40 @@ a {
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">an essay by Dorothy Cheung</p> <p class="author">an essay by Dorothy Cheung</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
<b-col md="4"> <b-col md="4">
<div class='content'> <div class='content'>
<p>Thanks to the pandemic, I am spending much more time in Hong Kong. After losing my maternal grandmother earlier last year, I feel the urge to visit my paternal grandma more often but not too often, at least not during another wave of outbreak. Then I found one way to make her (and me) happy, apart from visiting her in-person to learn cooking from her whenever I visit and try to cook when I get home.</p>
<p>Thanks to the pandemic, I am spending much more time in Hong Kong. After losing my <p> My paternal family is Hakka Chinese; literally, it means guest people. The only thing is that we are self-invited. Historians believe that Hakka people have been migrated for a few times since 3rd century BC before they settled in Southern China. For my grandparents, they moved even further to Hong Kong.</p>
maternal grandmother earlier last year, I feel the urge to visit my paternal grandma more often <p>According to my grandma, as Hakka people have always been unwelcomed, we could only take up hilly and infertile fields. That is why most Hakka dishes consist of pickles, organ meat and coarse vegetables (but of course, at home, we do eat a lot of Cantonese food too). Even so, my grandmother sometimes cooks a dish that doesnt fall into any of these categories, and she named it as Simmered Egg - minced pork, diced shiitake mushroom, chopped spring onion with fluffy egg. It is so soft, comforting, yet somehow delicate.</p>
but not too often, at least not during another wave of outbreak. Then I found one way to make <p> In one of the visits, I urged her to show me how to make it. When she was pan-frying the minced meat and shiitake mushroom, I asked her if Simmered Egg is a Hakka dish at all No, of course not. Your grandfather used to work in a bookshop, and his Shanghainese boss once invited us to his place for dinner. I liked this dish, so I tried to cook this at home. A few weeks later, I wanted to cook this for my partner, and I tried to search Simmered Egg online, I could not find anything, if not anything related to Shanghainese cuisine. In the end, I just vaguely followed her instruction and made use of fridge leftovers, replacing pork with tofu, diced carrot and some dried Yunnan porcini I ordered the other day. It did not taste like anything she taught me, and at this point, I doubt if it has anything to do with Shanghainese cuisine at all.</p>
her (and me) happy, apart from visiting her in-person to learn cooking from her whenever I <p>After all, Simmered Egg is an adaptation made with the spirit of being a Hakka woman - adapting to changes (and leftover food).</p>
visit and try to cook when I get home.</p>
<p>
My paternal family is Hakka Chinese; literally, it means guest people. The only thing is that we
are self-invited. Historians believe that Hakka people have been migrated for a few times since
3rd century BC before they settled in Southern China. For my grandparents, they moved even
further to Hong Kong.</p>
<p>
According to my grandma, as Hakka people have always been unwelcomed, we could only take
up hilly and infertile fields. That is why most Hakka dishes consist of pickles, organ meat and
coarse vegetables (but of course, at home, we do eat a lot of Cantonese food too). Even so, my
grandmother sometimes cooks a dish that doesnt fall into any of these categories, and she
named it as Simmered Egg - minced pork, diced shiitake mushroom, chopped spring onion
with fluffy egg. It is so soft, comforting, yet somehow delicate.</p>
<p>
In one of the visits, I urged her to show me how to make it. When she was pan-frying the
minced meat and shiitake mushroom, I asked her if Simmered Egg is a Hakka dish at all No,
of course not. Your grandfather used to work in a bookshop, and his Shanghainese boss once
invited us to his place for dinner. I liked this dish, so I tried to cook this at home.
A few weeks later, I wanted to cook this for my partner, and I tried to search Simmered Egg
online, I could not find anything, if not anything related to Shanghainese cuisine. In the end, I
just vaguely followed her instruction and made use of fridge leftovers, replacing pork with tofu,
diced carrot and some dried Yunnan porcini I ordered the other day. It did not taste like
anything she taught me, and at this point, I doubt if it has anything to do with Shanghainese
cuisine at all.</p>
<p>
After all, Simmered Egg is an adaptation made with the spirit of being a Hakka woman -
adapting to changes (and leftover food). </p>
</div> </div>
</b-col> </b-col>
<b-col md="4"> <b-col md="4">
<b-container fluid> <b-container fluid>
<div class="image_container"> <div class="image_container">
<b-row> <b-row>
<b-col md="10" offset-md="2"> <b-col md="10" offset-md="2">
<b-img class="img-fluid" id="knife" src="media/simmered/Simmeregg00.png"> </b-img> <b-img class="photo" src="media/simmered/Simmeregg00.png"> </b-img>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="10" offset-md="2"> <b-col md="10" offset-md="2">
<b-img class="img-fluid" id="knife" src="media/simmered/Simmeregg01.png"> </b-img> <b-img class="photo" src="media/simmered/Simmeregg01.png"> </b-img>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="10" offset-md="2"> <b-col md="10" offset-md="2">
<b-img class="img-fluid" id="knife" src="media/simmered/Simmeregg02.png"> </b-img> <b-img class="photo" src="media/simmered/Simmeregg02.png"> </b-img>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
</b-container> </b-container>
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>
</template> </template>

@ -5,10 +5,17 @@
font-family: 'Happy Times'; font-family: 'Happy Times';
src: url('../../fonts/happy-times-NG_regular_master.otf'); 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');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: white; background-color: transparent;
} }
.container_width { .container_width {
@ -16,14 +23,12 @@
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
} }
a { a {
@ -31,37 +36,75 @@ a {
} }
.content { .content {
padding-right: 50px; /*padding-right: 50px;*/
padding-top: 40px; /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'Happy Times';
font-size: 15px; font-size: 18px;
padding-bottom: 40px; line-height: 24px;
padding-left: 60px; /*padding-bottom: 40px;*/
color: #1B75BC; color: #1B75BC;
text-align: left; text-align: left;
} }
.controls { .controls {
margin-top: 60px; padding-top: 12px;
height: 120px;
z-index: 1;
position: relative;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Semi Light Dots', sans-serif;
padding-top: 20px; padding-top: 20px;
color: #FA00FF; color: #FA00FF;
text-align: center; text-align: center;
} }
.image_container { .arrows {
font-size: 80px;
font-family: 'Semi Light Dots', sans-serif;
top: 36px;
color: #FA00FF;
vertical-align: top;
position: fixed;
overflow: hidden;
}
.arrows a {
display: block;
}
#leftarrow {
float: left;
color: #FA00FF;
}
#rightarrow {
float: right;
color: #FA00FF;
}
.image_container {
padding-top: 5px; padding-top: 5px;
} }
.photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%;
max-width: 100%;
padding: 12px;
}
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'ED-regular', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF; color: #FA00FF;
} }
@ -73,7 +116,7 @@ a {
} }
.zoom { .zoom {
max-width: 60%; max-width: 100%;
} }
@media (max-width: 575px){ @media (max-width: 575px){
@ -82,10 +125,10 @@ a {
} }
.title_story { .title_story {
font-size: 30px; font-size: 48px;
} }
.author { .author {
font-size: 15px; font-size: 21px;
} }
} }
@ -94,19 +137,17 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row> <b-row class="controls">
<b-col md="2" class="controls"> <b-col md="12" class="arrows">
<p>xxxxxxxxxxx</p> <a href="/simmered" id="leftarrow"></a>
</b-col> <a href="/phone" id="rightarrow"></a>
<b-col md="2" offset-md="8" class="controls">
<p>xxxxxxxxxxx</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="4"> <b-col md="4">
<b-row> <b-row>
<b-col md="10" offset-md="3"> <b-col md="6" offset-md="3">
<div class="zoom"> <div class="zoom">
<b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower.png"> </b-img> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower.png"> </b-img>
</div> </div>

@ -5,10 +5,17 @@
font-family: 'Happy Times'; font-family: 'Happy Times';
src: url('../../fonts/happy-times-NG_regular_master.otf'); 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');
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: white; background-color: transparent;
} }
.container_width { .container_width {
@ -16,14 +23,12 @@
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
} }
a { a {
@ -31,37 +36,75 @@ a {
} }
.content { .content {
padding-right: 50px; /*padding-right: 50px;*/
padding-top: 40px; /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'Happy Times';
font-size: 15px; font-size: 18px;
padding-bottom: 40px; line-height: 24px;
padding-left: 60px; /*padding-bottom: 40px;*/
color: #1B75BC; color: #1B75BC;
text-align: left; text-align: left;
} }
.controls { .controls {
margin-top: 60px; padding-top: 12px;
height: 120px;
z-index: 1;
position: relative;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Work Sans', sans-serif; font-family: 'Semi Light Dots', sans-serif;
padding-top: 20px; padding-top: 20px;
color: #FA00FF; color: #FA00FF;
text-align: center; text-align: center;
} }
.image_container { .arrows {
font-size: 80px;
font-family: 'Semi Light Dots', sans-serif;
top: 36px;
color: #FA00FF;
vertical-align: top;
position: fixed;
overflow: hidden;
}
.arrows a {
display: block;
}
#leftarrow {
float: left;
color: #FA00FF;
}
#rightarrow {
float: right;
color: #FA00FF;
}
.image_container {
padding-top: 5px; padding-top: 5px;
} }
.photo {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: auto;
max-height: 100%;
max-width: 100%;
padding: 12px;
}
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Poppins', sans-serif;; font-family: 'ED-regular', sans-serif;;
text-align: center; text-align: center;
color: #FA00FF; color: #FA00FF;
} }
@ -73,7 +116,7 @@ a {
} }
.zoom { .zoom {
max-width: 60%; max-width: 100%;
} }
@media (max-width: 575px){ @media (max-width: 575px){
@ -82,10 +125,10 @@ a {
} }
.title_story { .title_story {
font-size: 30px; font-size: 48px;
} }
.author { .author {
font-size: 15px; font-size: 21px;
} }
} }
@ -94,19 +137,18 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row>
<b-col md="2" class="controls"> <b-row class="controls">
<p>xxxxxxxxxxx</p> <b-col md="12" class="arrows">
</b-col> <a href="/phone" id="leftarrow"></a>
<b-col md="2" offset-md="8" class="controls"> <a href="/lychee" id="rightarrow"></a>
<p>xxxxxxxxxxx</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col md="4"> <b-col md="4">
<b-row> <b-row>
<b-col md="10" offset-md="3"> <b-col md="6" offset-md="3">
<div class="zoom"> <div class="zoom">
<b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes.png"> </b-img> <b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes.png"> </b-img>

Loading…
Cancel
Save