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;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -146,6 +152,15 @@ a {
|
||||||
padding-inline-end: 16px;
|
padding-inline-end: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
background: {{ .Site.Params.color.primary }};
|
||||||
|
height: 5px;
|
||||||
|
width: 0%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
/* Footer */
|
/* Footer */
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
|
@ -196,6 +211,34 @@ a {
|
||||||
font-size: small;
|
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 */
|
/* Sections */
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
|
@ -304,8 +347,8 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
|
/* TODO: test */
|
||||||
button {
|
.button {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
|
@ -316,7 +359,11 @@ button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-filled {
|
.button:hover {
|
||||||
|
filter: brightness(60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.filled {
|
||||||
background-color: {{ .Site.Params.color.primary }};
|
background-color: {{ .Site.Params.color.primary }};
|
||||||
color: white;
|
color: white;
|
||||||
border: 2px solid {{ .Site.Params.color.primary }};
|
border: 2px solid {{ .Site.Params.color.primary }};
|
||||||
|
@ -328,7 +375,7 @@ button {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-outlined {
|
.button.outlined {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: {{ .Site.Params.color.primary }};
|
color: {{ .Site.Params.color.primary }};
|
||||||
border: 2px solid {{ .Site.Params.color.primary }};
|
border: 2px solid {{ .Site.Params.color.primary }};
|
||||||
|
@ -340,7 +387,7 @@ button {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-outlined:hover {
|
.button.outlined:hover {
|
||||||
background-color: {{ .Site.Params.color.primary }};
|
background-color: {{ .Site.Params.color.primary }};
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,8 +15,6 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ else }}
|
|
||||||
<div class="header-blocker"></div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{- range $index, $page := .Pages }}
|
{{- range $index, $page := .Pages }}
|
||||||
{{ $odd := mod $index 2 }}
|
{{ $odd := mod $index 2 }}
|
||||||
|
|
|
@ -3,4 +3,7 @@ type: string - default: link
|
||||||
text: string (optional)
|
text: string (optional)
|
||||||
url: string
|
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
|
url: string
|
||||||
alt: string
|
alt: string
|
||||||
-->
|
-->
|
||||||
|
|
||||||
{{ $avatar := "avatar"}}
|
{{ $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/ */}}
|
{{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}}
|
|
@ -20,4 +20,5 @@
|
||||||
</p>
|
</p>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</footer>
|
</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 }}" />
|
<meta property="og:description" content="{{ .Site.Params.Description }}" />
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{- $favIcon := .Site.Params.favIcon }}
|
{{ with .Site.Params.favIcon }}
|
||||||
<link rel="icon" type="image/png" sizes="16x16"
|
{{ if .ico }}
|
||||||
href="{{ if $favIcon.small }}{{ $favIcon.small }}{{ else }}/favIcon16x16.png{{ end }}">
|
<link rel="icon" type="image/x-icon" href="{{ .ico }}">
|
||||||
<link rel="icon" type="image/png" sizes="32x32"
|
{{ end }}
|
||||||
href="{{ if $favIcon.big }}{{ $favIcon.big }}{{ else }}/favIcon32x32.png{{ 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 }}
|
{{ with .Site.Params.tracking }}
|
||||||
<script src="{{ . }}"></script>
|
<script src="{{ . }}"></script>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
@ -42,4 +48,5 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
|
<link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
|
||||||
<script src="/js/theme.js"></script>
|
<script src="/js/theme.js"></script>
|
||||||
|
<script src="/js/scroll.js"></script>
|
||||||
</head>
|
</head>
|
|
@ -12,4 +12,5 @@
|
||||||
<a id="theme-toggler" href="#"><i class="icon-adjust"></i></a>
|
<a id="theme-toggler" href="#"><i class="icon-adjust"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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) => {
|
window.onload = (event) => {
|
||||||
const btn = document.getElementById("theme-toggler");
|
const btn = document.getElementById("theme-toggler");
|
||||||
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||||
|
|
Loading…
Reference in a new issue