sincoolka/Project-new-web
7
0
Fork 0
Code Issues Releases Activity

Favicon is working, Animations, some adjustments for iPhone 5s

Browse Source
This commit is contained in:
Marcel Petráň 2019-04-24 12:09:03 +02:00
parent ada129b993
commit 494a5cceb3
5 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
cs/home.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="stylesheet" href="../css/master.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="shortcut icon" src="../img/sin_favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="shortcut icon" src="../favicon.ico" type="image/vnd.microsoft.icon" />
<title>Sincoolka</title>
</head>
<body>
@ -13,7 +13,7 @@
<div class="navbar-container">
<div class="navbar-grid">
<div class="navbar-grid-col -left">
<h1 class="title left">Sincoolka</h1>
<h1 class="title nav">Sincoolka</h1>
</div>
<div class="navbar-grid-col -right">
<img src="../img/close-menu.svg" class="close-btn" id="close-menu">
@ -186,9 +186,10 @@
</div>
</section>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="../js/auto_height.js"></script>
<script type="text/javascript" src="../js/navbar.js"></script>
<script type="text/javascript" src="../js/smooth-scroll.js"></script>
</body>
</html>

16
css/master.css
View File

@ -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}
}

0
img/sin_favicon.ico → favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

4
img/arrow-down.svg
View File

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.314" height="19.485" viewBox="0 0 33.314 19.485">
<g id="Arrow_down" data-name="Arrow down" transform="translate(1.414 -15.586)" opacity="0.3">
<path id="Path_1" data-name="Path 1" d="M636.717,1295.229l15.243,15.243,15.243-15.243" transform="translate(-636.717 -1278.229)" fill="none" stroke="#4a4a4a" stroke-width="4"/>
<g id="Arrow_down" data-name="Arrow down" transform="translate(1.414 1.414)">
<path id="Path_1" data-name="Path 1" d="M636.717,1295.229l15.243,15.243,15.243-15.243" transform="translate(-636.717 -1295.229)" fill="none" stroke="#4a4a4a" stroke-width="4"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 391 B

After

Width:  |  Height:  |  Size: 375 B

13
js/smooth-scroll.js Normal file
View File

@ -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;
});
}
});
});