feat: styling, fix layout

next-sitemap.config.cjs

@@ -1,6 +1,6 @@
 /** @type {import('next-sitemap').IConfig} */
 module.exports = {
   siteUrl: process.env.SITE_URL || 'https://www.aaronjy.me',
-  generateRobotsTxt: true, // (optional)
+  generateRobotsTxt: true // (optional)
   // ...other options
 }

src/components/Article/Article.jsx

@@ -4,18 +4,20 @@ import React from 'react'
 function Article ({ attributes, html }) {
   return (
     <section>
-      <NextSeo title={attributes.title} description={attributes.desc} openGraph={
+      <NextSeo
+        title={attributes.title} description={attributes.desc} openGraph={
         {
           title: attributes.title,
           description: attributes.desc
         }
-      } />
+      }
-      <article>
+      />
+      <div>
         <h1>{attributes.title}</h1>
         <p>{attributes.desc}</p>
         <hr />
         <div dangerouslySetInnerHTML={{ __html: html }} />
-      </article>
+      </div>
     </section>
   )
 }

src/layouts/DefaultLayout/DefaultLayout.jsx

@@ -4,17 +4,17 @@ import style from './DefaultLayout.module.css'
 import Header from '@/components/Header/Header'
 import Footer from '@/components/Footer/Footer'
 
-import { Barlow } from 'next/font/google'
+import { Fira_Sans as FiraSans} from 'next/font/google'
 
-const fontMain = Barlow({ subsets: ['latin'], weight: ['400', '600'] })
+const fontMain = FiraSans({ subsets: ['latin'], weight: ['400', '600'] })
 
 function DefaultLayout ({ children }) {
   return (
-    <div className={style.layout}>
+    <main className={`${style.layout} ${fontMain.className}`}>
       <Header />
-      <main className={`${fontMain.className}`}>{children}</main>
+      <article>{children}</article>
       <Footer />
-    </div>
+    </main>
   )
 }
 

src/pages/writing/index.js

@@ -9,7 +9,10 @@ function Fun ({ entries }) {
     <DefaultLayout>
       <section>
         <h1>Writing</h1>
-        <p>Hobby projects, helpful scripts, and other fun bits and bobs!</p>
+        <p>
+          Come get ya thoughts, ramblings, technical writing and other
+          long-from text content here!
+        </p>
       </section>
 
       <section>

src/styles/globals.css

@@ -1,12 +1,26 @@
+:root {
+  --color-default: #30362F;
+  --color-primary: #DA7422;
+  --color-bg: #FFFBDB;
+}
+
 html, body {
   margin: 0;
-  padding: 0 15px;
+}
+
+body {
+  background-color: var(--color-bg);
+  color: var(--color-default)
 }
 
 h1, h2, h3 {
   font-weight: 600;
 }
 
+a {
+  color: var(--color-primary)
+}
+
 ul {
   margin-left: 0;
   list-style: inside;
@@ -19,4 +33,24 @@ ul li:not(:last-child) {
 
 article {
   border: none;
+  background: none;
+}
+
+article img {
+  border: 1px solid var(--color-default);
+}
+
+pre {
+  background-color: var(--color-default);
+  border-radius: 5px;
+  padding: 18px;
+}
+
+pre code {
+  color: var(--color-bg);
+}
+
+code:not(pre > code) {
+  background-color: var(--color-default);
+  color: var(--color-bg)
 }