From 84d88dbefee14a184d1a8c7feaba1068c96d293a Mon Sep 17 00:00:00 2001 From: Marty Sluijtman Date: Sun, 18 Sep 2022 11:47:00 +0200 Subject: [PATCH] Kicked colorscheme back to gruvbox --- layouts/_default/index.html | 2 +- layouts/_default/list.html | 2 +- layouts/partials/posts_pagination.html | 4 +-- static/gruvbox.css | 48 ++++++++++++++++++++++++++ static/style.css | 42 +++++++++++----------- 5 files changed, 74 insertions(+), 24 deletions(-) create mode 100644 static/gruvbox.css diff --git a/layouts/_default/index.html b/layouts/_default/index.html index 4387144..1951829 100644 --- a/layouts/_default/index.html +++ b/layouts/_default/index.html @@ -15,7 +15,7 @@
{{ if .Params.Date }} - {{ .Title | markdownify }} + {{ .Title | markdownify }} - {{ .Date.Format "2006-01-02" }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index f6c11fe..d512dfe 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -9,7 +9,7 @@
{{ if .Params.Date }} - {{ .Title | markdownify }} + {{ .Title | markdownify }} - {{ .Date.Format "2006-01-02" }} diff --git a/layouts/partials/posts_pagination.html b/layouts/partials/posts_pagination.html index ddc9c15..ee5b3cf 100644 --- a/layouts/partials/posts_pagination.html +++ b/layouts/partials/posts_pagination.html @@ -1,10 +1,10 @@ {{ if or .NextInSection .PrevInSection }}
{{ if .NextInSection }} - + {{ end }} {{ if .PrevInSection }} - + {{ end }}
{{ end }} diff --git a/static/gruvbox.css b/static/gruvbox.css new file mode 100644 index 0000000..a73e3bf --- /dev/null +++ b/static/gruvbox.css @@ -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; + } +} \ No newline at end of file diff --git a/static/style.css b/static/style.css index c622a45..dd12bec 100644 --- a/static/style.css +++ b/static/style.css @@ -1,48 +1,50 @@ +@charset "UTF-8"; +@import "gruvbox.css"; + :root{ - scrollbar-color: #333747 #1d1f21; + scrollbar-color: var(--ansi00-soft) var(--ansi00-hard); } ::selection{ - background-color: #333747; - color:#c397d8; + background-color: var(--selection-bg); + color: var(--selection-fg); } html{ - color: #eaeaea; - background-color: #1d1f21; + color: var(--ansi15); + background-color: var(--ansi00-hard); } body{ padding: 0; margin: 0; } -a{ color: #f0c674; } -a:hover{ color: #1d1f21; background-color: #f0c674; } -a:hover::selection{ color: #f0c674; } +a{ color: var(--ansi11); } +a:hover{ color: var(--ansi00-hard); background-color: var(--ansi11); text-decoration: none;} audio{ width: 100%; display: block; margin-top: 1em; } main{ margin-left: 12em; margin-right: 1em; padding: 1em; border:1pt solid; margin-bottom: 1em;} main h1{border-bottom: 1pt solid;} main a h1 {border-bottom: transparent 0pt solid;} -li::marker{color: #b294bb;} +li::marker{color: var(--ansi05);} /* article{ padding:1em; 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 a{ display: block;} nav{text-transform: capitalize;} 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 a{text-decoration:none;} -footer .mirror{text-align:center; color: #f0c674;} -code{ background: #282a2e; } -pre{ background: #282a2e; padding: 1em; border-radius: 1em;} +footer .mirror{text-align:center; color: var(--ansi11);} +code{ background: var(--ansi00-soft); } +pre{ background: var(--ansi00-soft); padding: 1em; border-radius: 1em;} .hyperbowl{ font-style: italic; font-size: 1.2em;} .logo{ padding: 5pt 0; margin:0; width:100%; border-bottom: 2pt solid; - background-color: #282a2e; - background: linear-gradient(to right,#b294bb,#282a2e); + background-color: var(--ansi00-soft); + background: linear-gradient(to right,var(--ansi05),var(--ansi00)); } .logo a{ color: #eaeaea; @@ -64,7 +66,7 @@ header{text-transform: capitalize; text-align:center;border-bottom:2pt solid; fo } .stickers{ text-align:center; } .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-size:300%; -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; } .post-meta{margin-bottom: .5em; border-bottom: solid 1pt;} -.on-list{color:#c5c6c8;} -.post-meta{color: #c5c6c8; display:flex; justify-content: space-between; } +.on-list{color: var(--ansi07);} +.post-meta{color: var(--ansi07); display:flex; justify-content: space-between; } .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;} .pagination__buttons{display:flex; justify-content:center;} .pagination__buttons .next::after{content:" →";}