diff --git a/.gitignore b/.gitignore index f221949..ded7ea9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules src/css/custom-props.css -_site \ No newline at end of file +_site +.DS_Store \ No newline at end of file diff --git a/src/_data/metadata.json b/src/_data/metadata.json index 3fe1fb7..6a11cd4 100644 --- a/src/_data/metadata.json +++ b/src/_data/metadata.json @@ -3,7 +3,7 @@ "name": "Lewis Dale" }, "site": { - "name": "LewisDale dot Dev", + "name": "LewisDale.dev", "domain": "lewisdale.dev", "description": "" } diff --git a/src/_includes/base.njk b/src/_includes/base.njk index e932a4e..b37d8b4 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -6,6 +6,18 @@ +
+ L.D + + +
{{ content | safe }} \ No newline at end of file diff --git a/src/assets/fonts/SpaceGrotesk.woff2 b/src/assets/fonts/SpaceGrotesk.woff2 new file mode 100644 index 0000000..0c4d658 Binary files /dev/null and b/src/assets/fonts/SpaceGrotesk.woff2 differ diff --git a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.ttf b/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.ttf deleted file mode 100644 index f8eb245..0000000 Binary files a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.ttf and /dev/null differ diff --git a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2 b/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2 deleted file mode 100644 index 6025ccf..0000000 Binary files a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2 and /dev/null differ diff --git a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.ttf b/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.ttf deleted file mode 100644 index b2c106e..0000000 Binary files a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.ttf and /dev/null differ diff --git a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2 b/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2 deleted file mode 100644 index 57348b8..0000000 Binary files a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2 and /dev/null differ diff --git a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.ttf b/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.ttf deleted file mode 100644 index 341b633..0000000 Binary files a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.ttf and /dev/null differ diff --git a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2 b/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2 deleted file mode 100644 index ffcb76b..0000000 Binary files a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2 and /dev/null differ diff --git a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.ttf b/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.ttf deleted file mode 100644 index 46aa5da..0000000 Binary files a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.ttf and /dev/null differ diff --git a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2 b/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2 deleted file mode 100644 index 568d15a..0000000 Binary files a/src/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2 and /dev/null differ diff --git a/src/css/compositions/stack.css b/src/css/compositions/stack.css new file mode 100644 index 0000000..11d6381 --- /dev/null +++ b/src/css/compositions/stack.css @@ -0,0 +1,15 @@ +[class*="stack"] > * + * { + margin-block-start: var(--vertical-spacing, 1.5rem); +} + +.stack-sm { + --vertical-spacing: var(--space-size-s); +} + +.stack-md { + --vertical-spacing: var(--space-size-m); +} + +.stack-lg { + --vertical-spacing: var(--space-size-l); +} \ No newline at end of file diff --git a/src/css/compositions/wrapper.css b/src/css/compositions/wrapper.css new file mode 100644 index 0000000..021a7e8 --- /dev/null +++ b/src/css/compositions/wrapper.css @@ -0,0 +1,17 @@ +[class*="wrapper"] { + max-width: var(--wrapper-size, var(--screen-3xl)); + margin-left: auto; + margin-right: auto; +} + +.wrapper-sm { + --wrapper-size: var(--screen-sm); +} + +.wrapper-md { + --wrapper-size: var(--screen-md); +} + +.wrapper-lg { + --wrapper-size: var(--screen-lg); +} diff --git a/src/css/fonts/space_grotesk.css b/src/css/fonts/space_grotesk.css index d028193..c56d551 100644 --- a/src/css/fonts/space_grotesk.css +++ b/src/css/fonts/space_grotesk.css @@ -1,72 +1,7 @@ @font-face { font-family: 'Space Grotesk'; - src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2') format('woff2'), - url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; - font-display: swap; + src: url('/assets/fonts/SpaceGrotestk.woff2') format('woff2 supports variations'), + url('/assets/fonts/SpaceGrotesk.woff2') format('woff2-variations'); + font-weight: 300 400 500 600 700; + font-feature-settings: "liga", "ss03", "ss02", "ss01", "onum"; } - -@font-face { - font-family: 'Space Grotesk'; - src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2') format('woff2'), - url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Space Grotesk'; - src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2') format('woff2'), - url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff') format('woff'); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Space Grotesk'; - src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2') format('woff2'), - url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff') format('woff'); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Space Grotesk'; - src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2') format('woff2'), - url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff') format('woff'); - font-weight: 300; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Space Grotesk'; - src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2') format('woff2'), - url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff') format('woff'); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Space Grotesk'; - src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2') format('woff2'), - url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff') format('woff'); - font-weight: normal; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Space Grotesk'; - src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2') format('woff2'), - url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff') format('woff'); - font-weight: 300; - font-style: normal; - font-display: swap; -} - diff --git a/src/css/globals.css b/src/css/globals.css index 3afbf6d..87d5cd4 100644 --- a/src/css/globals.css +++ b/src/css/globals.css @@ -1,4 +1,35 @@ body { + background-color: var(--color-blueGray-800); + color: var(--color-zinc-200); font-family: var(--font-family-mono); - font-size: var(--font-size-s); + font-size: var(--text-size-s); + text-underline-offset: var(--space-size-4xs); +} + +h1, h2, h3, h4, h5 { + font-weight: bold; + line-height: 1.2; + margin: 0; +} + +h1 { + font-size: var(--text-size-2xl); + word-wrap: normal; +} + +h2 { + font-size: var(--text-size-xl); +} + +h3 { + font-size: var(--text-size-l); +} + +a { + color: inherit; + text-decoration: underline; +} + +a:visited { + color: inherit; } \ No newline at end of file diff --git a/src/css/utilities/circle.css b/src/css/utilities/circle.css new file mode 100644 index 0000000..e8fefd0 --- /dev/null +++ b/src/css/utilities/circle.css @@ -0,0 +1,7 @@ +.circle { + aspect-ratio: 1; + border-radius: 100%; + display: block; + object-fit: cover; + object-position: center; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 93b046f..9826688 100644 --- a/src/index.html +++ b/src/index.html @@ -3,4 +3,18 @@ title: Home layout: base.njk --- -

{{ metadata.site.name }}

\ No newline at end of file +
+
+

Hi, I'm Lewis

+ +
+
+

Recent Posts

+ + View more posts +
+
diff --git a/tailwind.config.js b/tailwind.config.js index 0ab7aa0..59086c7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,5 @@ const defaultTheme = require('tailwindcss/defaultTheme'); +const colors = require('tailwindcss/colors'); /** @type {import('tailwindcss').Config} */ module.exports = { @@ -13,10 +14,11 @@ module.exports = { '2xl': '1536px', '3xl': '1920px', }, - colors: defaultTheme.colors, + colors: colors, backgroundColor: ({theme}) => theme('colors'), textColor: ({theme}) => theme('colors'), spacing: { + 'size-4xs': 'clamp(0.125rem, calc(0.12rem + 0.03vw), 0.21rem)', 'size-3xs': 'clamp(0.25rem, calc(0.24rem + 0.06vw), 0.31rem)', 'size-2xs': 'clamp(0.50rem, calc(0.48rem + 0.13vw), 0.63rem)', 'size-xs': 'clamp(0.75rem, calc(0.71rem + 0.19vw), 0.94rem)',