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

new template

Browse Source
master
alicestrt 3 years ago
parent 9662dc9d12
commit 4214bb8a41
8 changed files with 264 additions and 235 deletions
Show Stats Download Patch File Download Diff File

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

@ -6,9 +6,9 @@
<b-nav align="left">
<b-nav-item to='/'>Home</b-nav-item>
<b-nav-item to='/about'>About</b-nav-item>
<b-nav-item to='/editornote'>Editor's note</b-nav-item>
<b-nav-item to='/firstissue'>First issue</b-nav-item>
<b-nav-item to='/opencall'>Open call</b-nav-item>
<b-nav-item to='/firstissue'>Issues</b-nav-item>
<b-nav-item to='/firstissue'>Order</b-nav-item>
<b-nav-item to='/opencall'>Contribute</b-nav-item>
</b-nav>
</b-collapse>
@ -37,7 +37,7 @@ a:hover {
}
.navbar {
background-color: #ffe4e5;
background-color: white;
border-bottom: 2px #ffcccc solid;
}

4
src/components/SecondEditionPage.vue
Unescape Escape View File

@ -7,12 +7,12 @@
* {
border: 0px black solid;
background-color: #fff5f5 !important;
background-color: #F7F7F7 !important;
}
body {
background-color: #fff5f5;
background-color: #F7F7F7;
min-height: 100vh;
}

94
src/components/knife.vue
Unescape Escape View File

@ -4,7 +4,7 @@
* {
border: 0px black solid;
background-color: #fff5f5;
background-color: #F7F7F7;
}
@ -28,19 +28,20 @@ a {
}
.content {
padding-right: 50px;
padding-top: 40px;
padding-top: 20px;
font-family: 'Poppins', sans-serif;;
font-size: 15px;
padding-left: 20px;
padding-bottom: 40px;
padding-left: 60px;
padding-right: 60px;
}
.title_story {
font-size: 80px;
font-family: 'Work Sans', sans-serif;
padding-left: 20px;
text-align: center;
padding-top: 70px;
color: #333042
}
@ -53,13 +54,14 @@ a {
.author {
font-size: 20px;
font-family: 'Poppins', sans-serif;;
padding-left: 20px;
text-align: center;
}
.image_container img {
max-width: 80%
max-width: 80%;
margin-bottom: 10px;
}
.small_icon {
@ -69,13 +71,19 @@ a {
}
#knife {
margin-top: 30px;
margin-top: 10px;
margin-left: 40px;
margin-bottom: 30px;
}
#knifeillu {
margin-left: 40px;
margin-bottom: 0px;
}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
display: none;
}
.title_story {
@ -92,21 +100,22 @@ a {
<b-container fluid class="p-0">
<MenuBar/>
<b-row>
<b-col md="1" offset-md="1" class="small_icon">
<div class="zoom">
<a href="/anise"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="8">
<p class="title_story">Paper thin</p>
<p class="title_story">Paper Thin</p>
<b-row>
<b-col md="6">
<b-col md="12">
<p class="author">an essay by Yoana Buzova</p>
</b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/anise"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/simmered"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini_next.png"> </b-img></a>
</div>
@ -116,7 +125,18 @@ a {
<b-row>
<b-col md="5">
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" id="knifeillu" src="media/magiun2/knife.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'>
<p>The first time I was allowed to use a knife was at my grandparents house. Perhaps not so allowed, as encouraged and maybe even obliged to. It felt so empowering, I felt so trusted, so weirdly and preciously mature. Grown-ups have an inability to perceive especially important things. My parents did not understand how important it was to be given the chance to use a knife by myself as early as possible. Luckily, grandparents are such creatures who can easily deviate from the grown-up mentality. </p>
@ -129,35 +149,19 @@ At present day I own a potato peeler, because as everyone else I must do everyth
<p>
My parents emptied out the house of my grandparents and it got sold. I kept the knife my grandmother would always give me to peel. I sometimes try using it to peel a potato, or even a cucumber. And I always cut the potatoes in long odd looking pieces that have more than four corners.</p>
</div>
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" id="knife" src="media/knife/My_Knife.jpg"> </b-img>
</b-col>
<b-col md="7">
<b-container fluid>
<div class="image_container">
<b-row>
<b-col md="9" offset-md="3">
<b-img class="img-fluid" id="knife" src="media/knife/My_Knife.jpg"> </b-img>
</b-col>
</b-row>
<b-row>
<b-col md="6">
</b-col>
<b-col md="6">
</b-col>
</b-row>
</div>
</b-col>
</div>
</b-container>
</b-container>
</b-row>
</b-col>
</b-row>
</b-container>
</template>

92
src/components/lychee.vue
Unescape Escape View File

@ -4,7 +4,7 @@
* {
border: 0px black solid;
background-color: #fff5f5;
background-color: #F7F7F7;
}
@ -32,17 +32,18 @@ a {
padding-top: 40px;
font-family: 'Poppins', sans-serif;;
font-size: 15px;
padding-left: 20px;
padding-bottom: 40px;
padding-left: 60px;
padding-right: 60px;
}
.title_story {
font-size: 80px;
font-family: 'Work Sans', sans-serif;
padding-left: 20px;
padding-top: 70px;
color: #333042
color: #333042;
text-align: center;
}
.image_container {
@ -53,9 +54,7 @@ a {
.author {
font-size: 20px;
font-family: 'Poppins', sans-serif;;
padding-left: 20px;
text-align: center;
}
.image_container img {
@ -63,28 +62,23 @@ a {
}
.small_icon {
max-width: 20%;
padding-top: 70px;
max-width: 60%;
padding-top: 100px;
}
#knife {
margin-top: 30px;
}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
@media (max-width: 575px){
.small_icon {
display: none;
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
</style>
@ -92,21 +86,22 @@ a {
<b-container fluid class="p-0">
<MenuBar/>
<b-row>
<b-col md="1" offset-md="1" class="small_icon">
<div class="zoom">
<a href="/whatwecan"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="8">
<p class="title_story">Have you eaten yet?</p>
<b-row>
<b-col md="6">
<b-col md="12">
<p class="author">an essay by Witold van Ratingen</p>
</b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/whatwecan"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/anise"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/anise_next.png"> </b-img></a>
</div>
@ -116,7 +111,19 @@ a {
<b-row>
<b-col md="5">
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" id="knifeillu" src="media/magiun2/lychee.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'>
<p>Have You Eaten Yet? <br>
@ -141,26 +148,7 @@ When you start to cry, I bring you lychees.</p>
</div>
</b-col>
<b-col md="7">
<b-container fluid>
<div class="image_container">
<b-row>
<b-col md="6">
</b-col>
<b-col md="6">
</b-col>
</b-row>
</div>
</b-container>
</b-col>
</b-row>
</b-container>
</template>

73
src/components/phone.vue
Unescape Escape View File

@ -4,7 +4,7 @@
* {
border: 0px black solid;
background-color: #fff5f5;
background-color: #F7F7F7;
}
@ -32,17 +32,18 @@ a {
padding-top: 40px;
font-family: 'Poppins', sans-serif;;
font-size: 15px;
padding-left: 20px;
padding-bottom: 40px;
text-align: center;
}
.title_story {
font-size: 80px;
font-family: 'Work Sans', sans-serif;
padding-left: 20px;
padding-top: 70px;
color: #333042
color: #333042;
text-align: center;
}
.image_container {
@ -53,7 +54,7 @@ a {
.author {
font-size: 20px;
font-family: 'Poppins', sans-serif;;
padding-left: 20px;
text-align: center;
}
@ -63,28 +64,24 @@ a {
}
.small_icon {
max-width: 20%;
padding-top: 70px;
max-width: 60%;
padding-top: 100px;
}
#knife {
margin-top: 30px;
}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
@media (max-width: 575px){
.small_icon {
display: none;
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
</style>
@ -92,21 +89,22 @@ a {
<b-container fluid class="p-0">
<MenuBar/>
<b-row>
<b-col md="1" offset-md="1" class="small_icon">
<div class="zoom">
<a href="/soulsoup"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="8">
<p class="title_story">Christmas dinner</p>
<p class="title_story">Christmas Dinner</p>
<b-row>
<b-col md="6">
<b-col md="12">
<p class="author">a poem by Valentina Vella</p>
</b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/soulsoup"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/whatwecan"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/clothes_next.png"> </b-img></a>
</div>
@ -116,7 +114,20 @@ a {
<b-row>
<b-col md="6">
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" src="media/magiun2/phone.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'>
<p>

73
src/components/simmered.vue
Unescape Escape View File

@ -4,7 +4,7 @@
* {
border: 0px black solid;
background-color: #fff5f5;
background-color: #F7F7F7;
}
@ -28,23 +28,25 @@ a {
}
.content {
padding-right: 50px;
padding-top: 40px;
padding-top: 20px;
font-family: 'Poppins', sans-serif;;
font-size: 15px;
padding-left: 20px;
padding-bottom: 40px;
padding-left: 60px;
padding-right: 60px;
}
.title_story {
font-size: 80px;
font-family: 'Work Sans', sans-serif;
padding-left: 20px;
text-align: center;
padding-top: 70px;
color: #333042
}
.image_container {
padding-top: 10px;
@ -53,13 +55,14 @@ a {
.author {
font-size: 20px;
font-family: 'Poppins', sans-serif;;
padding-left: 20px;
text-align: center;
}
.image_container img {
max-width: 80%
max-width: 80%;
margin-bottom: 10px;
}
.small_icon {
@ -72,19 +75,19 @@ a {
margin-top: 30px;
}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
@media (max-width: 575px){
.small_icon {
display: none;
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
</style>
@ -92,21 +95,22 @@ a {
<b-container fluid class="p-0">
<MenuBar/>
<b-row>
<b-col md="1" offset-md="1" class="small_icon">
<div class="zoom">
<a href="/knife"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/knife_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="8">
<p class="title_story">Simmered Egg <br>(Hakka style)</p>
<b-row>
<b-col md="6">
<b-col md="12">
<p class="author">an essay by Dorothy Cheung</p>
</b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/knife"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/knife_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/soulsoup"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/cauliflower_next.png"> </b-img></a>
</div>
@ -116,7 +120,18 @@ a {
<b-row>
<b-col md="5">
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" id="knifeillu" src="media/magiun2/porcini.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'>
<p>Thanks to the pandemic, I am spending much more time in Hong Kong. After losing my
@ -152,14 +167,12 @@ After all, “Simmered Egg” is an adaptation made with the spirit of being a H
adapting to changes (and leftover food). </p>
</div>
</b-col>
<b-col md="7">
<b-container fluid>
<div class="image_container">
<b-row>
<b-col md="10" offset-md="2">
<b-img class="img-fluid" id="knife" src="media/simmered/Simmeregg01.png"> </b-img>
<b-img class="img-fluid" id="knife" src="media/simmered/Simmeregg00.png"> </b-img>
</b-col>

77
src/components/soulsoup.vue
Unescape Escape View File

@ -4,7 +4,7 @@
* {
border: 0px black solid;
background-color: #fff5f5;
background-color: #F7F7F7;
}
@ -32,17 +32,18 @@ a {
padding-top: 40px;
font-family: 'Poppins', sans-serif;;
font-size: 15px;
padding-left: 20px;
padding-bottom: 40px;
padding-left: 60px;
padding-right: 60px;
}
.title_story {
font-size: 80px;
font-family: 'Work Sans', sans-serif;
padding-left: 20px;
padding-top: 70px;
color: #333042
color: #333042;
text-align: center;
}
.image_container {
@ -53,9 +54,7 @@ a {
.author {
font-size: 20px;
font-family: 'Poppins', sans-serif;;
padding-left: 20px;
text-align: center;
}
.image_container img {
@ -63,28 +62,22 @@ a {
}
.small_icon {
max-width: 20%;
padding-top: 70px;
max-width: 60%;
padding-top: 100px;
}
#knife {
margin-top: 30px;
}
@media (max-width: 575px){
.small_icon {
display: none;
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
</style>
@ -92,21 +85,24 @@ a {
<b-container fluid class="p-0">
<MenuBar/>
<b-row>
<b-col md="1" offset-md="1" class="small_icon">
<div class="zoom">
<a href="/simmered"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="8">
<p class="title_story">Chicken soup for soul</p>
<p class="title_story">Chicken Soup for Soul</p>
<b-row>
<b-col md="6">
<b-col md="12">
<p class="author">an essay by Patricia Cîrtog</p>
</b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/simmered"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/phone"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone_next.png"> </b-img></a>
</div>
@ -116,7 +112,18 @@ a {
<b-row>
<b-col md="5">
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" src="media/magiun2/cauliflower.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'>
<p>Morning… As a commuter, my morning used to be a colorful bustle of to-go coffee, endless

76
src/components/whatwecan.vue
Unescape Escape View File

@ -4,7 +4,7 @@
* {
border: 0px black solid;
background-color: #fff5f5;
background-color: #F7F7F7;
}
@ -32,17 +32,18 @@ a {
padding-top: 40px;
font-family: 'Poppins', sans-serif;;
font-size: 15px;
padding-left: 20px;
padding-bottom: 40px;
padding-left: 60px;
padding-right: 60px;
}
.title_story {
font-size: 80px;
font-family: 'Work Sans', sans-serif;
padding-left: 20px;
padding-top: 70px;
color: #333042
color: #333042;
text-align: center;
}
.image_container {
@ -53,9 +54,7 @@ a {
.author {
font-size: 20px;
font-family: 'Poppins', sans-serif;;
padding-left: 20px;
text-align: center;
}
.image_container img {
@ -63,28 +62,22 @@ a {
}
.small_icon {
max-width: 20%;
padding-top: 70px;
}
#knife {
margin-top: 30px;
max-width: 60%;
padding-top: 100px;
}
@media (max-width: 575px){
.small_icon {
max-width: 50%;
padding-top: 20px;
@media (max-width: 575px){
.small_icon {
display: none;
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
}
.title_story {
font-size: 30px;
}
.author {
font-size: 15px;
}
}
</style>
@ -92,21 +85,23 @@ a {
<b-container fluid class="p-0">
<MenuBar/>
<b-row>
<b-col md="8">
<b-col md="1" offset-md="1" class="small_icon">
<div class="zoom">
<a href="/phone"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="8">
<p class="title_story">We do what we can <br> with what we have</p>
<b-row>
<b-col md="6">
<b-col md="12">
<p class="author">an essay by Raluca Chereji</p>
</b-col>
</b-row>
</b-col>
<b-col md="2" class="small_icon">
<div class="zoom">
<a href="/phone"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/phone_prev.png"> </b-img></a>
</div>
</b-col>
<b-col md="2" class="small_icon">
<b-col md="1" class="small_icon">
<div class="zoom">
<a href="/lychee"><b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/lychee_next.png"> </b-img></a>
</div>
@ -116,7 +111,18 @@ a {
<b-row>
<b-col md="5">
<b-col md="8" offset-md="2">
<b-row>
<b-container fluid>
<div class="image_container">
<b-col md="6" offset-md="3">
<b-img class="img-fluid" src="media/magiun2/clothes.png"> </b-img>
</b-col>
</div>
</b-container>
</b-row>
<div class='content'>
<p>This became our house motto during quarantine. Devised at first as a way to rationalize the situation

Write Preview
Loading…
Cancel
Save