From 494a5cceb34ef5945c3b08456b02499a9ff19871 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcel=20Petr=C3=A1=C5=88?= Date: Wed, 24 Apr 2019 12:09:03 +0200 Subject: [PATCH] Favicon is working, Animations, some adjustments for iPhone 5s --- cs/home.html | 7 ++++--- css/master.css | 16 ++++++++++++++-- img/sin_favicon.ico => favicon.ico | Bin img/arrow-down.svg | 4 ++-- js/smooth-scroll.js | 13 +++++++++++++ 5 files changed, 33 insertions(+), 7 deletions(-) rename img/sin_favicon.ico => favicon.ico (100%) create mode 100644 js/smooth-scroll.js diff --git a/cs/home.html b/cs/home.html index 5c94319..bbe0b4e 100644 --- a/cs/home.html +++ b/cs/home.html @@ -4,7 +4,7 @@ - + Sincoolka @@ -13,7 +13,7 @@
-

Sincoolka

+

Sincoolka

@@ -186,9 +186,10 @@
- + + diff --git a/css/master.css b/css/master.css index 24c3ba5..c233e6f 100644 --- a/css/master.css +++ b/css/master.css @@ -43,7 +43,7 @@ p.article{ font-size: 2.5em; } section.home { - min-height: 100vh; + min-height: calc(100vh - 14.3em); /* iPhone Safari */ background-image: url('../img/logo.png'); background-repeat: no-repeat; background-position: center; @@ -52,8 +52,9 @@ section.home { img.arrow-down{ width: 3.5em; position: absolute; - top: calc(100vh - 4em); + top: calc(100vh - 18em); left: calc(50% - 1.75em); + animation: arrow 3s infinite; } section h1{ text-align: center; @@ -358,3 +359,14 @@ div.-right{ opacity: 1; } } +@keyframes arrow { +0% {opacity: .2} +50% {opacity: .8} +100% {opacity: .2} +} + +@-webkit-keyframes arrow { /*Safari and Chrome*/ +0% {opacity: .2} +50% {opacity: .8} +100% {opacity: .2} +} diff --git a/img/sin_favicon.ico b/favicon.ico similarity index 100% rename from img/sin_favicon.ico rename to favicon.ico diff --git a/img/arrow-down.svg b/img/arrow-down.svg index 487454e..49c5288 100644 --- a/img/arrow-down.svg +++ b/img/arrow-down.svg @@ -1,5 +1,5 @@ - - + + diff --git a/js/smooth-scroll.js b/js/smooth-scroll.js new file mode 100644 index 0000000..c7ed435 --- /dev/null +++ b/js/smooth-scroll.js @@ -0,0 +1,13 @@ +$(document).ready(function(){ + $("a").on('click', function(event) { + if (this.hash !== "") { + event.preventDefault(); + var hash = this.hash; + $('html, body').animate({ + scrollTop: $(hash).offset().top + }, 800, function(){ + window.location.hash = hash; + }); + } + }); +});