added illustrations

master
alicestrt 2 years ago
parent abcafa79f4
commit 065b5194a2

Binary file not shown.

After

Width:  |  Height:  |  Size: 567 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 535 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 385 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 700 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 571 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 493 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

@ -26,17 +26,7 @@
background-color: transparent;
}
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
body.loaded .fadein {
opacity: 1;
}
.container_width {
max-width: 100%;
@ -143,9 +133,20 @@ visibility: hidden;
max-height: 100%;
max-width: 100%;
padding: 12px;
margin-top: 40%;
margin-top: 150px;
}
#illustration {
width: 80%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
@ -220,7 +221,7 @@ visibility: hidden;
<b-col md="4" class="color_back">
<b-row>
<b-col md="12">
<p class="title_story">[each] TUESDAY AFTER<br>NOON</p>
<p class="title_story">[each] TUESDAY AFTERNOON</p>
</b-col>
</b-row>
<b-row>
@ -285,6 +286,11 @@ A concluding consideration: its a hot paradox. The practice of collecting cas
<p id="onhover_right">Yes, Chef</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/bananas_small.png"></b-img>
</b-col>
</b-row>
</b-col>
</b-row>

@ -54,7 +54,7 @@ a {
}
.title_story {
font-size: 48px;
font-size: 35px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
padding-top: 70px;
@ -62,7 +62,7 @@ a {
text-align: left;
}
.author {
font-size: 36px;
font-size: 20px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
@ -117,6 +117,17 @@ a {
padding-top: 5px;
}
#illustration {
width: 80%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
.small_icon {
@ -188,7 +199,7 @@ a {
<b-row>
<b-col md="12">
<p class="title_story"><span class="purple">Cooking Apart Together:</span> <span class="pink">Dinner</span><span class="purple"> for Breakfast & Autumn</span><span class="pink"> for Spring</span>
<p class="title_story"><span class="purple">Cooking Apart Together:</span> <span class="pink"> Dinner</span><span class="purple"> for Breakfast & Autumn</span><span class="pink"> for Spring</span>
</p>
</b-col>
</b-row>
@ -319,6 +330,11 @@ In our house we all eat different foods for dinner. Usually my partner has some
<p id="onhover_right">Me, My Mom and Those Three Eggs</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/bowl_small.png"></b-img>
</b-col>
</b-row>
</b-col>
</b-row>

@ -43,7 +43,7 @@ a {
font-size: 16px;
line-height: 24px;
padding-bottom: 40px;
color: #00C4D0;
color: black;
text-align: left;
}
@ -60,7 +60,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
padding-top: 70px;
color: #00C4D0;
color: black;
text-align: left;
}
.author {
@ -68,7 +68,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #00C4D0;
color: black;
}
.arrows {
@ -92,7 +92,17 @@ visibility: hidden;
display: block;
}
#illustration {
width: 80%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
#leftarrow {
float: left;
@ -277,10 +287,15 @@ And buying up our housing stock).<br>
<b-col md="4" class="color_next">
<b-row class="controls">
<b-col md="12" class="arrows">
<router-link to="/" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<router-link to="colophon3" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">Colophon</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/mittens_small.png"></b-img>
</b-col>
</b-row>
</b-col>

@ -43,7 +43,7 @@ a {
font-size: 18px;
line-height: 24px;
padding-bottom: 40px;
color: #7C9C21;
color: black;
text-align: left;
}
@ -60,7 +60,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
padding-top: 70px;
color: #7C9C21;
color: black;
text-align: left;
}
.author {
@ -68,7 +68,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #7C9C21;
color: black;
}
.arrows {
@ -119,6 +119,17 @@ visibility: hidden;
padding-top: 5px;
}
#illustration {
width: 80%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
.color_back {
background-color: #EDECFF;
@ -213,6 +224,11 @@ I still buy olives on my way home.
<p id="onhover_right">Spoiled</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/olives_small.png"></b-img>
</b-col>
</b-row>
</b-col>
</b-row>

@ -43,7 +43,7 @@ a {
font-size: 18px;
line-height: 24px;
padding-bottom: 40px;
color: #0085FF;
color: black;
text-align: left;
}
@ -60,7 +60,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
padding-top: 70px;
color: #0085FF;
color: black;
text-align: left;
}
.author {
@ -68,7 +68,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #0085FF;
color: black;
}
.arrows {
@ -130,7 +130,17 @@ visibility: hidden;
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
#illustration {
width: 80%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
.small_icon {
max-width: 60%;
@ -221,6 +231,11 @@ Don't get me wrong, I dearly love being a chef and the starched-white aesthetics
<p id="onhover_right">One Way with Potatoes</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/popcorn_small.png"></b-img>
</b-col>
</b-row>
</b-col>
</b-row>

@ -26,6 +26,17 @@
padding-top: 70px;
}
#illustration {
width: 80%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
a:hover {
color: hotpink;
@ -44,7 +55,7 @@ a {
font-size: 18px;
line-height: 24px;
padding-bottom: 40px;
color: #AC5300;
color: black;
text-align: left;
}
@ -61,7 +72,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
padding-top: 70px;
color: #AC5300;
color: black;
text-align: left;
}
.author {
@ -69,7 +80,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #AC5300;
color: black;
}
.arrows {
@ -239,6 +250,11 @@ hot as it goes, until their edges crisp.
<p id="onhover_right">Cooking Apart Together</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/potato_small.png"></b-img>
</b-col>
</b-row>
</b-col>
</b-row>

@ -43,7 +43,7 @@ a {
font-size: 18px;
line-height: 24px;
padding-bottom: 40px;
color: #FF3D00;
color: black;
text-align: left;
}
@ -60,7 +60,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
padding-top: 70px;
color: #FF3D00;
color: black;
text-align: left;
}
.author {
@ -68,7 +68,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #FF3D00;
color: black;
}
.arrows {
@ -128,6 +128,17 @@ visibility: hidden;
background-color: #FBFFF0;
}
#illustration {
width: 100%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
@media (max-width: 575px){
@ -209,6 +220,11 @@ In college, I dont eat omelet anymore. If I dont hear the sound of my moth
<p id="onhover_right">A Jar of Green Olives</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/eggs_small.png"></b-img>
</b-col>
</b-row>
</b-col>
</b-row>
</b-container>

@ -35,6 +35,17 @@ a:hover {
a {
color: gray;
}
#illustration {
width: 100%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
.content {
/*padding-right: 50px;*/
@ -249,6 +260,11 @@ But blandness aside, I like this certainty of a particular food or a recipe that
<p id="onhover_right">Freestyle Platouaș</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/berries_small.png"></b-img>
</b-col>
</b-row>
</b-col>
</b-row>

@ -19,17 +19,7 @@
background-color: transparent;
}
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
body.loaded .fadein {
opacity: 1;
}
.container_width {
max-width: 100%;
@ -56,7 +46,7 @@ a {
font-size: 18px;
line-height: 24px;
padding-bottom: 40px;
color: #7000FF;
color: black;
text-align: left;
}
@ -73,7 +63,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
padding-top: 70px;
color: #7000FF;
color: black;
text-align: left;
}
.author {
@ -81,7 +71,7 @@ a {
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: #7000FF;
color: black;
}
.arrows {
@ -106,7 +96,6 @@ visibility: hidden;
}
#leftarrow {
float: left;
color: black;
@ -128,6 +117,19 @@ visibility: hidden;
margin-top: 60px;
text-align: left;
}
#illustration {
width: 50%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
.image_container {
padding-top: 5px;
}
@ -136,16 +138,10 @@ visibility: hidden;
max-height: 100%;
max-width: 100%;
padding: 12px;
margin-top: 40%;
}
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
margin-top: 150px;
}
.small_icon {
max-width: 60%;
padding-top: 100px;
@ -183,6 +179,11 @@ visibility: hidden;
.photo {
padding-bottom: 40px;
}
#illustration {
width: 60%;
display: block;
}
}
</style>
@ -200,6 +201,8 @@ visibility: hidden;
<p id="onhover_left">A Jar of Green Olives</p>
</b-col>
</b-row>
<b-row>
<b-container fluid>
<div class="image_container">
@ -209,12 +212,17 @@ visibility: hidden;
</div>
</b-container>
</b-row>
</b-col>
<b-col md="4" class="color_back">
<b-row>
<b-col md="12">
<div class="hovering">
<p class="title_story">Spoiled</p>
</div>
</b-col>
</b-row>
<b-row>
@ -223,12 +231,13 @@ visibility: hidden;
</b-col>
</b-row>
<div class='content'>
<p>
I grew up with nannies that would cook and clean for my whole family. I remember sitting around the table with my parents and deciding what we will have prepared for the upcoming week. Aubergine parmigiana? Stuffed chicken? Tomato soup? In those years mom had built a menu of healthy Romanian and international recipes so every combination would be a successful meal. Our nanny would cook Mondays and Thursdays and we had that food for the week. No questions asked. Tuesdays were the best days because it was TV & pizza night. Home-made pizza. Tuesdays made us look more normal to outside families. I loved our nannies but I knew that at one point the spoiled fantasy routine would end.
</p><p>
Moving on your own makes you appreciate your parents fridge more. Where food appears magically without your labor being needed. The rst time I really cooked was in my new apartment in The Netherlands. That first semester of university was a routine of no self-control, pure experimentation, and a long process to finally master my microwave oven. Making food was a task I started to enjoy more and more, transforming into the love affair between procrastination and hunger. Productive procrastination. Cooking also became a comfort. I was reaching for food anytime school was too stressful. When I was scared I cooked. When I was alone I cooked. When I was in doubt I cooked. I can just say that going home to my Eastern European country after 5 months, led people to observe my rounder shape and compliment me on it before saying hello. The unwanted attention spoiled me, but in the wrong way.
Moving on your own makes you appreciate your parents fridge more. Where food appears magically without your labor being needed. The first time I really cooked was in my new apartment in The Netherlands. That first semester of university was a routine of no self-control, pure experimentation, and a long process to finally master my microwave oven. Making food was a task I started to enjoy more and more, transforming into the love affair between procrastination and hunger. Productive procrastination. Cooking also became a comfort. I was reaching for food anytime school was too stressful. When I was scared I cooked. When I was alone I cooked. When I was in doubt I cooked. I can just say that going home to my Eastern European country after 5 months, led people to observe my rounder shape and compliment me on it before saying hello. The unwanted attention spoiled me, but in the wrong way.
</p><p>
What was next to come was a season of what my friends describe as an exaggeration, but as with any diet, people will always have an opinion. More than no bread, no sugars and a lot of avocados, the diet I followed religiously for 2 months got the job done. No sugar. And I mean it. I lost the weight and created a routine for myself, one that didnt please anybody but myself, and the online blogs I was reading. For the first time in my life, I had my structure in how I was cooking and preparing food. I was restricting almost all the intake of what others consider normal student food. I was surviving on loads of meat, salad, and whatever fruits I was allowed to eat so I can get some glucose in my system. I liked the control. The diet was also a reaction to the cultural routine of eating with others. My friends went insane having to make cauli ower rice-no sugar-no lactose-based meals, only for me to be able to attend gatherings. It made my social life quite miserable because googling what drinks are low in calories is not fun. By the way: vodka. Vodka is the answer to that question. After losing my period and making a hole in my budget I realized I need to adapt to a new system of feeding myself, one that embraces my spoiled past and one that makes amends with the control freak chef that I am.
</p><p>
@ -258,6 +267,12 @@ visibility: hidden;
<p id="onhover_right">How to Poach an Egg (Perfectly)</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/vodka_small.png"></b-img>
</b-col>
</b-row>
</b-col>
</b-row>

@ -1,18 +1,5 @@
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../../fonts/happy-times-NG_regular_master.otf');
}
@font-face {
font-family: 'Semi Light Dots';
src: url('../../../fonts/AC1-SemiLightDots.otf');
}
@font-face {
font-family: 'ED Regular';
src: url('../../../fonts/ED-Regular.otf');
}
@font-face {
font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf');
@ -25,31 +12,14 @@
font-weight: 400;
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
* {
border: 0px black solid;
background-color: transparent;
}
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
body.loaded .fadein {
opacity: 1;
}
.container_width {
max-width: 100%;
@ -88,6 +58,18 @@ a {
position: relative;
}
#illustration {
width: 80%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
.title_story {
font-size: 48px;
font-family: 'AUTHENTICSans', sans-serif;
@ -104,6 +86,7 @@ a {
color: black;
}
.arrows {
font-size: 40px;
top: 30px;
@ -285,6 +268,11 @@ Not the usual combinations, but very satisfying for my taste buds and so easy to
<p id="onhover_right">[each] Tuesday Afternoon</p>
</b-col>
</b-row>
<b-row>
<b-col md="4" >
<b-img id="illustration" src="media/illustrations_3/mouse_small.png"></b-img>
</b-col>
</b-row>
</b-col>
</b-row>
</b-container>

Loading…
Cancel
Save