Kicked colorscheme back to gruvbox

This commit is contained in:
Nox Sluijtman 2022-09-18 11:47:00 +02:00
parent 3e3d1a397b
commit 84d88dbefe
5 changed files with 74 additions and 24 deletions

View file

@ -15,7 +15,7 @@
<div class="post-meta"> <div class="post-meta">
{{ if .Params.Date }} {{ if .Params.Date }}
<span> <span>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a> <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
<span> - </span> <span> - </span>
<span class="post-date"> <span class="post-date">
{{ .Date.Format "2006-01-02" }} {{ .Date.Format "2006-01-02" }}

View file

@ -9,7 +9,7 @@
<div class="post-meta"> <div class="post-meta">
{{ if .Params.Date }} {{ if .Params.Date }}
<span> <span>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a> <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
<span> - </span> <span> - </span>
<span class="post-date"> <span class="post-date">
{{ .Date.Format "2006-01-02" }} {{ .Date.Format "2006-01-02" }}

View file

@ -1,10 +1,10 @@
{{ if or .NextInSection .PrevInSection }} {{ if or .NextInSection .PrevInSection }}
<div class="pagination__buttons"> <div class="pagination__buttons">
{{ if .NextInSection }} {{ if .NextInSection }}
<a class="button prev" href="{{ .NextInSection.Permalink }}">{{ .NextInSection.Title }}</a> <a class="button prev" href="{{ .NextInSection.RelPermalink }}">{{ .NextInSection.Title }}</a>
{{ end }} {{ end }}
{{ if .PrevInSection }} {{ if .PrevInSection }}
<a class="button next" href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a> <a class="button next" href="{{ .PrevInSection.RelPermalink }}">{{ .PrevInSection.Title }}</a>
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}

48
static/gruvbox.css Normal file
View file

@ -0,0 +1,48 @@
:root {
/* gruvbox dark */
--ansi00: #282828;
--ansi00-hard: #1d2021;
--ansi00-soft: #32302f;
--ansi01: #cc241d;
--ansi02: #98971a;
--ansi03: #d79921;
--ansi04: #458588;
--ansi05: #b16286;
--ansi06: #689d6a;
--ansi07: #a89984;
--ansi08: #928374;
--ansi09: #fb4934;
--ansi10: #b8bb26;
--ansi11: #fabd2f;
--ansi12: #83a598;
--ansi13: #d3869b;
--ansi14: #8ec07c;
--ansi15: #ebdbb2;
--selection-fg: #ededed;
--selection-bg: #d65d0e;
}
@media (prefers-color-scheme:light){
:root{
/* gruvbox light */
--ansi00: #fbf1c7;
--ansi00-hard: #f9f5d7;
--ansi00-soft: #f2e5bc;
--ansi01: #cc241d;
--ansi02: #98971a;
--ansi03: #d79921;
--ansi04: #458588;
--ansi05: #b16286;
--ansi06: #689d6a;
--ansi07: #7c6f64;
--ansi08: #928374;
--ansi09: #9d0006;
--ansi10: #79740e;
--ansi11: #b57614;
--ansi12: #076678;
--ansi13: #8f3f71;
--ansi14: #427b58;
--ansi15: #3c3836;
--selection-fg: #3c3836;
}
}

View file

@ -1,48 +1,50 @@
@charset "UTF-8";
@import "gruvbox.css";
:root{ :root{
scrollbar-color: #333747 #1d1f21; scrollbar-color: var(--ansi00-soft) var(--ansi00-hard);
} }
::selection{ ::selection{
background-color: #333747; background-color: var(--selection-bg);
color:#c397d8; color: var(--selection-fg);
} }
html{ html{
color: #eaeaea; color: var(--ansi15);
background-color: #1d1f21; background-color: var(--ansi00-hard);
} }
body{ padding: 0; margin: 0; } body{ padding: 0; margin: 0; }
a{ color: #f0c674; } a{ color: var(--ansi11); }
a:hover{ color: #1d1f21; background-color: #f0c674; } a:hover{ color: var(--ansi00-hard); background-color: var(--ansi11); text-decoration: none;}
a:hover::selection{ color: #f0c674; }
audio{ width: 100%; display: block; margin-top: 1em; } audio{ width: 100%; display: block; margin-top: 1em; }
main{ margin-left: 12em; margin-right: 1em; padding: 1em; border:1pt solid; margin-bottom: 1em;} main{ margin-left: 12em; margin-right: 1em; padding: 1em; border:1pt solid; margin-bottom: 1em;}
main h1{border-bottom: 1pt solid;} main h1{border-bottom: 1pt solid;}
main a h1 {border-bottom: transparent 0pt solid;} main a h1 {border-bottom: transparent 0pt solid;}
li::marker{color: #b294bb;} li::marker{color: var(--ansi05);}
/* /*
article{ article{
padding:1em; padding:1em;
background: linear-gradient(to right,#1d1f21,#282a2e); background: linear-gradient(to right,#1d1f21,#282a2e);
} }
*/ */
nav{height: 100%;padding: 0.5em; float:left; background: #282a2e; border-right:solid 1pt; border-bottom: solid 1pt; width: 10em;} nav{height: 100%;padding: 0.5em; float:left; background: var(--ansi00-soft); border-right:solid 1pt; border-bottom: solid 1pt; width: 10em;}
nav li{list-style: none; list-style-position:outside;} nav li{list-style: none; list-style-position:outside;}
nav a{ display: block;} nav a{ display: block;}
nav{text-transform: capitalize;} nav{text-transform: capitalize;}
summary{cursor:pointer;} summary{cursor:pointer;}
summary:hover{ color: #1d1f21; background-color: #f0c674; } summary:hover{ color: var(--ansi00-hard); background-color: var(--ansi11); }
footer{text-align:center; border-top:1pt solid; margin-top: 1em;} footer{text-align:center; border-top:1pt solid; margin-top: 1em;}
footer a{text-decoration:none;} footer a{text-decoration:none;}
footer .mirror{text-align:center; color: #f0c674;} footer .mirror{text-align:center; color: var(--ansi11);}
code{ background: #282a2e; } code{ background: var(--ansi00-soft); }
pre{ background: #282a2e; padding: 1em; border-radius: 1em;} pre{ background: var(--ansi00-soft); padding: 1em; border-radius: 1em;}
.hyperbowl{ font-style: italic; font-size: 1.2em;} .hyperbowl{ font-style: italic; font-size: 1.2em;}
.logo{ .logo{
padding: 5pt 0; padding: 5pt 0;
margin:0; margin:0;
width:100%; width:100%;
border-bottom: 2pt solid; border-bottom: 2pt solid;
background-color: #282a2e; background-color: var(--ansi00-soft);
background: linear-gradient(to right,#b294bb,#282a2e); background: linear-gradient(to right,var(--ansi05),var(--ansi00));
} }
.logo a{ .logo a{
color: #eaeaea; color: #eaeaea;
@ -64,7 +66,7 @@ header{text-transform: capitalize; text-align:center;border-bottom:2pt solid; fo
} }
.stickers{ text-align:center; } .stickers{ text-align:center; }
.gay{ .gay{
background:linear-gradient(-45deg, #cc6666, #f0c674, #b5bd68, #8abeb7, #81a2b3, #b294bb); background:linear-gradient(-45deg, var(--ansi01), var(--ansi02), var(--ansi03), var(--ansi04), var(--ansi05), var(--ansi06));
background-clip: text; background-clip: text;
background-size:300%; background-size:300%;
-webkit-background-clip: text; -webkit-background-clip: text;
@ -74,10 +76,10 @@ header{text-transform: capitalize; text-align:center;border-bottom:2pt solid; fo
-webkit-animation: gay 8s ease-in-out infinite; -webkit-animation: gay 8s ease-in-out infinite;
} }
.post-meta{margin-bottom: .5em; border-bottom: solid 1pt;} .post-meta{margin-bottom: .5em; border-bottom: solid 1pt;}
.on-list{color:#c5c6c8;} .on-list{color: var(--ansi07);}
.post-meta{color: #c5c6c8; display:flex; justify-content: space-between; } .post-meta{color: var(--ansi07); display:flex; justify-content: space-between; }
.post-tags a{text-decoration:none; color:inherit;} .post-tags a{text-decoration:none; color:inherit;}
.post-tags a:hover{text-decoration:none; color:#eaeaea; background:inherit;} .post-tags a:hover{text-decoration:none; color:var(--ansi15); background:inherit;}
.button{padding:.3em;border-radius:.3em;} .button{padding:.3em;border-radius:.3em;}
.pagination__buttons{display:flex; justify-content:center;} .pagination__buttons{display:flex; justify-content:center;}
.pagination__buttons .next::after{content:" →";} .pagination__buttons .next::after{content:" →";}