wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

repair wrapping menu, converting all sizing properties to logical properties, readjust spacing values

Browse source
This commit is contained in:
madrilene 2023-05-23 12:37:00 +02:00
parent fee74d78ad
commit 6e7d1e0f02
20 changed files with 5034 additions and 5212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eleventy.js
View file

@ -46,6 +46,7 @@ const {slugifyString} = require('./config/utils');
const {escape} = require('lodash'); const {escape} = require('lodash');
const pluginRss = require('@11ty/eleventy-plugin-rss'); const pluginRss = require('@11ty/eleventy-plugin-rss');
const inclusiveLangPlugin = require('@11ty/eleventy-plugin-inclusive-language'); const inclusiveLangPlugin = require('@11ty/eleventy-plugin-inclusive-language');
const bundlerPlugin = require('@11ty/eleventy-plugin-bundle');
module.exports = eleventyConfig => { module.exports = eleventyConfig => {
// --------------------- Custom Watch Targets ----------------------- // --------------------- Custom Watch Targets -----------------------
@ -105,6 +106,7 @@ module.exports = eleventyConfig => {
eleventyConfig.setLibrary('md', markdownLib); eleventyConfig.setLibrary('md', markdownLib);
eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(inclusiveLangPlugin); eleventyConfig.addPlugin(inclusiveLangPlugin);
eleventyConfig.addPlugin(bundlerPlugin);
// --------------------- Passthrough File Copy ----------------------- // --------------------- Passthrough File Copy -----------------------
// same path // same path

5795
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "eleventy-excellent", "name": "eleventy-excellent",
"version": "1.5.0", "version": "1.5.1",
"description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.", "description": "Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.",
"author": "Lene Saile", "author": "Lene Saile",
"license": "ISC", "license": "ISC",
@ -24,9 +24,10 @@
"@11ty/eleventy": "^2.0.0", "@11ty/eleventy": "^2.0.0",
"@11ty/eleventy-fetch": "^4.0.0", "@11ty/eleventy-fetch": "^4.0.0",
"@11ty/eleventy-img": "^3.0.0", "@11ty/eleventy-img": "^3.0.0",
"@11ty/eleventy-plugin-bundle": "^1.0.4",
"@11ty/eleventy-plugin-inclusive-language": "^1.0.3", "@11ty/eleventy-plugin-inclusive-language": "^1.0.3",
"@11ty/eleventy-plugin-rss": "^1.2.0", "@11ty/eleventy-plugin-rss": "^1.2.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0", "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"tailwindcss": "^3.0.23" "tailwindcss": "^3.0.23"
}, },
"devDependencies": { "devDependencies": {

4326
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

6
src/_layouts/base.njk
View file

@ -18,12 +18,6 @@
{% endif %} {% endif %}
</title> </title>
<!-- synchronous js / schema -->
{% include "schemas/base-schema.njk" %} {% if schema == 'blog' %}
<!-- include blogpost schema -->
{%- include "schemas/blogpost-schema.njk" %} {% endif %}
<!-- synchronous css / inline css -->
<link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" /> <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
<!-- preloads --> <!-- preloads -->

2
src/assets/css/blocks/card.css
View file

@ -4,7 +4,7 @@
color: var(--color-light); color: var(--color-light);
padding: var(--space-m-l); padding: var(--space-m-l);
border-radius: var(--border-radius); border-radius: var(--border-radius);
max-width: unset; max-inline-size: unset;
} }
.card ::selection { .card ::selection {

2
src/assets/css/blocks/code.css
View file

@ -227,5 +227,5 @@ pre[class*='language-'] {
.cp_embed_wrapper iframe { .cp_embed_wrapper iframe {
grid-area: container; grid-area: container;
width: 100%; inline-size: 100%;
} }

15
src/assets/css/blocks/menu.css
View file

@ -1,4 +1,4 @@
@media (min-width: 48em) { @media (min-width: 38em) {
nav.navbar { nav.navbar {
--nav-button-display: none; --nav-button-display: none;
--nav-position: static; --nav-position: static;
@ -35,16 +35,15 @@ nav.navbar ul {
box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2)); box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
display: flex; display: flex;
flex-direction: var(--nav-list-layout, column); flex-direction: var(--nav-list-layout, column);
flex-wrap: wrap;
gap: 0.9rem; gap: 0.9rem;
height: var(--nav-list-height, 100vh); block-size: var(--nav-list-height, 100vh);
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: var(--nav-list-padding, 2rem); padding: var(--nav-list-padding, 2rem);
position: var(--nav-list-position, fixed); position: var(--nav-list-position, fixed);
inset-block-start: 0; /* Logical property. Equivalent to top: 0; */ inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */ inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
width: var(--nav-list-width, min(22rem, 100vw)); inline-size: var(--nav-list-width, min(22rem, 100vw));
visibility: var(--nav-list-visibility, visible); visibility: var(--nav-list-visibility, visible);
} }
@ -95,15 +94,15 @@ nav.navbar button {
} }
nav.navbar span { nav.navbar span {
font-size: var(--size-step-0); font-size: var(--size-step-min-1);
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
padding-inline-end: var(--space-xs); padding-inline-end: var(--space-2xs);
} }
nav.navbar svg { nav.navbar svg {
height: 100%; block-size: 100%;
width: auto; inline-size: auto;
} }
header svg { header svg {
transform: translateY(-0.1em); transform: translateY(-0.1em);

4
src/assets/css/blocks/seperator.css
View file

@ -1,6 +1,6 @@
.seperator { .seperator {
display: block; display: block;
height: 3.5em; block-size: 3.5em;
width: 100%; inline-size: 100%;
fill: var(--spot-color, var(--color-light)); fill: var(--spot-color, var(--color-light));
} }

4
src/assets/css/blocks/site-foot.css
View file

@ -13,6 +13,6 @@
} }
.site-foot svg { .site-foot svg {
height: 1em; block-size: 1em;
width: 1em; inline-size: 1em;
} }

5
src/assets/css/blocks/site-logo.css
View file

@ -3,7 +3,8 @@
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-xs); gap: var(--space-2xs);
letter-spacing: -0.08rem; letter-spacing: var(--tracking-s);
padding: var(--space-xs) 0; padding: var(--space-xs) 0;
font-size: var(--size-step-1);
} }

12
src/assets/css/blocks/skip-link.css
View file

@ -1,10 +1,10 @@
.skip-link { .skip-link {
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
display: block; display: block;
height: 1px; block-size: 1px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
width: 1px; inline-size: 1px;
top: 1rem; top: 1rem;
left: 1rem; left: 1rem;
z-index: 999; z-index: 999;
@ -12,9 +12,9 @@
.skip-link:focus { .skip-link:focus {
clip: auto; clip: auto;
height: auto; block-size: auto;
overflow: visible; overflow: visible;
width: auto; inline-size: auto;
background-color: var(--color-dark); background-color: var(--color-dark);
color: var(--color-light); color: var(--color-light);
padding: var(--space-s-m); padding: var(--space-s-m);
@ -24,11 +24,11 @@
.skip-link:not(:focus) { .skip-link:not(:focus) {
border: 0; border: 0;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
height: auto; block-size: auto;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; inline-size: 1px;
white-space: nowrap; white-space: nowrap;
} }

14
src/assets/css/global/global-styles.css
View file

@ -38,13 +38,13 @@ h3 {
p, p,
li, li,
blockquote:not([class]) { blockquote:not([class]) {
max-width: 50ch; max-inline-size: 50ch;
} }
h1, h1,
h2, h2,
h3 { h3 {
max-width: 20ch; max-inline-size: 20ch;
} }
blockquote { blockquote {
@ -54,7 +54,7 @@ blockquote {
} }
blockquote > * + * { blockquote > * + * {
margin-top: var(--space-m-l); margin-block-start: var(--space-m-l);
} }
blockquote :last-child { blockquote :last-child {
@ -64,8 +64,8 @@ blockquote :last-child {
} }
svg { svg {
height: 2ex; block-size: 2ex;
width: auto; inline-size: auto;
flex: none; flex: none;
} }
@ -98,8 +98,8 @@ main:focus {
article [href^='http']:not([href*='eleventy-excellent.netlify.app'])::after { article [href^='http']:not([href*='eleventy-excellent.netlify.app'])::after {
display: inline-block; display: inline-block;
width: 1em; inline-size: 1em;
height: 1em; block-size: 1em;
background-image: url('/assets/images/icn-external.svg'); background-image: url('/assets/images/icn-external.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;

2
src/assets/css/global/reset.css
View file

@ -53,7 +53,7 @@ a:not([class]) {
/* Make images easier to work with */ /* Make images easier to work with */
img, img,
picture { picture {
max-width: 100%; max-inline-size: 100%;
display: block; display: block;
} }

2
src/assets/css/utilities/content.css
View file

@ -14,6 +14,6 @@
} }
.content .breakout { .content .breakout {
width: 100%; inline-size: 100%;
grid-column: 1 / 4; grid-column: 1 / 4;
} }

2
src/assets/css/utilities/flow.css
View file

@ -4,5 +4,5 @@ Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
*/ */
.flow > * + * { .flow > * + * {
margin-top: var(--flow-space, 1em); margin-block-start: var(--flow-space, 1em);
} }

4
src/assets/css/utilities/region.css
View file

@ -4,6 +4,6 @@
* Can either be configured by setting --region-space or use a default from the space scale * Can either be configured by setting --region-space or use a default from the space scale
*/ */
.region { .region {
padding-top: var(--region-space-top, var(--space-l-2xl)); padding-block-start: var(--region-space-top, var(--space-l-2xl));
padding-bottom: var(--region-space-bottom, var(--space-l-2xl)); padding-block-end: var(--region-space-bottom, var(--space-l-2xl));
} }

8
src/assets/css/utilities/wrapper.css
View file

@ -5,10 +5,8 @@
* Info: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/ * Info: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
*/ */
.wrapper { .wrapper {
max-width: var(--wrapper-max-width, 85rem); max-inline-size: var(--wrapper-max-width, 85rem);
margin-left: auto; margin-inline: auto;
margin-right: auto; padding-inline: var(--gutter);
padding-left: var(--gutter);
padding-right: var(--gutter);
/* position: relative; */ /* position: relative; */
} }

25
src/assets/design-tokens/spacing.json
View file

@ -5,6 +5,11 @@
"scaleGenerator": "https://utopia.fyi/space/calculator?c=320,16,1.2,1350,20,1.414,8,1,&s=0.75|0.5|0.25,2|3|5|8|13,s-l" "scaleGenerator": "https://utopia.fyi/space/calculator?c=320,16,1.2,1350,20,1.414,8,1,&s=0.75|0.5|0.25,2|3|5|8|13,s-l"
}, },
"items": [ "items": [
{
"name": "2XS",
"min": 8,
"max": 10
},
{ {
"name": "XS", "name": "XS",
"min": 12, "min": 12,
@ -17,28 +22,28 @@
}, },
{ {
"name": "M", "name": "M",
"min": 24,
"max": 30
},
{
"name": "L",
"min": 32, "min": 32,
"max": 40 "max": 40
}, },
{ {
"name": "XL", "name": "L",
"min": 48, "min": 48,
"max": 60 "max": 60
}, },
{
"name": "XL",
"min": 80,
"max": 100
},
{ {
"name": "2XL", "name": "2XL",
"min": 64, "min": 128,
"max": 80 "max": 160
}, },
{ {
"name": "3XL", "name": "3XL",
"min": 96, "min": 208,
"max": 120 "max": 260
}, },
{ {
"name": "XS - S", "name": "XS - S",

7
src/assets/design-tokens/text-sizes.json
View file

@ -5,6 +5,11 @@
"scaleGenerator": "https://utopia.fyi/type/calculator/?c=320,16,1.2,1350,20,1.414,8,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l" "scaleGenerator": "https://utopia.fyi/type/calculator/?c=320,16,1.2,1350,20,1.414,8,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l"
}, },
"items": [ "items": [
{
"name": "Step min 1",
"min": 13,
"max": 14
},
{ {
"name": "Step 0", "name": "Step 0",
"min": 16, "min": 16,
@ -13,7 +18,7 @@
{ {
"name": "Step 1", "name": "Step 1",
"min": 19, "min": 19,
"max": 26 "max": 28
}, },
{ {
"name": "Step 2", "name": "Step 2",