From 76ae05a6d814469f09026afd22b10831a9054ebe Mon Sep 17 00:00:00 2001 From: Pantonshire Date: Fri, 27 May 2022 11:08:24 +0100 Subject: [PATCH] Polish index and articles pages, link styling, fixes for footer --- blog_server/src/service/index.rs | 28 +++++-- blog_server/src/service/posts_list.rs | 11 ++- blog_server/src/template.rs | 2 +- static/styles/main.css | 103 +++++++++++++++++--------- static/test.html | 81 ++++++++++++++++++++ 5 files changed, 177 insertions(+), 48 deletions(-) create mode 100644 static/test.html diff --git a/blog_server/src/service/index.rs b/blog_server/src/service/index.rs index 11f1b93..2c5fee2 100644 --- a/blog_server/src/service/index.rs +++ b/blog_server/src/service/index.rs @@ -16,9 +16,9 @@ pub async fn handle(Extension(posts): Extension) -> Html { }) .with_body(template::main_page(html! { section .content_section { - h2 { "About me" } p { - "Hi! I'm Tom, a computer science student and hobbyist programmer." + "Hi! I'm Tom, a computer science student and hobbyist programmer, and \ + definitely not an egg-shaped robot." } figure { img src="/static/images/tombot_450.png" @@ -34,21 +34,33 @@ pub async fn handle(Extension(posts): Extension) -> Html { } section .content_section { - h2 { "Things I've made" } - p { "Todo" } + h2 { "Some things I've made" } + ul { + li { a href="https://github.com/pantonshire/goldcrest" { "Goldcrest" } ", a proxy for the Twitter v1 API using gRPC. I made it to address the problem of centralised rate-limit tracking to avoid exceeding to Twitter's quotas." } + li { a href="https://github.com/pantonshire/smolbotbot" { "Smolbotbot" } ", an art archival project for the drawings of " a href="https://twitter.com/smolrobots" { "@smolrobots" } "! A Twitter bot continuously checks for new small robots, and the data it collects is made available at " a href="https://smolbotbot.com" { "smolbotbot.com" } "." } + li { a href="https://github.com/pantonshire/enumscribe" { "Enumscribe" } ", a Rust procedural macro library for generating conversion methods between enum types and strings, with support for " a href="https://serde.rs" { "Serde" } "." } + li { a href="https://github.com/pantonshire/tasque" { "Tasque" } ", a very in-progress cron-like job scheduler that I'm having a lot of fun working on." } + } } section .content_section { h2 { "Articles" } - ul { - @for post in posts.read().await.iter_by_created().rev().take(5) { + p { "Some recent ones:" } + ul .articles_list { + @for post in posts.read().await.iter_by_created().rev().take(3) { li { - a href={"/articles/" (post.id())} { (post.title()) } + h3 { a href={"/articles/" (post.id())} { (post.title()) } } + @if let Some(subtitle) = post.subtitle() { + p .article_list_subtitle { (subtitle) } + } + p .article_list_published_date { + "Published " (post.created().format("%Y/%m/%d")) + } } } } p { - a href="/articles" { "See all" } + a href="/articles" { "See the rest" } } } })) diff --git a/blog_server/src/service/posts_list.rs b/blog_server/src/service/posts_list.rs index 6a0b563..4392b65 100644 --- a/blog_server/src/service/posts_list.rs +++ b/blog_server/src/service/posts_list.rs @@ -20,12 +20,15 @@ pub async fn handle(Extension(posts): Extension) -> Html { p { "A collection of words I have written, against my better judgement." } - ul { + ul .articles_list { @for post in posts.read().await.iter_by_created().rev() { li { - a href={"/articles/" (post.id())} { (post.title()) } - span class="quiet" { - " — " (post.created().format("%Y/%m/%d")) + h3 { a href={"/articles/" (post.id())} { (post.title()) } } + @if let Some(subtitle) = post.subtitle() { + p .article_list_subtitle { (subtitle) } + } + p .article_list_published_date { + "Published " (post.created().format("%Y/%m/%d")) } } } diff --git a/blog_server/src/template.rs b/blog_server/src/template.rs index a5c774e..aa98745 100644 --- a/blog_server/src/template.rs +++ b/blog_server/src/template.rs @@ -29,7 +29,7 @@ pub fn main_page(content: Markup) -> Markup { #page_footer_content { ul { li { - "\"What is a footer? A miserable little pile of secrets\"" + "\"What is a footer? A miserable little pile of secrets.\"" } li { a href="https://github.com/pantonshire/blog_server" { diff --git a/static/styles/main.css b/static/styles/main.css index 6836237..1f0a301 100644 --- a/static/styles/main.css +++ b/static/styles/main.css @@ -88,15 +88,58 @@ body { color: white; } +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1.75rem; +} + +h1, +h2, +h3 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +figure { + width: fit-content; + margin: 0; +} + +figcaption { + text-align: center; + font-size: 0.9rem; +} + +figcaption a { + color: inherit; +} + +a:link { + color: #0960BA; +} + +a:visited { + color: #72109B; +} + +ul { + list-style-type: circle; +} + +li { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + #page_header { background-color: #94BFBE; color: white; } #page_nav { - /* display: flex; - flex-direction: row; - justify-content: space-between; */ padding: 1rem 1rem; margin: 0 auto; max-width: 60rem; @@ -119,12 +162,10 @@ body { display: grid; grid-template-columns: repeat(5, auto); grid-template-rows: 100%; - /* column-gap: 1.5rem; */ column-gap: 1rem; margin-top: 0; margin-bottom: 0; padding: 0; - /* font-size: 1.5rem; */ font-size: 1.2rem; overflow-x: auto; white-space: nowrap; @@ -194,7 +235,7 @@ body { #content { margin: 0 auto; - padding: 1rem; + padding: 1rem 1rem 2rem 1rem; max-width: 60rem; } @@ -206,41 +247,25 @@ body { color: #898989; } -h1 { - font-size: 2rem; -} - -h2 { - font-size: 1.75rem; -} - -h1, -h2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -figure { - width: fit-content; - margin: 0; -} - -figcaption { - text-align: center; - font-size: 0.9rem; +ul.articles_list { + list-style-type: none; } -figcaption a { - color: inherit; +.articles_list li { + margin-top: 1.5rem; + margin-bottom: 1.5rem; } -ul { - list-style-type: circle; +.article_list_subtitle { + margin-top: 0.25rem; + margin-bottom: 0.25rem; } -li { - margin-top: 0.5rem; - margin-bottom: 0.5rem; +.article_list_published_date { + color: #898989; + font-size: 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; } .article_header { @@ -350,6 +375,14 @@ li { margin-bottom: 0; } + #page_footer_content ul { + grid-template-columns: repeat(3, auto); + grid-template-rows: 100%; + column-gap: 1rem; + row-gap: 0; + width: fit-content; + } + #content { padding: 2rem 1rem 4rem 1rem; } diff --git a/static/test.html b/static/test.html new file mode 100644 index 0000000..89d72f5 --- /dev/null +++ b/static/test.html @@ -0,0 +1,81 @@ + + + + + + + + Pantonshire + + + + +
+ +
+
+
+
+

Hi! I'm Tom, a computer science student and hobbyist programmer, and definitely not an egg-shaped robot.

+
A drawing by @smolrobots (on Twitter) of me as a robot. It has an egg-shaped body and a smiling face, and is doing a little dance next to a Raspberry Pi. +
Drawn by @smolrobots +
+
+
+
+

Some things I've made

+
    +
  • Goldcrest, a proxy for the Twitter v1 API using gRPC. I made it to address the problem of centralised rate-limit tracking to avoid exceeding to Twitter's quotas.
    • +
  • Smolbotbot, an art archival project for the drawings of @smolrobots! A Twitter bot continuously checks for new small robots, and the data it collects is made available at smolbotbot.com.
    • +
  • Enumscribe, a Rust procedural macro library for generating conversion methods between enum types and strings, with support for Serde.
    • +
  • Tasque, a very in-progress cron-like job scheduler that I'm having a lot of fun working on.
    • +
+
+
+

Articles

+

Some recent ones:

+ +

See the rest

+
+
+
+ + + + \ No newline at end of file