beginning second edition

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --host 0.0.0.0",
+    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

src/components/AboutPage.vue

@@ -44,8 +44,15 @@ a {
   padding-top: 70px;
   color: #333042
 }
+#footer {
+  margin-top: 14em;
+  margin-left: 30px;
+  font-family: 'Poppins', sans-serif;
+  margin-bottom: 3em;
 
 
+}
+
 @media (max-width: 575px) {
   .title_story {
     font-size: 30px;
@@ -70,17 +77,23 @@ a {
 
           <p>Magiun is a magazine about everyday food. It publishes stories, poems, essays, recipes, photos and illustrations.</p>
                     <p></p>
-                    <p>This first edition deals with eating in quarantine - the struggles, the joys, the unexpected discoveries, the newly added anxieties. It came about as a desire to talk about our ever changing relationship to food, and how unexpected external factors (such as a global quarantine) can bring out new ways of relating to what we grow, buy, eat and share. The contributions were written and sent throughout April 2020. The hope is that there will be more editions to come.</p>
+                    <p>The first issue deals with eating in isolation - the struggles, the joys, the unexpected discoveries, the newly added anxieties. It came about as a desire to talk about our ever changing relationship to food, and how unexpected external factors (such as a global quarantine) can bring out new ways of relating to what we grow, buy, eat and share. The contributions were written and sent throughout April 2020. </p>
                     <p></p>
+                    <p>The second issue [...]</p>
                     <p>Magiun is the name of a Romanian jam made out of plums, with no extra sugar added. It has a very thick consistency and a dark violet color, sometimes even black. The most well-known variety, <a href="https://en.wikipedia.org/wiki/Magiun_of_Topoloveni">Magiun de Topoloveni</a>, is the first Romanian certified natural product and protected by European Union. I grew up with a less well-known king of magiun, the one my grandparents used to prepare year after year in their yard, from plums I begrudgingly helped pick from our orchard. The making of magiun was a night-long affair, during which purple, fleshy plums melted away into a thick, sticky, dark brown paste. </p>
-                    <p>Throughout these past weeks, this container of magiun my mother sent me in a package has been one of my main comforts, a thin layer (to save it) on a slice of bread every other day. It is now almost empty.</p>
                     <p></p>
                     <p>This magazine has been dreamed of and developed by <a href="http://alicestrete.me/">Alice Strete</a>. For questions/offers of help/contributions, you can send an <a href="mailto:hello@magiun.online">email</a>.</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>The first issue of the project has been developed with the help of the CBK Rotterdam PPR fund.</p>
         </b-col>
         <b-col md="6"></b-col>
 
+    </b-row>
+    <b-row>
+      <p id="footer"><a href="/">Read the second issue</a></p>
+      <p id="footer"><a href="/firstissue">Read the first issue</a></p>
+
+
     </b-row>
   </b-container>
 

src/components/EditorNote2.vue

@@ -0,0 +1,130 @@
+<style scoped>
+
+
+
+* {
+    border: 0px black solid;
+    background-color: #ffe6e6;
+
+}
+
+.about-text {
+  padding-right: 50px;
+  padding-top: 40px;
+  font-family: 'Poppins', sans-serif;;
+  font-size: 15px;
+  padding-left: 20px;
+  padding-bottom: 40px;
+}
+
+a:hover {
+  color: #333042;
+
+  text-decoration: none;
+}
+
+a {
+  color: #ff4c2b;
+}
+
+#footer {
+  margin-top: 14em;
+  margin-left: 30px;
+  font-family: 'Poppins', sans-serif;
+  margin-bottom: 3em;
+
+}
+
+.container_width {
+  max-width: 100%;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 70px;
+
+}
+.title_story {
+  font-size: 80px;
+  font-family: 'Work Sans', sans-serif;
+  padding-left: 20px;
+  padding-top: 70px;
+  color: #333042
+
+
+}
+
+.author {
+  font-size: 20px;
+  font-family: 'Poppins', sans-serif;;
+  padding-left: 20px;
+}
+
+.small_icon {
+  max-width: 20%;
+  padding-top: 70px;
+}
+
+@media (max-width: 575px) {
+  .title_story {
+    font-size: 25px;
+  }
+  .small_icon {
+    max-width: 50%;
+    padding-top: 20px;
+    padding-left: 50px;
+
+  }
+  .author {
+    font-size: 15px;
+  }
+}
+
+</style>
+
+<template>
+
+  <b-container fluid class="p-0">
+
+    <MenuBar/>
+
+    <b-row>
+      <b-col md="8">
+        <p class="title_story">Title</p>
+        <b-row>
+          <b-col md="6">
+            <p class="author">a note by Alice Strete</p>
+
+          </b-col>
+        </b-row>
+      </b-col>
+      <b-col md="1">
+      </b-col>
+      <b-col md="2" class="small_icon">
+
+      </b-col>
+      <b-col md="1">
+      </b-col>
+    </b-row>
+    <b-row class="about-text">
+        <b-col md="6">
+
+        </b-col>
+
+    </b-row>
+    <b-row><b-col md="6">
+      <p id="footer"><a href="/editornote1">Read the editor note for the first issue.</a></p>
+</b-col></b-row>
+  </b-container>
+
+</template>
+
+<script>
+
+import MenuBar from './MenuBar'
+export default {
+    name: 'EditorNote',
+    components: {
+        MenuBar
+    }
+}
+
+</script>

src/components/MenuBar.vue

@@ -7,6 +7,9 @@
           <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'>#1</b-nav-item>
+          <b-nav-item to='/opencall'>Open call</b-nav-item>
+
         </b-nav>
       </b-collapse>
    </b-navbar>

src/components/OpenCallPage.vue

@@ -0,0 +1,112 @@
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins&family=Raleway&family=Work+Sans:wght@900&display=swap');
+
+* {
+    border: 0px black solid;
+    background-color: #ffe6e6;
+
+}
+
+body {
+  background-color: #ffe6e6;
+  min-height: 100vh;
+}
+
+.about-text {
+  padding-right: 50px;
+  padding-top: 40px;
+  font-family: 'Poppins', sans-serif;;
+  font-size: 15px;
+  padding-left: 20px;
+  padding-bottom: 40px;
+}
+
+
+a:hover {
+  color: #333042;
+
+  text-decoration: none;
+
+}
+
+a {
+  color: #ff4c2b;
+
+}
+
+.container_width {
+  max-width: 100%;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 70px;
+
+}
+#footer {
+  margin-top: 14em;
+  margin-left: 30px;
+  font-family: 'Poppins', sans-serif;
+  margin-bottom: 3em;
+
+
+}
+.title_story {
+  font-size: 80px;
+  font-family: 'Work Sans', sans-serif;
+  padding-left: 20px;
+  padding-top: 70px;
+  color: #333042
+}
+
+
+@media (max-width: 575px) {
+  .title_story {
+    font-size: 30px;
+  }
+}
+
+</style>
+
+<template>
+
+  <b-container fluid class="p-0">
+    <MenuBar/>
+
+    <b-row>
+      <b-col md="8">
+        <p class="title_story">Open Call Magiun #2, on adapting</p>
+
+      </b-col>
+    </b-row>
+    <b-row class="about-text">
+        <b-col md="6">
+
+          <p>
+
+Back in Spring, nobody wanted to imagine we'd be in a similar situation months later. Now, we find ourselves in the winter of 2020. We have limited opportunities to hang out and share food with our friends and families or to celebrate pretty much anything. Even though we've had months to prepare, it's still hard to keep it together.</p>
+<p>
+On top of it all, there's a new challenge - getting ourselves in the right state of mind to spend the holidays far away from our loved ones. How have the last few months of adapting to a new way of life prepared us for the last push of the year? How much of what we're used to eating and experiencing are we going to try and recreate this winter? What will be new, or missing?</p>
+<p>
+The winter 2020 issue of Magiun is about adapting - as a coping mechanism, a way of learning or a creative way of moving forward. Whether you've adapted your expectations, taste, or methods, or failed in the process of adapting, I'd like to hear from you. Send your submissions until the 14th of February (text, image and anything in between) to hello@magiun.online</p>
+        </b-col>
+        <b-col md="6"></b-col>
+
+    </b-row>
+    <b-row>
+      <p id="footer"><a href="/firstissue">Read the first issue</a></p>
+
+    </b-row>
+  </b-container>
+
+</template>
+
+<script>
+
+import MenuBar from './MenuBar'
+export default {
+    name: 'OpenCallPage',
+    components: {
+        MenuBar
+    }
+}
+
+</script>

src/components/SecondEditionPage.vue

@@ -0,0 +1,362 @@
+<style scoped>
+
+@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/css2?family=Poppins&family=Raleway&family=Work+Sans:wght@900&display=swap');
+
+
+* {
+    border: 0px black solid;
+    background-color: #ffe6e6 !important;
+
+}
+
+body {
+  background-color: #ffe6e6;
+  min-height: 100vh;
+}
+
+
+
+#magi {
+  width: 100%;
+  z-index: -1;
+}
+
+#mag_title {
+  font-size: 120px;
+  color: #333042;
+  font-family: 'Work Sans', sans-serif;
+   text-align: center;
+   padding-top: 30%;
+   z-index: 1;
+
+}
+
+#mag_subtitle {
+  font-size: 40px;
+  font-family: 'Work Sans', sans-serif;
+  color: #333042;
+  text-align: center;
+
+}
+
+
+.icons img {
+  width: 60%;
+}
+
+.icons p {
+  text-align: center;
+  font-size: 20px;
+  font-family: 'Poppins', sans-serif;
+  color: #333042;
+  padding-top: 25%;
+  text-decoration: 2px underline #ffcccc;
+}
+
+.icons {
+  padding-bottom: 40px;
+}
+
+.container_width {
+  max-width: 100%;
+}
+
+#toc {
+  color: #333042;
+  font-family: 'Work Sans', sans-serif;
+   text-align: center;
+   font-size: 50px;
+   padding-top: 20px;
+   padding-bottom: 20px;
+}
+
+
+@media (max-width: 575px) {
+  #mag_title {
+    font-size: 60px;
+    padding-top: 10px;
+    padding-left: 20px;
+  }
+  #mag_subtitle {
+    font-size: 18px;
+    padding-left: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .icons img {
+    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;
+}
+
+#print {
+  text-align: center;
+  font-family: 'Poppins', sans-serif;
+  color: #333042;
+  padding-top: 10px;
+}
+
+.glow {
+  font-family: 'Poppins', sans-serif;
+  font-size: 30px;
+  color: #fff;
+  text-align: center;
+  -webkit-animation: glow 1s ease-in-out infinite alternate;
+  -moz-animation: glow 1s ease-in-out infinite alternate;
+  animation: glow 1s ease-in-out infinite alternate;
+}
+
+@-webkit-keyframes glow {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
+  }
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
+  }
+}
+</style>
+
+<template>
+
+<div>
+  <MenuBar/>
+<b-container fluid class="p-0">
+
+  <b-row id="main_container">
+    <b-col md="6">
+      <b-row>
+        <b-col md="8" offset-md="3">
+
+      <a href="/about"><p id="mag_title">Magiun</p></a>
+    </b-col>
+
+    </b-row>
+    <b-row>
+      <b-col md="8" offset-md="3">
+
+        <p id="mag_subtitle">#2 On adapting</p>
+        <p id="print">For the print version, send an <a href="mailto:hello@magiun.online">email</a>!</p>
+      </b-col>
+
+
+    </b-row>
+    </b-col>
+    <b-col md="6">
+        <b-row>
+          <b-col md="2"></b-col>
+          <b-col md="8">
+            <p>some image here</p>
+    </b-col>
+      <b-col md="2"></b-col>
+
+    </b-row>
+    </b-col>
+  </b-row>
+
+<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>
+
+
+
+</div>
+
+</template>
+
+<script>
+import MenuBar from './MenuBar'
+export default {
+    name: 'SplashPage',
+    components: {
+        MenuBar
+    }
+}
+
+</script>

src/components/SplashPage.vue

@@ -120,6 +120,24 @@ a {
   padding-top: 10px;
 }
 
+.glow {
+  font-family: 'Poppins', sans-serif;
+  font-size: 30px;
+  color: #fff;
+  text-align: center;
+  -webkit-animation: glow 1s ease-in-out infinite alternate;
+  -moz-animation: glow 1s ease-in-out infinite alternate;
+  animation: glow 1s ease-in-out infinite alternate;
+}
+
+@-webkit-keyframes glow {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
+  }
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
+  }
+}
 </style>
 
 <template>
@@ -132,6 +150,7 @@ a {
     <b-col md="6">
       <b-row>
         <b-col md="8" offset-md="3">
+
       <a href="/about"><p id="mag_title">Magiun</p></a>
     </b-col>
 
@@ -140,7 +159,7 @@ a {
       <b-col md="8" offset-md="3">
 
         <p id="mag_subtitle">#1 On eating in isolation</p>
-        <p id="print">Print publication coming out soon!</p>
+        <p id="print">For the print version, send an <a href="mailto:hello@magiun.online">email</a>!</p>
       </b-col>
 
 

src/main.js

@@ -30,6 +30,10 @@ import pretzel from './components/pretzel'
 import recipe from './components/recipe'
 import ricecooker from './components/ricecooker'
 import scooter from './components/scooter'
+import OpenCallPage from './components/OpenCallPage'
+import SecondEditionPage from './components/SecondEditionPage'
+import EditorNote2 from './components/EditorNote2'
+
 Vue.config.productionTip = false
 
 Vue.use(BootstrapVue)
@@ -38,9 +42,9 @@ Vue.use(VueRouter)
 const router = new VueRouter({
   mode: 'history',
   routes: [
-    { path: '/', component: SplashPage },
+    { path: '/', component: SecondEditionPage },
     { path: '/about', component: AboutPage },
-    { path: '/editornote', component: EditorNote },
+    { path: '/editornote', component: EditorNote2 },
     { path: '/leekpilaf', component: leekpilaf },
     { path: '/breakfast', component: breakfast },
     { path: '/pesto', component: pesto },
@@ -54,6 +58,12 @@ const router = new VueRouter({
     { path: '/ricecooker', component: ricecooker },
     { path: '/scooter', component: scooter },
     { path: '/eggs', component: eggs },
+    { path: '/opencall', component: OpenCallPage },
+    { path: '/secondissue', component: SecondEditionPage },
+    { path: '/firstissue', component: SplashPage },
+    { path: '/editornote1', component: EditorNote },
+
+
 
   ]