From fde20c3580cb8aa01b58078f518c43c829a4d1b1 Mon Sep 17 00:00:00 2001 From: Gordon Pedersen Date: Fri, 10 May 2024 14:29:07 +1000 Subject: [PATCH] update main template and add nav menu --- configuration/configuration.txt | 1 + configuration/template.html | 4 +- weblog/B0. Template/styles.css.md | 329 +++++++++++++++++------------- 3 files changed, 189 insertions(+), 145 deletions(-) diff --git a/configuration/configuration.txt b/configuration/configuration.txt index 668f7e2..5231a29 100644 --- a/configuration/configuration.txt +++ b/configuration/configuration.txt @@ -16,6 +16,7 @@ Landing page template: Landing Page Template Separator: ยท // Navigation: about, another-page, Example, [Example](https://example.com) +Navigation: Now, 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 fa48d20..83affa9 100644 --- a/configuration/template.html +++ b/configuration/template.html @@ -18,9 +18,11 @@
+ {body} + diff --git a/weblog/B0. Template/styles.css.md b/weblog/B0. Template/styles.css.md index 69315e0..71d29af 100644 --- a/weblog/B0. Template/styles.css.md +++ b/weblog/B0. Template/styles.css.md @@ -11,149 +11,174 @@ Location: /styles.css @import url('https://static.omg.lol/profiles/icons/omg.lol-icons.css'); :root { - --foreground: #f9f8fa; - --background: #242129; - --card-bg: #242129; - --link: #aa55fe; - --accent: #845e9e; + --foreground: #f9f8fa; + --background: #242129; + --card-bg: #242129; + --link: #aa55fe; + --accent: #845e9e; - --font-main: 'Rubik', sans-serif, 'Noto Color Emoji'; - --font-head: 'Grenze Gotisch', sans-serif, 'Noto Color Emoji'; - --font-code: 'MD IO 0.4', monospace, 'Noto Color Emoji'; - --font-em: 'Courgette', cursive; + --font-main: 'Rubik', sans-serif, 'Noto Color Emoji'; + --font-head: 'Grenze Gotisch', sans-serif, 'Noto Color Emoji'; + --font-code: 'MD IO 0.4', monospace, 'Noto Color Emoji'; + --font-em: 'Courgette', cursive; - --font-main-weight: 400; - --font-head-weight: 400; - --font-code-weight: 400; - --font-em-weight: 400; + --font-main-weight: 400; + --font-head-weight: 400; + --font-code-weight: 400; + --font-em-weight: 400; - --paper-texture-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.4' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeDropShadow dx='0' dy='0' flood-color='%23888' flood-opacity='.5' stdDeviation='1'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); - --shadow: 1px 2px 0.5em 1px rgba(17,17,17,0.2) + --paper-texture-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.4' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3CfeDropShadow dx='0' dy='0' flood-color='%23888' flood-opacity='.5' stdDeviation='1'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); + --shadow: 1px 2px 0.5em 1px rgba(17, 17, 17, 0.2) } @media (prefers-color-scheme: light) { - html { - filter: invert(1) hue-rotate(180deg); - } - img,svg,video { - filter: invert(1) hue-rotate(180deg); - } + html { + filter: invert(1) hue-rotate(180deg); + } + + img, + svg, + video { + filter: invert(1) hue-rotate(180deg); + } } * { - box-sizing: border-box; + box-sizing: border-box; } body { - font-family: var(--font-main); - font-weight: var(--font-main-weight); - font-optical-sizing: auto; - font-size: 120%; - color: var(--foreground); - background: var(--background); + font-family: var(--font-main); + font-weight: var(--font-main-weight); + font-optical-sizing: auto; + font-size: 120%; + color: var(--foreground); + background: var(--background); } -article, main.page { - display: block; - max-width: 42em; - border-radius: 1em; - margin: 3em auto; - padding: 2em; - background-color: var(--card-bg); - background-image: var(--paper-texture-svg); - background-repeat: repeat; - position: relative; - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: start; - box-shadow: var(--shadow); +article, +main.page { + display: block; + max-width: 42em; + border-radius: 1em; + margin: 3em auto; + padding: 2em; + background-color: var(--card-bg); + background-image: var(--paper-texture-svg); + background-repeat: repeat; + position: relative; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: start; + box-shadow: var(--shadow); } .post-info { - margin-top: -1rem; - margin-right: -1rem; - width:100%; + margin-top: -1rem; + margin-right: -1rem; + width: 100%; } -.post-info+h1 { - /*max-width: calc(100% - 4rem - 2em);*/ -} - -.post-info, .post-tags { - font-size: 85%; - color: var(--accent); - text-align: right; +.post-info, +.post-tags { + font-size: 85%; + color: var(--accent); + text-align: right; } .post-info i:nth-child(2) { - margin-left: .75em; + margin-left: .75em; } .post-info>a { - margin-left: 1em; + margin-left: 1em; } article p { - width: 100%; + width: 100%; } article p:has(img) { - text-align: center; - width: 100%; + text-align: center; + width: 100%; } em { - font-family: var(--font-em); - font-weight: var(--font-em-weight); - font-style: normal; - color: color-mix(in lch, var(--link), var(--foreground)); + font-family: var(--font-em); + font-weight: var(--font-em-weight); + font-style: normal; + color: color-mix(in lch, var(--link), var(--foreground)); } iframe { - margin: 0 auto; + margin: 0 auto; } .caption { - text-align: center; - margin-block-start: 0.5em; - font-size: smaller; - color: var(--accent); - font-family: var(--font-em); - font-weight: var(--font-em-weight); + text-align: center; + margin-block-start: 0.5em; + font-size: smaller; + color: var(--accent); + font-family: var(--font-em); + font-weight: var(--font-em-weight); } -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-head); - font-weight: var(--font-head-weight); - margin: 1rem 0; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--font-head); + font-weight: var(--font-head-weight); + margin: 1rem 0; } -h1 { font-size: 3em; line-height: 1em; } -h2 { font-size: 2em; } -h3 { font-size: 1.5em; } -h4 { font-size: 1.17em; } -h5 { font-size: 1em; } -h6 { font-size: .83em; } +h1 { + font-size: 3em; + line-height: 1em; +} + +h2 { + font-size: 2em; +} + +h3 { + font-size: 1.5em; +} + +h4 { + font-size: 1.17em; +} + +h5 { + font-size: 1em; +} + +h6 { + font-size: .83em; +} iframe { - max-width: 100%; + max-width: 100%; } [data-emoji] { - display: inline-block; - font-size: 2em; - min-width: 1em; - font-style: normal; + display: inline-block; + font-size: 2em; + min-width: 1em; + font-style: normal; } [data-emoji]::before { - content: attr(data-emoji); - font-stye: normal; + content: attr(data-emoji); } -[data-emoji='{emoji}'], [href='{status_url}'], [href='{external_url}'] { - display:none; +[data-emoji='{emoji}'], +[href='{status_url}'], +[href='{external_url}'] { + display: none; } @@ -161,100 +186,116 @@ iframe { header nav ul { - list-style-type: none; - margin: 0; - padding: 0; + list-style-type: none; + margin: 0; + padding: 0; } header nav li { - display: inline-block; + display: inline-block; } header nav li a { - display: block; - text-decoration: none; - margin-right: 1em; + display: block; + text-decoration: none; + margin-right: 1em; } -p, li { - line-height: 160%; +p, +li { + line-height: 160%; } -header, main, footer { - max-width: 60em; - margin: 2em auto; - padding: 0 1em; +header, +main, +footer { + max-width: 60em; + margin: 2em auto; + padding: 0 1em; } header { - margin-top: 4em; + margin-top: 4em; } footer p { - margin-top: 5em; - font-size: 90%; - text-align: center; + 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); } +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; - padding: .3em .4em; - margin: .8em 0 0 .4em; - border-radius: .5em; - text-decoration: none; - display: inline-block; + background: var(--accent); + color: var(--background) !important; + padding: .3em .4em; + margin: .8em 0 0 .4em; + border-radius: .5em; + text-decoration: none; + display: inline-block; } hr { - border: 0; - height: 1px; - background: #333; - margin: 2em 0; + border: 0; + height: 1px; + background: #333; + margin: 2em 0; } code { - padding: .2em .3em; - border: 1px solid var(--accent); - white-space: pre-wrap; - word-wrap: break-word; + padding: .2em .3em; + border: 1px solid var(--accent); + white-space: pre-wrap; + word-wrap: break-word; } -pre, code { - font-family: var(--font-code); - font-weight: var(--font-code-weight); - font-size: 90%; +pre, +code { + font-family: var(--font-code); + font-weight: var(--font-code-weight); + font-size: 90%; } pre code { - background: #000; - color: #eee; - display: inline-block; - padding: 1em; - white-space: pre-wrap; - word-wrap: break-word; + background: #000; + color: #eee; + display: inline-block; + padding: 1em; + white-space: pre-wrap; + word-wrap: break-word; } img { - max-width: 100%; + max-width: 100%; } table { - border-collapse: collapse; + border-collapse: collapse; } -td, th { - padding: .75em; - text-align: left; - border: 1px solid var(--accent); +td, +th { + padding: .75em; + text-align: left; + border: 1px solid var(--accent); } - + .weblog-title a { - text-decoration: none; - color: var(--foreground); + text-decoration: none; + color: var(--foreground); } \ No newline at end of file