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

complete redesign of splash page

Browse Source
master
alicestrt 4 years ago
parent 57fd510dfd
commit 3357cdee38
18 changed files with 388 additions and 272 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,6 +1,5 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins&family=Raleway&family=Work+Sans:wght@900&display=swap');
* { * {
border: 0px black solid; border: 0px black solid;
@ -11,9 +10,10 @@
.about-text { .about-text {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
padding-bottom: 40px;
} }
@ -39,17 +39,12 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
} }
.author {
font-size: 20px;
font-family: 'Roboto Mono', monospace;
padding-left: 20px;
}
@media (max-width: 575px) { @media (max-width: 575px) {
.title_story { .title_story {
@ -71,7 +66,7 @@ a {
</b-col> </b-col>
</b-row> </b-row>
<b-row class="about-text"> <b-row class="about-text">
<b-col md="8"> <b-col md="6">
<p>Magiun is a magazine about everyday food. It publishes stories, poems, essays, recipes, photos and illustrations.</p> <p>Magiun is a magazine about everyday food. It publishes stories, poems, essays, recipes, photos and illustrations.</p>
<p></p> <p></p>
@ -84,6 +79,8 @@ a {
<p>The website has been made using Bootstrap-Vue. All content (text, images, illustrations) is licensed under the Free Art License, unless specified otherwise.</p> <p>The website has been made using Bootstrap-Vue. All content (text, images, illustrations) is licensed under the Free Art License, unless specified otherwise.</p>
<p>This project has been developed with the help of the CBK Rotterdam PPR fund.</p> <p>This project has been developed with the help of the CBK Rotterdam PPR fund.</p>
</b-col> </b-col>
<b-col md="6"></b-col>
</b-row> </b-row>
</b-container> </b-container>

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

@ -1,6 +1,5 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
* { * {
@ -12,9 +11,10 @@
.about-text { .about-text {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
padding-bottom: 40px;
} }
@ -37,15 +37,17 @@ a {
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
} }
@ -90,14 +92,13 @@ a {
<b-col md="1"> <b-col md="1">
</b-col> </b-col>
<b-col md="2" class="small_icon"> <b-col md="2" class="small_icon">
<a href="/"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun_gimp.gif"> </b-img></a>
</b-col> </b-col>
<b-col md="1"> <b-col md="1">
</b-col> </b-col>
</b-row> </b-row>
<b-row class="about-text"> <b-row class="about-text">
<b-col md="8"> <b-col md="6">
<p> <p>
On the 13th of March, 2020, I began my self-imposed, prolongued stay-at-home quarantine. In the outside world, supermarkets were being stripped of toilet paper, cleaning products, flour and milk, but people were still crowding bars and restaurants. My mood fluctuated between panic and boredom, accentuated by thoughts of not being able to visit my family, to walk outside without being freaked out by the proximity of people, or to stay sane indoors without being freaked out by the proximity of people. Alongside this, another kind of panic creeped in – there were no eggs in the shops. What was I supposed to do without eggs? What else was next on the list of endangered essential foods? And how long will this last? </p> On the 13th of March, 2020, I began my self-imposed, prolongued stay-at-home quarantine. In the outside world, supermarkets were being stripped of toilet paper, cleaning products, flour and milk, but people were still crowding bars and restaurants. My mood fluctuated between panic and boredom, accentuated by thoughts of not being able to visit my family, to walk outside without being freaked out by the proximity of people, or to stay sane indoors without being freaked out by the proximity of people. Alongside this, another kind of panic creeped in – there were no eggs in the shops. What was I supposed to do without eggs? What else was next on the list of endangered essential foods? And how long will this last? </p>
@ -111,6 +112,7 @@ a {
</b-col> </b-col>
<b-col md="6"></b-col>

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

@ -24,21 +24,27 @@ export default {
a { a {
color: #333042; color: #333042;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 16px; font-size: 16px;
text-shadow: 1px 1px 1px #333042;
} }
a:hover { a:hover {
color: #ff4c2b; color: #ff4c2b;
text-shadow: 1px 1px 1px #ff4c2b;
} }
.navbar {
background-color: #ffe6e6;
border-bottom: 2px #ffcccc solid;
}
@media (max-width: 575px) { @media (max-width: 575px) {
a { a {
font-size: 12px; font-size: 12px;
} }
.navbar {
border-bottom: 0px;
}
} }
</style> </style>

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

@ -2,8 +2,8 @@
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap'); @import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins&family=Raleway&family=Work+Sans:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
* { * {
border: 0px black solid; border: 0px black solid;
@ -16,72 +16,95 @@ body {
min-height: 100vh; min-height: 100vh;
} }
a:hover {
color: #333042;
text-decoration: none;
}
a {
color: black;
}
#magi { #magi {
width: 60%; width: 100%;
margin-top: 20px;
} }
#mag_title { #mag_title {
font-size: 80px; font-size: 120px;
font-family: 'Permanent Marker', cursive;
padding-left: 50px;
color: #333042; color: #333042;
font-family: 'Work Sans', sans-serif;
text-align: center;
padding-top: 10%;
} }
#mag_subtitle { #mag_subtitle {
font-size: 30px; font-size: 40px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
margin-top: 40px;
padding-left: 40px;
color: #333042; color: #333042;
text-align: center;
} }
#icons img {
width: 100%;
}
.zoom { .icons img {
transition: transform 1s; width: 60%;
} }
.zoom:hover { .icons p {
transform: scale(1.1);} text-align: center;
font-size: 20px;
font-family: 'Poppins', sans-serif;;
color: #333042;
padding-top: 25%;
text-decoration: 2px underline #ffcccc;
}
.container_width { .container_width {
max-width: 100%; max-width: 100%;
} }
#sparkle { #toc {
padding-top: 80px; color: #333042;
font-family: 'Work Sans', sans-serif;
text-align: center;
font-size: 50px;
padding-top: 20px;
padding-bottom: 20px;
} }
@media (max-width: 575px) { @media (max-width: 575px) {
#mag_title { #mag_title {
font-size: 60px; font-size: 60px;
padding-top: 20px; padding-top: 10px;
padding-left: 20px; padding-left: 20px;
} }
#mag_subtitle { #mag_subtitle {
font-size: 18px; font-size: 18px;
padding-left: 20px; padding-left: 20px;
margin-top: 20px; padding-top: 10px;
} padding-bottom: 10px;
#icons { }
.icons img {
width: 50%; width: 50%;
} }
.icons p {
padding-top: 0px;
}
#magi {
padding-left: 20px;
padding-right: 20px;
}
}
a:hover {
color: #ff4c2b;
text-decoration: none;
}
a {
color: #333042;
}
#main_container {
padding-top: 100px;
padding-bottom: 100px;
} }
</style> </style>
@ -91,123 +114,210 @@ margin-top: 20px;
<div> <div>
<MenuBar/> <MenuBar/>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<b-row>
<b-col md="12" id="sparkle">
<b-img class="img-fluid" center src="media/print.gif"></b-img>
</b-col> <b-row id="main_container">
</b-row>
<b-row>
<b-col md="6"> <b-col md="6">
<a href="/about"><p id="mag_title">Magiun</p></a> <b-row>
<b-col md="2"></b-col>
<b-col md="8">
<a href="/about"><p id="mag_title">Magiun</p></a>
</b-col> </b-col>
<b-col md="2"></b-col>
<b-col md="6"> </b-row>
<p id="mag_subtitle">#1 On eating in isolation</p> <b-row>
</b-col> <b-col md="2"></b-col>
<b-col md="8">
</b-row> <p id="mag_subtitle">#1 On eating in isolation</p>
</b-col>
<b-row> <b-col md="2"></b-col>
<b-col md="6">
<a href="/about"><b-img class="img-fluid" id="magi" center src="media/magiun_gimp.gif"></b-img></a>
</b-row>
</b-col> </b-col>
<b-col md="6"> <b-col md="6">
<b-container fluid id="icons">
<b-row>
<b-col md="3">
<div class="zoom">
<a href="/eggs"> <b-img class="img-fluid" center alt="Responsive image" src="media/egg_small.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/scooter"><b-img class="img-fluid" center alt="Responsive image" src="media/scooter.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/pesto"><b-img class="img-fluid" center alt="Responsive image" src="media/basil.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/bbq"><b-img class="img-fluid" center alt="Responsive image" src="media/bbq.png"></b-img></a>
</div>
</b-col>
</b-row>
<b-row>
<b-col md="3">
<div class="zoom">
<a href="/cart"><b-img class="img-fluid" center src="media/cart_small.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/breakfast"><b-img class="img-fluid" center alt="Responsive image" src="media/avo_small.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/noodles"><b-img class="img-fluid" center alt="Responsive image" src="media/noodles_small.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/recipe"><b-img class="img-fluid" center alt="Responsive image" src="media/recipe_small.png"></b-img></a>
</div>
</b-col>
</b-row>
<b-row>
<b-col md="3">
<div class="zoom">
<a href="/onion"><b-img class="img-fluid" center alt="Responsive image" src="media/onion.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/leekpilaf"><b-img class="img-fluid" center alt="Responsive image" src="media/leek.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/ricecooker"><b-img class="img-fluid" center alt="Responsive image" src="media/rice.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/cake"><b-img class="img-fluid" center alt="Responsive image" src="media/cake_small.png"></b-img></a>
</div>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="3"> <b-col md="2"></b-col>
<b-col md="8">
</b-col>
<b-col md="3"> <a href="/about"><b-img class="img-fluid" id="magi" src="media/magiun_gimp.gif"></b-img></a>
</b-col> </b-col>
<b-col md="3"> <b-col md="2"></b-col>
</b-col>
<b-col md="3"> </b-row>
<div class="zoom">
<a href="/pretzel"><b-img class="img-fluid" center alt="Responsive image" src="media/pretzel_small.png"></b-img></a>
</div>
</b-col>
</b-row>
</b-container>
</b-col> </b-col>
</b-row> </b-row>
</b-container>
<b-container fluid> <b-row>
<b-col md="4" offset-md="4">
<p id="toc">Inside</p>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/eggs"> <b-img class="img-fluid" center alt="Responsive image" src="media/egg_small.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/eggs"><p>Egg Story</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/scooter"><p>acknowledgements</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/scooter"><b-img class="img-fluid" center alt="Responsive image" src="media/scooter.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/pesto"><b-img class="img-fluid" center alt="Responsive image" src="media/basil.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/pesto"><p>Bulk Pesto</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/bbq"><p>Balcony Marinade</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/bbq"><b-img class="img-fluid" center alt="Responsive image" src="media/bbq.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/cart"><b-img class="img-fluid" center src="media/cart_small.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/cart"><p>My Quarantine Kitchen Story</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/breakfast"><p>Breakfasts</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/breakfast"><b-img class="img-fluid" center alt="Responsive image" src="media/avo_small.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/noodles"><b-img class="img-fluid" center alt="Responsive image" src="media/noodles_small.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/noodles"><p>Luo Shi Fen</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/recipe"><p>Party of 3</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/recipe"><b-img class="img-fluid" center alt="Responsive image" src="media/recipe_small.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/onion"><b-img class="img-fluid" center alt="Responsive image" src="media/onion.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/onion"><p>Something Light, Like a Salad</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/leekpilaf"><p>Leek Pilaf</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/leekpilaf"><b-img class="img-fluid" center alt="Responsive image" src="media/leek.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/ricecooker"><b-img class="img-fluid" center alt="Responsive image" src="media/rice.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/ricecooker"><p>When the Oven is Broken</p></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="5" order="1" order-sm="0">
<a href="/cake"><p>The Bite that Keeps on Chewing</p></a>
</b-col>
<b-col md="2" order="0" order-sm="1">
<a href="/cake"><b-img class="img-fluid" center alt="Responsive image" src="media/cake_small.png"></b-img></a>
</b-col>
</b-row>
<b-row class="icons">
<b-col md="2" offset-md="3">
<a href="/pretzel"><b-img class="img-fluid" center alt="Responsive image" src="media/pretzel_small.png"></b-img></a>
</b-col>
<b-col md="2">
<a href="/pretzel"><p>A List</p></a>
</b-col>
</b-row>
</b-container> </b-container>
</div> </div>
</template> </template>

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

@ -23,7 +23,7 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -39,7 +39,7 @@ a {
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 25px; padding-left: 25px;
@ -55,12 +55,6 @@ a {
padding-top: 70px; padding-top: 70px;
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
.bbq_images { .bbq_images {
padding-top: 40px; padding-top: 40px;

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

@ -11,7 +11,7 @@
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -31,7 +31,7 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
} }
@ -51,7 +51,7 @@ a {
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
@ -62,12 +62,6 @@ a {
padding-top: 70px; padding-top: 70px;
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {

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

@ -11,7 +11,7 @@
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -31,7 +31,7 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
} }
@ -59,7 +59,7 @@ a {
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
} }
@ -68,12 +68,6 @@ a {
max-width: 20%; max-width: 20%;
padding-top: 70px; padding-top: 70px;
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {

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

@ -30,14 +30,14 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -49,7 +49,7 @@ a {
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
@ -59,13 +59,6 @@ a {
padding-top: 70px; padding-top: 70px;
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
max-width: 50%; max-width: 50%;

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

@ -1,7 +1,6 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
* { * {
border: 0px black solid; border: 0px black solid;
@ -11,7 +10,7 @@
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -31,7 +30,7 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
} }
@ -56,18 +55,12 @@ a {
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {

80
src/components/extra.vue
Unescape Escape View File

@ -0,0 +1,80 @@
<b-row>
<b-col md="6">
</b-col>
<b-col md="6">
<b-container fluid id="icons">
<b-row>
<b-col md="3">
<div class="zoom">
<a href="/eggs"> <b-img class="img-fluid" center alt="Responsive image" src="media/egg_small.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/scooter"><b-img class="img-fluid" center alt="Responsive image" src="media/scooter.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/pesto"><b-img class="img-fluid" center alt="Responsive image" src="media/basil.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/bbq"><b-img class="img-fluid" center alt="Responsive image" src="media/bbq.png"></b-img></a>
</div>
</b-col>
</b-row>
<b-row>
<b-col md="3">
<div class="zoom">
<a href="/cart"><b-img class="img-fluid" center src="media/cart_small.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/breakfast"><b-img class="img-fluid" center alt="Responsive image" src="media/avo_small.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/noodles"><b-img class="img-fluid" center alt="Responsive image" src="media/noodles_small.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/recipe"><b-img class="img-fluid" center alt="Responsive image" src="media/recipe_small.png"></b-img></a>
</div>
</b-col>
</b-row>
<b-row>
<b-col md="3">
<div class="zoom">
<a href="/onion"><b-img class="img-fluid" center alt="Responsive image" src="media/onion.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/leekpilaf"><b-img class="img-fluid" center alt="Responsive image" src="media/leek.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/ricecooker"><b-img class="img-fluid" center alt="Responsive image" src="media/rice.png"></b-img></a>
</div>
</b-col>
<b-col md="3">
<div class="zoom">
<a href="/cake"><b-img class="img-fluid" center alt="Responsive image" src="media/cake_small.png"></b-img></a>
</div>
</b-col>
</b-row>
</b-container>
</b-col>
</b-row>

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

@ -20,7 +20,7 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -42,7 +42,7 @@ a {
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
@ -53,12 +53,6 @@ a {
padding-top: 70px; padding-top: 70px;
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {

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

@ -30,14 +30,14 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -50,7 +50,7 @@ a {
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
@ -61,12 +61,6 @@ a {
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
@ -120,7 +114,7 @@ a {
</p> </p>
<p> <p>
I tried to limit and consumption of this package, it is the most tasty brand I found in Asian supermarkets in NL. The too many small plastic packets made me reluctant to buy it on a regular basis - I only buy and eat it once in a while. I tried to limit the consumption of this package, it is the most tasty brand I found in Asian supermarkets in NL. The too many small plastic packets made me reluctant to buy it on a regular basis - I only buy and eat it once in a while.
</p> </p>

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

@ -30,14 +30,14 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -50,7 +50,7 @@ a {
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
@ -66,12 +66,6 @@ a {
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {

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

@ -30,14 +30,14 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -49,7 +49,7 @@ a {
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
@ -61,13 +61,6 @@ a {
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
max-width: 50%; max-width: 50%;

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

@ -30,14 +30,14 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -54,7 +54,7 @@ a {
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
} }
@ -64,13 +64,6 @@ a {
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
max-width: 50%; max-width: 50%;

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

@ -30,14 +30,14 @@ a {
.content { .content {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 20px; padding-left: 20px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -53,7 +53,7 @@ a {
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
} }
@ -62,12 +62,7 @@ a {
padding-top: 70px; padding-top: 70px;
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {

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

@ -20,7 +20,7 @@ a {
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042 color: #333042
@ -35,7 +35,7 @@ a {
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
@ -47,12 +47,7 @@ a {
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {

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

@ -30,16 +30,18 @@ a {
.content_poem { .content_poem {
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 40px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
font-size: 15px; font-size: 15px;
padding-left: 100px; padding-left: 100px;
} }
.title_story { .title_story {
font-size: 80px; font-size: 80px;
font-family: 'Permanent Marker', cursive; font-family: 'Work Sans', sans-serif;
padding-left: 20px; padding-left: 20px;
padding-top: 70px; padding-top: 70px;
color: #333042
} }
.image_container { .image_container {
@ -48,7 +50,7 @@ a {
} }
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif;;
padding-left: 20px; padding-left: 20px;
} }
@ -58,13 +60,6 @@ a {
} }
.zoom {
transition: transform 1s;
}
.zoom:hover {
transform: scale(1.1);}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
max-width: 50%; max-width: 50%;

Write Preview
Loading…
Cancel
Save