diff options
| -rw-r--r-- | css/terminal.css | 109 | ||||
| -rw-r--r-- | src/blog.njk | 6 |
2 files changed, 59 insertions, 56 deletions
diff --git a/css/terminal.css b/css/terminal.css index d8dc3bd..3cdd138 100644 --- a/css/terminal.css +++ b/css/terminal.css @@ -1,28 +1,28 @@ @font-face { - font-family: "DejaVu Sans Mono"; - src: url("../files/fonts/dejavu/ttf/DejaVuSansMono.ttf"); + font-family: "DejaVu Sans Mono"; + src: url("../files/fonts/dejavu/ttf/DejaVuSansMono.ttf"); } :root { - --fg: #90ff90; + --fg: #90ff90; --shadow: 0 0 3px #80ffc066, 0 0 5px #0f63; - --link: #3e3; - --visited: #b9ffb0; + --link: #3e3; + --visited: #b9ffb0; - --bg: #1d2021; + --bg: #1d2021; --bg2: black; --selection: #466639; - --font-body: "DejaVu Sans", "Bitstream Vera Sans", "Verdana", sans-serif; - --font-mono: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Menlo", monospace; - --font-accent: var(--font-mono); + --font-body: "DejaVu Sans", "Bitstream Vera Sans", "Verdana", sans-serif; + --font-mono: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Menlo", monospace; + --font-accent: var(--font-mono); } .green { - --fg: #86ff86; /* hue 120, contrast 13:1 */ + --fg: #86ff86; /* hue 120, contrast 13:1 */ --shadow: 0 0 3px #80ffc066, 0 0 5px #0f63; - --link: #42f042; /* hue 120, contrast 10.75:1 */ - --visited: #b7ffaf; /* hue 114, contrast 14:1 */ + --link: #42f042; /* hue 120, contrast 10.75:1 */ + --visited: #b7ffaf; /* hue 114, contrast 14:1 */ - --bg: #1d2021; + --bg: #1d2021; --selection: #466639; } .purple { @@ -40,29 +40,29 @@ --link: #00f5f5; /* hue 180, contrast 12:1 */ --visited: #83baf1; /* hue 210, contrast 8:1 */ - --bg: #1d2021; + --bg: #1d2021; --selection: #466639; } /* UTILITY CLASSES */ -.clearfix::after, section::after { clear:both; display:block; content: ""; } +.clearfix::after, section::after, article::after { clear:both; display:block; content: ""; } .inline { display:inline } /* MAIN STYLES*/ html { - display: flex; - flex-direction: column; - min-height: 100vh; + display: flex; + flex-direction: column; + min-height: 100vh; } body { - background-color: var(--bg); - background: linear-gradient(var(--bg) 0%, var(--bg2) 33%, var(--bg) 66%); - background-size: 100% 3px; - color: var(--fg); - text-shadow: var(--shadow); - font: 100%/1.6 var(--font-body); - margin: auto; - max-width: 75ch; - word-spacing: .05em; + background-color: var(--bg); + background: linear-gradient(var(--bg) 0%, var(--bg2) 33%, var(--bg) 66%); + background-size: 100% 3px; + color: var(--fg); + text-shadow: var(--shadow); + font: 100%/1.6 var(--font-body); + margin: auto; + max-width: 75ch; + word-spacing: .05em; } ::selection { background: var(--selection); @@ -70,36 +70,36 @@ body { text-shadow: none; } a { - color: var(--link); + color: var(--link); } a:visited { - color: var(--visited); + color: var(--visited); } a:hover, a:focus { - text-decoration: none; + text-decoration: none; } code, pre { - font: 100%/1.25 var(--font-mono); + font: 100%/1.25 var(--font-mono); } footer { - font: 75%/1.25 var(--font-accent); + font: 75%/1.25 var(--font-accent); } h1 { - font: bold 200%/1 var(--font-accent); - margin: 0.5em 0 0 0; - border-bottom: 0.25em solid; + font: bold 200%/1 var(--font-accent); + margin: 0.5em 0 0 0; + border-bottom: 0.25em solid; } h1::after { - content: "█"; - display: inline-block; - animation: blink 2.4s steps(2) infinite; + content: "█"; + display: inline-block; + animation: blink 2.4s steps(2) infinite; } @keyframes blink { - 0% { - opacity: 0; - } + 0% { + opacity: 0; + } } @media(prefers-reduced-motion: reduce) { h1::after { @@ -108,32 +108,33 @@ h1::after { } } h2 { - font: bold 141%/1 var(--font-accent); - margin: 0.4em 0; + font: bold 141%/1 var(--font-accent); + margin: 0.4em 0 0 0; } h3 { font: bold 117%/1 var(--font-accent); } /* NAVIGATION */ header > nav > ul { - font: 100%/1.5 var(--font-accent); - list-style-type: none; - margin: 0 0 0.4em 0; - padding: 0; + font: 100%/1.5 var(--font-accent); + list-style-type: none; + margin: 0 0 0.4em 0; + padding: 0; } header > nav > ul > li { - display: inline; + display: inline; } header > nav > ul > li > a { - padding: 0.4em; + padding: 0.4em; } header > nav a.active { - background: var(--fg); - color: var(--bg); + background: var(--fg); + color: var(--bg); } /* SECTION */ -section { - border-bottom: 1px solid; +section, +article { + border-bottom: 1px solid; } /* IMAGES */ figure { @@ -165,7 +166,7 @@ tr:nth-of-type(even) { background: var(--bg2); } tr td:first-child { - white-space: nowrap; + white-space: nowrap; } td { padding: 0 0.4em; diff --git a/src/blog.njk b/src/blog.njk index a8ec510..84c6f03 100644 --- a/src/blog.njk +++ b/src/blog.njk @@ -7,9 +7,11 @@ size = 20 reverse = true --- {% for post in posts %} -<article> +<article class=blogpost> <h2><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2> - <time datetime="{{ post.date | rfc3339_datetime }}">{{ post.date | local_date }}</time> + <time datetime="{{ post.date | rfc3339_datetime }}" title="{{ post.date | rfc3339_datetime}}"> + {{ post.date | local_date }} + </time> {%- if post.data.page.excerpt -%} <p>{{ post.data.page.excerpt | safe }} {%- endif -%} |