diff --git a/static/css/main.css b/static/css/main.css index 820ce8d..061c133 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,9 +1,23 @@ +/* Color scheme. */ + +:root { + --background-color: rgb(255, 253, 246); + --text-color: #55423e; + + --shaded-background: rgba(0, 0, 0, 5%); + --border-1: rgba(0, 0, 0, 15%); + --border-2: rgba(0, 0, 0, 30%); +} + /* Article-style layout. Center everything and give it a maximum width */ body { max-width: 1200px; margin-left: auto; margin-right: auto; + + display: flex; + flex-direction: column; } main { @@ -19,8 +33,8 @@ main { /* Choose more pretty colors than vanilla HTML */ body { - background-color: rgb(255, 253, 246); - color: #55423e; + background-color: var(--background-color); + color: var(--text-color); } /* Set up typography */ @@ -117,7 +131,7 @@ body { pre { padding: 8px 12px; margin: 12px 0; - background-color: rgba(0, 0, 0, 5%); + background-color: var(--shaded-background); border-radius: 8px; } @@ -148,7 +162,7 @@ a:visited { blockquote { margin: 0; padding: 2px 12px; - border-left: 4px solid rgba(0, 0, 0, 15%); + border-left: 4px solid var(--border-1px); } /* And tables. */ @@ -160,19 +174,20 @@ table { table, th, td { - border: 1px solid rgba(0, 0, 0, 30%); + border: 1px solid var(--border-2); border-collapse: collapse; padding: 4px 10px; } th { - background-color: rgba(0, 0, 0, 5%); + background-color: var(--shaded-background); --recursive-wght: 700; --recursive-casl: 0.5; } -/* Style the noscript dialog a little more prettily. */ +/* Style the noscript box a little more prettily. */ + .noscript { padding: 16px; background-color: #fde748; @@ -191,3 +206,18 @@ th { .noscript p:last-child { margin-bottom: 0; } + +/* Give the logo on the top some nicer looks */ + +nav { + display: flex; +} + +nav .logo { + width: 48px; + height: 48px; + padding: 16px; + display: block; + opacity: 100%; + color: var(--text-color); +} diff --git a/template/tree.hbs b/template/tree.hbs index b1e14f6..108dbec 100644 --- a/template/tree.hbs +++ b/template/tree.hbs @@ -19,6 +19,16 @@ + + - -
{{{ tree }}}