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

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>
</head>
<body>
<header class="vh-100">
<header id="top" class="vh-100">
<div class="overlay"></div>
<div class="container">
<div class="row justify-content-md-center">
@ -49,8 +49,7 @@ title: {{site.title}}
{%- for key in site.menu.items %}
<div class="item">
<a href="#{{ key }}">
{% if entry.icon %}<span class="{{ entry.icon }} me-1"></span>{% endif %}{{
site.strings[key].title }}
{{ site.strings[key].title }}
</a>
</div>
{%- endfor %}
@ -83,10 +82,7 @@ title: {{site.title}}
</ul>
</div>
<div class="d-flex justify-content-center">
<a class="scroll-down" href="#about" onclick="window.location.hash=''">
<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>
<a class="scroll-down" href="#about">
<span class="d-none">Scroll Down</span>
</a>
</div>
@ -342,5 +338,17 @@ title: {{site.title}}
</div>
</div>
</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>
</html>

55
src/scss/main.scss
View file

@ -26,11 +26,12 @@ header {
height: 100vh;
width: 100%;
background-image: url(../img/sp-codes.jpg);
background-color: transparent;
background-color: #fff;
background-size: cover;
background-attachment: fixed;
background-position: 0 0;
color: #fff;
z-index: 1;
.overlay {
position: absolute;
@ -60,11 +61,20 @@ header {
z-index: 100;
bottom: 45px;
left: 50%;
margin-left: -24px;
width: 48px;
height: 48px;
margin-left: -32px;
width: 64px;
height: 64px;
-webkit-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 {
@ -109,8 +119,6 @@ header {
.items {
display: flex;
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;
}
}