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

adjusted typography in vue files

Browse Source
master
simon 3 years ago
parent 0ccf196838
commit 5458b128f1
12 changed files with 323 additions and 354 deletions
Show Stats Download Patch File Download Diff File

46
src/components/edition3/EditorNote3.vue
Unescape Escape View File

@ -1,14 +1,14 @@
<style scoped> <style scoped>
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
@ -36,16 +36,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -53,31 +49,32 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
@ -106,30 +103,29 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }
.color_back { .color_back {
background-color: #EDECFF; background-color: #FFFFFF;
} }
.color_next { .color_next {
background-color: #FBFFF0; background-color: #FFE9FA;
} }
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;

49
src/components/edition3/bananas.vue
Unescape Escape View File

@ -2,24 +2,23 @@
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
@keyframes slideInFromLeft { /*@keyframes slideInFromLeft {
0% { 0% {
transform: translateX(-100%); transform: translateX(-100%);
} }
100% { 100% {
transform: translateX(0); transform: translateX(0);
} }
} }*/
* { * {
border: 0px black solid; border: 0px black solid;
@ -46,16 +45,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -63,47 +58,46 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
visibility: hidden; visibility: hidden;
} }
.arrows:hover p { .arrows:hover p {
visibility: visible; visibility: visible;
} }
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: black; color: black;
@ -116,15 +110,18 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }

87
src/components/edition3/bowl.vue
Unescape Escape View File

@ -1,14 +1,14 @@
<style scoped> <style scoped>
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
* { * {
@ -34,16 +34,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -51,41 +47,40 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 35px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author {
font-size: 20px; .author {
font-family: 'AUTHENTICSans', sans-serif; font-size: 36px;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows {
.arrows { font-size: 40px;
font-size: 40px; top: 48px;
top: 30px; color: black;
color: black; vertical-align: top;
vertical-align: top; overflow: hidden;
overflow: hidden; font-family: 'AUTHENTICSansCondensed';
font-family: 'AUTHENTICSans'; }
}
.arrows p {
.arrows p {
visibility: hidden; visibility: hidden;
} }
.arrows:hover p { .arrows:hover p {
visibility: visible; visibility: visible;
} }
.arrows a { .arrows a {
display: block; display: block;
@ -103,13 +98,15 @@ a {
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
@ -122,14 +119,12 @@ a {
float: left; float: left;
margin-top: 150px; margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%); filter: grayscale(80%) contrast(80%) opacity(50%);
} }
#illustration:hover { #illustration:hover {
filter: grayscale(0%); filter: grayscale(0%);
} }
.small_icon { .small_icon {
max-width: 60%; max-width: 60%;
padding-top: 100px; padding-top: 100px;
@ -148,7 +143,7 @@ a {
} }
.pink { .pink {
color: pink; color: #FF5C00;
} }
.color_back { .color_back {

88
src/components/edition3/colophon3.vue
Unescape Escape View File

@ -2,18 +2,15 @@
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
@ -49,16 +46,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -66,29 +59,35 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author {
font-size: 36px;
font-family: 'AUTHENTICSansCondensed', sans-serif;
text-align: right;
color: black;
}
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
visibility: hidden; visibility: hidden;
} }
.arrows:hover p { .arrows:hover p {
@ -96,11 +95,10 @@ visibility: hidden;
} }
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: black; color: black;
@ -113,15 +111,18 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }
@ -138,7 +139,9 @@ visibility: hidden;
filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg); filter: sepia(100%) saturate(300%) brightness(100%) hue-rotate(270deg);
} }
hr.divider {
border-top: 1px solid black;
}
.small_icon { .small_icon {
max-width: 60%; max-width: 60%;
@ -151,6 +154,7 @@ visibility: hidden;
.color_back { .color_back {
background-color: #5FC44F; background-color: #5FC44F;
max-height: 100%;
} }
.color_next { .color_next {
@ -179,6 +183,11 @@ visibility: hidden;
} }
} }
#authentic-sans-link {
color: black;
text-decoration: underline;
}
</style> </style>
<template> <template>
@ -205,32 +214,29 @@ visibility: hidden;
</b-row> </b-row>
<div class='content'> <div class='content'>
<p>Magiun Magazine, <br>
Issue 3, Winter 2021</p> <p>Magiun Magazine,<br>
<p> Issue 3, Winter 2021</p>
Magiun publishes thoughts <p>Magiun publishes thoughts<br>
on everyday food.</p> on everyday food.</p>
<p> <p>This publication has been put together by Alice Strete, with Simon Browne</p>
This publication has been put together by Alice Strete, with Simon Browne</p> <hr class="divider">
<p> <p>Contributions by:<br>
------------------------------------------ Alina, Ileana, Sylvie, Esmeralda,<br>
</p> Honey, Louise, Inge, Patricia,<br>
<p>
Contributions by:<br>
Alina, Ileana, Sylvie, Esmeralda, Honey, Louise, Inge, Patricia,<br>
Raluca, Ana-Maria, Valentina </p> Raluca, Ana-Maria, Valentina </p>
<p> <p>
Typeface: Typeface:<br>
Authentic Sans, designed by <a id="authentic-sans-link" href="https://authentic.website/shop.html#sans" target="blank">Authentic Sans</a>, designed by<br>
Christina Janus and Desmond Wong Christina Janus and Desmond Wong
</p> </p>
<p> <p>
Graphic design: Graphic design:<br>
Simon Browne Simon Browne
</p> </p>
<p> <p>
Illustration: Illustration:<br>
Alice Strete Alice Strete
</p> </p>

53
src/components/edition3/mittens.vue
Unescape Escape View File

@ -1,23 +1,21 @@
<style scoped> <style scoped>
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -25,7 +23,6 @@
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
@ -36,48 +33,52 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
font-weight: lighter; font-size: 18px;
font-size: 16px;
line-height: 24px; line-height: 24px;
padding-bottom: 40px; padding-bottom: 40px;
color: black; color: black;
text-align: left; text-align: left;
} }
.monologue {
font-family: 'AUTHENTICSansLight';
font-size: 18px;
line-height: 24px;
padding-bottom: 40px;
color: black;
text-align: left;
}
.controls { .controls {
padding-top: 12px; padding-top: 12px;
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
@ -116,20 +117,22 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }
.color_back { .color_back {
background-color: #D7FFE9; background-color: #D7FFE9;
} }

44
src/components/edition3/olives.vue
Unescape Escape View File

@ -1,23 +1,21 @@
<style scoped> <style scoped>
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -25,7 +23,6 @@
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
@ -36,16 +33,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -53,35 +46,35 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
visibility: hidden; visibility: hidden;
} }
.arrows:hover p { .arrows:hover p {
@ -106,15 +99,18 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }

56
src/components/edition3/popcorn.vue
Unescape Escape View File

@ -2,22 +2,28 @@
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.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;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -25,7 +31,6 @@
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
@ -36,16 +41,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -53,47 +54,45 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
visibility: hidden; visibility: hidden;
} }
.arrows:hover p { .arrows:hover p {
visibility: visible; visibility: visible;
} }
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: black; color: black;
@ -106,15 +105,18 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }

44
src/components/edition3/potato.vue
Unescape Escape View File

@ -2,14 +2,13 @@
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
@ -48,16 +47,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -65,47 +60,45 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
visibility: hidden; visibility: hidden;
} }
.arrows:hover p { .arrows:hover p {
visibility: visible; visibility: visible;
} }
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: black; color: black;
@ -118,15 +111,18 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }

42
src/components/edition3/threeeggs.vue
Unescape Escape View File

@ -1,23 +1,21 @@
<style scoped> <style scoped>
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -36,16 +34,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -53,31 +47,31 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
@ -93,7 +87,6 @@ visibility: hidden;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: black; color: black;
@ -106,15 +99,18 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }

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

@ -2,14 +2,13 @@
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
@ -35,12 +34,12 @@ a:hover {
a { a {
color: gray; color: gray;
} }
#illustration { #illustration {
width: 100%; width: 100%;
float: left; float: left;
margin-top: 150px; margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%); filter: grayscale(80%) contrast(80%) opacity(50%);
} }
#illustration:hover { #illustration:hover {
@ -48,16 +47,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -65,47 +60,46 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
visibility: hidden; visibility: hidden;
} }
.arrows:hover p { .arrows:hover p {
visibility: visible; visibility: visible;
} }
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: black; color: black;
@ -118,15 +112,18 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }

46
src/components/edition3/vodka.vue
Unescape Escape View File

@ -2,25 +2,20 @@
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -28,7 +23,6 @@
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
@ -39,16 +33,12 @@ a {
} }
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -56,46 +46,46 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
visibility: hidden; visibility: hidden;
} }
.arrows:hover p { .arrows:hover p {
visibility: visible; visibility: visible;
} }
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: black; color: black;
@ -108,13 +98,15 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }

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

@ -2,25 +2,21 @@
@font-face { @font-face {
font-family: 'AUTHENTICSansLight'; font-family: 'AUTHENTICSansLight';
src: url('../../../fonts/AUTHENTICSans-60.otf'); src: url('../../../fonts/AUTHENTICSans-90.otf');
font-weight: lighter; font-weight: 100;
} }
@font-face { @font-face {
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
src: url('../../../fonts/AUTHENTICSans-90.otf'); src: url('../../../fonts/AUTHENTICSans-Condensed-60.otf');
font-weight: 400;
} }
* { * {
border: 0px black solid; border: 0px black solid;
background-color: transparent; background-color: transparent;
} }
.container_width { .container_width {
max-width: 100%; max-width: 100%;
padding-left: 0px; padding-left: 0px;
@ -28,7 +24,6 @@
padding-top: 70px; padding-top: 70px;
} }
a:hover { a:hover {
color: hotpink; color: hotpink;
text-decoration: none; text-decoration: none;
@ -38,17 +33,24 @@ a {
color: gray; color: gray;
} }
#illustration {
width: 100%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
.content { .content {
/*padding-right: 50px;*/
/*padding-left: 60px;*/
font-family: 'AUTHENTICSansLight'; 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 {
@ -56,60 +58,46 @@ a {
height: 120px; height: 120px;
z-index: 1; z-index: 1;
position: relative; position: relative;
} }
#illustration {
width: 80%;
float: left;
margin-top: 150px;
filter: grayscale(80%) contrast(80%) opacity(50%);
}
#illustration:hover {
filter: grayscale(0%);
}
.title_story { .title_story {
font-size: 48px; font-size: 72px;
font-family: 'AUTHENTICSans', sans-serif; line-height: 100%;
font-weight: 400; font-family: 'AUTHENTICSansCondensed', sans-serif;
padding-top: 70px; padding-top: 96px;
color: black; color: black;
text-align: left; text-align: left;
} }
.author { .author {
font-size: 36px; font-size: 36px;
font-family: 'AUTHENTICSans', sans-serif; font-family: 'AUTHENTICSansCondensed', sans-serif;
font-weight: 400;
text-align: right; text-align: right;
color: black; color: black;
} }
.arrows { .arrows {
font-size: 40px; font-size: 40px;
top: 30px; top: 48px;
color: black; color: black;
vertical-align: top; vertical-align: top;
overflow: hidden; overflow: hidden;
font-family: 'AUTHENTICSans'; font-family: 'AUTHENTICSansCondensed';
} }
.arrows p { .arrows p {
visibility: hidden; visibility: hidden;
} }
.arrows:hover p { .arrows:hover p {
visibility: visible; visibility: visible;
} }
.arrows a { .arrows a {
display: block; display: block;
} }
#leftarrow { #leftarrow {
float: left; float: left;
color: black; color: black;
@ -122,15 +110,18 @@ visibility: hidden;
#onhover_right { #onhover_right {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-right: 96px;
text-align: right; text-align: right;
} }
#onhover_left { #onhover_left {
font-size: 15px; font-size: 15px;
margin-top: 60px; margin-top: 24px;
margin-left: 96px;
text-align: left; text-align: left;
} }
.image_container { .image_container {
padding-top: 5px; padding-top: 5px;
} }
@ -138,7 +129,8 @@ visibility: hidden;
.photo { .photo {
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
padding: 20px; padding: 12px;
margin-bottom: 12px;
} }
@ -165,6 +157,7 @@ visibility: hidden;
background-color: #FFB37B; background-color: #FFB37B;
} }
@media (max-width: 575px){ @media (max-width: 575px){
.small_icon { .small_icon {
display: none; display: none;

Write Preview
Loading…
Cancel
Save