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

more improvements for mobile
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Samuel Philipp 2023-05-11 00:24:07 +02:00
parent 051deb6f27
commit 4deeea962f
2 changed files with 90 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/index.html
View file

@ -40,8 +40,8 @@ title: {{site.title}}
<body>
<header id="top">
<div class="overlay">
<div class="container">
<div class="row justify-content-md-center">
<div class="container h-100">
<div class="row justify-content-md-center h-100">
<div class="col-md-12 col-lg-8 text-center position-relative">
<div class="d-flex flex-column vh-100">
<nav class="nav menu d-none d-md-flex">
@ -85,7 +85,7 @@ title: {{site.title}}
</li>
</ul>
</div>
<div class="d-flex justify-content-center">
<div class="scroll-down-outer">
<a class="scroll-down" href="#about">
<span class="d-none">Scroll Down</span>
</a>

104
src/scss/main.scss
View file

@ -13,6 +13,10 @@ $icomoon-font-path: "../font";
$flag-icons-path: "../flags";
@import "flag-icons/sass/flag-icons";
html, body {
height: 100%;
}
body {
color: #000;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@ -22,7 +26,7 @@ body {
header {
position: relative;
height: 100vh;
height: 100%;
width: 100%;
background-image: url(../img/sp-codes.jpg);
background-color: #fff;
@ -30,9 +34,10 @@ header {
background-attachment: fixed;
background-position: 0 0;
color: #fff;
z-index: 1;
z-index: 11;
.overlay {
height: 100%;
background-color: rgba($secondary, 0.9);
}
@ -49,11 +54,16 @@ header {
color: #fff !important;
}
.scroll-down-outer {
position: relative;
margin-top: 30px;
margin-bottom: 4rem;
.scroll-down {
display: block;
position: absolute;
z-index: 100;
bottom: 45px;
bottom: 0;
left: 50%;
margin-left: -32px;
width: 64px;
@ -70,6 +80,7 @@ header {
border-bottom: 5px solid #fff;
}
}
}
@-webkit-keyframes bounce {
0%, 100%, 20%, 50%, 80% {
@ -616,7 +627,52 @@ footer {
}
}
.back-top {
--offset: 112px;
position: fixed;
right: var(--offset);
bottom: var(--offset);
width: 3rem;
aspect-ratio: 1;
border-radius: 7px;
background: var(--bs-primary);
z-index: 10;
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;
}
}
@include media-breakpoint-down(lg) {
header {
.scroll-down-outer {
margin-bottom: 3rem;
}
}
.back-top {
--offset: 84px;
}
}
@include media-breakpoint-down(md) {
header {
.profile-thumb {
width: 200px;
height: 200px;
}
.scroll-down-outer {
margin-bottom: 2rem;
}
}
.timeline {
&::before {
left: 10%;
@ -640,39 +696,19 @@ 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);
--offset: 56px;
}
}
&::before {
content: "";
position: absolute;
inset: 30%;
transform: translateY(20%) rotate(-45deg);
border-top: 5px solid #fff;
border-right: 5px solid #fff;
@include media-breakpoint-down(sm) {
header {
.scroll-down-outer {
margin-bottom: 1rem;
}
}
.back-top {
--offset: 28px;
}
}