zoe
/
hugo-battheme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

clickable headers

This commit is contained in:
zoe 2022-04-13 19:04:38 +02:00
parent 2e52a4843f
commit 2c56b25d22
10 changed files with 207 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
assets/scss/colors.scss
View File

@ -1,20 +1,21 @@
$light-bg: #dde4ff ; $light-bg: #dde4ff;
$light-bg-alt: #733c7c ; $light-bg-alt: #733c7c;
$light-fg: #4b3d44; $light-fg: #4b3d44;
$light-ln: #733c7c ; $light-ln: #733c7c;
$light-accent1: #007582 ; $light-accent1: #007582;
$light-accent2: #225091 ; $light-accent2: #225091;
$light-accent3: #27234c ; $light-accent3: #27234c;
$dark-bg: #27234c ; $dark-bg: #27234c;
$dark-bg-alt: #f2504b ; $dark-bg-alt: #f2504b;
$dark-fg: #e88dc3 ; $dark-fg: #e88dc3;
$dark-ln: #f2504b ; $dark-ln: #f2504b;
$dark-accent1: #b296ff; $dark-accent1: #b296ff;
$dark-accent2: #39b8a3 ; $dark-accent2: #39b8a3;
$dark-accent3: #dde4ff ; $dark-accent3: #dde4ff;
$transition-time: 1s; $transition-time: 2s;
$trans-short: 0.2s;
body { body {
&.light { &.light {
@ -46,7 +47,7 @@ a.footer-nav-item:hover {
color: $dark-bg-alt; color: $dark-bg-alt;
background-color: $dark-bg; background-color: $dark-bg;
border-color: $dark-bg; border-color: $dark-bg;
transition: 0.24s; transition: $trans-short;
} }
footer { footer {
@ -113,62 +114,117 @@ article {
transition: $transition-time; transition: $transition-time;
} }
article h2 { h2,
h2 a {
background-color: $dark-accent1; background-color: $dark-accent1;
color: $dark-bg; color: $dark-bg;
transition: $transition-time; transition: $transition-time;
& a{
background-color: transparent;
}
} }
article h3 { h3,
h3 a {
background-color: $dark-accent2; background-color: $dark-accent2;
color: $dark-bg; color: $dark-bg;
transition: $transition-time; transition: $transition-time;
& a{
background-color: transparent;
}
} }
article.light h3 { h3.light {
background-color: $light-accent2; background-color: $light-accent2;
color: $light-bg; color: $light-bg;
transition: $transition-time; transition: $transition-time;
&a {
color: $light-bg;
}
} }
article h5, h5,
article h6, h6,
article h4 { h4 {
background-color: $dark-accent3; background-color: $dark-accent3;
color: $dark-bg; color: $dark-bg;
transition: $transition-time; transition: $transition-time;
& a {
color: $dark-bg;
background-color: transparent;
}
} }
article.light h5, h4.light,
article.light h6, h5.light,
article.light h4 { h6.light{
background-color: $light-accent3; background-color: $light-accent3;
color: $light-bg; color: $light-bg;
transition: $transition-time; transition: $transition-time;
} }
article.light h2 { h2.light {
background-color: $light-accent1; background-color: $light-accent1;
color: $light-bg; color: $light-bg;
transition: $transition-time; transition: $transition-time;
} }
article.light a { article.light a {
background-color: $light-ln; background-color: transparent;
color: $light-bg; color: $light-ln;
transition: $transition-time; transition: $transition-time;
&.hash-link{
color: $light-bg;
}
&.hash-link:hover{
background-color: transparent;
color: $light-bg;
}
} }
a:hover { a:hover {
&.light {
color: $light-bg;
background-color: $light-ln;
}
color: $dark-bg; color: $dark-bg;
background-color: $dark-ln; background-color: $dark-ln;
transition: $trans-short;
} }
.previous.light:hover,
.next.light:hover,
.postdescription a.light:hover,
article.light a:hover { article.light a:hover {
color: $light-ln; color: $light-bg;
background-color: transparent; background-color: $light-ln;
transition: $trans-short;
}
.light.hash-link:hover,
.hash-link:hover {
background-color: transparent;
transition: $transition-time;
}
h1, h2, h3, h4, h5, h6{
&a{
background-color: transparent;
color: $light-bg;
&:hover{
background-color: transparent;
}
}
}
header.light{
background-color: $light-bg;
transition: $transition-time;
}
header{
transition: $transition-time;
}
.posttitle a{
background-color: transparent;
color: $dark-bg;
&:hover{
background-color: transparent;
}
} }

12
assets/scss/font.scss
View File

@ -19,20 +19,20 @@ $small: 12pt;
font-size: $small; font-size: $small;
} }
h1 { h1{
font-size: $huge; font-size: $huge;
} }
h2 { h2 a{
font-size: $huge; font-size: $huge;
font-style:bold; font-style:bold;
} }
h3, h4 { h3 a, h4 a {
font-size: $large; font-size: $large;
} }
h5 h6 { h5 a, h6 a {
font-size: $big; font-size: $big;
} }
@ -53,3 +53,7 @@ label::after {
h6 { h6 {
font-style: italic; font-style: italic;
} }
::before{
font-family: CaskaydiaCoveMono;
}

14
assets/scss/layout.scss
View File

@ -24,7 +24,8 @@ footer {
#content p, #content p,
#content ul, #content ul,
#content ol, #content ol,
#content table #content table,
.postdescription
{ {
margin-right: 24%; margin-right: 24%;
margin-left: 24%; margin-left: 24%;
@ -94,12 +95,18 @@ h6 {
padding-right: 6%; padding-right: 6%;
padding-top: 12pt; padding-top: 12pt;
padding-bottom: 12pt; padding-bottom: 12pt;
margin-right: 6%;
justify-content: right; justify-content: right;
display: flex; display: flex;
align-items: center; align-items: center;
} }
h1 {margin-right: 6%;}
h2 {margin-right: 12%;}
h3 {margin-right: 18%;}
h4 {margin-right: 24%;}
h5 {margin-right: 32%;}
h6 {margin-right: 38%;}
h2, h2,
h3, h3,
h4, h4,
@ -113,7 +120,8 @@ article {
margin-inline: auto; margin-inline: auto;
} }
.titlecontainer { .titlecontainer,
header{
width: 100%; width: 100%;
padding-top: 42pt; padding-top: 42pt;
} }

124
assets/scss/style.scss
View File

@ -3,80 +3,92 @@ $toggle-width: 42pt;
$toggle-height: 24pt; $toggle-height: 24pt;
* { * {
border-width: 2pt; border-width: 2pt;
}
input[type="checkbox"]{
cursor: pointer;
}
.toggleinput{
opacity: 10;
max-height: 10;
overflow: hidden;
} }
.togglelabel{ input[type="checkbox"] {
width: $toggle-width; cursor: pointer;
height: 24pt; }
border-radius: $radius; .toggleinput {
cursor: pointer; opacity: 0;
align-items: center; max-height: 0;
display: flex; max-width: 0;
overflow: hidden;
} }
.togglelabel::after{ .togglelabel {
left: calc(100% - 67pt); width: $toggle-width;
content: ""; height: 24pt;
position: absolute; border-radius: $radius;
height: 20pt; cursor: pointer;
width: 20pt; align-items: center;
border-width: 1pt; display: flex;
border-radius: 100pt;
transition: 0.3s;
display: inline-block;
vertical-align: middle;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
content: "";
border-style: solid;
} }
input:checked + label:after{ .togglelabel::after {
left: calc(100% - 49pt); left: calc(100% - 67pt);
content: "";
position: absolute;
height: 20pt;
width: 20pt;
border-width: 1pt;
border-radius: 100pt;
transition: 1s;
display: inline-block;
vertical-align: middle;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
content: "";
border-style: solid;
} }
input:checked + label:after {
input:checked + label::after{ left: calc(100% - 49pt);
content: "滛";
} }
.footer-nav-item{ input:checked + label::after {
border-radius: 100%; content: "滛";
height: 1em;
width: 1em;
justify-content: center;
align-items: center;
border-style: solid;
} }
.togglelabel{ .footer-nav-item {
border: solid; border-radius: 100%;
height: 1em;
width: 1em;
justify-content: center;
align-items: center;
border-style: solid;
} }
h1, h2, h3, h4, h5, h6 { .togglelabel {
border-top-right-radius: $radius; border: solid;
border-bottom-right-radius: $radius;
} }
h1,
h2,
h3,
h4,
h5,
h6 {
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
& .hash-link {
&:hover {
cursor: pointer;
&::before {
content: "";
}
}
}
}
.postdescription,
#content p, #content p,
#content ul, #content ul,
#content ol, #content ol,
#content table { #content table {
border-left-style: solid; border-left-style: solid;
border-width: 0.24em; border-width: 0.24em;
padding-left: 2em; padding-left: 2em;
} }

5
layouts/_default/_markup/render-heading.html Normal file
View File

@ -0,0 +1,5 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="colorswitch">
<a class="hash-link colorswitch" href="#{{ .Anchor | safeURL }}">
&nbsp;{{ .Text | safeHTML }}
</a>
</h{{ .Level }}>

15
layouts/_default/baseof.html
View File

@ -1,11 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ .Lang }}"> <html lang="{{ .Lang }}">
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body class="colorswitch"> <body class="colorswitch">
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
<div id="content"> <div id="content">{{- block "main" . }}{{- end }}</div>
{{- block "main" . }}{{- end }} {{- partial "footer.html" . -}}
</div> <script src="/js/main.js"></script>
{{- partial "footer.html" . -}} </body>
</body>
</html> </html>

9
layouts/_default/list.html
View File

@ -1,7 +1,7 @@
{{ define "main" }} {{ define "main" }}
<main> <main>
<article> <article>
<header> <header class="colorswitch">
<h1 id="title">{{.Title}}</h1> <h1 id="title">{{.Title}}</h1>
</header> </header>
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md --> <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
@ -10,9 +10,12 @@
<div id="pagelist"> <div id="pagelist">
<!-- Ranges through content/posts/*.md --> <!-- Ranges through content/posts/*.md -->
{{ range .Pages }} {{ range .Pages }}
<h2> <div id="postlist">
<a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2>{{.Description}}<br>{{.WordCount}}</a> <h2 class="colorswitch posttitle">
<a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2><div class="postdescription">{{.Description}}<br>{{.WordCount}} words</a>
</div>
{{ end }} {{ end }}
</div> </div>
</div>
</main> </main>
{{ end }} {{ end }}

1
layouts/partials/footer.html
View File

@ -13,4 +13,3 @@
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label>
</span> </span>
</footer> </footer>
<script src="/js/darkmode.js"></script>

13
static/js/headings.js Normal file
View File

@ -0,0 +1,13 @@
(function addHeadingLinks() {
var article = document.getElementById("content");
var headings = article.querySelectorAll("h1, h2, h3, h4, h5, h6");
headings.forEach(function (heading) {
if (heading.id) {
var a = document.createElement("a");
a.innerHTML = heading.innerHTML;
a.href = "#" + heading.id;
heading.innerHTML = "";
heading.appendChild(a);
}
});
})();

0
static/js/darkmode.js → static/js/main.js
View File