make theme look more modern
This commit is contained in:
zoe
parent
7e8352b90e
commit
e0e8cb434c
|
|
@ -1,12 +1,18 @@
|
|||
$light-bg: #d2c9a5;
|
||||
$light-bg-alt: #4b726e ;
|
||||
$light-bg-alt: #4b726e;
|
||||
$light-fg: #4b3d44;
|
||||
$light-ln: #79444a ;
|
||||
$light-ln: #79444a;
|
||||
$light-accent1: #225091;
|
||||
$light-accent2: #733c7c;
|
||||
$light-accent3: #007582;
|
||||
|
||||
$dark-bg: #4b3d44;
|
||||
$dark-bg-alt: #8caba1;
|
||||
$dark-fg: #d2c9a5;
|
||||
$dark-ln: #c77b58;
|
||||
$dark-bg: #27234c ;
|
||||
$dark-bg-alt: #f2504b ;
|
||||
$dark-fg: #e88dc3 ;
|
||||
$dark-ln: #f2504b ;
|
||||
$dark-accent1: #b296ff;
|
||||
$dark-accent2: #39b8a3 ;
|
||||
$dark-accent3: #dde4ff ;
|
||||
|
||||
$transition-time: 1s;
|
||||
|
||||
|
|
@ -104,16 +110,69 @@ article {
|
|||
}
|
||||
background-color: $dark-bg;
|
||||
border-color: $dark-bg-alt;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article h2,
|
||||
article h3{
|
||||
background-color: $dark-bg-alt;
|
||||
article h2 {
|
||||
background-color: $dark-accent1;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
article h3 {
|
||||
background-color: $dark-accent2;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article.light h2,
|
||||
article.light h3{
|
||||
background-color: $light-bg-alt;
|
||||
article.light h3 {
|
||||
background-color: $light-accent2;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
article h4 {
|
||||
background-color: $dark-accent3;
|
||||
color: $dark-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article.light h4 {
|
||||
background-color: $light-accent3;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
article.light h2 {
|
||||
background-color: $light-accent1;
|
||||
color: $light-bg;
|
||||
transition: $transition-time;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
&.light {
|
||||
color: $light-ln;
|
||||
background-color: transparent;
|
||||
}
|
||||
color: $dark-ln;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
article.light a:hover {
|
||||
color: $light-ln;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,3 +49,7 @@ label::after {
|
|||
font-family: CaskaydiaCoveMono;
|
||||
font-size: $big;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,14 +18,15 @@ footer {
|
|||
#content {
|
||||
min-height: calc(100% - 42pt * 3);
|
||||
right: auto;
|
||||
padding-bottom: 84pt;
|
||||
margin-bottom: 84pt;
|
||||
}
|
||||
|
||||
#content p,
|
||||
#content ul,
|
||||
#content ol,
|
||||
#content table{
|
||||
padding-inline: 4em;
|
||||
#content table {
|
||||
margin-right: 24%;
|
||||
margin-left: 24%;
|
||||
}
|
||||
|
||||
#footer-left {
|
||||
|
|
@ -62,13 +63,13 @@ footer {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#footer-right *{
|
||||
#footer-right * {
|
||||
display: flex;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
#footer-center *{
|
||||
#footer-center * {
|
||||
display: flex;
|
||||
margin-right: 8pt;
|
||||
margin-left: 8pt;
|
||||
|
|
@ -78,11 +79,36 @@ footer {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
padding-right: 6%;
|
||||
padding-top: 12pt;
|
||||
padding-bottom: 12pt;
|
||||
margin-right: 6%;
|
||||
justify-content: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
article {
|
||||
margin-top: 42pt;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.titlecontainer {
|
||||
width: 100%;
|
||||
padding-top: 42pt;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
$radius: 24pt;
|
||||
$radius: 48pt;
|
||||
$toggle-width: 42pt;
|
||||
$toggle-height: 24pt;
|
||||
|
||||
|
|
@ -65,3 +65,17 @@ input:checked + label::after{
|
|||
.togglelabel{
|
||||
border: solid;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
|
||||
#content p,
|
||||
#content ul,
|
||||
#content ol,
|
||||
#content table {
|
||||
border-left-style: solid;
|
||||
border-width: 0.24em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{{ define "main" }}
|
||||
<section id="main">
|
||||
<h1 id="title" class="colorswitch">Single Page {{ .Title }}</h1>
|
||||
<div class="titlecontainer">
|
||||
<h1 id="title" class="colorswitch">{{ .Title }}</h1>
|
||||
</div>
|
||||
<div>
|
||||
{{ with .PrevInSection }}
|
||||
<a class="previous colorswitch" href="{{.Permalink}}">previous: {{.Title}}</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue