diff options
| -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 |