adjusted typography in vue files

master
simon 2 years ago
parent 0ccf196838
commit 5458b128f1

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

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

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save