added order

src/components/MenuBar.vue

@@ -7,7 +7,7 @@
           <b-nav-item to='/'>Home</b-nav-item>
           <b-nav-item to='/about'>About</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='/order'>Order</b-nav-item>
           <b-nav-item to='/opencall'>Contribute</b-nav-item>
 
         </b-nav>

src/components/Order.vue

@@ -0,0 +1,107 @@
+<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: #fff5f5;
+
+}
+
+.about-text {
+  padding-right: 50px;
+  padding-top: 40px;
+  font-family: 'Poppins', sans-serif;;
+  font-size: 15px;
+  padding-left: 20px;
+  padding-bottom: 40px;
+}
+
+#scan {
+  width: 60%;
+}
+a:hover {
+  color: #333042;
+
+  text-decoration: none;
+
+}
+
+a {
+  color: #333042;
+  text-decoration: underline;
+}
+
+.container_width {
+  max-width: 100%;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 70px;
+
+}
+
+.title_story {
+  font-size: 300%;
+  font-family: 'Work Sans', sans-serif;
+  padding-top: 70px;
+  text-align: center;
+  border-right: 3px #ffcccc;
+  border-bottom: 3px #ffcccc;
+  /*border-radius: 120px 0px;*/
+  border-style: solid dotted;
+  height: auto;
+}
+
+#footer {
+  margin-left: 36px;
+  font-family: 'Poppins', sans-serif;
+}
+
+@media (max-width: 575px) {
+  .title_story {
+    font-size: 300%;
+    line-height: 52px;
+    padding-bottom: 16px;
+  }
+}
+
+</style>
+
+<template>
+
+  <b-container fluid class="p-0">
+    <MenuBar/>
+
+    <b-row>
+      <b-col md="8">
+        <p class="title_story">Order print edition</p>
+
+      </b-col>
+    </b-row>
+    <b-row class="about-text">
+        <b-col md="6">
+<p>To order, send an <a href="mailto:hello@magiun.online">email!</a></p>
+          <p>Magiun #1</p>
+          <b-img class="img-fluid" id="scan" src="media/magiun_scan_test.jpg" alt=""></b-img>
+        </b-col>
+        <b-col md="6">
+          <p id="footer">
+            <a href="/firstissue">Issue #1: On eating in isolation</a>
+              <br>
+            <a href="/">Issue #2: On adapting</a></p>
+        </b-col>
+      </b-row>
+    </b-container>
+
+</template>
+
+<script>
+
+import MenuBar from './MenuBar'
+export default {
+    name: 'Order',
+    components: {
+        MenuBar
+    }
+}
+
+</script>

src/components/SecondEditionPage.vue

@@ -17,7 +17,7 @@ body {
 }
 
 #magi {
-  width: 100%;
+  width: 60%;
   z-index: -1;
   padding: 20px;
   --color-stop: #fff5f5;
@@ -29,7 +29,7 @@ body {
 }
 
 #mag_title {
-  font-size: 600%;
+  font-size: 400%;
   /*color: #ffcccc;*/
   color: #333042;
   font-family: 'Work Sans', sans-serif;
@@ -51,7 +51,7 @@ body {
 }
 
 #mag_subtitle {
-  font-size: 300%;
+  font-size: 200%;
   font-family: 'Work Sans', sans-serif;
   color: #333042;
   text-align: center;
@@ -109,6 +109,20 @@ body {
 .item {
   height: auto;
   width: auto;
+  text-align: center;
+  margin-bottom: 20px;
+  color: #333042;
+  font-family: 'Work Sans', sans-serif;
+}
+
+#menu_title {
+  text-align: center;
+  font-family: 'Work Sans', sans-serif;
+  font-size: 150%;
+  margin-bottom: 30px;
+  margin-top: 80px;
+  color: #333042;
+
 }
 
 @media (max-width: 1217px) {
@@ -127,14 +141,13 @@ body {
 
 @media (max-width: 575px) {
   #mag_title {
-    font-size: 60px;
+    font-size: 50px;
     padding-top: inherit;
-    padding-left: 12px;
+
-    padding-right: 12px;
   }
 
   #mag_subtitle {
-    font-size: 24px;
+    font-size: 18px;
     padding-top: inherit;
   }
 
@@ -147,7 +160,7 @@ body {
   }
 
   #magi {
-  padding: 20px;
+  width: 50%;
   border: 3px double ##ffcccc;
   border-radius: 24px 48px 72px 96px;
   }
@@ -223,33 +236,50 @@ a {
   <b-row id="main_container">
     <b-col md="6">
       <b-row>
-        <b-col md="8" offset-md="3">
+        <b-col md="8" offset-md="2">
 
       <a href="/about"><p id="mag_title">Magiun</p></a>
     </b-col>
 
     </b-row>
     <b-row>
-      <b-col md="8" offset-md="3">
+      <b-col md="8" offset-md="4">
+        <a href="/about">
+          <b-img class="img-fluid" id="magi" src="media/magiun_outline.svg"></b-img></a>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col md="8" offset-md="2">
         <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>
+
-        <p class="summary">This second issue of Magiun focuses on...</p>
       </b-col>
     </b-row>
     </b-col>
 
     <b-col md="6">
       <b-row>
-      <b-col md="2">
+<b-col md="8" offset-md="2">
-      </b-col>
+  <p id="menu_title">Magiun #2 On adapting</p>
-        <b-col md="8">
+  <p class="item"><a href="/knife">Paper Thin</a></p>
-          <a href="/about">
+  <p class="item"><a href="/simmered">Simmered Egg</a></p>
-            <b-img class="img-fluid" id="magi" src="media/magiun_outline.svg"></b-img></a>
+  <p class="item"><a href="/soulsoup">Chicken Soup for Soul</a></p>
-        </b-col>
+  <p class="item"><a href="/phone">Christmas Dinner</a></p>
+  <p class="item"><a href="/whatwecan">We do what we can with what we have</a></p>
+  <p class="item"><a href="/lychee">Have you eaten yet?</a></p>
+  <p class="item"><a href="/anise">Adapting to adaptations</a></p>
+
+
+
+
+
+
+
+
+</b-col>
       </b-row>
     </b-col>
     </b-row>
-
+<!--
 <b-row>
 <b-col md="4" offset-md="4">
   <p id="toc">Inside</p>
@@ -340,7 +370,7 @@ a {
   <b-col md="2" order="2" order-sm="1">
   <a href="/anise"><b-img class="img-fluid" id="anise" center alt="Responsive image" src="media/magiun2/anise_small.png"></b-img></a>
   </b-col>
-</b-row>
+</b-row> -->
 <b-row>
   <b-col>
 <footer>

src/main.js

@@ -40,6 +40,7 @@ import phone from './components/phone'
 import whatwecan from './components/whatwecan'
 import lychee from './components/lychee'
 import anise from './components/anise'
+import Order from './components/Order'
 
 
 Vue.config.productionTip = false
@@ -76,7 +77,8 @@ const router = new VueRouter({
     { path: '/phone', component: phone },
     { path: '/whatwecan', component: whatwecan },
     { path: '/lychee', component: lychee },
-    { path: '/anise', component: anise }
+    { path: '/anise', component: anise },
+    { path: '/order', component: Order }
 
   ]