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: #d2c9a5;
$light-bg-alt: #4b726e ; $light-bg-alt: #4b726e;
$light-fg: #4b3d44; $light-fg: #4b3d44;
$light-ln: #79444a ; $light-ln: #79444a;
$light-accent1: #225091;
$light-accent2: #733c7c;
$light-accent3: #007582;
$dark-bg: #4b3d44; $dark-bg: #27234c ;
$dark-bg-alt: #8caba1; $dark-bg-alt: #f2504b ;
$dark-fg: #d2c9a5; $dark-fg: #e88dc3 ;
$dark-ln: #c77b58; $dark-ln: #f2504b ;
$dark-accent1: #b296ff;
$dark-accent2: #39b8a3 ;
$dark-accent3: #dde4ff ;
$transition-time: 1s; $transition-time: 1s;
@ -104,16 +110,69 @@ article {
} }
background-color: $dark-bg; background-color: $dark-bg;
border-color: $dark-bg-alt; border-color: $dark-bg-alt;
transition: $transition-time;
} }
article h2, article h2 {
article h3{ background-color: $dark-accent1;
background-color: $dark-bg-alt;
color: $dark-bg; color: $dark-bg;
transition: $transition-time;
}
article h3 {
background-color: $dark-accent2;
color: $dark-bg;
transition: $transition-time;
} }
article.light h2, article.light h3 {
article.light h3{ background-color: $light-accent2;
background-color: $light-bg-alt;
color: $light-bg; 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-family: CaskaydiaCoveMono;
font-size: $big; font-size: $big;
} }
h6 {
font-style: italic;
}

View file

@ -18,14 +18,15 @@ footer {
#content { #content {
min-height: calc(100% - 42pt * 3); min-height: calc(100% - 42pt * 3);
right: auto; right: auto;
padding-bottom: 84pt; margin-bottom: 84pt;
} }
#content p, #content p,
#content ul, #content ul,
#content ol, #content ol,
#content table{ #content table {
padding-inline: 4em; margin-right: 24%;
margin-left: 24%;
} }
#footer-left { #footer-left {
@ -62,13 +63,13 @@ footer {
margin: 0; margin: 0;
} }
#footer-right *{ #footer-right * {
display: flex; display: flex;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
} }
#footer-center *{ #footer-center * {
display: flex; display: flex;
margin-right: 8pt; margin-right: 8pt;
margin-left: 8pt; margin-left: 8pt;
@ -78,11 +79,36 @@ footer {
align-items: center; 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-top: 1em;
margin-bottom: 1em;
} }
article { article {
margin-top: 42pt;
margin-inline: auto; margin-inline: auto;
} }
.titlecontainer {
width: 100%;
padding-top: 42pt;
}

View file

@ -1,4 +1,4 @@
$radius: 24pt; $radius: 48pt;
$toggle-width: 42pt; $toggle-width: 42pt;
$toggle-height: 24pt; $toggle-height: 24pt;
@ -65,3 +65,17 @@ input:checked + label::after{
.togglelabel{ .togglelabel{
border: solid; 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" }} {{ define "main" }}
<section id="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> <div>
{{ with .PrevInSection }} {{ with .PrevInSection }}
<a class="previous colorswitch" href="{{.Permalink}}">previous: {{.Title}}</a> <a class="previous colorswitch" href="{{.Permalink}}">previous: {{.Title}}</a>