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

140
src/scss/main.scss
View file

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