Polish index and articles pages, link styling, fixes for footer
This commit is contained in:
Pantonshire committed
1 parent
37a07d8e78
commit
76ae05a6d8
5 files changed
+177
-48
No files matched your search
@@ -16,9 +16,9 @@ pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> 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<ConcurrentPostsStore>) -> 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" }
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
@@ -20,12 +20,15 @@ pub async fn handle(Extension(posts): Extension<ConcurrentPostsStore>) -> 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"))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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" {
|
||||
|
||||
+68
-35
@@ -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;
|
||||
ul.articles_list {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
.articles_list li {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
.article_list_subtitle {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
width: fit-content;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
figcaption a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Pantonshire</title>
|
||||
<link href="/static/styles/main.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header id="page_header">
|
||||
<nav id="page_nav">
|
||||
<div id="title_box"><a href="/">Pantonshire</a></div>
|
||||
<div id="right_nav_box">
|
||||
<ul>
|
||||
<li><a href="/articles">Articles</a></li>
|
||||
<li><a href="/atom.xml">Atom</a></li>
|
||||
<li><a href="/rss.xml">RSS</a></li>
|
||||
<li><a href="https://github.com/pantonshire">GitHub</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main id="page_main">
|
||||
<div id="content">
|
||||
<section class="content_section">
|
||||
<p>Hi! I'm Tom, a computer science student and hobbyist programmer, and definitely not an egg-shaped robot.</p>
|
||||
<figure><img src="/static/images/tombot_450.png"
|
||||
alt="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."
|
||||
width="256">
|
||||
<figcaption class="quiet">Drawn by <a href="https://twitter.com/smolrobots">@smolrobots</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="content_section">
|
||||
<h2>Some things I've made</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/pantonshire/goldcrest">Goldcrest</a>, 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>
|
||||
<li><a href="https://github.com/pantonshire/smolbotbot">Smolbotbot</a>, an art archival project for the drawings of <a href="https://twitter.com/smolrobots">@smolrobots</a>! 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</a>.</li>
|
||||
<li><a href="https://github.com/pantonshire/enumscribe">Enumscribe</a>, a Rust procedural macro library for generating conversion methods between enum types and strings, with support for <a href="https://serde.rs">Serde</a>.</li>
|
||||
<li><a href="https://github.com/pantonshire/tasque">Tasque</a>, a very in-progress cron-like job scheduler that I'm having a lot of fun working on.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="content_section">
|
||||
<h2>Articles</h2>
|
||||
<p>Some recent ones:</p>
|
||||
<ul class="articles_list">
|
||||
<li>
|
||||
<h3><a href="/articles/structs">How the struct gets made</a></h3>
|
||||
<p class="article_list_subtitle">In which peek behind the curtain to see how compilers represent our data types.</p>
|
||||
<p class="article_list_published_date">Published 2022/05/25</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="/articles/baa">Testing II</a></h3>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/foo">Foo Baa</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/test">Testing</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p><a href="/articles">See the rest</a></p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<footer id="page_footer">
|
||||
<div id="page_footer_content">
|
||||
<ul>
|
||||
<li>"What is a footer? A miserable little pile of secrets"</li>
|
||||
<li><a href="https://github.com/pantonshire/blog_server">Source code for this site</a></li>
|
||||
<li><a rel="me" href="https://tech.lgbt/@pantonshire">Backlink for Mastodon</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user