From 592120aeaecb221d357324e045222eaa5bc18b57 Mon Sep 17 00:00:00 2001
From: Trevor Vallender <trevor@tsvallender.co.uk>
Date: Thu, 5 Oct 2023 19:22:31 +0100
Subject: [PATCH] Styling improvements

---
 app/assets/stylesheets/main.css        | 34 +++++++++++++++++++++++---
 app/views/home_pages/index.html.erb    | 21 +++++++++-------
 app/views/microposts/index.html.erb    |  2 ++
 config/locales/views/microposts/en.yml |  3 +++
 4 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/main.css b/app/assets/stylesheets/main.css
index 3bb3b96..4067528 100644
--- a/app/assets/stylesheets/main.css
+++ b/app/assets/stylesheets/main.css
@@ -1,8 +1,8 @@
 :root {
   --border-color: gray;
   --highlight-color: #D36200;
-  --background-color: #CECECE;
-  --dark-background-color: #3A3A3A;
+  --background-color: #CCC;
+  --dark-background-color: #333;
   --inset-background-color: #FFFFFF;
   --alert-border-color: #800000;
   --form-error-color: #FF0000;
@@ -35,6 +35,10 @@ h1, h2, h3, h4, h5, h6, h7 {
   padding: .5em 0;
 }
 
+h3, h4, h5, h6, h7 {
+  text-decoration: underline;
+}
+
 h1 {
   font-size: 4em;
   text-align: center;
@@ -74,6 +78,10 @@ main {
   margin: 0 auto;
 }
 
+p {
+  margin: .5em 0;
+}
+
 a:link, a:visited {
   color: var(--highlight-color);
 }
@@ -82,10 +90,30 @@ a:hover {
   text-decoration: none;
 }
 
-
 a:link:has(h1), a:visited:has(h1) {
   text-decoration: none;
 }
+
+aside {
+  margin: 1em auto;
+  padding: .5em;
+  background-color: var(--inset-background-color);
+  border: 1px solid var(--border-color);
+  float: left;
+}
+
+dl {
+  line-height: 1.3em;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 2em;
+}
+
 main {
   padding: 1em;
 }
diff --git a/app/views/home_pages/index.html.erb b/app/views/home_pages/index.html.erb
index 8d72ed1..3d5d37b 100644
--- a/app/views/home_pages/index.html.erb
+++ b/app/views/home_pages/index.html.erb
@@ -4,12 +4,15 @@
 NixOS and free software in general. I’m also a maker and dad, and here is where my thoughts get dumped.</p>
 
 <p>The code for my personal projects <%= link_to "can be found here", "https://git.tsvallender.co.uk/web" %></p>
-<h3>Find me:</h3>
-<dl>
-  <dt>Mastodon</dt>
-  <dd><%= link_to "@tsvallender@ruby.social", "https://ruby.social/@tsvallender" %></dd>
-  <dt>Pixelfed</dt>
-  <dd><%= link_to "@tsvallender@pixelfed.sdf.org", "https://pixelfed.sdf.org/tsvallender" %></dd>
-  <dt>Email</dt>
-  <dd><%= mail_to "t@tsvallender.co.uk" %></dd>
-</dl>
+
+<aside>
+  <h3>Find me:</h3>
+  <dl>
+    <dt>Mastodon</dt>
+    <dd><%= link_to "@tsvallender@ruby.social", "https://ruby.social/@tsvallender" %></dd>
+    <dt>Pixelfed</dt>
+    <dd><%= link_to "@tsvallender@pixelfed.sdf.org", "https://pixelfed.sdf.org/tsvallender" %></dd>
+    <dt>Email</dt>
+    <dd><%= mail_to "t@tsvallender.co.uk" %></dd>
+  </dl>
+</aside>
diff --git a/app/views/microposts/index.html.erb b/app/views/microposts/index.html.erb
index 566c0c3..f317add 100644
--- a/app/views/microposts/index.html.erb
+++ b/app/views/microposts/index.html.erb
@@ -2,6 +2,8 @@
 
 <%= link_to t(".new"), new_micropost_path if logged_in? %>
 
+<%= t(".intro_html") %>
+
 <% if @microposts.empty? %>
   <p><%= t(".empty") %></p>
 <% else %>
diff --git a/config/locales/views/microposts/en.yml b/config/locales/views/microposts/en.yml
index e5ba810..2c5167d 100644
--- a/config/locales/views/microposts/en.yml
+++ b/config/locales/views/microposts/en.yml
@@ -4,6 +4,9 @@ en:
       microposts: μposts
       empty: You have no μposts yet.
       new: New μpost
+      intro_html: >
+        <p>This is a log of learning and collected notes and thoughts along the way. It’s public,
+        but that doesn’t mean it’s likely to be interesting to many people.</p>
     new:
       create: Create μpost
     edit: