~kungtotte/dtt

c0a681127a001fd51141d17f76e7d70df11edc21 — Thomas Landin 4 months ago ca4eec3
Tweak CSS template

Now it's using HSL for colours instead of hexes, and it bases everything
off of two main colours so that it's quick and painless to re-theme the
site by just changing the hue.
1 files changed, 31 insertions(+), 44 deletions(-)

M src/tmpl.nim
M src/tmpl.nim => src/tmpl.nim +31 -44
@@ 51,56 51,39 @@ email = "your@email.tld"
"""
  style* = """
:root {
  --body-bg: #fff;
  --header-bg: #83a598;
  --font-color: #282828;
  --link-color: #282828;
  --visited-color: #af3a03;
  --quote-color: #928374;
  --hover-color: #928374;
  --monospace-color: #9d0006;
  --codeblock-color: #076678;
  --codeblock-bg: #ebdbb2
    --hue: 200;
    --accent: 0;

    --bg: #fff;
    --bg-menu: hsl(var(--hue), 30%, 30%);
    --bg-code: hsl(var(--hue), 30%, 85%);

    --fg-normal: hsl(var(--hue), 3%, 19%);
    --fg-bold: hsl(var(--hue), 23%, 41%);
    --fg-light: hsl(var(--hue), 5%, 90%);
    --fg-highlight: hsl(var(--hue), 3%, 35%);

    --fg-link: hsl(var(--accent), 100%, 31%);
    --fg-link-hover: hsl(var(--accent), 100%, 71%);
}
body {
  font-family: monospace, sans-serif;
  font-size: 16px;
  color: var(--font-color);
  background-color: var(--body-bg);
  color: var(--fg-normal);
  background-color: var(--bg);
  line-height: 1.5;
  padding: 0;
  margin: 0;
}
a {
  color: var(--link-color);
    color: var(--fg-link);
  font-weight: bold;
}
a:visited {
  color: var(--visited-color);
}
a:hover {
  color: var(--hover-color);
    color: var(--fg-link-hover);
}
h1, h2, h3, h4 {
  color: var(--quote-color);
}
aside {
  display: grid;
  position: fixed;
  width: 30ch;
  top: 15ch;
  left: 5ch;
  background: #bdae93;
  box-shadow: 0px 0px 3px 3px #a89984;
  padding: 1ch;
}
aside ul {
  margin: 0;
}
aside h4 {
  font-style: italic;
  margin: 0;
  margin-bottom: 1ch;
    color: var(--fg-bold);
}
nav {
  display: flex;


@@ 113,16 96,17 @@ nav {
  bottom: auto;
  padding: 0px;
  margin: 0px;
  background: var(--header-bg);
  background: var(--bg-menu);
  font-size: 130%;
  border-width: 0 0 thin 0; /* top right bottom left */
  border-style: dashed;
}
nav a, nav a:visited, nav a:hover {
  text-decoration-style: double;
    color: var(--fg-light);
    text-decoration-style: double;
}
h1 {
  font-size: 200%;
    font-size: 200%;
}
main {
  max-width: 70ch;


@@ 132,20 116,23 @@ main {
}
article header time {
  font-size: smaller;
  color: var(--quote-color);
  color: var(--fg-highlight);
  font-family: monospace;
}
blockquote {
  color: var(--quote-color);
  color: var(--fg-highlight);
  background: var(--bg-code);
  font-style: italic;
}
code {
  color: var(--monospace-color);
  color: var(--fg-link);
}
pre code {
  display: block;
  color: var(--codeblock-color);
  background: var(--codeblock-bg);
  width: 80%;
  margin-left: 5%;
  color: var(--fg-normal);
  background: var(--bg-code);
  padding: 1ch;
  padding-left: 4ch;
}