diff options
| author | Wynn Wolf Arbor | 2020-06-06 17:46:25 +0200 |
|---|---|---|
| committer | Wynn Wolf Arbor | 2020-06-06 21:04:14 +0200 |
| commit | 77bc0a91d3782c7cea1ee0498e07e64f12c56405 (patch) | |
| tree | 002ebf4423a65b5a05c10c336457cc62439acec6 | |
| parent | b70148e133a91eef64d53361757e70cd2e00b3d1 (diff) | |
| download | site-77bc0a91d3782c7cea1ee0498e07e64f12c56405.tar.gz | |
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.
| -rw-r--r-- | scss/style.scss | 127 | ||||
| -rw-r--r-- | templates/index.xml | 21 | ||||
| -rw-r--r-- | templates/post.xml | 6 | ||||
| -rw-r--r-- | 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 @@ <meta name="twitter:image" content="https://oriole.systems/logo.webp" /> </head> <body class="frontpage"> - <nav class="main" data-sblg-nav="true" data-sblg-navcontent="true"> - <a href="${sblg-base}.html"> - ${sblg-titletext} - </a> - </nav> + <header> + <h1>Hi, I'm Wolf.</h1> + <p>It seems you have found my little corner of the internet.</p> + <p>Check out my posts below, subscribe to the <a href="atom.xml">feed</a>, or + browse my <a href="https://git.oriole.systems">git repositories</a>.</p> + <p>To contact me, write to <em>wolf@</em> or find me on freenode as <em>wynn</em>.</p> + </header> + <hr></hr> + <main> + <nav data-sblg-nav="true" data-sblg-navcontent="true"> + <article> + <time>${sblg-date}</time> + <a href="${sblg-base}.html">${sblg-titletext}</a> + </article> + </nav> + </main> </body> </html> diff --git a/templates/post.xml b/templates/post.xml index d9e5aa0..b04439a 100644 --- a/templates/post.xml +++ b/templates/post.xml @@ -14,10 +14,8 @@ <meta name="twitter:description" content="oriole.systems · an oriole's pendent nest" /> <meta name="twitter:image" content="https://oriole.systems/logo.webp" /> </head> - <body class="post"> - <main> - <article data-sblg-article="true"></article> - </main> + <body> + <article data-sblg-article="true"></article> </body> </html> diff --git a/util/mdconv.sh b/util/mdconv.sh index 1178484..58f9cd8 100644 --- a/util/mdconv.sh +++ b/util/mdconv.sh @@ -9,12 +9,14 @@ flags="--html-no-skiphtml --html-no-escapehtml" cat<<EOF <?xml version="1.0" encoding="UTF-8" ?> <article data-sblg-article="true"> - <header> + <header class="post"> <h1>$title</h1> <address>$author</address> <a href=".." title="Back to frontpage">↖</a> <time datetime="$date">$(date -d"$date" '+%A, %B %e, %Y')</time> </header> - $(lowdown $flags "$1") + <section class="post"> + $(lowdown $flags "$1") + </section> </article> EOF |