redstrate/redstrate.com
1
Fork 0
Code Activity Actions

Improve colors, add dark mode

Browse source
This commit is contained in:
Joshua Goins 2022-11-06 17:25:01 -05:00
parent c42300099d
commit f987ebead8
3 changed files with 49 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
themes/red/assets/css/site.css
View file

@ -39,13 +39,49 @@
} }
body { body {
--accent-color: #d26c6c; background-color: var(--background-primary);
background-color: #e3e3e3;
accent-color: var(--accent-color); accent-color: var(--accent-color);
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
color: var(--text-color);
}
:root {
--primary-accent: #9f5858;
--secondary-accent: #c99192;
--border-color: #325e8d;
--background-primary: #eff1ff;
--background-secondary: #ffffff;
--text-color: #363131;
--link-visited: #460b0b;
--extra-color: #efe4e4;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-accent: #ce4545;
--secondary-accent: #c99192;
--background-primary: #34313a;
--background-secondary: #3c3a44;
--border-color: #515860;
--text-color: #fbeded;
--link-visited: #ad1616;
--extra-color: #504e5a;
}
.ext-link {
filter: invert(100%);
}
}
a:link {
color: var(--primary-accent);
}
a:visited {
color: var(--link-visited);
} }
header { header {
@ -54,19 +90,19 @@ header {
} }
aside { aside {
background-color: white; background-color: var(--background-secondary);
text-align: center; text-align: center;
border: 1px solid black; border: 1px solid var(--border-color);
border-radius: 3px; border-radius: 3px;
padding: 15px; padding: 15px;
} }
article { article {
background-color: white; background-color: var(--background-secondary);
border: 1px solid black; border: 1px solid var(--border-color);
border-radius: 3px; border-radius: 3px;
padding: 15px; padding: 15px;
@ -75,12 +111,12 @@ article {
} }
footer { footer {
background-color: white; background-color: var(--background-secondary);
flex-grow: 1; flex-grow: 1;
flex-basis: 100%; flex-basis: 100%;
border: 1px solid black; border: 1px solid var(--border-color);
border-radius: 3px; border-radius: 3px;
padding: 15px; padding: 15px;
@ -125,7 +161,7 @@ td {
} }
tr:nth-child(even) { tr:nth-child(even) {
background-color: #e2d9d9; background-color: var(--extra-color);
} }
table { table {

2
themes/red/layouts/_default/_markup/render-link.html
View file

@ -1,4 +1,4 @@
{{ $icon := resources.Get "external-link.svg" }} {{ $icon := resources.Get "external-link.svg" }}
<a href="{{ .Destination | safeURL }}" {{ if strings.HasPrefix .Destination "http" }} <a class="ext-link" href="{{ .Destination | safeURL }}" {{ if strings.HasPrefix .Destination "http" }}
target="_blank"{{ end }}>{{ .PlainText }}{{ if strings.HasPrefix .Destination "http" }}<img aria-hidden="true" alt="External link" width="16" height="16" src="{{ $icon.Permalink }}"/>{{- end -}}</a> target="_blank"{{ end }}>{{ .PlainText }}{{ if strings.HasPrefix .Destination "http" }}<img aria-hidden="true" alt="External link" width="16" height="16" src="{{ $icon.Permalink }}"/>{{- end -}}</a>

4
themes/red/layouts/partials/head.html
View file

@ -2,8 +2,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#eff1ff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="rgb(51 65 85)" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#34313a" media="(prefers-color-scheme: dark)">
{{ if .IsHome }} {{ if .IsHome }}
<meta name="description" content="{{ $.Site.Params.description }}"> <meta name="description" content="{{ $.Site.Params.description }}">