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

More work on styling home page

Browse Source
This commit is contained in:
Lewis Dale 2023-02-06 10:22:59 +00:00
parent 67a2fe350d
commit d1e7085089
11 changed files with 100 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@ -29,6 +29,7 @@
"postcss-cli": "^10.1.0", "postcss-cli": "^10.1.0",
"postcss-import": "^15.1.0", "postcss-import": "^15.1.0",
"postcss-import-ext-glob": "^2.1.1", "postcss-import-ext-glob": "^2.1.1",
"postcss-nested": "^6.0.0",
"prettier": "^2.8.3", "prettier": "^2.8.3",
"tailwindcss": "^3.2.4" "tailwindcss": "^3.2.4"
} }

1
package.json
View File

@ -33,6 +33,7 @@
"postcss-cli": "^10.1.0", "postcss-cli": "^10.1.0",
"postcss-import": "^15.1.0", "postcss-import": "^15.1.0",
"postcss-import-ext-glob": "^2.1.1", "postcss-import-ext-glob": "^2.1.1",
"postcss-nested": "^6.0.0",
"prettier": "^2.8.3", "prettier": "^2.8.3",
"tailwindcss": "^3.2.4" "tailwindcss": "^3.2.4"
} }

1
postcss.config.js
View File

@ -3,6 +3,7 @@ module.exports = {
'postcss-import-ext-glob': {}, 'postcss-import-ext-glob': {},
'postcss-import': {}, 'postcss-import': {},
'tailwindcss/nesting': {}, 'tailwindcss/nesting': {},
'postcss-nested': {},
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },

7
src/_data/today.js Normal file
View File

@ -0,0 +1,7 @@
const today = new Date();
module.exports = {
year: today.getFullYear(),
month: today.getMonth(),
day: today.getDate() + 1,
}

8
src/_includes/base.njk
View File

@ -4,13 +4,14 @@
<title>{{ title }} | {{ metadata.site.name }}</title> <title>{{ title }} | {{ metadata.site.name }}</title>
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" /> <link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body> <body>
<header> <header class="wrapper-lg row space-between">
<a href="/">L.D</a> <a href="/">L.D</a>
<nav> <nav>
<ul> <ul class="row">
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/now">Now</a></li> <li><a href="/now">Now</a></li>
<li><a href="/blog">Blog</a></li> <li><a href="/blog">Blog</a></li>
@ -19,5 +20,8 @@
</nav> </nav>
</header> </header>
{{ content | safe }} {{ content | safe }}
<footer>
<div class="wrapper-lg">Copyright &copy; {{ today.year }} {{ metadata.author.name }}</div>
</footer>
</body> </body>
</html> </html>

5
src/css/compositions/row.css Normal file
View File

@ -0,0 +1,5 @@
.row {
display: flex;
flex-direction: row;
gap: var(--vertical-spacing, 1rem);
}

5
src/css/compositions/wrapper.css
View File

@ -2,16 +2,21 @@
max-width: var(--wrapper-size, var(--screen-3xl)); max-width: var(--wrapper-size, var(--screen-3xl));
margin-left: auto; margin-left: auto;
margin-right: 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-sm {
--wrapper-size: var(--screen-sm); --wrapper-size: var(--screen-sm);
--wrapper-padding: var(--space-size-s);
} }
.wrapper-md { .wrapper-md {
--wrapper-size: var(--screen-md); --wrapper-size: var(--screen-md);
--wrapper-padding: var(--space-size-m);
} }
.wrapper-lg { .wrapper-lg {
--wrapper-size: var(--screen-lg); --wrapper-size: var(--screen-lg);
--wrapper-padding: var(--space-size-l);
} }

13
src/css/exceptions/home.css Normal file
View File

@ -0,0 +1,13 @@
.home {
h1,
h2,
h3 {
&::before {
content: none;
}
}
h1 {
font-size: var(--text-size-3xl);
}
}

90
src/css/globals.css
View File

@ -1,52 +1,72 @@
body { body {
background-color: var(--color-blueGray-800); background-color: var(--color-blueGray-800);
color: var(--color-zinc-200); color: var(--color-slate-200);
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-size: var(--text-size-s); font-size: var(--text-size-s);
text-underline-offset: var(--space-size-4xs); text-underline-offset: var(--space-size-4xs);
} }
h1, h2, h3, h4, h5 { h1,
display: flex; h2,
font-weight: bold; h3,
gap: 1ch; h4,
line-height: 1.2; h5 {
margin: 0; display: flex;
font-weight: bold;
gap: 1ch;
line-height: 1.2;
margin: 0;
} }
h1 { h1 {
font-size: var(--text-size-2xl); font-size: var(--text-size-2xl);
word-wrap: normal; word-wrap: normal;
}
h1::before {
content: "#";
margin-inline-start: -2ch;
} }
h2 { h2 {
font-size: var(--text-size-xl); font-size: var(--text-size-xl);
}
h2::before {
content: "##";
margin-inline-start: -3ch;
} }
h3 { h3 {
font-size: var(--text-size-l); font-size: var(--text-size-l);
}
h3::before {
content: "###";
margin-inline-start: -4ch;
} }
a { a {
color: inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
&:hover {
text-decoration-color: var(--color-amber-200);
}
&:visited {
color: inherit;
}
} }
a:visited { nav {
color: inherit; --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;
}
}

3
src/css/utilities/flex.css Normal file
View File

@ -0,0 +1,3 @@
.space-between {
justify-content: space-between;
}

6
src/index.html
View File

@ -3,9 +3,9 @@ title: Home
layout: base.njk layout: base.njk
--- ---
<main class="wrapper-lg stack-md"> <main class="home wrapper-lg stack-md">
<section class="max-w-screen-md"> <section>
<h1 class="text-size-3xl max-w-[10ch]">Hi, I'm Lewis</h1> <h1>Hi, I'm Lewis</h1>
<ul> <ul>
<li>Software engineer</li> <li>Software engineer</li>
<li>Cyclist</li> <li>Cyclist</li>