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

Compare commits

base: alicestrt:d7b494d68cabb76853ef4c5bb01b747a8cb76e25
Branches Tags
alicestrt:master
...
compare: alicestrt:2a39955fe9d9410f1a763bd8b7140e403203a71a
Branches Tags
alicestrt:master

2 Commits
d7b494d68c ... 2a39955fe9

Author SHA1 Message Date
simon 2a39955fe9 changed Second Edition page 3 years ago
simon f974ef0029 changed About page 3 years ago
2 changed files with 121 additions and 72 deletions
Show Stats

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

@ -25,8 +25,8 @@ a:hover {
}
a {
color: #ff4c2b;
color: #333042;
text-decoration: underline;
}
.container_width {
@ -38,24 +38,28 @@ a {
}
.title_story {
font-size: 80px;
font-size: 300%;
font-family: 'Work Sans', sans-serif;
padding-left: 20px;
padding-top: 70px;
color: #333042
text-align: center;
border-right: 3px #ffcccc;
border-bottom: 3px #ffcccc;
/*border-radius: 120px 0px;*/
border-style: solid dotted;
height: auto;
}
#footer {
margin-top: 14em;
margin-left: 30px;
margin-left: 36px;
font-family: 'Poppins', sans-serif;
margin-bottom: 3em;
}
@media (max-width: 575px) {
.title_story {
font-size: 30px;
font-size: 300%;
line-height: 52px;
padding-bottom: 16px;
}
}
@ -86,16 +90,14 @@ 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 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>
<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>

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

@ -16,31 +16,58 @@ body {
min-height: 100vh;
}
#magi {
width: 100%;
z-index: -1;
padding: 20px;
--color-stop: #fff5f5;
--color-bot: #333042;
}
.img-fluid {
fill: url(#magi) #ffcccc;
}
#mag_title {
font-size: 120px;
font-size: 600%;
/*color: #ffcccc;*/
color: #333042;
font-family: 'Work Sans', sans-serif;
text-align: center;
padding-top: 30%;
z-index: 1;
text-align: center;
z-index: 1;
border-top: 3px #ffcccc;
border-left: 3px #ffcccc;
border-style: solid dotted;
/*border-radius: 0px 72px;*/
padding: 6px;
/*height: auto;*/
/*-webkit-text-stroke: 1px #333042;*/
/*transition: all .1s ease;*/
}
#mag_title:hover {
/*border-radius: 0px 72px;*/
box-shadow: 6px 6px #ffcccc;
}
#mag_subtitle {
font-size: 40px;
font-size: 300%;
font-family: 'Work Sans', sans-serif;
color: #333042;
text-align: center;
border-right: 3px #ffcccc;
border-bottom: 3px #ffcccc;
/*border-radius: 120px 0px;*/
border-style: solid dotted;
height: auto;
padding: 6px;
}
.summary {
border-left: 3px solid #ffcccc;
border-top: 3px dotted #ffcccc;
padding: 20px;
}
.icons img {
width: 60%;
@ -51,7 +78,7 @@ body {
font-size: 20px;
font-family: 'Poppins', sans-serif;
color: #333042;
padding-top: 25%;
padding-top: 10%;
text-decoration: 2px underline #ffcccc;
}
@ -59,6 +86,11 @@ body {
padding-bottom: 40px;
}
.col-md-2 {
border-right: 3px dotted #ffcccc;
display: table;
}
.container_width {
max-width: 100%;
}
@ -66,49 +98,63 @@ body {
#toc {
color: #333042;
font-family: 'Work Sans', sans-serif;
text-align: center;
font-size: 50px;
padding-top: 40px;
padding-bottom: 20px;
text-align: center;
font-size: 300%;
padding-top: 20px;
padding-bottom: 20px;
border-top: 3px solid #ffcccc;
border-left: 3px dotted #ffcccc;
}
.item {
height: auto;
width: auto;
}
@media (max-width: 1217px) {
#mag_title {
font-size: 30px;
font-size: 300%;
padding-top: 10px;
padding-left: 20px;
padding-left: 12px;
padding-right: 12px;
}
#mag_subtitle {
font-size: 15px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 150%;
padding-top: inherit;
/*padding-left: 20px;*/
}
}
@media (max-width: 575px) {
#mag_title {
font-size: 60px;
padding-top: 10px;
padding-left: 20px;
padding-top: inherit;
padding-left: 12px;
padding-right: 12px;
}
#mag_subtitle {
font-size: 18px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 24px;
padding-top: inherit;
}
.icons img {
width: 50%;
width: 80%;
}
.icons p {
padding-top: 0px;
padding-top: 10%;
}
#magi {
padding-left: 20px;
padding-right: 20px;
padding: 20px;
border: 3px double ##ffcccc;
border-radius: 24px 48px 72px 96px;
}
}
.col-md-2 {
border: none;
}
}
a:hover {
@ -124,7 +170,7 @@ a {
#main_container {
padding-top: 100px;
padding-bottom: 120px;
border-bottom: 2px #ffcccc solid;
/*border-bottom: 2px #ffcccc solid;*/
}
@ -132,7 +178,8 @@ a {
text-align: center;
font-family: 'Poppins', sans-serif;
color: #333042;
padding-top: 10px;
padding: 6px;
font-size: small;
}
.glow {
@ -153,7 +200,8 @@ a {
}
#knife, #porcini, #cauliflower, #phone, #clothes, #lychee, #anise {
margin-top: 20px;
/*margin-top: 20px;*/
margin: auto;
}
@-webkit-keyframes glow {
@ -183,26 +231,25 @@ a {
</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>
<p class="summary">This second issue of Magiun focuses on...</p>
<p class=""
</b-col>
</b-row>
</b-col>
<b-col md="6">
<b-row>
<b-col md="2"></b-col>
<b-col md="8">
<a href="/about"><b-img class="img-fluid" id="magi" src="media/invert.gif"></b-img></a>
<b-row>
<b-col md="2">
</b-col>
<b-col md="8">
<a href="/about">
<b-img class="img-fluid" id="magi" src="media/magiun_outline.svg"></b-img></a>
</b-col>
</b-row>
</b-col>
<b-col md="2"></b-col>
</b-row>
</b-col>
</b-row>
<b-row>
<b-col md="4" offset-md="4">
@ -215,7 +262,7 @@ a {
</b-col>
<b-col md="2">
<p><a href="/knife">Knife</a></p>
<p class="item"><a href="/knife">Knife</a></p>
</b-col>
<b-col md="2" order="0" order-sm="1">
@ -231,7 +278,7 @@ a {
<a href="/simmered"><b-img class="img-fluid" id="porcini" center alt="Responsive image" src="media/magiun2/porcini_small.png"></b-img></a>
</b-col>
<b-col md="2" order="1" order-sm="0">
<p><a href="/simmered">Simmered Egg</a></p>
<p class="item"><a href="/simmered">Simmered Egg</a></p>
</b-col>
@ -242,7 +289,7 @@ a {
</b-col>
<b-col md="2">
<p><a href="/soulsoup">Chicken soup for soul</a></p>
<p class="item"><a href="/soulsoup">Chicken soup for soul</a></p>
</b-col>
<b-col md="2" order="2" order-sm="1">
@ -256,7 +303,7 @@ a {
</b-col>
<b-col md="2">
<p><a href="/phone">Christmas dinner</a></p>
<p class="item"><a href="/phone">Christmas dinner</a></p>
</b-col>
@ -264,7 +311,7 @@ a {
<b-row class="icons">
<b-col md="2" offset-md="5">
<p><a href="/whatwecan">We do what we can with what we have</a></p>
<p class="item"><a href="/whatwecan">We do what we can with what we have</a></p>
</b-col>
<b-col md="2" order="2" order-sm="1">
@ -278,7 +325,7 @@ a {
</b-col>
<b-col md="2">
<p><a href="/lychee">Have you eaten yet?</a></p>
<p class="item"><a href="/lychee">Have you eaten yet?</a></p>
</b-col>
@ -288,7 +335,7 @@ a {
<b-col md="2" offset-md="5">
<p><a href="/anise">Adapting to adaptations</a></p>
<p class="item"><a href="/anise">Adapting to adaptations</a></p>
</b-col>
<b-col md="2" order="2" order-sm="1">

Write Preview
Loading…
Cancel
Save