From fcb0cd7c3d173148773449ad0447332174e9ea12 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Sat, 25 Sep 2021 23:21:28 +0200
Subject: [PATCH] scroll down to content, when clicking on header
---
js/customElements/header.js | 3 +-
scss/_general.scss | 104 +++++++++++++++++++-----------------
2 files changed, 58 insertions(+), 49 deletions(-)
diff --git a/js/customElements/header.js b/js/customElements/header.js
index 1fe8c52..33e37c6 100644
--- a/js/customElements/header.js
+++ b/js/customElements/header.js
@@ -7,7 +7,7 @@ class Header extends HTMLElement {
<div class="header-wrapper" >
<div class="header-homepage">
<div class="align-holder" >
- <h1>${pageTitle}</h1 >
+ <a class="noStyleLink" href="#hideHeader"><h1>${pageTitle}</h1 ></h1>
</div >
</div >
<div class="header-separator header-separator-bottom " >
@@ -16,6 +16,7 @@ class Header extends HTMLElement {
</div >
<jl-main_menu id = "mainMenu"></jl-main_menu>
</header>
+ <span id="hideHeader"></span>
`;
}
}
diff --git a/scss/_general.scss b/scss/_general.scss
index 29c6d74..c0bb7a0 100644
--- a/scss/_general.scss
+++ b/scss/_general.scss
@@ -1,72 +1,80 @@
-body {
- margin: 0;
- background-color: $back-color-2;
- color: $text-color;
- font-family: 'Source Sans Pro', sans-serif;
-
- width: calc(100% - 1px);
- height: 100%;
+html {
+ scroll-behavior: smooth;
}
-button{
- background-color: $accent-color;
- color: #fff;
- text-transform: uppercase;
- border: 0;
- padding: 5px;
- cursor: pointer;
- border-radius: 5px;
- transition: background-color $link-hover-animation-time linear;
+body {
+ margin: 0;
+ background-color: $back-color-2;
+ color: $text-color;
+ font-family: 'Source Sans Pro', sans-serif;
+ width: calc(100% - 1px);
+ height: 100%;
+}
- &:hover, &:active, &:focus {
- background-color: $accent-color-2;
- outline: none;
- }
+button {
+ background-color: $accent-color;
+ color: #fff;
+ text-transform: uppercase;
+ border: 0;
+ padding: 5px;
+ cursor: pointer;
+ border-radius: 5px;
+ transition: background-color $link-hover-animation-time linear;
+ &:hover,
+ &:active,
+ &:focus {
+ background-color: $accent-color-2;
+ outline: none;
+ }
}
-.spacer{
- clear: both;
+.spacer {
+ clear: both;
}
-a{
- padding: 0;
- color: $accent-color;
- text-decoration:underline;
- transition: color $link-hover-animation-time;
+a {
+ padding: 0;
+ color: $accent-color;
+ text-decoration: underline;
+ transition: color $link-hover-animation-time;
+ &:HOVER {
+ color: $accent-color-2;
+ }
+}
- &:HOVER{
- color: $accent-color-2;
- }
+.noStyleLink {
+ text-decoration: none;
}
h1 {
- color: $title-color;
- text-transform: uppercase;
+ color: $title-color;
+ text-transform: uppercase;
}
.red {
- color: red;
+ color: red;
}
-.center{
- text-align: center;
+.center {
+ text-align: center;
}
-.left{
- text-align: left;
+
+.left {
+ text-align: left;
}
-.right{
- text-align: left;
+
+.right {
+ text-align: left;
}
-.block{
- text-align: justify;
- text-justify: auto;
+.block {
+ text-align: justify;
+ text-justify: auto;
}
img {
- border-radius: $border-radius-image;
-
- &.no-corner {
- border-radius: 0;
- }
+ border-radius: $border-radius-image;
+ &.no-corner {
+ border-radius: 0;
+ }
}
\ No newline at end of file
--
GitLab