themes/kobel
themes/kobel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

ADD rel-tag to socials, ADD scrolleventlistener, ADD totop-button, ADD scroll progress bar

Browse source
This commit is contained in:
Hoernschen 2024-01-08 10:23:35 +01:00
parent 553285c04b
commit a25ea40300
Signed by: hoernschen
GPG key ID: 37591FAF4E6D3462
9 changed files with 105 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

57
assets/scss/index.scss
View file

@ -44,6 +44,12 @@ header, footer {
color: white;
}
header {
position: sticky;
top: 0;
z-index: 9;
}
html, body {
height: 100%;
}
@ -146,6 +152,15 @@ a {
padding-inline-end: 16px;
}
.progress {
background: {{ .Site.Params.color.primary }};
height: 5px;
width: 0%;
position: fixed;
top: 0;
z-index: 10;
}
/* Footer */
.footer {
@ -196,6 +211,34 @@ a {
font-size: small;
}
.totop {
display: inline-flex;
background-color: {{ .Site.Params.color.primary }};
color: #f2f2f2;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 20px;
position: fixed;
bottom: 0px;
right: 0px;
transition: background-color .3s;
z-index: 10;
visibility: hidden;
opacity: 0;
}
.totop:hover {
filter: brightness(60%);
}
.totop.show {
visibility: visible;
opacity: 1;
}
/* Sections */
#content {
@ -304,8 +347,8 @@ a {
}
/* Buttons */
button {
/* TODO: test */
.button {
font-family: inherit;
font-size: 100%;
line-height: inherit;
@ -316,7 +359,11 @@ button {
padding: 0;
}
.button-filled {
.button:hover {
filter: brightness(60%);
}
.button.filled {
background-color: {{ .Site.Params.color.primary }};
color: white;
border: 2px solid {{ .Site.Params.color.primary }};
@ -328,7 +375,7 @@ button {
font-size: 1rem;
}
.button-outlined {
.button.outlined {
background-color: transparent;
color: {{ .Site.Params.color.primary }};
border: 2px solid {{ .Site.Params.color.primary }};
@ -340,7 +387,7 @@ button {
font-size: 1rem;
}
.button-outlined:hover {
.button.outlined:hover {
background-color: {{ .Site.Params.color.primary }};
color: white;
}