samuel-p/samuel-philipp.de
samuel-p/samuel-philipp.de
1
0
Fork 0
Code Issues Pull requests 8 Releases Activity Actions

improved scroll
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Samuel Philipp 2023-05-10 19:40:01 +02:00
parent b97eb40517
commit d2d7910d52
2 changed files with 64 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/index.html
View file

@ -38,7 +38,7 @@ title: {{site.title}}
src="https://umami.sp-codes.de/umami.js"></script> src="https://umami.sp-codes.de/umami.js"></script>
</head> </head>
<body> <body>
<header class="vh-100"> <header id="top" class="vh-100">
<div class="overlay"></div> <div class="overlay"></div>
<div class="container"> <div class="container">
<div class="row justify-content-md-center"> <div class="row justify-content-md-center">
@ -49,8 +49,7 @@ title: {{site.title}}
{%- for key in site.menu.items %} {%- for key in site.menu.items %}
<div class="item"> <div class="item">
<a href="#{{ key }}"> <a href="#{{ key }}">
{% if entry.icon %}<span class="{{ entry.icon }} me-1"></span>{% endif %}{{ {{ site.strings[key].title }}
site.strings[key].title }}
</a> </a>
</div> </div>
{%- endfor %} {%- endfor %}
@ -83,10 +82,7 @@ title: {{site.title}}
</ul> </ul>
</div> </div>
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<a class="scroll-down" href="#about" onclick="window.location.hash=''"> <a class="scroll-down" href="#about">
<svg fill="#fff" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<path d="M128,188a11.96187,11.96187,0,0,1-8.48535-3.51465l-80-80a12.0001,12.0001,0,0,1,16.9707-16.9707L128,159.0293l71.51465-71.51465a12.0001,12.0001,0,0,1,16.9707,16.9707l-80,80A11.96187,11.96187,0,0,1,128,188Z"></path>
</svg>
<span class="d-none">Scroll Down</span> <span class="d-none">Scroll Down</span>
</a> </a>
</div> </div>
@ -342,5 +338,17 @@ title: {{site.title}}
</div> </div>
</div> </div>
</footer> </footer>
<a class="back-top" href="#top">^</a>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body> </body>
</html> </html>

55
src/scss/main.scss
View file

@ -26,11 +26,12 @@ header {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
background-image: url(../img/sp-codes.jpg); background-image: url(../img/sp-codes.jpg);
background-color: transparent; background-color: #fff;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
background-position: 0 0; background-position: 0 0;
color: #fff; color: #fff;
z-index: 1;
.overlay { .overlay {
position: absolute; position: absolute;
@ -60,11 +61,20 @@ header {
z-index: 100; z-index: 100;
bottom: 45px; bottom: 45px;
left: 50%; left: 50%;
margin-left: -24px; margin-left: -32px;
width: 48px; width: 64px;
height: 48px; height: 64px;
-webkit-animation: bounce 4s 2s infinite; -webkit-animation: bounce 4s 2s infinite;
animation: bounce 4s 2s infinite; animation: bounce 4s 2s infinite;
&::before {
content: "";
position: absolute;
inset: 30%;
transform: translateY(-10%) rotate(-45deg);
border-left: 5px solid #fff;
border-bottom: 5px solid #fff;
}
} }
@-webkit-keyframes bounce { @-webkit-keyframes bounce {
@ -109,8 +119,6 @@ header {
.items { .items {
display: flex; display: flex;
padding: 1rem; padding: 1rem;
//border: 1px solid #fff;
//border-top: none;
} }
} }
@ -639,3 +647,38 @@ footer {
} }
} }
} }
//.back-top {
// position: fixed;
// right: 8rem;
// bottom: 8rem;
// width: 40px;
// height: 40px;
// border-radius: 7px;
// background: var(--bs-primary);
// z-index: 0;
// border: 1px solid #fff;
//}
.back-top {
--offset: 7rem;
position: fixed;
right: var(--offset);
bottom: var(--offset);
width: 3rem;
aspect-ratio: 1;
border-radius: 7px;
background: var(--bs-primary);
z-index: 0;
//border: 1px solid #fff;
box-shadow: 0 0 2px 1px rgba(255, 255, 255, .2);
&::before {
content: "";
position: absolute;
inset: 30%;
transform: translateY(20%) rotate(-45deg);
border-top: 5px solid #fff;
border-right: 5px solid #fff;
}
}