From c2b35ba7a57ea701bcc1dd78b0e8372a0c445c25 Mon Sep 17 00:00:00 2001 From: Gordon Pedersen Date: Fri, 10 May 2024 16:55:19 +1000 Subject: [PATCH] Added nav, changed header, styling changes --- configuration/configuration.txt | 2 +- configuration/template.html | 11 +-- weblog/B0. Template/styles.css.md | 111 ++++++++++++++++++++---------- 3 files changed, 82 insertions(+), 42 deletions(-) diff --git a/configuration/configuration.txt b/configuration/configuration.txt index 08ea7a0..06fd995 100644 --- a/configuration/configuration.txt +++ b/configuration/configuration.txt @@ -16,7 +16,7 @@ Landing page template: Landing Page Template Separator: · // Navigation: about, another-page, Example, [Example](https://example.com) -Navigation: Home, Now, Blog, CV +Navigation: Home, Now, Blog, CV Files path: /files/ Landing page post count: 8 Landing page post length: 100 words diff --git a/configuration/template.html b/configuration/template.html index 83affa9..5dbb156 100644 --- a/configuration/template.html +++ b/configuration/template.html @@ -9,10 +9,13 @@ -
-

{weblog-title}

- {navigation} -
+
+
+ My avatar — A pixelated self-portrait in the style of the 'bitizens' in the mobile game Tiny Tower +

{weblog-title}

+ {navigation} +
+
diff --git a/weblog/B0. Template/styles.css.md b/weblog/B0. Template/styles.css.md index 71d29af..1ded9d0 100644 --- a/weblog/B0. Template/styles.css.md +++ b/weblog/B0. Template/styles.css.md @@ -11,10 +11,10 @@ Location: /styles.css @import url('https://static.omg.lol/profiles/icons/omg.lol-icons.css'); :root { - --foreground: #f9f8fa; + --foreground: #e2dae9; --background: #242129; --card-bg: #242129; - --link: #aa55fe; + --link: #8000ff; --accent: #845e9e; --font-main: 'Rubik', sans-serif, 'Noto Color Emoji'; @@ -54,6 +54,8 @@ body { font-size: 120%; color: var(--foreground); background: var(--background); + margin:0; + padding:0; } article, @@ -93,6 +95,7 @@ main.page { .post-info>a { margin-left: 1em; + background: none; } article p { @@ -181,6 +184,68 @@ iframe { display: none; } +header, +main, +footer { + max-width: 60em; + margin: 2em auto; + padding: 0 1em; +} + +header>.avatar { + max-width: 60px; + border-radius: 50%; +} + +.header { + margin: 0 0 2em 0; + background-color: #000; + border-radius: 0 0 1rem 1rem; + box-shadow: var(--shadow); +} +header { + margin: 0 auto; + display: flex; + flex-direction: row; + align-items: end; + padding: 1em; +} + +header>h1 { + margin:0 2rem; +} + +header>nav { + margin-left: auto; + font-family: var(--font-code); + font-weight: var(--font-code-weight); +} + +a { + color: inherit; + text-decoration: none; + background-image: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 100%); + background-position: 0 100%; + background-repeat: repeat-x; + background-size: 5px 5px; + transition: 250ms ease-in-out; +} + +a:hover { + background-size: 5px 100%; + color: white; +} + +h1 a { + background: none +} + +.weblog-title a { + background: none; +} + + + @@ -198,7 +263,8 @@ header nav li { header nav li a { display: block; text-decoration: none; - margin-right: 1em; + margin-right: 0.5em; + padding: 0 .3em; } p, @@ -206,43 +272,15 @@ li { line-height: 160%; } -header, -main, -footer { - max-width: 60em; - margin: 2em auto; - padding: 0 1em; -} - -header { - margin-top: 4em; -} - footer p { margin-top: 5em; font-size: 90%; text-align: center; } -a:link { - color: var(--link); -} - -a:visited { - color: var(--link); -} - -a:hover { - color: var(--link); -} - -a:active { - color: var(--link); -} - .tag { background: var(--accent); - color: var(--background) !important; + color: var(--background); padding: .3em .4em; margin: .8em 0 0 .4em; border-radius: .5em; @@ -250,6 +288,10 @@ a:active { display: inline-block; } +.tag:hover { + color: white; +} + hr { border: 0; height: 1px; @@ -293,9 +335,4 @@ th { padding: .75em; text-align: left; border: 1px solid var(--accent); -} - -.weblog-title a { - text-decoration: none; - color: var(--foreground); } \ No newline at end of file