ADD rel-tag to socials, ADD scrolleventlistener, ADD totop-button, ADD scroll progress bar
This commit is contained in:
parent
553285c04b
commit
a25ea40300
9 changed files with 105 additions and 17 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -15,8 +15,6 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="header-blocker"></div>
|
||||
{{ end }}
|
||||
{{- range $index, $page := .Pages }}
|
||||
{{ $odd := mod $index 2 }}
|
||||
|
|
|
@ -3,4 +3,7 @@ type: string - default: link
|
|||
text: string (optional)
|
||||
url: string
|
||||
-->
|
||||
<a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>{{ if .text }} {{ .text }}{{ end }}</a>
|
||||
<a href="{{ .url }}" rel="{{ .rel }}">
|
||||
<i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>
|
||||
{{ if .text }} {{ .text }}{{ end }}
|
||||
</a>
|
|
@ -3,8 +3,25 @@ type: string - default
|
|||
url: string
|
||||
alt: string
|
||||
-->
|
||||
|
||||
{{ $avatar := "avatar"}}
|
||||
<img class="{{if eq .type $avatar}} avatar {{end}}" alt="{{ .alt }}" src="{{ .url }}">
|
||||
|
||||
<picture>
|
||||
<source
|
||||
type="image/avif"
|
||||
src="{{ .url }}.avif"
|
||||
/>
|
||||
<source
|
||||
type="image/webp"
|
||||
src="{{ .url }}.webp"
|
||||
/>
|
||||
<img
|
||||
class="{{if eq .type $avatar}} avatar {{end}}"
|
||||
alt="{{ .alt }}"
|
||||
src="{{ .url }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
</picture>
|
||||
|
||||
|
||||
{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}}
|
|
@ -20,4 +20,5 @@
|
|||
</p>
|
||||
{{ end }}
|
||||
</footer>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<a class="totop hide" id="totop" href="#"><i class="icon-angle-up"></i></a>
|
|
@ -27,11 +27,17 @@
|
|||
<meta property="og:description" content="{{ .Site.Params.Description }}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{- $favIcon := .Site.Params.favIcon }}
|
||||
<link rel="icon" type="image/png" sizes="16x16"
|
||||
href="{{ if $favIcon.small }}{{ $favIcon.small }}{{ else }}/favIcon16x16.png{{ end }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32"
|
||||
href="{{ if $favIcon.big }}{{ $favIcon.big }}{{ else }}/favIcon32x32.png{{ end }}">
|
||||
{{ with .Site.Params.favIcon }}
|
||||
{{ if .ico }}
|
||||
<link rel="icon" type="image/x-icon" href="{{ .ico }}">
|
||||
{{ end }}
|
||||
{{ if .small }}
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ .small }}">
|
||||
{{ end }}
|
||||
{{ if .big }}
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ .big }}">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ with .Site.Params.tracking }}
|
||||
<script src="{{ . }}"></script>
|
||||
{{ end }}
|
||||
|
@ -42,4 +48,5 @@
|
|||
{{ end }}
|
||||
<link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
|
||||
<script src="/js/theme.js"></script>
|
||||
<script src="/js/scroll.js"></script>
|
||||
</head>
|
|
@ -12,4 +12,5 @@
|
|||
<a id="theme-toggler" href="#"><i class="icon-adjust"></i></a>
|
||||
</div>
|
||||
</header>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<span id="progress" class="progress"></span>
|
12
static/js/scroll.js
Normal file
12
static/js/scroll.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
window.addEventListener("scroll", () => {
|
||||
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
var scrolled = (winScroll / height) * 100;
|
||||
document.getElementById('progress').style.width = scrolled + "%";
|
||||
|
||||
const toTop = document.getElementById('totop');
|
||||
|
||||
if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) {
|
||||
toTop.classList.toggle("show");
|
||||
}
|
||||
});
|
|
@ -1,3 +1,5 @@
|
|||
// https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class
|
||||
|
||||
window.onload = (event) => {
|
||||
const btn = document.getElementById("theme-toggler");
|
||||
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
|
Loading…
Reference in a new issue