mirror of
https://git.kittycat.homes/zoe/hugo-battheme.git
synced 2024-08-15 03:25:18 +00:00
Compare commits
No commits in common. "abb81b7acae00184920e36f6580ab28f66fbe8ca" and "72e5576a156f38fb19c3c65fe475f2313cb646bd" have entirely different histories.
abb81b7aca
...
72e5576a15
12 changed files with 164 additions and 276 deletions
|
|
@ -1,25 +1,20 @@
|
|||
$light-bg: #ffffff;
|
||||
$light-bg-alt: #413c74;
|
||||
$light-fg: #413c74;
|
||||
$light-ln: #9b5bb4 ;
|
||||
$light-accent1: #9b5bb4;
|
||||
$light-accent2: #5183b9 ;
|
||||
$light-accent3: #413c74;
|
||||
$light-bg: #dde4ff ;
|
||||
$light-bg-alt: #733c7c ;
|
||||
$light-fg: #4b3d44;
|
||||
$light-ln: #733c7c ;
|
||||
$light-accent1: #007582 ;
|
||||
$light-accent2: #225091 ;
|
||||
$light-accent3: #27234c ;
|
||||
|
||||
$dark-bg: #413c74;
|
||||
$dark-bg-alt: #ff8ad0;
|
||||
$dark-fg: #ff8ad0;
|
||||
$dark-ln: #ffdc6d;
|
||||
$dark-accent1: #ffdc6d;
|
||||
$dark-accent2: #61d478;
|
||||
$dark-accent3: #ffffff;
|
||||
$dark-bg: #27234c ;
|
||||
$dark-bg-alt: #f2504b ;
|
||||
$dark-fg: #e88dc3 ;
|
||||
$dark-ln: #f2504b ;
|
||||
$dark-accent1: #b296ff;
|
||||
$dark-accent2: #39b8a3 ;
|
||||
$dark-accent3: #dde4ff ;
|
||||
|
||||
$transition-time: 2s;
|
||||
$trans-short: 0.2s;
|
||||
|
||||
* {
|
||||
transition: $transition-time;
|
||||
}
|
||||
$transition-time: 1s;
|
||||
|
||||
body {
|
||||
&.light {
|
||||
|
|
@ -33,11 +28,11 @@ body {
|
|||
|
||||
a {
|
||||
&.light {
|
||||
background-color: transparent;
|
||||
color: $light-ln;
|
||||
background-color: $light-ln;
|
||||
color: $light-bg;
|
||||
}
|
||||
background-color: transparent;
|
||||
color: $dark-ln;
|
||||
background-color: $dark-ln;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +46,7 @@ a.footer-nav-item:hover {
|
|||
color: $dark-bg-alt;
|
||||
background-color: $dark-bg;
|
||||
border-color: $dark-bg;
|
||||
transition: $trans-short;
|
||||
transition: 0.24s;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -118,132 +113,66 @@ article {
|
|||
transition: $transition-time;
|
||||
}
|
||||
|
||||
h2 {
|
||||
article h2 {
|
||||
background-color: $dark-accent1;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
&.light {
|
||||
color: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color: $dark-bg;
|
||||
&.light{
|
||||
color: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
article h3 {
|
||||
background-color: $dark-accent2;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
h3 a {
|
||||
color: $dark-bg;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
h3.light {
|
||||
article.light h3 {
|
||||
background-color: $light-accent2;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
&a {
|
||||
color: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
h5,
|
||||
h6,
|
||||
h4 {
|
||||
article h4 {
|
||||
background-color: $dark-accent3;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
& a {
|
||||
color: $dark-bg;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
h4.light,
|
||||
h5.light,
|
||||
h6.light {
|
||||
article.light h4 {
|
||||
background-color: $light-accent3;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
h2.light {
|
||||
article.light h2 {
|
||||
background-color: $light-accent1;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article.light a {
|
||||
background-color: transparent;
|
||||
color: $light-ln;
|
||||
article h5,
|
||||
article h6,
|
||||
article a {
|
||||
background-color: $dark-ln;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article.light h5,
|
||||
article.light h6,
|
||||
article.light a {
|
||||
background-color: $light-ln;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
&.hash-link {
|
||||
color: $light-bg;
|
||||
}
|
||||
&.hash-link:hover {
|
||||
background-color: transparent;
|
||||
color: $light-bg;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $dark-bg;
|
||||
background-color: $dark-ln;
|
||||
transition: $trans-short;
|
||||
&.light {
|
||||
color: $light-ln;
|
||||
background-color: transparent;
|
||||
}
|
||||
color: $dark-ln;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.previous.light:hover,
|
||||
.next.light:hover,
|
||||
.postdescription a.light:hover,
|
||||
article.light a:hover {
|
||||
color: $light-bg;
|
||||
background-color: $light-ln;
|
||||
transition: $trans-short;
|
||||
}
|
||||
|
||||
.light.hash-link:hover,
|
||||
.hash-link:hover {
|
||||
color: $light-ln;
|
||||
background-color: transparent;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&a.light {
|
||||
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 a{
|
||||
h2 {
|
||||
font-size: $huge;
|
||||
font-style:bold;
|
||||
}
|
||||
|
||||
h3 a, h4 a {
|
||||
h3, h4 {
|
||||
font-size: $large;
|
||||
}
|
||||
|
||||
h5 a, h6 a {
|
||||
h5 h6 {
|
||||
font-size: $big;
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +53,3 @@ label::after {
|
|||
h6 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
::before{
|
||||
font-family: CaskaydiaCoveMono;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,19 +24,11 @@ footer {
|
|||
#content p,
|
||||
#content ul,
|
||||
#content ol,
|
||||
#content table,
|
||||
.postdescription,
|
||||
hr
|
||||
{
|
||||
#content table {
|
||||
margin-right: 24%;
|
||||
margin-left: 24%;
|
||||
}
|
||||
|
||||
#content ol ol,
|
||||
#content ul ul{
|
||||
margin-left: 0.12em;
|
||||
}
|
||||
|
||||
#footer-left {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
|
|
@ -94,9 +86,9 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
padding-right: 6%;
|
||||
margin-right: 6%;
|
||||
padding-top: 12pt;
|
||||
padding-bottom: 12pt;
|
||||
margin-right: 6%;
|
||||
justify-content: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -115,8 +107,7 @@ article {
|
|||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.titlecontainer,
|
||||
header{
|
||||
.titlecontainer {
|
||||
width: 100%;
|
||||
padding-top: 42pt;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,93 +3,79 @@ $toggle-width: 42pt;
|
|||
$toggle-height: 24pt;
|
||||
|
||||
* {
|
||||
border-width: 2pt;
|
||||
transition: ease-in-out;
|
||||
border-width: 2pt;
|
||||
}
|
||||
|
||||
input[type="checkbox"]{
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggleinput{
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggleinput {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
.togglelabel{
|
||||
width: $toggle-width;
|
||||
height: 24pt;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.togglelabel {
|
||||
width: $toggle-width;
|
||||
height: 24pt;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.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::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{
|
||||
left: calc(100% - 49pt);
|
||||
}
|
||||
|
||||
input:checked + label:after {
|
||||
left: calc(100% - 49pt);
|
||||
|
||||
input:checked + label::after{
|
||||
content: "";
|
||||
}
|
||||
|
||||
input:checked + label::after {
|
||||
content: "滛";
|
||||
.footer-nav-item{
|
||||
border-radius: 100%;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.footer-nav-item {
|
||||
border-radius: 100%;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-style: solid;
|
||||
.togglelabel{
|
||||
border: solid;
|
||||
}
|
||||
|
||||
.togglelabel {
|
||||
border: solid;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
border-top-right-radius: $radius;
|
||||
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 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="colorswitch">
|
||||
<a class="hash-link colorswitch" href="#{{ .Anchor | safeURL }}">
|
||||
{{ .Text | safeHTML }}
|
||||
</a>
|
||||
</h{{ .Level }}>
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Lang }}">
|
||||
{{- 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>
|
||||
{{- partial "head.html" . -}}
|
||||
<body class="colorswitch">
|
||||
{{- partial "header.html" . -}}
|
||||
<div id="content">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</div>
|
||||
{{- partial "footer.html" . -}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
{{ define "main" }}
|
||||
<main>
|
||||
<article>
|
||||
<header class="colorswitch">
|
||||
<h1 id="title">{{.Title}}</h1>
|
||||
<header>
|
||||
<h1>List - {{.Title}}</h1>
|
||||
</header>
|
||||
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
|
||||
{{.Content}}
|
||||
</article>
|
||||
<div id="pagelist">
|
||||
<ul>
|
||||
<!-- Ranges through content/posts/*.md -->
|
||||
{{ range .Pages }}
|
||||
<div id="postlist">
|
||||
<h2 class="colorswitch posttitle">
|
||||
<a class="colorswitch" href="{{.Permalink}}">{{.Title}}</h2><div class="postdescription">{{.Description}}<br>{{.WordCount}} words</a>
|
||||
</div>
|
||||
<li>
|
||||
<a class="colorswitch" href="{{.Permalink}}">{{.Title}}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
<div class="titlecontainer">
|
||||
<h1 id="title" class="colorswitch">{{ .Title }}</h1>
|
||||
</div>
|
||||
<div>
|
||||
{{ with .PrevInSection }}
|
||||
<a class="previous colorswitch" href="{{.Permalink}}">previous: {{.Title}}</a>
|
||||
{{ end }}
|
||||
{{ with .NextInSection }}
|
||||
<a class="next colorswitch" href="{{.Permalink}}">next: {{.Title}}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div>
|
||||
<article id="content" class="colorswitch">
|
||||
{{ .Content }}
|
||||
|
|
|
|||
|
|
@ -13,3 +13,4 @@
|
|||
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label>
|
||||
</span>
|
||||
</footer>
|
||||
<script src="/js/darkmode.js"></script>
|
||||
|
|
|
|||
32
static/js/darkmode.js
Normal file
32
static/js/darkmode.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
const checkbox = document.getElementById("darkmode-toggle");
|
||||
const colorswitchers = document.getElementsByClassName("colorswitch");
|
||||
|
||||
if (localStorage.getItem("dark")) {
|
||||
switchToDark();
|
||||
} else {
|
||||
switchToLight();
|
||||
}
|
||||
checkbox.checked = localStorage.getItem("dark");
|
||||
|
||||
checkbox.addEventListener("change", function () {
|
||||
localStorage.setItem("dark", this.checked);
|
||||
if (this.checked) {
|
||||
switchToDark();
|
||||
} else {
|
||||
localStorage.removeItem("dark");
|
||||
switchToLight();
|
||||
}
|
||||
});
|
||||
|
||||
function switchToLight() {
|
||||
for (let item of colorswitchers) {
|
||||
item.classList.add("light");
|
||||
}
|
||||
}
|
||||
|
||||
function switchToDark() {
|
||||
for (let item of colorswitchers) {
|
||||
console.log(item);
|
||||
item.classList.remove("light");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
(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);
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
const checkbox = document.getElementById("darkmode-toggle");
|
||||
const colorswitchers = document.getElementsByClassName("colorswitch");
|
||||
|
||||
function switchToLight() {
|
||||
for (let item of colorswitchers) {
|
||||
item.classList.add("light");
|
||||
}
|
||||
}
|
||||
|
||||
function switchToDark() {
|
||||
for (let item of colorswitchers) {
|
||||
console.log(item);
|
||||
item.classList.remove("light");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
if (localStorage.getItem("light")) {
|
||||
switchToLight();
|
||||
} else {
|
||||
switchToDark();
|
||||
}
|
||||
checkbox.checked = localStorage.getItem("dark");
|
||||
checkbox.addEventListener("change", function () {
|
||||
localStorage.setItem("light", this.checked);
|
||||
if (this.checked) {
|
||||
switchToLight();
|
||||
} else {
|
||||
localStorage.removeItem("light");
|
||||
switchToDark();
|
||||
}
|
||||
});
|
||||
if (localStorage.getItem("light")) {
|
||||
checkbox.checked = true;
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue