added order

master
alicestrt 3 years ago
parent cb373f9cc3
commit b599cb416e

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 MiB

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

@ -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>

@ -17,7 +17,7 @@ body {
} }
#magi { #magi {
width: 100%; width: 60%;
z-index: -1; z-index: -1;
padding: 20px; padding: 20px;
--color-stop: #fff5f5; --color-stop: #fff5f5;
@ -29,7 +29,7 @@ body {
} }
#mag_title { #mag_title {
font-size: 600%; font-size: 400%;
/*color: #ffcccc;*/ /*color: #ffcccc;*/
color: #333042; color: #333042;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
@ -51,7 +51,7 @@ body {
} }
#mag_subtitle { #mag_subtitle {
font-size: 300%; font-size: 200%;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
color: #333042; color: #333042;
text-align: center; text-align: center;
@ -109,6 +109,20 @@ body {
.item { .item {
height: auto; height: auto;
width: 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) { @media (max-width: 1217px) {
@ -127,14 +141,13 @@ body {
@media (max-width: 575px) { @media (max-width: 575px) {
#mag_title { #mag_title {
font-size: 60px; font-size: 50px;
padding-top: inherit; padding-top: inherit;
padding-left: 12px;
padding-right: 12px;
} }
#mag_subtitle { #mag_subtitle {
font-size: 24px; font-size: 18px;
padding-top: inherit; padding-top: inherit;
} }
@ -147,7 +160,7 @@ body {
} }
#magi { #magi {
padding: 20px; width: 50%;
border: 3px double ##ffcccc; border: 3px double ##ffcccc;
border-radius: 24px 48px 72px 96px; border-radius: 24px 48px 72px 96px;
} }
@ -223,33 +236,50 @@ a {
<b-row id="main_container"> <b-row id="main_container">
<b-col md="6"> <b-col md="6">
<b-row> <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> <a href="/about"><p id="mag_title">Magiun</p></a>
</b-col> </b-col>
</b-row> </b-row>
<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="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-col>
</b-row> </b-row>
</b-col> </b-col>
<b-col md="6"> <b-col md="6">
<b-row> <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-row>
</b-col> </b-col>
</b-row> </b-row>
<!--
<b-row> <b-row>
<b-col md="4" offset-md="4"> <b-col md="4" offset-md="4">
<p id="toc">Inside</p> <p id="toc">Inside</p>
@ -340,7 +370,7 @@ a {
<b-col md="2" order="2" order-sm="1"> <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> <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-col>
</b-row> </b-row> -->
<b-row> <b-row>
<b-col> <b-col>
<footer> <footer>

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

Loading…
Cancel
Save