dave-dmg/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added contextual navigation palette

Browse Source
This commit is contained in:
Dave
2026-02-28 10:24:43 +01:00
parent ee099346db
commit b8544011d4
16 changed files with 871 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/styles/mixins/containers.css
View File

@@ -11,8 +11,9 @@
@define-mixin layout-wrapper {
@mixin mx auto;
@mixin px var(--spacing-comfortable);
width: 100%;
max-width: var(--layout-max-width);
max-width: var(--ui-layout-width);
@media screen and (--max-layout) {
@mixin px var(--spacing-comfortable);

73
src/styles/mixins/typography.css Normal file
View File

@@ -0,0 +1,73 @@
@define-mixin heading-1 {
@mixin mt var(--el-h1-vspace-top);
@mixin mb var(--el-h1-vspace-bottom);
@mixin pb var(--spacing-snug);
font-family: var(--el-h1-font-family);
font-size: var(--el-h1-font-size);
font-weight: 400;
line-height: var(--el-h1-leading);
color: var(--el-h1-color);
text-transform: uppercase;
letter-spacing: -0.0137em;
}
@define-mixin heading-2 {
@mixin mt var(--el-h2-vspace-top);
@mixin mb var(--el-h2-vspace-bottom);
font-family: var(--el-h2-font-family);
font-size: var(--el-h2-font-size);
font-weight: 900;
line-height: var(--el-h2-leading);
text-transform: uppercase;
letter-spacing: -0.0096em;
}
@define-mixin heading-3 {
@mixin mt var(--el-h3-vspace-top);
@mixin mb var(--el-h3-vspace-bottom);
font-family: var(--el-h3-font-family);
font-size: var(--el-h3-font-size);
font-weight: 800;
line-height: var(--el-h3-leading);
text-transform: uppercase;
letter-spacing: -0.004em;
}
@define-mixin heading-4 {
@mixin mt var(--el-h4-vspace-top);
@mixin mb var(--el-h4-vspace-bottom);
font-family: var(--el-h4-font-family);
font-size: var(--el-h4-font-size);
font-weight: 800;
line-height: var(--el-h4-leading);
text-transform: uppercase;
letter-spacing: 0.0025em;
}
@define-mixin heading-5 {
@mixin mt var(--el-h5-vspace-top);
@mixin mb var(--el-h5-vspace-bottom);
font-family: var(--el-h5-font-family);
font-size: var(--el-h5-font-size);
font-weight: 800;
line-height: var(--el-h5-leading);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@define-mixin heading-6 {
@mixin mt var(--el-h6-vspace-top);
@mixin mb var(--el-h6-vspace-bottom);
font-family: var(--el-h6-font-family);
font-size: var(--el-h6-font-size);
font-weight: 900;
line-height: var(--el-h6-leading);
text-transform: uppercase;
letter-spacing: 0.035em;
}