diff --git a/fonts/AUTHENTICSans-90.otf b/fonts/AUTHENTICSans-90.otf new file mode 100755 index 0000000..e1793b6 Binary files /dev/null and b/fonts/AUTHENTICSans-90.otf differ diff --git a/fonts/AUTHENTICSans-Condensed-60.otf b/fonts/AUTHENTICSans-Condensed-60.otf new file mode 100755 index 0000000..98f85b5 Binary files /dev/null and b/fonts/AUTHENTICSans-Condensed-60.otf differ diff --git a/media/left-arrow.png b/media/left-arrow.png new file mode 100644 index 0000000..ecdcbdb Binary files /dev/null and b/media/left-arrow.png differ diff --git a/media/right-arrow.png b/media/right-arrow.png new file mode 100644 index 0000000..37a26af Binary files /dev/null and b/media/right-arrow.png differ diff --git a/src/components/edition3/twoberries.vue b/src/components/edition3/twoberries.vue index 6ee1d3b..eb04025 100644 --- a/src/components/edition3/twoberries.vue +++ b/src/components/edition3/twoberries.vue @@ -15,14 +15,43 @@ } @font-face { - font-family: 'AUTHENTICSans'; + 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: 1px black solid; + border: 0px black solid; 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 { max-width: 100%; padding-left: 0px; @@ -43,12 +72,14 @@ a { .content { /*padding-right: 50px;*/ /*padding-left: 60px;*/ - font-family: 'AUTHENTICSans'; + font-family: 'AUTHENTICSansLight'; + font-weight: lighter; font-size: 18px; line-height: 24px; padding-bottom: 40px; color: black; text-align: left; + } .controls { @@ -61,14 +92,22 @@ a { .title_story { font-size: 48px; font-family: 'AUTHENTICSans', sans-serif; + font-weight: 400; padding-top: 70px; 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 { font-size: 40px; - top: 20px; + top: 30px; color: black; vertical-align: top; overflow: hidden; @@ -99,9 +138,16 @@ visibility: hidden; color: black; } -.onhover { +#onhover_right { + font-size: 15px; + margin-top: 60px; + text-align: right; +} + +#onhover_left { font-size: 15px; margin-top: 60px; + text-align: left; } .image_container { padding-top: 5px; @@ -119,12 +165,6 @@ visibility: hidden; 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 { @@ -171,15 +211,14 @@ visibility: hidden; @@ -257,9 +296,15 @@ export default { return { } }, + mounted(){ + window.onload = function() { + document.body.classList.add('loaded'); + } + }, components: { MenuBar } } + diff --git a/src/components/edition3/workfromhome.vue b/src/components/edition3/workfromhome.vue index 64301c4..127ae3b 100644 --- a/src/components/edition3/workfromhome.vue +++ b/src/components/edition3/workfromhome.vue @@ -13,11 +13,44 @@ font-family: 'ED Regular'; 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; 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 { max-width: 100%; padding-left: 0px; @@ -38,12 +71,14 @@ a { .content { /*padding-right: 50px;*/ /*padding-left: 60px;*/ - font-family: 'Happy Times'; + font-family: 'AUTHENTICSansLight'; + font-weight: lighter; font-size: 18px; line-height: 24px; - /*padding-bottom: 40px;*/ - color: #1B75BC; + padding-bottom: 40px; + color: black; text-align: left; + } .controls { @@ -54,59 +89,80 @@ a { } .title_story { - font-size: 80px; - font-family: 'Semi Light Dots', sans-serif; - padding-top: 20px; - color: #FA00FF; - text-align: center; + font-size: 48px; + font-family: 'AUTHENTICSans', sans-serif; + font-weight: 400; + padding-top: 70px; + color: black; + text-align: left; +} +.author { + font-size: 36px; + font-family: 'AUTHENTICSans', sans-serif; + font-weight: 400; + text-align: right; + color: black; } .arrows { - font-size: 80px; - font-family: 'Semi Light Dots', sans-serif; - top: 36px; - color: #FA00FF; + font-size: 40px; + top: 30px; + color: black; vertical-align: top; - position: fixed; overflow: hidden; + font-family: 'AUTHENTICSans'; } +.arrows p { +visibility: hidden; +} + +.arrows:hover p { + visibility: visible; + +} .arrows a { display: block; } + + #leftarrow { float: left; - color: #FA00FF; + color: black; } #rightarrow { 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 { padding-top: 5px; } .photo { - - width: auto; max-height: 100%; max-width: 100%; - padding: 12px; + padding: 20px; } + .img-fluid { 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 { @@ -118,6 +174,14 @@ a { max-width: 100%; } +.color_back { + background-color: #EDECFF; +} + +.color_next { + background-color: #FFB37B; +} + @media (max-width: 575px){ .small_icon { display: none; @@ -144,21 +208,18 @@ a {