make theme look more modern

This commit is contained in:
zoe 2022-04-12 23:13:48 +02:00
parent 7e8352b90e
commit e0e8cb434c
5 changed files with 126 additions and 21 deletions

View file

@ -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;
}

View file

@ -49,3 +49,7 @@ label::after {
font-family: CaskaydiaCoveMono;
font-size: $big;
}
h6 {
font-style: italic;
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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>