questions mark
This commit is contained in:
zoe
parent
2f630b6a5b
commit
b09fd3f3e1
|
|
@ -2,17 +2,13 @@ $light-bg: #ddcf99;
|
|||
$light-bg-alt: #4e5463;
|
||||
$light-fg: #202020;
|
||||
$light-ln: #4e5463;
|
||||
$light-active: #f1866c;
|
||||
$light-h1: blue;
|
||||
|
||||
$dark-bg: #4b3d44;
|
||||
$dark-bg-alt: #bd97a9;
|
||||
$dark-fg: #e6d0c4;
|
||||
$dark-ln: #bd97a9;
|
||||
$dark-active: #4b4361;
|
||||
$dark-h1: red;
|
||||
|
||||
$transition-time: 1.5s;
|
||||
$transition-time: 1s;
|
||||
|
||||
body {
|
||||
&.light {
|
||||
|
|
@ -34,12 +30,17 @@ a {
|
|||
transition: $transition-time;
|
||||
}
|
||||
|
||||
a.footer-nav-item.active {
|
||||
a.footer-nav-item.active,
|
||||
a.footer-nav-item:hover{
|
||||
&.light {
|
||||
color: $light-active;
|
||||
color: $light-bg-alt;
|
||||
background-color: $light-bg;
|
||||
border-color: $light-bg;
|
||||
}
|
||||
color: $dark-active;
|
||||
transition: $transition-time;
|
||||
color: $dark-bg-alt;
|
||||
background-color: $dark-bg;
|
||||
border-color: $dark-bg;
|
||||
transition: 0.24s;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -64,26 +65,44 @@ footer a {
|
|||
|
||||
.togglelabel {
|
||||
&.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;
|
||||
}
|
||||
|
||||
.togglelabel.light::after {
|
||||
background-color: $light-fg;
|
||||
color: $light-bg;
|
||||
}
|
||||
|
||||
.togglelabel::after {
|
||||
background-color: $dark-fg;
|
||||
color: $dark-bg;
|
||||
background-color: $light-bg;
|
||||
color: $light-bg-alt;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
#title{
|
||||
&.light{
|
||||
color: $light-h1;
|
||||
}
|
||||
color: $dark-h1;
|
||||
.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 {
|
||||
background-color: $light-bg;
|
||||
border-color: $light-bg-alt;
|
||||
}
|
||||
background-color: $dark-bg;
|
||||
border-color: $dark-bg-alt;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
$footer-height: 42pt;
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
|
|
@ -5,7 +7,7 @@ body {
|
|||
}
|
||||
|
||||
footer {
|
||||
height: 42pt;
|
||||
height: $footer-height;
|
||||
position: sticky;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -14,8 +16,9 @@ footer {
|
|||
}
|
||||
|
||||
#content {
|
||||
min-height: calc(100% - 42pt);
|
||||
min-height: calc(100% - 42pt * 3);
|
||||
right: auto;
|
||||
padding: 42pt;
|
||||
}
|
||||
|
||||
#footer-left {
|
||||
|
|
@ -64,5 +67,13 @@ footer {
|
|||
margin-left: 8pt;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
article {
|
||||
margin-top: 42pt;
|
||||
margin-inline: auto;
|
||||
padding: 4em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ $radius: 24pt;
|
|||
$toggle-width: 42pt;
|
||||
$toggle-height: 24pt;
|
||||
|
||||
* {
|
||||
border-width: 2pt;
|
||||
}
|
||||
|
||||
input[type="checkbox"]{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -16,29 +20,53 @@ input[type="checkbox"]{
|
|||
height: 24pt;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.togglelabel::after{
|
||||
left: calc(100% - 66pt);
|
||||
left: calc(100% - 67pt);
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: $toggle-height;
|
||||
width: $toggle-height;
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
input:checked + label:after{
|
||||
left: calc(100% - 48pt);
|
||||
left: calc(100% - 49pt);
|
||||
}
|
||||
|
||||
.togglelabel::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;
|
||||
}
|
||||
|
||||
article {
|
||||
border-style: solid;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.togglelabel{
|
||||
border: solid;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
{{ define "main" }}
|
||||
<section id="main">
|
||||
<h1 id="title" class="colorswitch">Single Page {{ .Title }}</h1>
|
||||
<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">
|
||||
<article id="content" class="colorswitch">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
</div>
|
||||
|
|
@ -26,13 +34,5 @@
|
|||
</ul>
|
||||
{{ end }}
|
||||
</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>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue