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

styled freestyle

Browse Source
master
alicestrt 3 years ago
parent 3bbe368897
commit a2037fe751
6 changed files with 206 additions and 93 deletions
Show Stats Download Patch File Download Diff File

BIN
fonts/AUTHENTICSans-90.otf
View File

Binary file not shown.

BIN
fonts/AUTHENTICSans-Condensed-60.otf
View File

Binary file not shown.

BIN
media/left-arrow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 B

BIN
media/right-arrow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 B

81
src/components/edition3/twoberries.vue
Unescape Escape View File

@ -15,14 +15,43 @@
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-60.otf');
font-weight: lighter;
}
@font-face {
font-family: 'AUTHENTICSans';
src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: 400;
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
} }
* { * {
border: 1px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
body.loaded .fadein {
opacity: 1;
}
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -43,12 +72,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansLight';
font-weight: lighter;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
padding-bottom: 40px; padding-bottom: 40px;
color: black; color: black;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -61,14 +92,22 @@ a {
.title_story { .title_story {
font-size: 48px; font-size: 48px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
padding-top: 70px; padding-top: 70px;
color: black; color: black;
text-align: center; text-align: left;
}
.author {
font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 20px; top: 30px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
@ -99,9 +138,16 @@ visibility: hidden;
color: black; color: black;
} }
.onhover { #onhover_right {
font-size: 15px;
margin-top: 60px;
text-align: right;
}
#onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 60px;
text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
@ -119,12 +165,6 @@ visibility: hidden;
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg); filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
} }
.author {
font-size: 20px;
font-family: 'AUTHENTICSans', sans-serif;;
text-align: center;
color: black;
}
.small_icon { .small_icon {
@ -171,15 +211,14 @@ visibility: hidden;
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<div class="bodyyy">
<b-row> <b-row>
<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">⟵</a> <a href="/whatwecan" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<p class="onhover">Editor's note</p> <p id="onhover_left">Editor's note</p>
</b-col> </b-col>
</b-row> </b-row>
@ -206,7 +245,7 @@ visibility: hidden;
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">essay and illustration by Alina Turdean</p> <p class="author">by Alina Turdean</p>
</b-col> </b-col>
</b-row> </b-row>
@ -239,13 +278,13 @@ But blandness aside, I like this certainty of a particular food or a recipe that
<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="/workfromhome" id="rightarrow">⟶</a> <a href="/workfromhome" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<p id="onhover_right">Freestyle Platouaș</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
</b-row> </b-row>
</div>
</b-container> </b-container>
</template> </template>
@ -257,9 +296,15 @@ export default {
return { return {
} }
}, },
mounted(){
window.onload = function() {
document.body.classList.add('loaded');
}
},
components: { components: {
MenuBar MenuBar
} }
} }
</script> </script>

218
src/components/edition3/workfromhome.vue
Unescape Escape View File

@ -13,11 +13,44 @@
font-family: 'ED Regular'; font-family: 'ED Regular';
src: url('../../../fonts/ED-Regular.otf'); src: url('../../../fonts/ED-Regular.otf');
} }
@font-face {
font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf');
font-weight: lighter;
}
@font-face {
font-family: 'AUTHENTICSans';
src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: 400;
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
body.loaded .fadein {
opacity: 1;
}
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -38,12 +71,14 @@ a {
.content { .content {
/*padding-right: 50px;*/ /*padding-right: 50px;*/
/*padding-left: 60px;*/ /*padding-left: 60px;*/
font-family: 'Happy Times'; font-family: 'AUTHENTICSansLight';
font-weight: lighter;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
/*padding-bottom: 40px;*/ padding-bottom: 40px;
color: #1B75BC; color: black;
text-align: left; text-align: left;
} }
.controls { .controls {
@ -54,59 +89,80 @@ a {
} }
.title_story { .title_story {
font-size: 80px; font-size: 48px;
font-family: 'Semi Light Dots', sans-serif; font-family: 'AUTHENTICSans', sans-serif;
padding-top: 20px; font-weight: 400;
color: #FA00FF; padding-top: 70px;
text-align: center; color: black;
text-align: left;
}
.author {
font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif;
font-weight: 400;
text-align: right;
color: black;
} }
.arrows { .arrows {
font-size: 80px; font-size: 40px;
font-family: 'Semi Light Dots', sans-serif; top: 30px;
top: 36px; color: black;
color: #FA00FF;
vertical-align: top; vertical-align: top;
position: fixed;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans';
} }
.arrows p {
visibility: hidden;
}
.arrows:hover p {
visibility: visible;
}
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: #FA00FF; color: black;
} }
#rightarrow { #rightarrow {
float: right; float: right;
color: #FA00FF; color: black;
} }
#onhover_right {
font-size: 15px;
margin-top: 60px;
text-align: right;
}
#onhover_left {
font-size: 15px;
margin-top: 60px;
text-align: left;
}
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }
.photo { .photo {
width: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
padding: 12px; padding: 20px;
} }
.img-fluid { .img-fluid {
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg); filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
} }
.author {
font-size: 20px;
font-family: 'ED-regular', sans-serif;;
text-align: center;
color: #FA00FF;
}
.small_icon { .small_icon {
@ -118,6 +174,14 @@ a {
max-width: 100%; max-width: 100%;
} }
.color_back {
background-color: #EDECFF;
}
.color_next {
background-color: #FFB37B;
}
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;
@ -144,21 +208,18 @@ a {
<template> <template>
<b-container fluid class="p-0"> <b-container fluid class="p-0">
<MenuBar/> <MenuBar/>
<b-row class="controls">
<b-col md="12" class="arrows">
<a href="/twoberries" id="leftarrow">←</a>
<a href="/soulsoup" id="rightarrow">→</a>
</b-col>
</b-row>
<b-row> <b-row>
<b-col md="4"> <b-col md="4" class="color_back">
<b-row> <b-row class="controls">
<b-col md="6" offset-md="3"> <b-col md="12" class="arrows">
<div class="zoom"> <a href="/twoberries" id="leftarrow"><b-img src="media/left-arrow.png"></b-img></a>
<b-img center class="img-fluid" alt="Responsive image" src="media/magiun2/porcini.png"></b-img> <p id="onhover_left">Floating on Habit</p>
</div> </b-col>
</b-col> </b-row>
</b-row>
</b-col>
<b-col md="4" class="color_back">
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="title_story">Freestyle Platouaș</p> <p class="title_story">Freestyle Platouaș</p>
@ -166,57 +227,64 @@ a {
</b-row> </b-row>
<b-row> <b-row>
<b-col md="12"> <b-col md="12">
<p class="author">essay and photos by Ileana Sebe</p> <p class="author">by Ileana Sebe</p>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
<b-col md="4">
<div class='content'> <div class='content'>
<p>Work from home has come with new eating habits, <br> <p>Work from home has come with new eating habits, <br>
some of them not the healthiest ones,<br> some of them not the healthiest ones,<br>
at least not what was considered healthy before the covid period. at least not what was considered healthy before the covid period.
</p><p> </p>
<div class="image_container">
<b-row>
<b-col md="12">
<b-img class="photo" src="media/ileana/ileana_1.jpg"> </b-img>
</b-col>
</b-row>
</div>
<p>
I for myself took the lunch break very late in the afternoon, <br> I for myself took the lunch break very late in the afternoon, <br>
when hunger was beyond its peak point. when hunger was beyond its peak point.
</p><p> </p>
<b-row>
<b-col md="12">
<b-img class="photo" src="media/ileana/ileana_2.jpg"> </b-img>
</b-col>
</b-row><p>
I ate more often by the computer which never happened while working in an office building and sharing lunch with colleagues. I ate more often by the computer which never happened while working in an office building and sharing lunch with colleagues.
</p><p> </p>
<b-row>
<b-col md="12">
<b-img class="photo" src="media/ileana/ileana_3.jpg"> </b-img>
</b-col>
</b-row>
<p>
So, when hunger kicked in big time, the only thing to do was to grab on a plate of food I like and had in the fridge or pantry and create a freestyle salty & sweet mix. So, when hunger kicked in big time, the only thing to do was to grab on a plate of food I like and had in the fridge or pantry and create a freestyle salty & sweet mix.
</p><p> </p>
<b-row>
<b-col md="12">
<b-img class="photo" src="media/ileana/ileana_4.jpg"> </b-img>
</b-col>
</b-row>
<p>
Not the usual combinations, but very satisfying for my taste buds and so easy to make. Not the usual combinations, but very satisfying for my taste buds and so easy to make.
</p> </p>
<b-row>
<b-col md="12">
<b-img class="photo" src="media/ileana/ileana_5.jpg"> </b-img>
</b-col>
</b-row>
</div> </div>
</b-col> </b-col>
<b-col md="4"> <b-col md="4" class="color_next">
<b-container fluid> <b-row class="controls">
<div class="image_container"> <b-col md="12" class="arrows">
<b-row> <a href="/bananas" id="rightarrow"><b-img src="media/right-arrow.png"></b-img></a>
<b-col md="10" offset-md="2"> <p id="onhover_right">[each] Tuesday Afternoon</p>
<b-img class="photo" src="media/ileana/ileana_1.jpg"> </b-img> </b-col>
</b-col> </b-row>
</b-row>
<b-row>
<b-col md="10" offset-md="2">
<b-img class="photo" src="media/ileana/ileana_2.jpg"> </b-img>
</b-col>
</b-row>
<b-row>
<b-col md="10" offset-md="2">
<b-img class="photo" src="media/ileana/ileana_3.jpg"> </b-img>
</b-col>
</b-row>
<b-row>
<b-col md="10" offset-md="2">
<b-img class="photo" src="media/ileana/ileana_4.jpg"> </b-img>
</b-col>
</b-row>
<b-row>
<b-col md="10" offset-md="2">
<b-img class="photo" src="media/ileana/ileana_5.jpg"> </b-img>
</b-col>
</b-row>
</div>
</b-container>
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>

Write Preview
Loading…
Cancel
Save