diff --git a/src/index.html b/src/index.html index 28d57e8..f531395 100644 --- a/src/index.html +++ b/src/index.html @@ -40,8 +40,8 @@ title: {{site.title}}
-
-
+
+
-
+
diff --git a/src/scss/main.scss b/src/scss/main.scss index 0e435d9..ad78da2 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -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; } } \ No newline at end of file