mirror of
https://git.kittycat.homes/zoe/hugo-battheme.git
synced 2024-08-15 03:25:18 +00:00
clickable headers
This commit is contained in:
zoe
parent
2e52a4843f
commit
2c56b25d22
10 changed files with 207 additions and 108 deletions
|
|
@ -1,20 +1,21 @@
|
|||
$light-bg: #dde4ff ;
|
||||
$light-bg-alt: #733c7c ;
|
||||
$light-bg: #dde4ff;
|
||||
$light-bg-alt: #733c7c;
|
||||
$light-fg: #4b3d44;
|
||||
$light-ln: #733c7c ;
|
||||
$light-accent1: #007582 ;
|
||||
$light-accent2: #225091 ;
|
||||
$light-accent3: #27234c ;
|
||||
$light-ln: #733c7c;
|
||||
$light-accent1: #007582;
|
||||
$light-accent2: #225091;
|
||||
$light-accent3: #27234c;
|
||||
|
||||
$dark-bg: #27234c ;
|
||||
$dark-bg-alt: #f2504b ;
|
||||
$dark-fg: #e88dc3 ;
|
||||
$dark-ln: #f2504b ;
|
||||
$dark-bg: #27234c;
|
||||
$dark-bg-alt: #f2504b;
|
||||
$dark-fg: #e88dc3;
|
||||
$dark-ln: #f2504b;
|
||||
$dark-accent1: #b296ff;
|
||||
$dark-accent2: #39b8a3 ;
|
||||
$dark-accent3: #dde4ff ;
|
||||
$dark-accent2: #39b8a3;
|
||||
$dark-accent3: #dde4ff;
|
||||
|
||||
$transition-time: 1s;
|
||||
$transition-time: 2s;
|
||||
$trans-short: 0.2s;
|
||||
|
||||
body {
|
||||
&.light {
|
||||
|
|
@ -46,7 +47,7 @@ a.footer-nav-item:hover {
|
|||
color: $dark-bg-alt;
|
||||
background-color: $dark-bg;
|
||||
border-color: $dark-bg;
|
||||
transition: 0.24s;
|
||||
transition: $trans-short;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -113,62 +114,117 @@ article {
|
|||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
h2,
|
||||
h2 a {
|
||||
background-color: $dark-accent1;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
& a{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
article h3 {
|
||||
h3,
|
||||
h3 a {
|
||||
background-color: $dark-accent2;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
& a{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
article.light h3 {
|
||||
h3.light {
|
||||
background-color: $light-accent2;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
&a {
|
||||
color: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
article h5,
|
||||
article h6,
|
||||
article h4 {
|
||||
h5,
|
||||
h6,
|
||||
h4 {
|
||||
background-color: $dark-accent3;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
& a {
|
||||
color: $dark-bg;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
article.light h5,
|
||||
article.light h6,
|
||||
article.light h4 {
|
||||
h4.light,
|
||||
h5.light,
|
||||
h6.light{
|
||||
background-color: $light-accent3;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article.light h2 {
|
||||
h2.light {
|
||||
background-color: $light-accent1;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
|
||||
article.light a {
|
||||
background-color: $light-ln;
|
||||
color: $light-bg;
|
||||
background-color: transparent;
|
||||
color: $light-ln;
|
||||
transition: $transition-time;
|
||||
&.hash-link{
|
||||
color: $light-bg;
|
||||
}
|
||||
&.hash-link:hover{
|
||||
background-color: transparent;
|
||||
color: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
&.light {
|
||||
color: $light-bg;
|
||||
background-color: $light-ln;
|
||||
}
|
||||
color: $dark-bg;
|
||||
background-color: $dark-ln;
|
||||
transition: $trans-short;
|
||||
}
|
||||
|
||||
.previous.light:hover,
|
||||
.next.light:hover,
|
||||
.postdescription a.light:hover,
|
||||
article.light a:hover {
|
||||
color: $light-ln;
|
||||
background-color: transparent;
|
||||
color: $light-bg;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,20 +19,20 @@ $small: 12pt;
|
|||
font-size: $small;
|
||||
}
|
||||
|
||||
h1 {
|
||||
h1{
|
||||
font-size: $huge;
|
||||
}
|
||||
|
||||
h2 {
|
||||
h2 a{
|
||||
font-size: $huge;
|
||||
font-style:bold;
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
h3 a, h4 a {
|
||||
font-size: $large;
|
||||
}
|
||||
|
||||
h5 h6 {
|
||||
h5 a, h6 a {
|
||||
font-size: $big;
|
||||
}
|
||||
|
||||
|
|
@ -53,3 +53,7 @@ label::after {
|
|||
h6 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
::before{
|
||||
font-family: CaskaydiaCoveMono;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ footer {
|
|||
#content p,
|
||||
#content ul,
|
||||
#content ol,
|
||||
#content table
|
||||
#content table,
|
||||
.postdescription
|
||||
{
|
||||
margin-right: 24%;
|
||||
margin-left: 24%;
|
||||
|
|
@ -94,12 +95,18 @@ h6 {
|
|||
padding-right: 6%;
|
||||
padding-top: 12pt;
|
||||
padding-bottom: 12pt;
|
||||
margin-right: 6%;
|
||||
justify-content: right;
|
||||
display: flex;
|
||||
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,
|
||||
h3,
|
||||
h4,
|
||||
|
|
@ -113,7 +120,8 @@ article {
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.titlecontainer {
|
||||
.titlecontainer,
|
||||
header{
|
||||
width: 100%;
|
||||
padding-top: 42pt;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,80 +3,92 @@ $toggle-width: 42pt;
|
|||
$toggle-height: 24pt;
|
||||
|
||||
* {
|
||||
border-width: 2pt;
|
||||
}
|
||||
|
||||
|
||||
input[type="checkbox"]{
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggleinput{
|
||||
opacity: 10;
|
||||
max-height: 10;
|
||||
overflow: hidden;
|
||||
border-width: 2pt;
|
||||
}
|
||||
|
||||
.togglelabel{
|
||||
width: $toggle-width;
|
||||
height: 24pt;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggleinput {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.togglelabel::after{
|
||||
left: calc(100% - 67pt);
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 20pt;
|
||||
width: 20pt;
|
||||
border-width: 1pt;
|
||||
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;
|
||||
|
||||
.togglelabel {
|
||||
width: $toggle-width;
|
||||
height: 24pt;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input:checked + label:after{
|
||||
left: calc(100% - 49pt);
|
||||
.togglelabel::after {
|
||||
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{
|
||||
content: "滛";
|
||||
input:checked + label:after {
|
||||
left: calc(100% - 49pt);
|
||||
}
|
||||
|
||||
.footer-nav-item{
|
||||
border-radius: 100%;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
input:checked + label::after {
|
||||
content: "滛";
|
||||
}
|
||||
|
||||
.togglelabel{
|
||||
border: solid;
|
||||
.footer-nav-item {
|
||||
border-radius: 100%;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
.togglelabel {
|
||||
border: solid;
|
||||
}
|
||||
|
||||
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 ul,
|
||||
#content ol,
|
||||
#content table {
|
||||
border-left-style: solid;
|
||||
border-width: 0.24em;
|
||||
padding-left: 2em;
|
||||
border-left-style: solid;
|
||||
border-width: 0.24em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
|
|
|||
5
layouts/_default/_markup/render-heading.html
Normal file
5
layouts/_default/_markup/render-heading.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="colorswitch">
|
||||
<a class="hash-link colorswitch" href="#{{ .Anchor | safeURL }}">
|
||||
{{ .Text | safeHTML }}
|
||||
</a>
|
||||
</h{{ .Level }}>
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Lang }}">
|
||||
{{- partial "head.html" . -}}
|
||||
<body class="colorswitch">
|
||||
{{- partial "header.html" . -}}
|
||||
<div id="content">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</div>
|
||||
{{- partial "footer.html" . -}}
|
||||
</body>
|
||||
{{- partial "head.html" . -}}
|
||||
<body class="colorswitch">
|
||||
{{- partial "header.html" . -}}
|
||||
<div id="content">{{- block "main" . }}{{- end }}</div>
|
||||
{{- partial "footer.html" . -}}
|
||||
<script src="/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ define "main" }}
|
||||
<main>
|
||||
<article>
|
||||
<header>
|
||||
<header class="colorswitch">
|
||||
<h1 id="title">{{.Title}}</h1>
|
||||
</header>
|
||||
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
|
||||
|
|
@ -10,9 +10,12 @@
|
|||
<div id="pagelist">
|
||||
<!-- Ranges through content/posts/*.md -->
|
||||
{{ range .Pages }}
|
||||
<h2>
|
||||
<a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2>{{.Description}}<br>{{.WordCount}}</a>
|
||||
<div id="postlist">
|
||||
<h2 class="colorswitch posttitle">
|
||||
<a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2><div class="postdescription">{{.Description}}<br>{{.WordCount}} words</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -13,4 +13,3 @@
|
|||
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label>
|
||||
</span>
|
||||
</footer>
|
||||
<script src="/js/darkmode.js"></script>
|
||||
|
|
|
|||
13
static/js/headings.js
Normal file
13
static/js/headings.js
Normal 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);
|
||||
}
|
||||
});
|
||||
})();
|
||||
Loading…
Reference in a new issue