added fade transition

master
alicestrt 3 years ago
parent 8a463212d7
commit cdad16d851

Binary file not shown.

Binary file not shown.

@ -4,7 +4,9 @@ RSYNC := rsync -chavzP
SRC := dist/* SRC := dist/*
SSH := ssh -t SSH := ssh -t
BUILD := npm run build BUILD := npm run build
RUN := npm run serve
default: serve
all: publish all: publish
build: build:
@ -12,3 +14,6 @@ build:
publish: build publish: build
$(RSYNC) $(SRC) $(REMOTE):$(DEST) $(RSYNC) $(SRC) $(REMOTE):$(DEST)
serve:
$(RUN)

@ -1,16 +1,24 @@
<template> <template>
<b-container fluid> <b-container fluid>
<transition <transition
name="fade" :name="transitionName"
mode="out-in"> mode="out-in"
>
<router-view></router-view> <router-view></router-view>
</transition> </transition>
</b-container> </b-container>
</template> </template>
<script> <script>
const DEFAULT_TRANSITION = 'fade';
export default { export default {
name: 'app', name: 'app',
data() {
return {
transitionName: DEFAULT_TRANSITION,
};
}
} }
</script> </script>
@ -26,4 +34,26 @@ export default {
.fade-leave-active { .fade-leave-active {
opacity: 0 opacity: 0
} }
.slide-leave-active,
.slide-enter-active {
transition: 0.5s;
}
.slide-enter {
transform: translate(100%, 0);
}
.slide-leave-to {
transform: translate(-100%, 0);
}
.slideback-leave-active,
.slideback-enter-active {
transition: 0.5s;
}
.slideback-enter {
transform: translate(-100%, 0);
}
.slideback-leave-to {
transform: translate(100%, 0);
}
</style> </style>

@ -0,0 +1,268 @@
<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');
@font-face {
font-family: 'Happy Times';
src: url('../../fonts/happy-times-NG_regular_master.otf');
}
@font-face {
font-family: 'Semi Light Dots';
src: url('../../fonts/AC1-SemiLightDots.otf');
}
@font-face {
font-family: 'ED Regular';
src: url('../../fonts/ED-Regular.otf');
}
@font-face {
font-family: 'AUTHENTICSans';
src: url('../../fonts/AUTHENTICSans-90.otf');
font-weight: 400;
}
* {
border: 0px black solid;
background-color: #E6F2FB;
}
body {
background-color: #E6F2FB;
min-height: 100vh;
}
#magi {
background-color: transparent;
/*padding: 20px;*/
/*--color-stop: #fff5f5;*/
/*--color-bot: #333042;*/
}
.img-fluid {
/*fill: url(#magi) #ffcccc;*/
}
#mag_title {
font-size: 500%;
/*color: #ffcccc;*/
color: black;
font-family: 'Work Sans', sans-serif;
text-align: left;
/*position: fixed;*/
/*padding: 6px;*/
background-color: transparent;
z-index: 1;
}
#mag_subtitle {
font-size: 250%;
font-family: 'AUTHENTICSans';
color: black;
background-color: transparent;
height: auto;
text-align: left;
}
.summary {
border-left: 3px solid #ffcccc;
border-top: 3px dotted #ffcccc;
padding: 20px;
}
.icons img {
width: 60%;
}
.author {
font-family: 'ED-Regular', sans-serif;;
text-align: center;
color: #FA00FF;
}
.container_width {
max-width: 100%;
}
#toc {
color: #1B75BC;
font-family: 'AUTHENTICSans';
font-size: 120%;
text-align: center;
padding: 24px;
max-width: 100%;
min-width: 70%;
margin: 18px;
}
a {
color: #1B75BC;
}
.author {
color: #1B75BC;
}
#edition {
color: black;
font-size: 18px;
font-family: 'AUTHENTICSans';
letter-spacing: 1px;
margin-top: 80px;
text-align: left;
background-colour: transparent;
}
@media (max-width: 1217px) {
#mag_title {
font-size: 500%;
padding-top: 12px;
}
#mag_subtitle {
font-size: 150%;
text-align: left;
padding-top: inherit;
}
}
@media (max-width: 575px) {
#mag_title {
font-size: 80px;
padding-top: inherit;
}
#mag_subtitle {
padding-top: inherit;
text-align: right;
}
#edition {
font-size: 18px;
text-align: right;
margin-top: -36px;
background-color: transparent;
}
.icons img {
width: 80%;
}
.icons p {
padding-top: 10%;
}
#magi {
width: 50%;
text-align: right;
margin-top: -24px;
}
.col-md-2 {
border: none;
}
#main_container {
padding-top: 64px;
}
}
#main_container {
padding-top: 72px;
padding-bottom: 120px;
}
.footer_page {
font-family: 'Poppins', sans-serif;
font-size: 12px;
text-align: center;
margin-top: 20px;
}
</style>
<template>
<div>
<MenuBar/>
<b-container fluid class="p-0">
<b-row id="main_container">
<b-col md="6">
<b-row>
<b-col md="6" offset-md="2">
<router-link to="/about"><p id="mag_title">Magiun</p></router-link>
</b-col>
<b-col id="edition">Winter 2021
</b-col>
</b-row>
<b-row>
<b-col md="6" offset-md="2">
<p id="mag_subtitle">#3 On Routine</p>
</b-col>
</b-row>
</b-col>
<b-col md="4" offset-md="1">
<b-row>
<b-col id="toc">
<p class="recipe_title">Contents</p>
<p class="item"><router-link to="/twoberries">Floating on Habit</router-link><br>
<span class="author">Alina Turdean</span>
</p>
<p class="item"><router-link to="/workfromhome">Freestyle Platouaș</router-link><br>
<span class="author">Ileana Sebe</span>
</p>
<p class="item"><router-link to="/bananas">[each] Tuesday Afternoon</router-link><br>
<span class="author">Sylvie van Wijk</span>
</p>
<p class="item"><router-link to="/popcorn">Yes, Chef</router-link><br>
<span class="author">Esmeralda Anstrauta</span>
</p>
<p class="item"><router-link to="/potato">One Way with Potatoes</router-link><br>
<span class="author">Honey Jones-Hughes</span>
</p>
<p class="item"><router-link to="/bowl">Cooking Apart Together</router-link><br>
<span class="author">Louisa Bufardeci and Inge Hoonte</span>
</p>
<p class="item"><router-link to="/threeeggs">Me, My Mom and those Three Eggs</router-link><br>
<span class="author">Patricia Cîrtog</span>
</p>
<p class="item"><router-link to="/olives">A Jar of Green Olives</router-link><br>
<span class="author">Raluca Chereji</span>
</p>
<p class="item"><router-link to="/vodka">Spoiled</router-link><br>
<span class="author">Ana-Maria Gușu</span>
</p>
<p class="item"><router-link to="/mittens">How to Poach an Egg (Perfectly)</router-link><br>
<span class="author">Valentina Vella</span>
</p>
</b-col>
</b-row>
</b-col>
</b-row>
<b-row>
<b-col>
<footer>
<p class="footer_page">This web publication was created by Alice Strete with Simon Browne</p>
</footer>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'ThirdEdition',
components: {
MenuBar
}
}
</script>

@ -152,7 +152,7 @@ a {
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<router-link to="/" id="leftarrow"></router-link> <router-link to="/" id="leftarrow"></router-link>
<a href="/simmered" id="rightarrow"></a> <router-link to="/simmered" id="rightarrow"></router-link>
</b-col> </b-col>
</b-row> </b-row>
@ -220,9 +220,20 @@ export default {
return { return {
} }
}, },
components: { // components: {
MenuBar // MenuBar
} // },
// beforeRouteLeave(to, from, next) {
// let transitionName = to.meta.transitionName || from.meta.transitionName;
// if (document.activeElement.id === 'leftarrow') {
// this.transitionName = 'slide';
// }
// console.log('thisistransition', this.transitionName);
// next();
// },
} }
</script> </script>

@ -1,18 +1,5 @@
<style scoped> <style scoped>
@import url('https://fonts.googleapis.com/css2?family=Viga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@font-face {
font-family: 'Happy Times';
src: url('../../../fonts/happy-times-NG_regular_master.otf');
}
@font-face {
font-family: 'Semi Light Dots';
src: url('../../../fonts/AC1-SemiLightDots.otf');
}
@font-face {
font-family: 'ED Regular';
src: url('../../../fonts/ED-Regular.otf');
}
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-60.otf');
@ -215,7 +202,7 @@ visibility: hidden;
<b-col md="4" class="color_back"> <b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/workfromhome" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <router-link to="/workfromhome" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
<p id="onhover_left">Freestyle Platouaș</p> <p id="onhover_left">Freestyle Platouaș</p>
</b-col> </b-col>
</b-row> </b-row>
@ -294,7 +281,7 @@ A concluding consideration: its a hot paradox. The practice of collecting cas
<b-col md="4" class="color_next"> <b-col md="4" class="color_next">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/popcorn" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a> <router-link to="/popcorn" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">Yes, Chef</p> <p id="onhover_right">Yes, Chef</p>
</b-col> </b-col>
</b-row> </b-row>

@ -178,7 +178,7 @@ a {
<b-col md="4" class="color_back"> <b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/potato" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <router-link to="/potato" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
<p id="onhover_left">One Way with Potatoes</p> <p id="onhover_left">One Way with Potatoes</p>
</b-col> </b-col>
</b-row> </b-row>
@ -315,7 +315,7 @@ In our house we all eat different foods for dinner. Usually my partner has some
<b-col md="4" class="color_next"> <b-col md="4" class="color_next">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/threeeggs" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a> <router-link to="/threeeggs" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">Me, My Mom and Those Three Eggs</p> <p id="onhover_right">Me, My Mom and Those Three Eggs</p>
</b-col> </b-col>
</b-row> </b-row>

@ -160,7 +160,7 @@ visibility: hidden;
<b-col md="3" class="color_back"> <b-col md="3" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/vodka" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <router-link to="/vodka" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
<p id="onhover_left">Spoiled</p> <p id="onhover_left">Spoiled</p>
</b-col> </b-col>
</b-row> </b-row>
@ -277,7 +277,7 @@ And buying up our housing stock).<br>
<b-col md="4" class="color_next"> <b-col md="4" class="color_next">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a> <router-link to="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">Colophon</p> <p id="onhover_right">Colophon</p>
</b-col> </b-col>
</b-row> </b-row>

@ -160,7 +160,7 @@ visibility: hidden;
<b-col md="4" class="color_back"> <b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/threeeggs" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <router-link to="/threeeggs" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
<p id="onhover_left">Me, My Mom and Those Three Eggs</p> <p id="onhover_left">Me, My Mom and Those Three Eggs</p>
</b-col> </b-col>
</b-row> </b-row>
@ -209,7 +209,7 @@ I still buy olives on my way home.
<b-col md="4" class="color_next"> <b-col md="4" class="color_next">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a> <router-link to="/vodka" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">Spoiled</p> <p id="onhover_right">Spoiled</p>
</b-col> </b-col>
</b-row> </b-row>

@ -182,7 +182,7 @@ visibility: hidden;
<b-col md="4" class="color_back"> <b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <router-link to="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
<p id="onhover_left">[each] Tuesday Afternoon</p> <p id="onhover_left">[each] Tuesday Afternoon</p>
</b-col> </b-col>
</b-row> </b-row>
@ -217,7 +217,7 @@ Don't get me wrong, I dearly love being a chef and the starched-white aesthetics
<b-col md="4" class="color_next"> <b-col md="4" class="color_next">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/potato" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a> <router-link to="/potato" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">One Way with Potatoes</p> <p id="onhover_right">One Way with Potatoes</p>
</b-col> </b-col>
</b-row> </b-row>

@ -183,7 +183,7 @@ visibility: hidden;
<b-col md="4" class="color_back"> <b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <router-link to="/bananas" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
<p id="onhover_left">Yes, Chef</p> <p id="onhover_left">Yes, Chef</p>
</b-col> </b-col>
</b-row> </b-row>
@ -235,7 +235,7 @@ hot as it goes, until their edges crisp.
<b-col md="4" class="color_next"> <b-col md="4" class="color_next">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/bowl" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a> <router-link to="/bowl" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">Cooking Apart Together</p> <p id="onhover_right">Cooking Apart Together</p>
</b-col> </b-col>
</b-row> </b-row>

@ -160,7 +160,7 @@ visibility: hidden;
<b-col md="4" class="color_back"> <b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/bowl" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <router-link to="/bowl" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
<p id="onhover_left">Cooking Apart Together</p> <p id="onhover_left">Cooking Apart Together</p>
</b-col> </b-col>
</b-row> </b-row>
@ -205,7 +205,7 @@ In college, I dont eat omelet anymore. If I dont hear the sound of my moth
<b-col md="4" class="color_next"> <b-col md="4" class="color_next">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/olives" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a> <router-link to="/olives" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">A Jar of Green Olives</p> <p id="onhover_right">A Jar of Green Olives</p>
</b-col> </b-col>
</b-row> </b-row>

@ -184,7 +184,7 @@ visibility: hidden;
<b-col md="4" class="color_back"> <b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/whatwecan" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <a href="/EditorNote3" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<p id="onhover_left">Editor's note</p> <p id="onhover_left">Editor's note</p>
</b-col> </b-col>
</b-row> </b-row>

@ -176,7 +176,7 @@ visibility: hidden;
} }
.color_back { .color_back {
background-color: #FFF5F5; background-color: #FBFFF0;
} }
.color_next { .color_next {
@ -216,7 +216,7 @@ visibility: hidden;
<b-col md="4" class="color_back"> <b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/olives" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <router-link to="/olives" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
<p id="onhover_left">A Jar of Green Olives</p> <p id="onhover_left">A Jar of Green Olives</p>
</b-col> </b-col>
</b-row> </b-row>
@ -274,7 +274,7 @@ visibility: hidden;
<b-col md="4" class="color_next"> <b-col md="4" class="color_next">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/mittens" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a> <router-link to="/mittens" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">How to Poach an Egg (Perfectly)</p> <p id="onhover_right">How to Poach an Egg (Perfectly)</p>
</b-col> </b-col>
</b-row> </b-row>

@ -213,7 +213,7 @@ visibility: hidden;
<b-col md="4" class="color_back"> <b-col md="4" class="color_back">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/twoberries" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a> <router-link to="/twoberries" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></router-link>
<p id="onhover_left">Floating on Habit</p> <p id="onhover_left">Floating on Habit</p>
</b-col> </b-col>
</b-row> </b-row>
@ -281,7 +281,7 @@ Not the usual combinations, but very satisfying for my taste buds and so easy to
<b-col md="4" class="color_next"> <b-col md="4" class="color_next">
<b-row class="controls"> <b-row class="controls">
<b-col md="12" class="arrows"> <b-col md="12" class="arrows">
<a href="/bananas" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a> <router-link to="/bananas" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></router-link>
<p id="onhover_right">[each] Tuesday Afternoon</p> <p id="onhover_right">[each] Tuesday Afternoon</p>
</b-col> </b-col>
</b-row> </b-row>

@ -53,6 +53,8 @@ import vodka from './components/edition3/vodka'
import workfromhome from './components/edition3/workfromhome' import workfromhome from './components/edition3/workfromhome'
import bowl from './components/edition3/bowl' import bowl from './components/edition3/bowl'
import EditorNote3 from './components/edition3/EditorNote3' import EditorNote3 from './components/edition3/EditorNote3'
import ThirdEdition from './components/ThirdEdition'
@ -103,7 +105,9 @@ const router = new VueRouter({
{ path: '/vodka', component: vodka }, { path: '/vodka', component: vodka },
{ path: '/workfromhome', component: workfromhome }, { path: '/workfromhome', component: workfromhome },
{ path: '/bowl', component: bowl }, { path: '/bowl', component: bowl },
{ path: '/EditorNote3', component: EditorNote3 } { path: '/EditorNote3', component: EditorNote3 },
{ path: '/thirdedition', component: ThirdEdition }
] ]

Loading…
Cancel
Save