From d1e70850895466590e4ea9e8315074b15bc1eeb6 Mon Sep 17 00:00:00 2001 From: Lewis Dale Date: Mon, 6 Feb 2023 10:22:59 +0000 Subject: [PATCH] More work on styling home page --- package-lock.json | 1 + package.json | 1 + postcss.config.js | 1 + src/_data/today.js | 7 +++ src/_includes/base.njk | 8 ++- src/css/compositions/row.css | 5 ++ src/css/compositions/wrapper.css | 5 ++ src/css/exceptions/home.css | 13 +++++ src/css/globals.css | 90 +++++++++++++++++++------------- src/css/utilities/flex.css | 3 ++ src/index.html | 6 +-- 11 files changed, 100 insertions(+), 40 deletions(-) create mode 100644 src/_data/today.js create mode 100644 src/css/compositions/row.css create mode 100644 src/css/exceptions/home.css create mode 100644 src/css/utilities/flex.css diff --git a/package-lock.json b/package-lock.json index bfca6e2..d3d5df8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", "postcss-import-ext-glob": "^2.1.1", + "postcss-nested": "^6.0.0", "prettier": "^2.8.3", "tailwindcss": "^3.2.4" } diff --git a/package.json b/package.json index b0b0e76..e36cb26 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "postcss-cli": "^10.1.0", "postcss-import": "^15.1.0", "postcss-import-ext-glob": "^2.1.1", + "postcss-nested": "^6.0.0", "prettier": "^2.8.3", "tailwindcss": "^3.2.4" } diff --git a/postcss.config.js b/postcss.config.js index 40dd863..6e7ddcf 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,6 +3,7 @@ module.exports = { 'postcss-import-ext-glob': {}, 'postcss-import': {}, 'tailwindcss/nesting': {}, + 'postcss-nested': {}, tailwindcss: {}, autoprefixer: {}, }, diff --git a/src/_data/today.js b/src/_data/today.js new file mode 100644 index 0000000..6d4f976 --- /dev/null +++ b/src/_data/today.js @@ -0,0 +1,7 @@ +const today = new Date(); + +module.exports = { + year: today.getFullYear(), + month: today.getMonth(), + day: today.getDate() + 1, +} \ No newline at end of file diff --git a/src/_includes/base.njk b/src/_includes/base.njk index b37d8b4..9f23501 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -4,13 +4,14 @@ {{ title }} | {{ metadata.site.name }} + -
+
L.D
{{ content | safe }} +
+
Copyright © {{ today.year }} {{ metadata.author.name }}
+
\ No newline at end of file diff --git a/src/css/compositions/row.css b/src/css/compositions/row.css new file mode 100644 index 0000000..de0894e --- /dev/null +++ b/src/css/compositions/row.css @@ -0,0 +1,5 @@ +.row { + display: flex; + flex-direction: row; + gap: var(--vertical-spacing, 1rem); +} diff --git a/src/css/compositions/wrapper.css b/src/css/compositions/wrapper.css index 021a7e8..618a7c7 100644 --- a/src/css/compositions/wrapper.css +++ b/src/css/compositions/wrapper.css @@ -2,16 +2,21 @@ max-width: var(--wrapper-size, var(--screen-3xl)); margin-left: auto; margin-right: auto; + padding-left: var(--wrapper-padding, var(--space-size-3xl)); + padding-right: var(--wrapper-padding, var(--space-size-3xl)); } .wrapper-sm { --wrapper-size: var(--screen-sm); + --wrapper-padding: var(--space-size-s); } .wrapper-md { --wrapper-size: var(--screen-md); + --wrapper-padding: var(--space-size-m); } .wrapper-lg { --wrapper-size: var(--screen-lg); + --wrapper-padding: var(--space-size-l); } diff --git a/src/css/exceptions/home.css b/src/css/exceptions/home.css new file mode 100644 index 0000000..9da5e19 --- /dev/null +++ b/src/css/exceptions/home.css @@ -0,0 +1,13 @@ +.home { + h1, + h2, + h3 { + &::before { + content: none; + } + } + + h1 { + font-size: var(--text-size-3xl); + } +} diff --git a/src/css/globals.css b/src/css/globals.css index 0637c94..27cfd5c 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -1,52 +1,72 @@ body { - background-color: var(--color-blueGray-800); - color: var(--color-zinc-200); - font-family: var(--font-family-mono); - font-size: var(--text-size-s); - text-underline-offset: var(--space-size-4xs); + background-color: var(--color-blueGray-800); + color: var(--color-slate-200); + font-family: var(--font-family-mono); + font-size: var(--text-size-s); + text-underline-offset: var(--space-size-4xs); } -h1, h2, h3, h4, h5 { - display: flex; - font-weight: bold; - gap: 1ch; - line-height: 1.2; - margin: 0; +h1, +h2, +h3, +h4, +h5 { + display: flex; + font-weight: bold; + gap: 1ch; + line-height: 1.2; + margin: 0; } h1 { - font-size: var(--text-size-2xl); - word-wrap: normal; -} - -h1::before { - content: "#"; - margin-inline-start: -2ch; + font-size: var(--text-size-2xl); + word-wrap: normal; } h2 { - font-size: var(--text-size-xl); -} - -h2::before { - content: "##"; - margin-inline-start: -3ch; + font-size: var(--text-size-xl); } h3 { - font-size: var(--text-size-l); -} - -h3::before { - content: "###"; - margin-inline-start: -4ch; + font-size: var(--text-size-l); } a { - color: inherit; - text-decoration: underline; + color: inherit; + text-decoration: underline; + + &:hover { + text-decoration-color: var(--color-amber-200); + } + + &:visited { + color: inherit; + } } -a:visited { - color: inherit; -} \ No newline at end of file +nav { + --vertical-spacing: var(--space-size-m); + font-size: var(--text-size-s); +} + +header { + padding-top: var(--space-size-s); + padding-bottom: var(--space-size-s); +} + +@media (min-width: 50em) { + h1::before { + content: "#"; + margin-inline-start: -2ch; + } + + h2::before { + content: "##"; + margin-inline-start: -3ch; + } + + h3::before { + content: "###"; + margin-inline-start: -4ch; + } +} diff --git a/src/css/utilities/flex.css b/src/css/utilities/flex.css new file mode 100644 index 0000000..d4b712c --- /dev/null +++ b/src/css/utilities/flex.css @@ -0,0 +1,3 @@ +.space-between { + justify-content: space-between; +} diff --git a/src/index.html b/src/index.html index 9826688..63c62f0 100644 --- a/src/index.html +++ b/src/index.html @@ -3,9 +3,9 @@ title: Home layout: base.njk --- -
-
-

Hi, I'm Lewis

+
+
+

Hi, I'm Lewis

  • Software engineer
  • Cyclist