more improvements for mobile
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
051deb6f27
commit
4deeea962f
2 changed files with 90 additions and 54 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,25 +54,31 @@ header {
|
|||
color: #fff !important;
|
||||
}
|
||||
|
||||
.scroll-down {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
bottom: 45px;
|
||||
left: 50%;
|
||||
margin-left: -32px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
-webkit-animation: bounce 4s 2s infinite;
|
||||
animation: bounce 4s 2s infinite;
|
||||
.scroll-down-outer {
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
.scroll-down {
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset: 30%;
|
||||
transform: translateY(-10%) rotate(-45deg);
|
||||
border-left: 5px solid #fff;
|
||||
border-bottom: 5px solid #fff;
|
||||
z-index: 100;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
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) {
|
||||
header {
|
||||
.profile-thumb {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.scroll-down-outer {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
&::before {
|
||||
left: 10%;
|
||||
|
|
@ -640,39 +696,19 @@ footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-top {
|
||||
--offset: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
//.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;
|
||||
@include media-breakpoint-down(sm) {
|
||||
header {
|
||||
.scroll-down-outer {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.back-top {
|
||||
--offset: 28px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue