Skip to content

Commit dba4be8

Browse files
author
Kevin Pennekamp
committed
feat: new website powered by 11ty
1 parent b432be4 commit dba4be8

31 files changed

+2144
-1163
lines changed

‎.eleventy.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = (config) => {
2+
config.addPassthroughCopy({ "./public/": "/" });
3+
4+
return {
5+
markdownTemplateEngine: "njk",
6+
dataTemplateEngine: "njk",
7+
htmlTemplateEngine: "njk",
8+
dir: {
9+
input: "site",
10+
output: "_site",
11+
},
12+
};
13+
};

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ npm-debug.*
77
.sass-cache
88
node_modules
99

10+
_site
1011
yarn-error.log

‎feo.css

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@
232232
}
233233

234234
pre > code {
235-
padding: var(--token-size-0) var(--token-size-1);
235+
padding: var(--token-size-00) var(--token-size-0);
236236
font-size: var(--token-size-00);
237237
tab-size: 2;
238238
-webkit-text-size-adjust: none;
@@ -416,7 +416,7 @@
416416
.sidebar {
417417
--layout-gap: 0;
418418
--layout-width: 0;
419-
--min-inline-size: 60%;
419+
--min-inline-size: 67%;
420420
gap: var(--layout-gap);
421421
flex-wrap: wrap;
422422
display: flex;
@@ -528,6 +528,10 @@
528528
--layout-gap: auto;
529529
}
530530

531+
.--gap-0000 {
532+
--layout-gap: var(--token-size-0000);
533+
}
534+
531535
.--gap-000 {
532536
--layout-gap: var(--token-size-000);
533537
}
@@ -1066,6 +1070,10 @@
10661070
text-align: center;
10671071
}
10681072

1073+
.lh-1 {
1074+
line-height: 1;
1075+
}
1076+
10691077
.maxw-000 {
10701078
max-width: var(--token-bp-000);
10711079
}
@@ -1102,7 +1110,7 @@
11021110
@layer components {
11031111
label {
11041112
color: var(--color-foreground-1);
1105-
font-size: var(--token-size-00);
1113+
font-size: var(--token-size-0);
11061114
flex-direction: column;
11071115
gap: 4px;
11081116
display: flex;
@@ -1163,6 +1171,7 @@
11631171
}
11641172

11651173
label:has(input[type="checkbox"]) {
1174+
align-items: center;
11661175
gap: var(--token-size-00);
11671176
flex-direction: row;
11681177
}
@@ -1216,7 +1225,7 @@
12161225
outline: 2px solid #1e90ff;
12171226
}
12181227

1219-
div:has( > table) {
1228+
div:has( > tabl:first-child) {
12201229
overflow-x: auto;
12211230
}
12221231

@@ -1227,7 +1236,6 @@
12271236
background: var(--table-color);
12281237
border-radius: calc(var(--table-radius) * 1.3);
12291238
width: 100%;
1230-
overflow-x: auto;
12311239
}
12321240

12331241
table tr:last-child td:first-child {

‎feo.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
22
"dependencies": {},
33
"scripts": {
4-
"build:full": "lightningcss --bundle --nesting --targets '> 0.25%, not IE 11' src/index.css -o feo.css",
5-
"build:site": "lightningcss --bundle --nesting --minify --targets '> 0.25%, not IE 11' src/index.css -o site/feo.min.css",
6-
"build:min": "lightningcss --bundle --nesting --minify --targets '> 0.25%, not IE 11' src/index.css -o feo.min.css",
7-
"build": "yarn build:min && yarn build:full && yarn build:site",
8-
"start": "onchange 'src/**/*.css' -- yarn build"
4+
"css:bundle": "lightningcss --bundle --nesting --targets '> 0.25%, not IE 11' src/index.css -o feo.css",
5+
"css:minified": "lightningcss --bundle --nesting --minify --targets '> 0.25%, not IE 11' src/index.css -o feo.min.css",
6+
"css:docs": "lightningcss --bundle --nesting --minify --targets '> 0.25%, not IE 11' src/index.css -o public/feo.min.css",
7+
"build": "yarn css:bundle && yarn css:minified && yarn css:docs",
8+
"start": "eleventy --serve && onchange 'src/**/*.css' -- yarn build",
9+
"build:11ty": "npx @11ty/eleventy onchange 'src/**/*.css' -- yarn css:docs"
910
},
1011
"name": "feo-css",
1112
"version": "4.2.0",
@@ -23,6 +24,7 @@
2324
},
2425
"homepage": "https://github.com/vyckes/feo-css#readme",
2526
"devDependencies": {
27+
"@11ty/eleventy": "^2.0.1",
2628
"lightningcss-cli": "^1.18.0",
2729
"onchange": "^7.1.0"
2830
}

‎public/demo.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
nav {
2+
top: 1rem;
3+
}
4+
5+
@media (max-width: 637px) {
6+
nav {
7+
position: relative;
8+
}
9+
10+
nav ul {
11+
flex-direction: row;
12+
flex-wrap: wrap;
13+
}
14+
15+
nav li {
16+
white-space: nowrap;
17+
}
18+
}
19+
20+
article > * + * {
21+
margin-top: var(--token-size-0);
22+
}
23+
24+
article > * + h2 {
25+
margin-top: var(--token-size-3);
26+
}

‎site/favicon.ico renamed to ‎public/favicon.ico

File renamed without changes.

‎public/feo.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/_includes/base.njk

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Feo.css - {{ title }}</title>
6+
<meta name="robots" content="index,follow" />
7+
<meta
8+
name="description"
9+
content="Feo.css is a classless css and layout library"
10+
/>
11+
<meta name="keywords" content="CSS, layout, patterns, cube css">
12+
<meta name="content" content="CSS, layout, patterns, cube css">
13+
<meta name="property" content="CSS, layout, patterns, cube css">
14+
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
15+
<meta name="viewport" content="width=device-width, initial-scale=1" />
16+
<meta name="color-scheme" content="light dark" />
17+
<meta
18+
name="theme-color"
19+
media="(prefers-color-scheme: light)"
20+
content="#F7F9FB"
21+
/>
22+
<meta
23+
name="theme-color"
24+
media="(prefers-color-scheme: dark)"
25+
content="#0E131B"
26+
/>
27+
<meta name="view-transition" content="same-origin" />
28+
<link rel="stylesheet" href="/feo.min.css" />
29+
<link rel="stylesheet" href="/demo.css" />
30+
<link rel="icon" href="/favicon.ico" sizes="any" />
31+
</head>
32+
33+
<body class="p-0 flex-col">
34+
<main class="sidebar --left --width-000 --gap-0 | relative flex-grow">
35+
<!-- NAVIGATION -->
36+
<nav class="sticky">
37+
<div class="flex-row --gap-000 items-center">
38+
<svg height="32" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
39+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 25C15 30.5228 19.4772 35 25 35C30.5228 35 35 30.5229 35 25C35 19.4772 30.5228 15 25 15C19.4772 15 15 19.4772 15 25ZM25 20C22.2386 20 20 22.2386 20 25C20 27.7614 22.2386 30 25 30C27.7614 30 30 27.7614 30 25C30 22.2386 27.7614 20 25 20Z" fill="var(--color-foreground-0)"/>
40+
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.1623 44.4868L28.1623 49.4868C26.1096 50.1711 23.8904 50.1711 21.8377 49.4868L6.83772 44.4868C2.7543 43.1257 0 39.3043 0 35L2.31474e-06 15C2.69103e-06 10.6957 2.7543 6.8743 6.83773 5.51316L21.8377 0.513167C23.8904 -0.171056 26.1096 -0.171055 28.1623 0.513167L43.1623 5.51317C47.2457 6.87431 50 10.6957 50 15L50 35C50 39.3043 47.2457 43.1257 43.1623 44.4868ZM25 5C24.466 5 23.932 5.08553 23.4189 5.25658L8.41886 10.2566C6.37715 10.9372 5 12.8478 5 15L5 35C5 37.1522 6.37715 39.0628 8.41886 39.7434L23.4189 44.7434C23.932 44.9145 24.466 45 25 45C25.534 45 26.068 44.9145 26.5811 44.7434L41.5811 39.7434C43.6228 39.0629 45 37.1522 45 35L45 15C45 12.8479 43.6229 10.9372 41.5811 10.2566L26.5811 5.25658C26.068 5.08553 25.534 5 25 5Z" fill="var(--color-foreground-0)"/>
41+
</svg>
42+
<span class="size-1 bold lh-1">Feo.css</span>
43+
</div>
44+
<span class="size-00">(v4.2.1)</span>
45+
<ul role="list" class="flex-col --gap-000 | mt-0 pt-0000 | size-00">
46+
<li {% if key == "home" %} class="bold"{% endif %}><a href="/">Homepage</a></li>
47+
<li {% if key == "tokens" %} class="bold"{% endif %}><a href="/tokens">Design tokens</a></li>
48+
<li {% if key == "layouts" %} class="bold"{% endif %} ><a href="/layouts">Layout patterns</a></li>
49+
<li {% if key == "utilities" %} class="bold"{% endif %}><a href="/utilities">Utilities</a></li>
50+
<li {% if key == "components" %} class="bold"{% endif %}><a href="/components">Components</a></li>
51+
<li {% if key == "builtwith" %} class="bold"{% endif %}><a href="/builtwith">Built with</a></li>
52+
</ul>
53+
</nav>
54+
<div class="flex-col">
55+
<article class="center --width-3 | flex-grow">
56+
<h1>{{title}}</h1>
57+
{{ content | safe }}
58+
</article>
59+
<!-- FOOTER -->
60+
<footer class="cluster --gap-000 justify-end | size-00 italic | mt-1">
61+
<span>Powered by: <a href="https://11ty.dev" class="italic">11ty</a></span>
62+
<span>|</span>
63+
<a href="https://github.com/vyckes/feo-css">Github</a>
64+
<span>|</span>
65+
<span>Made by <a href="https://vyckes.dev">Vyckes</a>
66+
</footer>
67+
</div>
68+
</main>
69+
</body>
70+
</html>

‎site/_template.html

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

0 commit comments

Comments
 (0)