From 77bc0a91d3782c7cea1ee0498e07e64f12c56405 Mon Sep 17 00:00:00 2001
From: Wynn Wolf Arbor
Date: Sat, 6 Jun 2020 17:46:25 +0200
Subject: Attempt a thorough redesign of the landing page
After careful consideration we have decided to replace the more
brutalist landing page with something simpler and more in line with the
styling of the actual posts.
Have the front page include a short introduction and some further links
to the atom feed and git.oriole.systems. Use a more traditional and
simple top-to-bottom layout for the article links in lieu of the more
idiosyncratic left-to-right list that was difficult to scan for some
people.
Keep the post styling as is, but move around and change a few HTML
elements to make more semantic sense and improve the clarity of the CSS.
---
scss/style.scss | 127 +++++++++++++++++++++++++---------------------------
templates/index.xml | 21 ++++++---
templates/post.xml | 6 +--
util/mdconv.sh | 6 ++-
4 files changed, 84 insertions(+), 76 deletions(-)
diff --git a/scss/style.scss b/scss/style.scss
index 0c787e2..ff443b9 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -15,12 +15,31 @@ $mute-text: #5a5a5a;
body {
background-color: white;
color: black;
- line-height: 1.6;
- margin: 0;
+ line-height: 1.3;
+
+ max-width: 1024px;
+ margin: 1rem auto;
+ padding: 0 1rem;
+
+ font-family: $font-sans;
+ font-size: 1.3rem;
+}
+
+body.frontpage {
+ header { font-size: larger; }
+
+ nav ul {
+ list-style: none;
+ padding: 0;
+ }
+
+ hr {
+ border: none;
+ border-top: 3px double darkgrey;
+ }
}
h1 {
- font-family: $font-serif;
font-size: 3.5rem;
font-weight: normal;
margin: 0;
@@ -34,7 +53,6 @@ code {
pre {
background-color: $canary;
color: $canary-text;
- line-height: 1.3;
overflow: auto;
padding: .7rem;
}
@@ -61,71 +79,50 @@ blockquote > p {
margin: 0;
}
-.frontpage {
- background-color: $yellow;
- font-family: $font-serif;
- font-size: 4rem;
-}
+nav li > article {
+ display: flex;
+ flex-direction: column;
-.post {
- font-family: $font-sans;
- font-size: 1.3rem;
+ margin-bottom: 1.5rem;
- header {
- font-size: 1.5rem;
+ font-size: 2.7rem;
+ line-height: 1.2;
+
+ a {
+ text-decoration: none;
}
-}
-nav.main ul {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- list-style: none;
- margin: .5rem;
- padding: 0;
-}
+ a:hover {
+ text-decoration: underline;
+ }
-nav.main li a {
- background-color: white;
- border: 4px solid black;
- box-shadow: 10px 10px 0 black;
- color: black;
- display: block;
- margin: .8rem .8rem;
- padding: 0 .8rem;
- text-decoration: none;
-}
+ time {
+ display: flex;
-nav.main li a:hover {
- background-color: black;
- color: white;
-}
+ font-size: 60%;
+ color: $mute-text;
+ }
-nav.main li a:focus {
- background-color: black;
- color: white;
+ a { align-self: flex-start; }
}
-article {
- margin: 1rem auto;
- max-width: 1024px;
- padding: 0 1rem;
+header.post {
+ font-size: 1.5rem;
+ border-bottom: 1px solid darkgrey;
- header {
- border-bottom: 1px solid darkgrey;
+ a {
+ background-color: white;
+ font-weight: bold;
+ text-decoration: none;
+ }
- a {
- background-color: white;
- font-weight: bold;
- text-decoration: none;
- }
+ time { font-size: smaller; }
- address {
- display: none;
- }
+ address { display: none; }
+}
- time { font-size: smaller; }
- }
+section.post {
+ line-height: 1.6;
img {
display: block;
@@ -152,16 +149,16 @@ article {
sup > a {
text-decoration: none;
}
-}
-figure {
- figcaption {
- color: $mute-text;
- text-align: center;
- font-size: smaller;
+ figure {
+ figcaption {
+ color: $mute-text;
+ text-align: center;
+ font-size: smaller;
- padding-top: .5em;
- }
+ padding-top: .5em;
+ }
- > img.round { border-radius: 5px; }
+ > img.round { border-radius: 5px; }
+ }
}
diff --git a/templates/index.xml b/templates/index.xml
index ba02890..d3a81c4 100644
--- a/templates/index.xml
+++ b/templates/index.xml
@@ -13,10 +13,21 @@
-
+
+ Hi, I'm Wolf.
+ It seems you have found my little corner of the internet.
+ Check out my posts below, subscribe to the feed, or
+ browse my git repositories.
+ To contact me, write to wolf@ or find me on freenode as wynn.
+
+
+
+
+