From 1dd348a191e691289e5dc6fdc445baa773d0a7ef Mon Sep 17 00:00:00 2001
From: Aaron Yarborough <aaron@alienjungle.digital>
Date: Wed, 13 Mar 2024 14:33:42 +0000
Subject: [PATCH] feat: styling, fix layout
---
next-sitemap.config.cjs | 4 +--
src/components/Article/Article.jsx | 10 +++---
src/layouts/DefaultLayout/DefaultLayout.jsx | 10 +++---
src/pages/writing/index.js | 5 ++-
src/styles/globals.css | 36 ++++++++++++++++++++-
5 files changed, 52 insertions(+), 13 deletions(-)
diff --git a/next-sitemap.config.cjs b/next-sitemap.config.cjs
index e47f671..20565da 100644
--- a/next-sitemap.config.cjs
+++ b/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
-}
\ No newline at end of file
+}
diff --git a/src/components/Article/Article.jsx b/src/components/Article/Article.jsx
index bd0f021..175a6c3 100644
--- a/src/components/Article/Article.jsx
+++ b/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>
)
}
diff --git a/src/layouts/DefaultLayout/DefaultLayout.jsx b/src/layouts/DefaultLayout/DefaultLayout.jsx
index 0437fca..6b8e89f 100644
--- a/src/layouts/DefaultLayout/DefaultLayout.jsx
+++ b/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>
)
}
diff --git a/src/pages/writing/index.js b/src/pages/writing/index.js
index d1d82b5..492d405 100644
--- a/src/pages/writing/index.js
+++ b/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>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3c113db..5f8a245 100644
--- a/src/styles/globals.css
+++ b/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)
}
\ No newline at end of file