toggle button!
This commit is contained in:
zoe
parent
f6d2abb6fe
commit
6354e1d70a
|
|
@ -1,14 +1,14 @@
|
|||
$light-bg:#515262;
|
||||
$light-bg-alt: #caa05a;
|
||||
$light-fg: #c9cca1;
|
||||
$light-ln: #ab5675;
|
||||
$light-active: #72dcbb;
|
||||
$light-bg: #f0f0eb ;
|
||||
$light-bg-alt: #545155 ;
|
||||
$light-fg: #545155 ;
|
||||
$light-ln: #d8828e ;
|
||||
$light-active: #7be098 ;
|
||||
|
||||
$dark-bg: #292831;
|
||||
$dark-bg-alt: #333f58;
|
||||
$dark-fg: #fbbbad;
|
||||
$dark-ln: #ee8695;
|
||||
$dark-active: #4a7a96;
|
||||
$dark-bg: #2e4052 ;
|
||||
$dark-bg-alt: #c97064 ;
|
||||
$dark-fg: #fbbbad;
|
||||
$dark-ln: #ee8695;
|
||||
$dark-active: #4a7a96;
|
||||
|
||||
body {
|
||||
&.light {
|
||||
|
|
@ -45,10 +45,27 @@ footer {
|
|||
}
|
||||
|
||||
footer a {
|
||||
&.light{
|
||||
color: $light-bg;
|
||||
background-color: $light-bg-alt;
|
||||
}
|
||||
color: $dark-bg;
|
||||
background-color: $dark-bg-alt;
|
||||
&.light {
|
||||
color: $light-bg;
|
||||
background-color: $light-bg-alt;
|
||||
}
|
||||
color: $dark-bg;
|
||||
background-color: $dark-bg-alt;
|
||||
}
|
||||
|
||||
.togglelabel {
|
||||
&.light {
|
||||
background-color: $light-bg;
|
||||
}
|
||||
background-color: $dark-bg;
|
||||
}
|
||||
|
||||
.togglelabel.light::after{
|
||||
background-color: $light-fg;
|
||||
color: $light-bg;
|
||||
}
|
||||
|
||||
.togglelabel::after{
|
||||
background-color: $dark-fg;
|
||||
color: $dark-bg;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,33 @@
|
|||
$huge: 42pt;
|
||||
$large: 24pt;
|
||||
$big: 20pt;
|
||||
$medium: 16pt;
|
||||
$small: 12pt;
|
||||
|
||||
@font-face {
|
||||
font-family: CaskaydiaCove;
|
||||
src: url(/font/CaskaydiaCove.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: CaskaydiaCoveMono;
|
||||
src: url(/font/CaskaydiaCoveMono.ttf);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: CaskaydiaCove;
|
||||
font-size: 16pt;
|
||||
font-size: $small;
|
||||
}
|
||||
h1 {font-size: 42pt;}
|
||||
h1 {font-size: $huge;}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 20pt;
|
||||
footer * {
|
||||
font-size: $big;
|
||||
}
|
||||
|
||||
label::after{
|
||||
font-family: CaskaydiaCoveMono;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,48 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
flex: auto;
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 10%;
|
||||
min-height: 24pt;
|
||||
position: sticky;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#footer-content{
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
min-height: 24pt;
|
||||
position: sticky;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#content {
|
||||
min-height:90%;
|
||||
min-height: 90%;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
#footer-right{
|
||||
justify-self: right;
|
||||
#footer-left {
|
||||
margin-left: 24pt;
|
||||
justify-self: left;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#footer-right {
|
||||
margin-left: auto;
|
||||
justify-self: right;
|
||||
margin-right: 24pt;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#footer-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#footer-right *{
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import "./colors";
|
||||
@import "./font";
|
||||
@import "./layout";
|
||||
@import "./font";
|
||||
@import "./style";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
$radius: 24pt;
|
||||
$toggle-width: 42pt;
|
||||
$toggle-height: 24pt;
|
||||
|
||||
input[type="checkbox"]{
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggleinput{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.togglelabel{
|
||||
width: $toggle-width;
|
||||
height: 24pt;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.togglelabel::after{
|
||||
left: calc(100% - 66pt);
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: $toggle-height;
|
||||
width: $toggle-height;
|
||||
border-radius: 100pt;
|
||||
transition: 0.3s;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input:checked + label:after{
|
||||
left: calc(100% - 48pt);
|
||||
}
|
||||
|
||||
.togglelabel::after{
|
||||
content: "滛";
|
||||
}
|
||||
|
||||
input:checked + label::after{
|
||||
content: "";
|
||||
}
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
<footer class="colorswitch">
|
||||
<div id="footer-center">
|
||||
<nav id="footer-nav">
|
||||
<span id="footer-left"></span>
|
||||
<span id="footer-center">
|
||||
<nav id="footer-nav" aria-label="navigation">
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.nav }}
|
||||
<a class="footer-nav-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} active{{end}} colorswitch" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
</div>
|
||||
<div id="footer-right">
|
||||
<input type="checkbox" id="darkmode-toggle">
|
||||
</div>
|
||||
</span>
|
||||
<span id="footer-right">
|
||||
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
|
||||
<label class="togglelabel colorswitch" for="darkmode-toggle"></label>
|
||||
</span>
|
||||
</footer>
|
||||
<script src="/js/darkmode.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue