lewis/lewisdale.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More work on theme

Browse Source
This commit is contained in:
Lewis Dale 2023-02-05 19:53:49 +00:00
parent 6c599aeaaf
commit 53bb30bdf0
19 changed files with 108 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules
src/css/custom-props.css
_site
.DS_Store

2
src/_data/metadata.json
View File

@ -3,7 +3,7 @@
"name": "Lewis Dale"
},
"site": {
"name": "LewisDale dot Dev",
"name": "LewisDale.dev",
"domain": "lewisdale.dev",
"description": ""
}

12
src/_includes/base.njk
View File

@ -6,6 +6,18 @@
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
</head>
<body>
<header>
<a href="/">L.D</a>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About me</a></li>
</ul>
</nav>
</header>
{{ content | safe }}
</body>
</html>

BIN
src/assets/fonts/SpaceGrotesk.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.ttf
View File

Binary file not shown.

BIN
src/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2
View File

Binary file not shown.

BIN
src/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.ttf
View File

Binary file not shown.

BIN
src/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2
View File

Binary file not shown.

BIN
src/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.ttf
View File

Binary file not shown.

BIN
src/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2
View File

Binary file not shown.

BIN
src/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.ttf
View File

Binary file not shown.

BIN
src/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2
View File

Binary file not shown.

15
src/css/compositions/stack.css Normal file
View File

@ -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);
}

17
src/css/compositions/wrapper.css Normal file
View File

@ -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);
}

73
src/css/fonts/space_grotesk.css
View File

@ -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;
}

33
src/css/globals.css
View File

@ -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;
}

7
src/css/utilities/circle.css Normal file
View File

@ -0,0 +1,7 @@
.circle {
aspect-ratio: 1;
border-radius: 100%;
display: block;
object-fit: cover;
object-position: center;
}

16
src/index.html
View File

@ -3,4 +3,18 @@ title: Home
layout: base.njk
---
<h1>{{ metadata.site.name }}</h1>
<main class="wrapper-lg stack-md">
<section class="max-w-screen-md">
<h1 class="text-size-3xl max-w-[10ch]">Hi, I'm Lewis</h1>
<ul>
<li>Software engineer</li>
<li>Cyclist</li>
<li>Dad</li>
</ul>
</section>
<section>
<h2>Recent Posts</h2>
<a href="/blog">View more posts</a>
</section>
</main>

4
tailwind.config.js
View File

@ -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)',