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

questions mark

Browse source
This commit is contained in:
zoe 2022-04-11 22:44:06 +02:00
parent 2f630b6a5b
commit b09fd3f3e1
4 changed files with 99 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
assets/scss/colors.scss
View file

@ -2,17 +2,13 @@ $light-bg: #ddcf99;
$light-bg-alt: #4e5463; $light-bg-alt: #4e5463;
$light-fg: #202020; $light-fg: #202020;
$light-ln: #4e5463; $light-ln: #4e5463;
$light-active: #f1866c;
$light-h1: blue;
$dark-bg: #4b3d44; $dark-bg: #4b3d44;
$dark-bg-alt: #bd97a9; $dark-bg-alt: #bd97a9;
$dark-fg: #e6d0c4; $dark-fg: #e6d0c4;
$dark-ln: #bd97a9; $dark-ln: #bd97a9;
$dark-active: #4b4361;
$dark-h1: red;
$transition-time: 1.5s; $transition-time: 1s;
body { body {
&.light { &.light {
@ -34,12 +30,17 @@ 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-active; color: $light-bg-alt;
background-color: $light-bg;
border-color: $light-bg;
} }
color: $dark-active; color: $dark-bg-alt;
transition: $transition-time; background-color: $dark-bg;
border-color: $dark-bg;
transition: 0.24s;
} }
footer { footer {
@ -64,26 +65,44 @@ footer a {
.togglelabel { .togglelabel {
&.light { &.light {
background-color: $light-bg; background-color: $light-bg-alt;
border-color: $light-bg;
} }
background-color: $dark-bg; background-color: $dark-bg-alt;
border-color: $dark-bg;
transition: $transition-time; transition: $transition-time;
} }
.togglelabel.light::after { .togglelabel.light::after {
background-color: $light-fg; background-color: $light-bg;
color: $light-bg; color: $light-bg-alt;
}
.togglelabel::after {
background-color: $dark-fg;
color: $dark-bg;
transition: $transition-time; transition: $transition-time;
} }
#title{ .togglelabel::after {
background-color: $dark-bg;
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;
background-color: $dark-bg-alt;
transition: $transition-time;
}
article {
&.light { &.light {
color: $light-h1; background-color: $light-bg;
border-color: $light-bg-alt;
} }
color: $dark-h1; background-color: $dark-bg;
border-color: $dark-bg-alt;
} }

15
assets/scss/layout.scss
View file

@ -1,3 +1,5 @@
$footer-height: 42pt;
html, html,
body { body {
height: 100%; height: 100%;
@ -5,7 +7,7 @@ body {
} }
footer { footer {
height: 42pt; height: $footer-height;
position: sticky; position: sticky;
display: flex; display: flex;
align-items: center; align-items: center;
@ -14,8 +16,9 @@ footer {
} }
#content { #content {
min-height: calc(100% - 42pt); min-height: calc(100% - 42pt * 3);
right: auto; right: auto;
padding: 42pt;
} }
#footer-left { #footer-left {
@ -64,5 +67,13 @@ 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,6 +2,10 @@ $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;
} }
@ -16,29 +20,53 @@ 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% - 66pt); left: calc(100% - 67pt);
content: ""; content: "";
position: absolute; position: absolute;
height: $toggle-height; height: 20pt;
width: $toggle-height; width: 20pt;
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% - 48pt); left: calc(100% - 49pt);
} }
.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,7 +2,15 @@
<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>
<article id="content"> {{ 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 }} {{ .Content }}
</article> </article>
</div> </div>
@ -26,13 +34,5 @@
</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 }}