tweak basic styling

ooloth · Jun 10, 2023 · e206930 · e206930
1 parent af9ae98
commit e206930
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 26 deletions.
diff --git a/src/_data/nav.js b/src/_data/nav.js
@@ -1,13 +1,13 @@
 module.exports = {
   top: [
-    { title: 'Blog', url: '/blog/' },
-    { title: 'Notes', url: '/notes/' },
-    { title: 'About', url: '/about' },
-    { title: 'Likes', url: '/likes/' },
+    { title: 'blog', url: '/blog/' },
+    { title: 'notes', url: '/notes/' },
+    { title: 'about', url: '/about' },
+    { title: 'likes', url: '/likes/' },
   ],
   bottom: [
     { title: 'RSS', url: '/feed.xml' },
-    { title: 'GitHub', url: '' },
     { title: 'Twitter', url: '' },
+    { title: 'GitHub', url: '' },
   ],
 };
diff --git a/src/_includes/components/copyright.webc b/src/_includes/components/copyright.webc
@@ -1,5 +1,5 @@
 <script webc:type="js">
   const now = new Date();
 
-  `&copy; ${now.getFullYear()} Michael Uloth.`;
+  `&copy; ${now.getFullYear()} Michael Uloth`;
 </script>
diff --git a/src/_includes/components/site-footer.webc b/src/_includes/components/site-footer.webc
@@ -1,13 +1,15 @@
-<footer>
+<footer class="flex flex-wrap justify-between text-center">
+  <p>
+    <copyright></copyright>
+  </p>
+
   <nav>
-    <ul>
+    <ul class="flex flex-wrap justify-start">
       <script webc:type="js" webc:root>
-        `${$data.nav.bottom.map(item => `<li><a href="${item.url}" target="_blank">${item.title}</a></li>`).join('')}`;
+        `${$data.nav.bottom
+          .map(item => `<li class="me-3"><a href="${item.url}" target="_blank">${item.title}</a></li>`)
+          .join('')}`;
       </script>
     </ul>
   </nav>
-
-  <p>
-    <copyright></copyright>
-  </p>
 </footer>
diff --git a/src/_includes/components/site-header.webc b/src/_includes/components/site-header.webc
@@ -1,11 +1,11 @@
 <header class="mb-8">
   <nav>
-    <!-- <h2 class="visually-hidden">Top level navigation menu</h2> -->
+    <h2 class="sr-only">Top level navigation menu</h2>
     <!--- {% if item.url == page.url %} aria-current="page" --->
     <ul class="flex flex-wrap">
       <li class="w-full font-bold"><a href="/" @html="$data.site.title"></a></li>
       <script webc:type="js" webc:root>
-        `${$data.nav.top.map(item => `<li class="me-3"><a href="${item.url}">${item.title}</a></li>`).join('')}`;
+        `${$data.nav.top.map(item => `<li class="me-3 lowercase"><a href="${item.url}">${item.title}</a></li>`).join('')}`;
       </script>
     </ul>
   </nav>

diff --git a/src/_includes/layouts/main.webc b/src/_includes/layouts/main.webc
@@ -2,12 +2,14 @@
 layout: root.webc
 ---
 
-<!-- <a href="#skip" class="visually-hidden">Skip to main content</a> -->
-<site-header></site-header>
+<div class="flex flex-col p-3 min-h-screen">
+  <!-- <a href="#skip" class="visually-hidden">Skip to main content</a> -->
+  <site-header></site-header>
 
-<main @raw="content" id="skip"></main>
+  <main @raw="content" id="skip" class="flex-1"></main>
 
-<site-footer></site-footer>
+  <site-footer></site-footer>
+</div>
 
 <hr />
 

diff --git a/src/_includes/layouts/root.webc b/src/_includes/layouts/root.webc
@@ -17,5 +17,5 @@
     <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="${site.title}" />
     <link rel="alternate" href="/feed.json" type="application/json" title="${site.title}" />
   </head>
-  <body @raw="content" class="p-3"></body>
+  <body @raw="content"></body>
 </html>
diff --git a/src/_includes/layouts/writing.webc b/src/_includes/layouts/writing.webc
@@ -2,9 +2,7 @@
 layout: main.webc
 ---
 
-<article @raw="content" class="prose lg:prose-xl"></article>
-
-<hr />
+<article @raw="content" class="prose"></article>
 
 <!--
 {# Only include the syntax highlighter CSS on blog posts #} {%- css %}{% include

diff --git a/src/blog.webc b/src/blog.webc
@@ -4,10 +4,11 @@ title: Blog
 description: Blog posts and such
 ---
 
-<h1>Blog</h1>
+<h1 class="sr-only">Blog</h1>
 
 <section>
-  <h2>Latest Posts</h2>
+  <h2 class="sr-only">Latest Posts</h2>
+
   <ol reversed>
     <script webc:type="js" webc:root>
       `${collections.posts

diff --git a/src/notes.webc b/src/notes.webc
@@ -7,7 +7,7 @@ layout: main.webc
 <section>
   <h2 class="sr-only">Topics</h2>
 
-  <ul class="columns-2xs">
+  <ul class="columns-2xs lowercase">
     <!--- see: https://www.11ty.dev/docs/data-eleventy-supplied/#fileslug --->
     <script webc:type="js" webc:root>
       const getLinkText = item => item.data.title || item.fileSlug;