fix: fixed some css issues.

This commit is contained in:
Spencer Brower
2026-07-10 18:16:13 -04:00
parent 87bd2b828b
commit c3574c6737
2 changed files with 44 additions and 37 deletions
+5
View File
@@ -0,0 +1,5 @@
- [ ] add content-hash fingerprinting for tailwind cache busting.
- [ ] create template language
- Look at the source for 3 template languages that support mustache syntax,
and see how they implement the tempaltes, then pick the best one. One of them
should be Hugo / go.
+39 -37
View File
@@ -13,27 +13,16 @@ MONTHS: [12]string = {
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
} }
CSS :: ` HEADER :: `
body { background: #020617; color: #e2e8f0; font-family: system-ui, sans-serif; max-width: 720px; margin: 0 auto; padding: 2rem; line-height: 1.6; } <header>
a { color: #7dd3fc; } <nav>
h1, h2, h3 { color: #f1f5f9; line-height: 1.3; } <ul>
nav { display: flex; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #1e293b; } <li class="mr-auto"><a href="/">Home</a></li>
pre { background: #1e293b; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; } <li><a href="/ideas/">Ideas</a></li>
code { font-family: monospace; font-size: 0.9em; } <li><a href="/posts/">Posts</a></li>
p code { background: #1e293b; padding: 0.1em 0.3em; border-radius: 0.25em; } </ul>
blockquote { border-left: 4px solid #475569; margin: 0; padding: 0.5rem 0 0.5rem 1rem; color: #94a3b8; } </nav>
img { max-width: 100%; } </header>
hr { border: none; border-top: 1px solid #1e293b; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #334155; padding: 0.5rem; }
`
NAV :: `
<nav>
<a href="/">Home</a>
<a href="/posts/">Posts</a>
<a href="/ideas/">Ideas</a>
</nav>
` `
render_site :: proc(pages: []Page, output_dir: string) { render_site :: proc(pages: []Page, output_dir: string) {
@@ -56,7 +45,7 @@ render_site :: proc(pages: []Page, output_dir: string) {
render_page_html :: proc(page: Page) -> string { render_page_html :: proc(page: Page) -> string {
body := fmt.aprintf( body := fmt.aprintf(
`<main> `<main>
<article> <article class="prose">
<h1>%s</h1> <h1>%s</h1>
%s %s %s %s
</article> </article>
@@ -82,9 +71,10 @@ render_home_html :: proc(pages: []Page) -> string {
body := fmt.aprintf( body := fmt.aprintf(
`<main> `<main>
<header> <header class="text-center mb-28">
<h1>%s</h1> <img class="mx-auto w-18 h-18 rounded-full" src="/avatar.jpg">
<p>%s</p> <h1 class="text-2xl/12 mt-2.5 mb-0 font-bold">%s</h1>
<p class="text-slate-400">%s</p>
</header> </header>
<ul> <ul>
%s %s
@@ -103,7 +93,8 @@ render_posts_html :: proc(pages: []Page) -> string {
parts: [dynamic]string parts: [dynamic]string
defer delete(parts) defer delete(parts)
append(&parts, "<main>\n <h1>Posts</h1>\n") append(&parts, "<main>\n")
append(&parts, ` <h1 class="text-center">Posts</h1>` + "\n")
current_year := "" current_year := ""
open := false open := false
@@ -114,17 +105,20 @@ render_posts_html :: proc(pages: []Page) -> string {
year := get_year(page.date) year := get_year(page.date)
if year != current_year { if year != current_year {
if open { if open {
append(&parts, " </ul>\n") append(&parts, " </ul>\n </section>\n")
} }
open = true open = true
current_year = year current_year = year
append(&parts, fmt.aprintf(" <h2>%s</h2>\n <hr>\n <ul>\n", year)) append(
&parts,
fmt.aprintf(" <section>\n <h2>%s</h2>\n <hr class=\"text-slate-800 mb-1\">\n <ul>\n", year),
)
} }
append(&parts, render_post_item(page)) append(&parts, render_post_item(page))
append(&parts, "\n") append(&parts, "\n")
} }
if open { if open {
append(&parts, " </ul>\n") append(&parts, " </ul>\n </section>\n")
} }
append(&parts, "</main>\n") append(&parts, "</main>\n")
@@ -141,16 +135,20 @@ render_chrome :: proc(page_title: string, body: string) -> string {
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>%s</title> <title>%s</title>
<style>%s</style> <link rel="stylesheet" href="/css/main.css">
</head> </head>
<body> <body>
%s%s %s%s<footer>
<a href="https://github.com/sbrow" target="_blank" rel="noopener noreferrer me" title="Github">GitHub</a>
<a href="/index.xml" target="_blank" rel="noopener noreferrer me" title="Rss">RSS</a>
<p class="pt-5 prose">Proudly built with <a href="https://odin-lang.org/">Odin</a></p>
<p><small>&copy;</small> 2026</p>
</footer>
</body> </body>
</html> </html>
`, `,
page_title, page_title,
CSS, HEADER,
NAV,
body, body,
) )
} }
@@ -158,18 +156,22 @@ render_chrome :: proc(page_title: string, body: string) -> string {
render_post_item :: proc(page: Page) -> string { render_post_item :: proc(page: Page) -> string {
date_html := "" date_html := ""
if page.date != "" { if page.date != "" {
date_html = fmt.aprintf(" <time>%s</time>", format_date(page.date)) date_html = fmt.aprintf(
"<time datetime=\"%s\">%s</time>",
page.date,
format_date(page.date),
)
} }
star := "" star := ""
if page.is_starred { if page.is_starred {
star = " \xe2\x98\x85" star = `<span class="text-yellow-500 mr-2">★</span>`
} }
return fmt.aprintf( return fmt.aprintf(
` <li><a href="%s">%s</a>%s%s</li>`, ` <li class="flex justify-between"><a href="%s">%s</a><span>%s%s</span></li>`,
page.permalink, page.permalink,
page.title, page.title,
date_html,
star, star,
date_html,
) )
} }