fixed illustration position

master
alicestrt 3 years ago
parent 5458b128f1
commit ea2f994674

@ -11,14 +11,7 @@
src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
}
/*@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}*/
* {
border: 0px black solid;
@ -129,25 +122,16 @@ a {
.photo {
max-height: 100%;
max-width: 100%;
padding: 12px;
margin-top: 150px;
padding: 40px;
}
#illustration {
width: 80%;
float: left;
width: 120%;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
margin-left: 10%;
}
#illustration:hover {
filter: grayscale(0%);
}
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
@ -204,15 +188,11 @@ a {
<p id="onhover_left">Freestyle Platouaș</p>
</b-col>
</b-row>
<b-container fluid>
<div class="image_container">
<b-img class="photo" src="media/sylvie/SIR[PRIZE].png"> </b-img>
</div>
</b-container>
<b-row>
<b-col md="6" offset-md="3" >
<b-img id="illustration" src="media/illustrations_3/bananas_small.png"></b-img>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_back">
@ -274,7 +254,16 @@ The practice of gleaning possesses a charm in chance and a constant in chaos.
A concluding consideration: its a hot paradox. The practice of collecting cast food has allowed me to gulp down and give out food, especially fruits, I previously perceived too pricey to purchase. It has made me feel like a peasant but royally feasting.
</p>
</div>
<b-row>
<b-col md="12">
<div class="image_container">
<b-img class="photo" src="media/sylvie/SIR[PRIZE].png"> </b-img>
</div>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_next">
<b-row class="controls">
@ -283,11 +272,7 @@ 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>

@ -115,14 +115,9 @@ a {
}
#illustration {
width: 80%;
float: left;
width: 120%;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
margin-left: 10%;
}
.small_icon {
@ -188,7 +183,11 @@ a {
<p id="onhover_left">One Way with Potatoes</p>
</b-col>
</b-row>
<b-row>
<b-col md="6" offset-md="3">
<b-img id="illustration" src="media/illustrations_3/bowl_small.png"></b-img>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_back">
@ -210,9 +209,9 @@ a {
<div class='content'>
<p>
<span class="purple"> In extension of our chats</span><span class="pink"> (semi-regular, because, life and the following)</span><span class="purple">, Louisa and I cooked together via video chat, crossing and connecting a great distance over the equator, 9-hour time difference, and opposite seasons. One person shares a recipe, and guides the other through making it. While I harvested kales and other leafy greens in Autumnal Rotterdam, the Netherlands, Louisa sliced carrots in Springy Melbourne, Australia. She also prepared this meal at the end of the day, while I was still gathering myself after a rough night of sleep.</span>
<span class="purple"> In extension of our chats</span><span class="pink"> (semi-regular, because, life and the following)</span><span class="purple">, Louisa and I cooked together via video chat, crossing and connecting a great distance over the equator, 9-hour time difference, and opposite seasons. One person shares a recipe, and guides the other through making it. While I harvested kales and other leafy greens in autumnal Rotterdam, the Netherlands, Louisa sliced carrots in springy Melbourne, Australia. She also prepared this meal at the end of the day, while I was still gathering myself after a rough night of sleep.</span>
</p><p><span class="purple">
In the couple of weeks where Summer turns into Fall, and Spring into Summer on the other end, we do sometimes find some overlap in our days. Similar weather, some sun, some rain, overall more dreary on this end with shorter days. The few late raspberries that I was able to pick due to a bit of late September warmth, are no match by far for the handfuls of berries and luscious plums and peaches that are already in season over there. Peaches! Oh how I'd love to have a peach tree.</span>
In the couple of weeks where summer turns into fall, and spring into summer on the other end, we do sometimes find some overlap in our days. Similar weather, some sun, some rain, overall more dreary on this end with shorter days. The few late raspberries that I was able to pick due to a bit of late September warmth, are no match by far for the handfuls of berries and luscious plums and peaches that are already in season over there. Peaches! Oh how I'd love to have a peach tree.</span>
</p><p><span class="purple">
All poetic virtual traveling aside, as Louisa put it when I proposed the project,</span> <span class="pink"> "Your breakfast can be my dinner and vice versa!!" </span><br><span class="purple">
And so we began.</span>
@ -254,7 +253,7 @@ Conversation, 1hr 21m 22s<br></span>
But we don't have it in season right now, so they didn't have it at the market.</span>
</p><p><span class="pink">
I put two cups of water in a small saucepan and added a heaped teaspoon of powdered vegetable stock in it. (Actually it was marked as "chicken style" vegetable stock which made Inge laugh when I showed her!)</span><span class="purple"> I tried to mimic the broth with the spices, vegetables and herbs I had available. I cut some chili</span> <span class="pink">chilli</span><span class="purple">, garlic, and a small red onion before adding the available vegetables. We talked about what we can grow in the yard this time of year, and found out that early Spring in Melbourne and Autumn in Rotterdam is good for beet leaves, beans, spinach.</span><span class="pink"> While I was waiting for the broth to boil I watched as Inge went down into her garden to pick the vegetables for her own version of the soup.</span>
I put two cups of water in a small saucepan and added a heaped teaspoon of powdered vegetable stock in it. (Actually it was marked as "chicken style" vegetable stock which made Inge laugh when I showed her!)</span><span class="purple"> I tried to mimic the broth with the spices, vegetables and herbs I had available. I cut some chili</span> <span class="pink">chilli</span><span class="purple">, garlic, and a small red onion before adding the available vegetables. We talked about what we can grow in the yard this time of year, and found out that early spring in Melbourne and autumn in Rotterdam is good for beet leaves, beans, spinach.</span><span class="pink"> While I was waiting for the broth to boil I watched as Inge went down into her garden to pick the vegetables for her own version of the soup.</span>
</p><p class="convo">
<span class="purple">
I don't know if I have enough battery, but I'll try to take you outside.<br></span>
@ -325,11 +324,7 @@ 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>

@ -94,15 +94,9 @@ visibility: hidden;
}
#illustration {
width: 80%;
float: left;
width: 100%;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
margin-left: 10%;
}
#leftarrow {
@ -177,7 +171,11 @@ visibility: hidden;
<p id="onhover_left">Spoiled</p>
</b-col>
</b-row>
<b-row>
<b-col md="6" offset-md="3" >
<b-img id="illustration" src="media/illustrations_3/mittens_small.png"></b-img>
</b-col>
</b-row>
</b-col>
@ -294,11 +292,7 @@ And buying up our housing stock).<br>
<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>

@ -116,15 +116,9 @@ a {
}
#illustration {
width: 80%;
float: left;
width: 100%;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
margin-left: 10%;
}
.color_back {
@ -171,7 +165,11 @@ a {
<p id="onhover_left">Me, My Mom and Those Three Eggs</p>
</b-col>
</b-row>
<b-row>
<b-col md="6" offset-md="3">
<b-img id="illustration" src="media/illustrations_3/olives_small.png"></b-img>
</b-col>
</b-row>
</b-col>
@ -220,11 +218,7 @@ 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>

@ -10,15 +10,6 @@
src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
}
/*@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}*/
* {
border: 0px black solid;
background-color: transparent;
@ -127,21 +118,10 @@ a {
padding: 20px;
}
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
#illustration {
width: 80%;
float: left;
width: 120%;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
margin-left: 10%;
}
.small_icon {
@ -198,7 +178,11 @@ a {
<p id="onhover_left">[each] Tuesday Afternoon</p>
</b-col>
</b-row>
<b-row>
<b-col md="6" offset-md="3">
<b-img id="illustration" src="media/illustrations_3/popcorn_small.png"></b-img>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_back">
@ -233,11 +217,7 @@ 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,15 +26,9 @@
}
#illustration {
width: 80%;
float: left;
width: 120%;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
margin-left: 10%;
}
a:hover {
@ -194,7 +188,11 @@ a {
<p id="onhover_left">Yes, Chef</p>
</b-col>
</b-row>
<b-row>
<b-col md="6" offset-md="3" >
<b-img id="illustration" src="media/illustrations_3/potato_small.png"></b-img>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_back">
@ -246,11 +244,7 @@ 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>

@ -124,17 +124,13 @@ visibility: hidden;
background-color: #FBFFF0;
}
#illustration {
width: 100%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
margin-left: 10%;
}
#illustration:hover {
filter: grayscale(0%);
}
@media (max-width: 575px){
@ -171,6 +167,11 @@ visibility: hidden;
<p id="onhover_left">Cooking Apart Together</p>
</b-col>
</b-row>
<b-row>
<b-col md="6" offset-md="3" >
<b-img id="illustration" src="media/illustrations_3/eggs_small.png"></b-img>
</b-col>
</b-row>
</b-col>
@ -216,11 +217,7 @@ 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>

@ -36,15 +36,11 @@ a {
}
#illustration {
width: 100%;
float: left;
width: 120%;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
margin-left: 10%;
}
#illustration:hover {
filter: grayscale(0%);
}
.content {
font-family: 'AUTHENTICSansLight';
@ -131,13 +127,8 @@ a {
.photo {
max-height: 100%;
max-width: 100%;
padding: 12px;
margin-top: 150px;
}
padding: 40px;
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
@ -196,20 +187,12 @@ a {
<p id="onhover_left">Editor's note</p>
</b-col>
</b-row>
<b-row>
<b-col md="12">
<b-container fluid>
<div class="image_container">
<b-img class="photo" src="media/twoberries/oul.png"> </b-img>
</div>
</b-container>
<b-col md="6" offset-md="3" >
<b-img id="illustration" src="media/illustrations_3/berries_small.png"></b-img>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_back">
@ -248,6 +231,19 @@ Being grounded in ones rituals without becoming totally bland is in itself a
But blandness aside, I like this certainty of a particular food or a recipe that can allow you a soothing break. Whether enabling you to again be a five-year-old little girl in your grandmothers kitchen, tackling Matzah balls with a spoon bigger than your own head, or weaving a raft of stability in an ever-changing, ever-menacing new normality. Because food can be great, like that.
</p>
</div>
<b-row>
<b-col md="12">
<b-container fluid>
<div class="image_container">
<b-img class="photo" src="media/twoberries/oul.png"> </b-img>
</div>
</b-container>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_next">
@ -257,11 +253,7 @@ 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>

@ -111,16 +111,12 @@ a {
}
#illustration {
width: 50%;
float: left;
width: 80%;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
margin-left: 10%;
}
#illustration:hover {
filter: grayscale(0%);
}
.image_container {
padding-top: 5px;
@ -129,19 +125,10 @@ a {
.photo {
max-height: 100%;
max-width: 100%;
padding: 12px;
margin-top: 150px;
}
padding: 40px;
.small_icon {
max-width: 60%;
padding-top: 100px;
}
.zoom {
max-width: 100%;
}
.color_back {
background-color: #FBFFF0;
@ -195,17 +182,10 @@ a {
</b-row>
<b-row>
<b-container fluid>
<div class="image_container">
<b-img class="photo" src="media/ana.jpg"> </b-img>
</div>
</b-container>
<b-col md="6" offset-md="3">
<b-img id="illustration" src="media/illustrations_3/vodka_small.png"></b-img>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_back">
@ -250,6 +230,17 @@ a {
</p>
</div>
<b-row>
<b-col md="12">
<div class="image_container">
<b-img class="photo" src="media/ana.jpg"> </b-img>
</div>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_next">
@ -259,11 +250,7 @@ a {
<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>

@ -35,13 +35,8 @@ a {
#illustration {
width: 100%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
margin-left: 10%;
}
.content {
@ -134,21 +129,6 @@ a {
}
.img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
}
.small_icon {
max-width: 60%;
padding-top: 100px;
}
.zoom {
max-width: 100%;
}
.color_back {
background-color: #EDECFF;
}
@ -194,6 +174,12 @@ a {
</b-col>
</b-row>
<b-row>
<b-col md="6" offset-md="3" >
<b-img id="illustration" src="media/illustrations_3/mouse_small.png"></b-img>
</b-col>
</b-row>
</b-col>
<b-col md="4" class="color_back">
<b-row>
@ -229,7 +215,7 @@ when hunger was beyond its peak point.
<b-img class="photo" src="media/ileana/ileana_2.jpg"> </b-img>
</b-col>
</b-row><p>
I ate more often by the computer which never happened while working in an office building and sharing lunch with colleagues.
I ate more often by the computer which never happened while working in an office and sharing lunch with colleagues.
</p>
<b-row>
<b-col md="12">
@ -237,7 +223,7 @@ I ate more often by the computer which never happened while working in an office
</b-col>
</b-row>
<p>
So, when hunger kicked in big time, the only thing to do was to grab on a plate of food I like and had in the fridge or pantry and create a freestyle salty & sweet mix.
So, when hunger kicked in big time, the only thing to do was to grab on a plate food I like and had in the fridge or pantry and create a freestyle salty & sweet mix.
</p>
<b-row>
<b-col md="12">
@ -261,11 +247,7 @@ 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