More work on styling home page
This commit is contained in:
Lewis Dale
parent
67a2fe350d
commit
d1e7085089
1
package-lock.json
generated
1
package-lock.json
generated
@ -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"
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ module.exports = {
|
||||
'postcss-import-ext-glob': {},
|
||||
'postcss-import': {},
|
||||
'tailwindcss/nesting': {},
|
||||
'postcss-nested': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
|
||||
7
src/_data/today.js
Normal file
7
src/_data/today.js
Normal file
@ -0,0 +1,7 @@
|
||||
const today = new Date();
|
||||
|
||||
module.exports = {
|
||||
year: today.getFullYear(),
|
||||
month: today.getMonth(),
|
||||
day: today.getDate() + 1,
|
||||
}
|
||||
@ -4,13 +4,14 @@
|
||||
<title>{{ title }} | {{ metadata.site.name }}</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<header class="wrapper-lg row space-between">
|
||||
<a href="/">L.D</a>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<ul class="row">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/now">Now</a></li>
|
||||
<li><a href="/blog">Blog</a></li>
|
||||
@ -19,5 +20,8 @@
|
||||
</nav>
|
||||
</header>
|
||||
{{ content | safe }}
|
||||
<footer>
|
||||
<div class="wrapper-lg">Copyright © {{ today.year }} {{ metadata.author.name }}</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
5
src/css/compositions/row.css
Normal file
5
src/css/compositions/row.css
Normal file
@ -0,0 +1,5 @@
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--vertical-spacing, 1rem);
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
13
src/css/exceptions/home.css
Normal file
13
src/css/exceptions/home.css
Normal file
@ -0,0 +1,13 @@
|
||||
.home {
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--text-size-3xl);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
3
src/css/utilities/flex.css
Normal file
3
src/css/utilities/flex.css
Normal file
@ -0,0 +1,3 @@
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -3,9 +3,9 @@ title: Home
|
||||
layout: base.njk
|
||||
---
|
||||
|
||||
<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>
|
||||
<main class="home wrapper-lg stack-md">
|
||||
<section>
|
||||
<h1>Hi, I'm Lewis</h1>
|
||||
<ul>
|
||||
<li>Software engineer</li>
|
||||
<li>Cyclist</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user