Skip to content

Commit 7432b16

Browse files
barelyhumanbarelyhuman
committed
feat: add design style guidelines and improve HTML structure
1 parent 9eba45f commit 7432b16

File tree

11 files changed

+201
-120
lines changed

11 files changed

+201
-120
lines changed

‎.github/copilot-instructions.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
## Design Style
2+
3+
- Minimal, monochromatic color scheme (white and grays)
4+
- Use whitespace generously for clarity and legibility
5+
- Typography defines hierarchy and importance; use bold for headings,
6+
micro-labels for context
7+
- Navigation and footer links are simple, spaced, and stack vertically on mobile
8+
- Use micro-labels (small, uppercase, letter-spaced text) for section and
9+
feature labels
10+
- Use small circular dot elements for visual accents and to draw attention
11+
- Features are presented in a grid, which collapses to a single column on mobile
12+
- All content is wrapped in a `.container` with a max-width for readability
13+
- Responsive design: adapts layout, font sizes, and spacing for smaller screens
14+
- No heavy shadows or borders; use subtle box-shadows and rounded corners only
15+
for cards
16+
- Buttons and links have clear touch targets and hover states
17+
- Semantic HTML structure for SEO (header, main, section, article, footer)
18+
- Accessibility: use `aria-label` where needed, ensure good contrast

‎.nano-staged.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ export default api => {
88
function prettify(api) {
99
const prettierFiles = api.filenames
1010
.filter(file =>
11-
['.js', '.md', '.css', '.njk', '.html', '.json'].includes(
12-
path.extname(file)
13-
)
11+
['.js', '.md', '.css', '.html', '.json'].includes(path.extname(file))
1412
)
1513
.join(' ')
1614
return prettierFiles.length > 0 ? `prettier --write ${prettierFiles}` : ``

‎_includes/base-simple-header.njk

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎_includes/base.njk

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎eleventy.config.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
22
import { purgePlugin } from './_plugins/purge.js'
3+
import MarkdownIt from 'markdown-it'
34

45
export default function (eleventyConfig) {
56
eleventyConfig.addPassthroughCopy({
67
'./public/': '/',
78
})
8-
eleventyConfig.addPassthroughCopy({
9-
'./node_modules/shed-css/dist/index.css':
10-
'/node_modules/shed-css/dist/index.css',
9+
10+
eleventyConfig.addFilter('markdown', function (value) {
11+
let markdown = MarkdownIt({
12+
html: true,
13+
})
14+
return markdown.render(value)
1115
})
16+
1217
eleventyConfig.addPlugin(EleventyHtmlBasePlugin)
1318
eleventyConfig.addPlugin(purgePlugin)
1419
}

‎index.njk

Lines changed: 56 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,56 @@
1-
---
2-
layout: base.njk
3-
---
4-
5-
<div class="d:f">
6-
<a class="link w:1of12" href="/about">About</a>
7-
<a class="link w:1of12" href="/products">Products</a>
8-
</div>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>tinytown.studio</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="/main.css">
8+
<body>
9+
10+
</body>
11+
</html>
12+
13+
14+
</head>
15+
<body>
16+
<div class="container">
17+
<header>
18+
<span class="micro-label"><small>tinytown.studio</small></span>
19+
<span class="dot" aria-hidden="true"></span>
20+
</header>
21+
22+
<main>
23+
<section aria-label="Hero">
24+
<span class="micro-label"><small>WELCOME</small></span>
25+
<h1>Minimal Software Craftsmen.</h1>
26+
<p>Building hyperfocused software for everyone</p>
27+
</section>
28+
29+
<section id="about" aria-label="About">
30+
<span class="micro-label"><small>About</small></span>
31+
<article>
32+
{% set snippet %}{% include './partials/about.md' %}{% endset %}
33+
{{ snippet | markdown | safe }}
34+
</article>
35+
</section>
36+
<section id="products" aria-label="Products">
37+
<span class="micro-label"><small>Products</small></span>
38+
<div class="products-grid">
39+
<article class="product-card">
40+
<div class="product-header">
41+
<span class="dot" aria-hidden="true"></span>
42+
<h2>Ping</h2>
43+
</div>
44+
<p>Simple, light, and non-intrusive uptime monitor service.</p>
45+
<a href="https://ping.tinytown.studio" class="external-link" target="_blank" rel="noopener" aria-label="Visit Ping uptime monitor (opens in new tab)">Visit Ping &rarr;</a>
46+
</article>
47+
</div>
48+
</section>
49+
</main>
50+
51+
<footer class="footer">
52+
<span class="micro-label"><small>&copy; 2025 tinytown.studio</small></span>
53+
</footer>
54+
</div>
55+
</body>
56+
</html>

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@
2323
"nano-staged": "^0.8.0",
2424
"postcss": "^8.5.1",
2525
"prettier": "^3.4.2",
26-
"shed-css": "^1.4.0",
2726
"tiny-glob": "^0.2.9"
27+
},
28+
"packageManager": "[email protected]+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad",
29+
"dependencies": {
30+
"markdown-it": "^14.1.0"
2831
}
2932
}

‎about.md renamed to ‎partials/about.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
---
2-
layout: base-simple-header.njk
3-
---
4-
5-
## About
6-
71
We are TinyTown.studio, a dedicated team of developers committed to creating
82
solutions that _**just work**_ with a focus on simplicity and efficiency.
93

‎pnpm-lock.yaml

Lines changed: 4 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎products.njk

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
layout: base-simple-header.njk
3-
---
4-
51
<h2>Products</h2>
62

73
<a class="badge-container" href="https://ping.tinytown.studio">

0 commit comments

Comments
 (0)