zoe/hugo-battheme
1
0
Fork 0
mirror of https://git.kittycat.homes/zoe/hugo-battheme.git synced 2024-08-15 03:25:18 +00:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: zoe:f62a00c10fd2690c3cc6f9792a382d8a7438484c
Branches Tags
zoe:main
..
compare: zoe:2f630b6a5b7244bd0e5b334d5343cd3093d1eb85
Branches Tags
zoe:main

No commits in common. "f62a00c10fd2690c3cc6f9792a382d8a7438484c" and "2f630b6a5b7244bd0e5b334d5343cd3093d1eb85" have entirely different histories.
f62a00c10f ... 2f630b6a5b

4 changed files with 43 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

68
assets/scss/colors.scss
View file

@ -1,14 +1,18 @@
$light-bg: #d2c9a5; $light-bg: #ddcf99;
$light-bg-alt: #4b726e ; $light-bg-alt: #4e5463;
$light-fg: #4b3d44; $light-fg: #202020;
$light-ln: #79444a ; $light-ln: #4e5463;
$light-active: #f1866c;
$light-h1: blue;
$dark-bg: #4b3d44; $dark-bg: #4b3d44;
$dark-bg-alt: #8caba1; $dark-bg-alt: #bd97a9;
$dark-fg: #d2c9a5; $dark-fg: #e6d0c4;
$dark-ln: #c77b58; $dark-ln: #bd97a9;
$dark-active: #4b4361;
$dark-h1: red;
$transition-time: 1s; $transition-time: 1.5s;
body { body {
&.light { &.light {
@ -30,17 +34,12 @@ a {
transition: $transition-time; transition: $transition-time;
} }
a.footer-nav-item.active, a.footer-nav-item.active {
a.footer-nav-item:hover {
&.light { &.light {
color: $light-bg-alt; color: $light-active;
background-color: $light-bg;
border-color: $light-bg;
} }
color: $dark-bg-alt; color: $dark-active;
background-color: $dark-bg; transition: $transition-time;
border-color: $dark-bg;
transition: 0.24s;
} }
footer { footer {
@ -65,43 +64,26 @@ footer a {
.togglelabel { .togglelabel {
&.light { &.light {
background-color: $light-bg-alt; background-color: $light-bg;
border-color: $light-bg;
} }
background-color: $dark-bg-alt; background-color: $dark-bg;
border-color: $dark-bg;
transition: $transition-time; transition: $transition-time;
} }
.togglelabel.light::after { .togglelabel.light::after {
background-color: $light-bg; background-color: $light-fg;
color: $light-bg-alt; color: $light-bg;
transition: $transition-time;
} }
.togglelabel::after { .togglelabel::after {
background-color: $dark-bg; background-color: $dark-fg;
color: $dark-bg-alt;
transition: $transition-time;
}
body.light #title {
color: $light-bg;
background-color: $light-bg-alt;
transition: $transition-time;
}
body #title {
color: $dark-bg; color: $dark-bg;
background-color: $dark-bg-alt;
transition: $transition-time; transition: $transition-time;
} }
article { #title{
&.light { &.light{
background-color: $light-bg; color: $light-h1;
border-color: $light-bg-alt;
} }
background-color: $dark-bg; color: $dark-h1;
border-color: $dark-bg-alt;
} }

15
assets/scss/layout.scss
View file

@ -1,5 +1,3 @@
$footer-height: 42pt;
html, html,
body { body {
height: 100%; height: 100%;
@ -7,7 +5,7 @@ body {
} }
footer { footer {
height: $footer-height; height: 42pt;
position: sticky; position: sticky;
display: flex; display: flex;
align-items: center; align-items: center;
@ -16,9 +14,8 @@ footer {
} }
#content { #content {
min-height: calc(100% - 42pt * 3); min-height: calc(100% - 42pt);
right: auto; right: auto;
padding: 42pt;
} }
#footer-left { #footer-left {
@ -67,13 +64,5 @@ footer {
margin-left: 8pt; margin-left: 8pt;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
justify-content: center;
align-items: center;
} }
article {
margin-top: 42pt;
margin-inline: auto;
padding: 4em;
}

42
assets/scss/style.scss
View file

@ -2,10 +2,6 @@ $radius: 24pt;
$toggle-width: 42pt; $toggle-width: 42pt;
$toggle-height: 24pt; $toggle-height: 24pt;
* {
border-width: 2pt;
}
input[type="checkbox"]{ input[type="checkbox"]{
cursor: pointer; cursor: pointer;
} }
@ -20,53 +16,29 @@ input[type="checkbox"]{
height: 24pt; height: 24pt;
border-radius: $radius; border-radius: $radius;
cursor: pointer; cursor: pointer;
align-items: center;
display: flex;
} }
.togglelabel::after{ .togglelabel::after{
left: calc(100% - 67pt); left: calc(100% - 66pt);
content: ""; content: "";
position: absolute; position: absolute;
height: 20pt; height: $toggle-height;
width: 20pt; width: $toggle-height;
border-width: 1pt;
border-radius: 100pt; border-radius: 100pt;
transition: 0.3s; transition: 0.3s;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
text-align: center; 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); left: calc(100% - 48pt);
} }
.togglelabel::after{
content: "滛";
}
input:checked + label::after{ input:checked + label::after{
content: ""; content: "";
} }
.footer-nav-item{
border-radius: 100%;
height: 1em;
width: 1em;
justify-content: center;
align-items: center;
border-style: solid;
}
article {
border-style: solid;
border-radius: $radius;
}
.togglelabel{
border: solid;
}

18
layouts/_default/single.html
View file

@ -2,15 +2,7 @@
<section id="main"> <section id="main">
<h1 id="title" class="colorswitch">Single Page {{ .Title }}</h1> <h1 id="title" class="colorswitch">Single Page {{ .Title }}</h1>
<div> <div>
{{ with .PrevInSection }} <article id="content">
<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 }} {{ .Content }}
</article> </article>
</div> </div>
@ -34,5 +26,13 @@
</ul> </ul>
{{ end }} {{ end }}
</div> </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>
</aside> </aside>
{{ end }} {{ end }}