From 988efdb0312a8c134ca803250e870b32c2f49f48 Mon Sep 17 00:00:00 2001 From: beyonddream <43626691+beyonddream@users.noreply.github.com> Date: Sun, 1 Jun 2025 11:16:09 -0700 Subject: [PATCH 1/2] css pretiffy --- images/.gitkeep | 0 styles/bundle.css | 510 ++++++++++++++++++++++----- styles/prism-base16-monokai.dark.css | 89 +++++ 3 files changed, 503 insertions(+), 96 deletions(-) create mode 100644 images/.gitkeep create mode 100644 styles/prism-base16-monokai.dark.css diff --git a/images/.gitkeep b/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/styles/bundle.css b/styles/bundle.css index 2e2e06e..f670bba 100644 --- a/styles/bundle.css +++ b/styles/bundle.css @@ -1,131 +1,449 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap"); +/* Colors */ :root { - --primary-color: #6366f1; - --text-color: #e2e8f0; - --background-color: #1a1a1a; - --secondary-background: #2d2d2d; - --accent-color: #8b5cf6; - --muted-text: #94a3b8; + --lightgray: #e0e0e0; + --gray: #c0c0c0; + --darkgray: #333; + --almostblack: #1b1b1b; + --navy: #17050f; + --blue: #082840; + --white: rgb(255, 255, 255); + --offwhite: #f6f6f6; + --yellowgreen: #aaff00; + --lightblue: rgb(0, 225, 255); } +/* Global stylesheet */ +* { + box-sizing: border-box; +} + +html, body { - font-family: 'Segoe UI', Roboto, sans-serif; - background-color: var(--background-color); - color: var(--text-color); - min-height: 100vh; - display: flex; - flex-direction: column; - margin: 0; - padding: 0; + padding: 0; + margin: auto; + max-width: 50em; + font-family: -apple-system, system-ui, sans-serif; + color: var(--white); + background-color: var(--almostblack); +} + +h1, +h2, +h3, +h4, +h5, +h6, +header { + font-family: "Roboto Slab", serif; +} + +p:last-child { + margin-bottom: 0; +} +p, +.tmpl-post li, +img { + max-width: 45em; +} +p, +.tmpl-post li { + line-height: 1.45; +} +a[href] { + color: var(--white); } -.container { - max-width: 800px; - margin: 0 auto; - padding: 2rem; +a[href]:hover { + color: var(--yellowgreen); } +main { + padding: 1rem; +} +main :first-child { + margin-top: 0; +} header { - background-color: var(--secondary-background); - padding: 1rem 0; - margin-bottom: 2rem; + border-bottom: 1px dashed var(--lightgray); + padding-bottom: 0.25em; + padding-top: 0.25em; + margin-bottom: 0.5em; +} +header:after { + content: ""; + display: table; + clear: both; +} + +.hero { + padding: 2em; + background: rgb(2, 0, 36); + background: linear-gradient(238deg, #0080ff, #00f, #8000ff); + border-radius: 5px; + color: var(--white); + box-shadow: black 5px 5px 2px; } -nav { - display: flex; - justify-content: center; - align-items: center; - max-width: 800px; - margin: 0 auto; - padding: 0 2rem; +.hero > h2 { + margin: 0; +} + +pre, +code { + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", + "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", + "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", + "Courier New", Courier, monospace; + line-height: 1.5; +} +pre { + font-size: 14px; + line-height: 1.375; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + padding: 1em; + margin: 0.5em 0; + background-color: var(--offwhite); + color: var(--darkgray); + border-radius: 5px; +} +code { + word-break: break-all; } -.nav-brand a { - color: var(--primary-color); - font-size: 1.5rem; - font-weight: 700; - text-decoration: none; +blockquote { + border-left: solid var(--yellowgreen) 0.2em; + border-right: solid var(--yellowgreen) 0.2em; + border-radius: 1em; + margin: 2em 0; + padding: 2em; + color: var(--offwhite); + font-weight: bold; +} +.highlight-line { + display: block; + padding: 0.125em 1em; + text-decoration: none; /* override del, ins, mark defaults */ + color: inherit; /* override del, ins, mark defaults */ } -.nav-links { - display: flex; - gap: 2rem; +/* allow highlighting empty lines */ +.highlight-line:empty:before { + content: " "; +} +/* avoid double line breaks when using display: block; */ +.highlight-line + br { + display: none; } -.nav-links a { - color: var(--text-color); - text-decoration: none; - font-weight: 500; +.highlight-line-isdir { + color: #b0b0b0; + background-color: #222; +} +.highlight-line-active { + background-color: #444; + background-color: hsla(0, 0%, 27%, 0.8); +} +.highlight-line-add { + background-color: #45844b; +} +.highlight-line-remove { + background-color: #902f2f; } -.nav-links a:hover { - color: var(--primary-color); +/* Header */ +.home { + padding: 0 1rem; + float: left; + margin: 1rem 0; /* 16px /16 */ + font-size: 1em; /* 16px /16 */ + /* font-family: "Montserrat", sans-serif; */ +} +.home :link { + text-decoration: none; } -main h1 { - font-size: 2rem; - color: var(--primary-color); - margin-bottom: 2rem; - font-weight: 500; - line-height: 1.2; - letter-spacing: -0.02em; +/* Nav */ +.nav { + padding: 0; + list-style: none; + float: left; + margin-left: 1em; +} +.nav-item { + display: inline-block; + margin-right: 1em; +} +.nav-item a[href]:not(:hover) { + text-decoration: none; +} +.nav-item-active { + font-weight: 700; + text-decoration: underline; } -main h2 { - font-size: 1.5rem; - color: var(--accent-color); - margin-top: 2.5rem; - margin-bottom: 1.5rem; - font-weight: 400; - line-height: 1.5; +.logo-nav { + margin-right: 5px; } -main h2 a { - color: var(--accent-color); - text-decoration: none; +/* Posts list */ +.postlist { + list-style: none; + padding: 0; + padding-bottom: 2em; +} +.postlist-item { + /* display: flex; */ + flex-wrap: wrap; + align-items: baseline; + line-height: 1.8; + padding: 20px 0; +} +.postlist-item:before { + /* display: inline-block; */ + pointer-events: none; + line-height: 100%; + text-align: right; +} +.postlist-date, +.postlist-item:before { + font-size: 0.8125em; /* 13px /16 */ + color: var(--lightgray); +} +.postlist-date { + word-spacing: -0.5px; +} +.postlist-link { + padding: 0.25em; + text-underline-position: from-font; + text-underline-offset: 0; + text-decoration-thickness: 1px; + border-radius: 5px; +} +a.postlist-link:hover { + color: var(--white); +} +.postlist-item-active .postlist-link { + font-weight: bold; +} +.tmpl-home .postlist-link { + font-size: 1.1875em; /* 19px /16 */ + font-weight: 700; } -main h2 time { - color: var(--muted-text); - font-size: 1rem; - font-weight: normal; +/* Tags */ +.post-tag { + display: inline-flex; + align-items: center; + justify-content: center; + text-transform: uppercase; + font-size: 0.75em; /* 12px /16 */ + padding: 0.08333333333333em 0.66em; + margin-left: 0.6666666666667em; /* 8px /12 */ + margin-top: 0.5em; /* 6px /12 */ + margin-bottom: 0.5em; /* 6px /12 */ + color: var(--white); + /* border: 1px solid var(--gray); */ + background-color: var(--darkgray); + border-radius: 0.25em; /* 3px /12 */ + text-decoration: none; + line-height: 1.8; } -.post-list { - list-style: none; - padding: 0; +.post-tag-xl { + font-size: 1.25em; /* 12px /16 */ + padding: 0.66em 0.66em; + margin-left: 0; + margin-right: 0.5em; + color: var(--white); + border-radius: 0.5em; /* 3px /12 */ + line-height: 1.8; + box-shadow: black 5px 5px 2px; } -.post-list li { - margin-bottom: 2rem; - padding-bottom: 2rem; - border-bottom: 1px solid var(--secondary-background); +.tag-name-title { + color: var(--yellowgreen); +} +a[href].post-tag, +a[href].post-tag:visited { + color: inherit; +} + +.postlist-item > .post-tag { + align-self: center; +} + +/* Direct Links / Markdown Headers */ +.direct-link { + font-family: sans-serif; + text-decoration: none; + font-style: normal; + margin-left: 0.1em; +} +a[href].direct-link, +a[href].direct-link:visited { + color: transparent; +} +a[href].direct-link:focus, +table { + border-collapse: collapse; + width: 100%; + margin-top: 2em; + margin-bottom: 4em; +} + +table td { + border-bottom: 1px dashed var(--lightgray); + padding: 15px 8px; +} + +table tr:hover { + background-color: var(--blue); +} + +table th { + border-bottom: 3px solid var(--lightgray); + padding-top: 20px; + padding-bottom: 20px; + text-align: left; +} + +p > code { + color: #3f3f3f; + background-color: #e9e9e9; + padding: 0 5px; +} + +.post-footer { + display: flex; + justify-content: space-between; + padding: 4em 0; +} + +.post-footer > div { + width: 50%; +} + +.post-footer > .next-post { + text-align: right; +} + +.post-footer > div > a { + padding: 5px; + border-radius: 5px; + font-weight: bold; + line-height: 2em; + color: var(--white); +} + +.post-footer > div > a:hover { + color: var(--white); +} + +::-moz-selection { + background: var(--lightblue); + color: var(--darkgray); +} +::selection { + background: var(--lightblue); + color: var(--darkgray); +} + +.tags-container { + margin-bottom: 5em; } footer { - background-color: var(--secondary-background); - padding: 1rem 0; - margin-top: auto; - text-align: center; - color: var(--muted-text); -} - -footer .container { - padding: 0 2rem; /* Add horizontal padding only */ -} - -@media (max-width: 768px) { - .container { - padding: 1rem; - } - - nav { - flex-direction: column; - gap: 1rem; - text-align: center; - } - - .nav-links { - flex-direction: column; - gap: 1rem; - } + display: flex; + flex-direction: column; + align-items: center; + padding: 6em 0 2em; + font-family: "Roboto Slab", serif; +} + +.footer-text { + font-size: 0.8em; + font-weight: bold; + color: var(--gray); + margin-bottom: 25px; + margin-top: 10px; +} + +@-webkit-keyframes rainbow { + 0% { + background-position: 0% 82%; + } + 50% { + background-position: 100% 19%; + } + 100% { + background-position: 0% 82%; + } +} +@-moz-keyframes rainbow { + 0% { + background-position: 0% 82%; + } + 50% { + background-position: 100% 19%; + } + 100% { + background-position: 0% 82%; + } +} +@-o-keyframes rainbow { + 0% { + background-position: 0% 82%; + } + 50% { + background-position: 100% 19%; + } + 100% { + background-position: 0% 82%; + } +} +@keyframes rainbow { + 0% { + background-position: 0% 82%; + } + 50% { + background-position: 100% 19%; + } + 100% { + background-position: 0% 82%; + } +} + +.animated-rainbow-hover:hover, +.animated-rainbow-hover:focus { + color: var(--white); + background: linear-gradient( + 238deg, + red, + #ff8000, + #ff0, + #80ff00, + #0f0, + #00ff80, + #0080ff, + #00f, + #8000ff, + #ff0080 + ); + background-size: 1200% 1200%; + -webkit-animation: rainbow 16s ease infinite; + -z-animation: rainbow 16s ease infinite; + -o-animation: rainbow 16s ease infinite; + animation: rainbow 16s ease infinite; } \ No newline at end of file diff --git a/styles/prism-base16-monokai.dark.css b/styles/prism-base16-monokai.dark.css new file mode 100644 index 0000000..c60b1b4 --- /dev/null +++ b/styles/prism-base16-monokai.dark.css @@ -0,0 +1,89 @@ +code[class*="language-"], pre[class*="language-"] { + font-size: 14px; + line-height: 1.375; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + background: #272822; + color: #f8f8f2; +} +pre[class*="language-"] { + padding: 1.5em 0; + margin: .5em 0; + overflow: auto; +} +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} +.token.comment, .token.prolog, .token.doctype, .token.cdata { + color: #75715e; +} +.token.punctuation { + color: #f8f8f2; +} +.token.namespace { + opacity: .7; +} +.token.operator, .token.boolean, .token.number { + color: #fd971f; +} +.token.property { + color: #f4bf75; +} +.token.tag { + color: #66d9ef; +} +.token.string { + color: #a1efe4; +} +.token.selector { + color: #ae81ff; +} +.token.attr-name { + color: #fd971f; +} +.token.entity, .token.url, .language-css .token.string, .style .token.string { + color: #a1efe4; +} +.token.attr-value, .token.keyword, .token.control, .token.directive, .token.unit { + color: #a6e22e; +} +.token.statement, .token.regex, .token.atrule { + color: #a1efe4; +} +.token.placeholder, .token.variable { + color: #66d9ef; +} +.token.deleted { + text-decoration: line-through; +} +.token.inserted { + border-bottom: 1px dotted #f9f8f5; + text-decoration: none; +} +.token.italic { + font-style: italic; +} +.token.important, .token.bold { + font-weight: bold; +} +.token.important { + color: #f92672; +} +.token.entity { + cursor: help; +} +pre > code.highlight { + outline: 0.4em solid #f92672; + outline-offset: .4em; +} \ No newline at end of file From 733a1af94f09a00b2f557cc37547c833e8309834 Mon Sep 17 00:00:00 2001 From: beyonddream <43626691+beyonddream@users.noreply.github.com> Date: Sun, 1 Jun 2025 12:21:13 -0700 Subject: [PATCH 2/2] cleanup css + whole lot of UX improvements --- _includes/layout.html | 3 ++- eleventy.config.js | 43 ++++++++++++++++++++++++++++++++++++++++--- index.html | 6 +++--- package.json | 21 ++++++++++++++++----- posts/post-1.md | 1 + 5 files changed, 62 insertions(+), 12 deletions(-) diff --git a/_includes/layout.html b/_includes/layout.html index 7f2c02e..c34989b 100644 --- a/_includes/layout.html +++ b/_includes/layout.html @@ -5,6 +5,7 @@ {{ title | default: "Thoughts from beyond dreamscape." }} +
@@ -24,7 +25,7 @@

{{ title }}

diff --git a/eleventy.config.js b/eleventy.config.js index 68a8b8c..0d27c87 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,6 +1,43 @@ -export default function(eleventyConfig) { +const pluginRss = require("@11ty/eleventy-plugin-rss"); +const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); +const pluginNavigation = require("@11ty/eleventy-navigation"); +const markdownIt = require("markdown-it"); +const markdownItAnchor = require("markdown-it-anchor"); +const { DateTime } = require("luxon"); + +module.exports = function(eleventyConfig) { + + // Add plugins + eleventyConfig.addPlugin(pluginRss); + eleventyConfig.addPlugin(pluginSyntaxHighlight); + eleventyConfig.addPlugin(pluginNavigation); + eleventyConfig.addPassthroughCopy("styles"); - // Add shortcode for current year - eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`); + // Customize Markdown library and settings: + let markdownLibrary = markdownIt({ + html: true, + breaks: true, + linkify: true, + }).use(markdownItAnchor, { + permalink: markdownItAnchor.permalink.ariaHidden({ + placement: "after", + class: "direct-link", + symbol: "#", + level: [1, 2, 3, 4], + }), + slugify: eleventyConfig.getFilter("slug"), + }); + eleventyConfig.setLibrary("md", markdownLibrary); + + eleventyConfig.addFilter("readableDate", (dateObj) => { + return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat( + "dd LLL yyyy" + ); + }); + + // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string + eleventyConfig.addFilter("htmlDateString", (dateObj) => { + return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-LL-dd"); + }); }; \ No newline at end of file diff --git a/index.html b/index.html index 634e4ce..2ec0a3f 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,10 @@ layout: layout.html --- \ No newline at end of file + diff --git a/package.json b/package.json index 93c0ddc..b5f9209 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,22 @@ "version": "1.0.0", "description": "Beyonddream's blog", "scripts": { - "start": "npx @11ty/eleventy --serve", - "build": "npx @11ty/eleventy" + "build": "npx @11ty/eleventy", + "start": "npx @11ty/eleventy --serve", + "debug": "DEBUG=* eleventy" }, "license": "MIT", - "dependencies": { - "@11ty/eleventy": "^3.1.0" + "author": { + "name": "Beyonddream", + "url": "https://www.beyonddream.me" + }, + "devDependencies": { + "@11ty/eleventy": "^3.1.0", + "@11ty/eleventy-plugin-rss": "^2.0.4", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.1", + "@11ty/eleventy-navigation": "^1.0.4", + "markdown-it": "^14.1.0", + "markdown-it-anchor": "^9.2.0", + "luxon": "^3.6.1" } - } \ No newline at end of file +} diff --git a/posts/post-1.md b/posts/post-1.md index bf423a5..b9fbf29 100644 --- a/posts/post-1.md +++ b/posts/post-1.md @@ -1,5 +1,6 @@ --- title: How to read and write a set of deeply nested datetime partitioned files using Spark (Pre and Post LLM Coding Agents) +date: 2025-05-30 --- ## Introduction