TheThomaas/11ty-resume
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Move utilities to their own css file

Browse source
This commit is contained in:
TheThomaas 2025-05-04 21:41:20 +02:00
parent 0d41066292
commit 9fd9dbc14a
3 changed files with 93 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/_includes/layouts/base.html
View file

@ -7,6 +7,7 @@
{% include "css/reset.css" %} {% include "css/reset.css" %}
{% include "css/theme.css" %} {% include "css/theme.css" %}
{% include "css/variables.css" %} {% include "css/variables.css" %}
{% include "css/utilities.css" %}
{% include "css/main.css" %} {% include "css/main.css" %}
{% include "css/components/button.css" %} {% include "css/components/button.css" %}

94
src/css/main.css
View file

@ -12,100 +12,6 @@
fill: currentColor; fill: currentColor;
} }
/* Utilities */
.wrapper,
.wrapper-full {
grid-template-columns: 1fr min(
var(--wrapper-max-length, var(--line-length)),
100% - var(--wrapper-gap, var(--gutter)) * 2
) 1fr;
grid-column-gap: var(--wrapper-gap, var(--gutter));
display: grid;
}
.wrapper > *,
.wrapper-full > * {
grid-column: 2;
}
.wrapper-full {
grid-template-columns: 1fr min(
var(--wrapper-max-length, var(--line-length-large)),
100% - var(--wrapper-gap, var(--gutter)) * 2
) 1fr;
}
.full-bleed {
inline-size: 100%;
padding: var(--padding-block, 1rem) var(--padding-inline, 2rem);
background-color: var(--background-color, none);
grid-column: 1/-1;
}
.flex {
display: inline-flex;
}
.flex-col {
flex-direction: column;
}
.justify-around {
justify-content: space-around;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.sr-only {
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
block-size: 1px !important;
inline-size: 1px !important;
margin: -1px !important;
padding: 0 !important;
position: absolute !important;
overflow: hidden !important;
}
.invisible {
visibility: hidden !important;
}
.list-inline {
margin-left: calc(var(--item-gap, 1ch) * 3 * -1);
clip-path: inset(0 0 0 calc(var(--item-gap, 1ch) * 3));
color: var(--item-color, var(--text));
flex-wrap: wrap;
align-items: center;
padding-left: 0;
list-style: none;
display: flex;
}
.list-inline li {
padding-left: var(--item-gap, 1ch);
}
.list-inline li:before {
content: var(--item-separator, "•");
margin-right: var(--item-gap, 1ch);
width: var(--item-gap, 1ch);
text-align: center;
display: inline-block;
}
.list-inline a {
color: var(--item-color, var(--text));
text-decoration: none;
transition: all 0.2s;
}
.list-inline a:hover {
text-decoration: underline;
}
/* Focus */
* {
outline-offset: 2px;
outline-width: 2px;
outline-color: #0a76f6;
}
:focus:focus-visible {
outline-style: solid;
}
/* Other */ /* Other */
*, *,
:before, :before,

92
src/css/utilities.css Normal file
View file

@ -0,0 +1,92 @@
.wrapper,
.wrapper-full {
grid-template-columns: 1fr min(
var(--wrapper-max-length, var(--line-length)),
100% - var(--wrapper-gap, var(--gutter)) * 2
) 1fr;
grid-column-gap: var(--wrapper-gap, var(--gutter));
display: grid;
}
.wrapper > *,
.wrapper-full > * {
grid-column: 2;
}
.wrapper-full {
grid-template-columns: 1fr min(
var(--wrapper-max-length, var(--line-length-large)),
100% - var(--wrapper-gap, var(--gutter)) * 2
) 1fr;
}
.full-bleed {
inline-size: 100%;
padding: var(--padding-block, 1rem) var(--padding-inline, 2rem);
background-color: var(--background-color, none);
grid-column: 1/-1;
}
.flex {
display: inline-flex;
}
.flex-col {
flex-direction: column;
}
.justify-around {
justify-content: space-around;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.sr-only {
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
block-size: 1px !important;
inline-size: 1px !important;
margin: -1px !important;
padding: 0 !important;
position: absolute !important;
overflow: hidden !important;
}
.invisible {
visibility: hidden !important;
}
.list-inline {
margin-left: calc(var(--item-gap, 1ch) * 3 * -1);
clip-path: inset(0 0 0 calc(var(--item-gap, 1ch) * 3));
color: var(--item-color, var(--text));
flex-wrap: wrap;
align-items: center;
padding-left: 0;
list-style: none;
display: flex;
}
.list-inline li {
padding-left: var(--item-gap, 1ch);
}
.list-inline li:before {
content: var(--item-separator, "•");
margin-right: var(--item-gap, 1ch);
width: var(--item-gap, 1ch);
text-align: center;
display: inline-block;
}
.list-inline a {
color: var(--item-color, var(--text));
text-decoration: none;
transition: all 0.2s;
}
.list-inline a:hover {
text-decoration: underline;
}
/* Focus */
* {
outline-offset: 2px;
outline-width: 2px;
outline-color: #0a76f6;
}
:focus:focus-visible {
outline-style: solid;
}