diff --git a/media/ana.jpg b/media/ana.jpg new file mode 100644 index 0000000..960dd68 Binary files /dev/null and b/media/ana.jpg differ diff --git a/src/App.vue b/src/App.vue index 64f28a2..a58d378 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,10 @@ @@ -11,4 +15,15 @@ export default { diff --git a/src/components/edition2/knife.vue b/src/components/edition2/knife.vue index 2ce5ea1..67201cc 100644 --- a/src/components/edition2/knife.vue +++ b/src/components/edition2/knife.vue @@ -151,7 +151,7 @@ a { - + diff --git a/src/components/edition3/EditorNote3.vue b/src/components/edition3/EditorNote3.vue new file mode 100644 index 0000000..4a73f01 --- /dev/null +++ b/src/components/edition3/EditorNote3.vue @@ -0,0 +1,231 @@ + + + + + diff --git a/src/components/edition3/bananas.vue b/src/components/edition3/bananas.vue index 442bb9e..452e515 100644 --- a/src/components/edition3/bananas.vue +++ b/src/components/edition3/bananas.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,60 +89,81 @@ 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 { --webkit-filter: grayscale(100%); - filter: grayscale(100%); - width: auto; max-height: 100%; max-width: 100%; padding: 12px; + margin-top: 40%; } + .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 { @@ -119,6 +175,14 @@ a { max-width: 100%; } +.color_back { + background-color: #FFB37B; +} + +.color_next { + background-color: #FFFFF3; +} + @media (max-width: 575px){ .small_icon { display: none; @@ -145,36 +209,39 @@ a {