Add CSS files to src/assets/css/src
This commit is contained in:
parent
93b0c13ac3
commit
b419bccae1
20 changed files with 946 additions and 0 deletions
83
src/assets/css/src/0.0.reset.css
Executable file
83
src/assets/css/src/0.0.reset.css
Executable file
|
|
@ -0,0 +1,83 @@
|
|||
/* RESET */
|
||||
/* Modified version of Modern CSS Reset by Piccalilli https://piccalil.li/blog/a-more-modern-css-reset/ */
|
||||
|
||||
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Prevent font size inflation */
|
||||
html {
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* Remove default margin in favour of better control in authored CSS */
|
||||
body, h1, h2, h3, h4, p,
|
||||
figure, blockquote, dl, dd {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Set shorter line heights on headings and interactive elements */
|
||||
h1, h2, h3, h4,
|
||||
button, input, label {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Balance text wrapping on headings */
|
||||
h1, h2,
|
||||
h3, h4 {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input, button,
|
||||
textarea, select {
|
||||
-webkit-appareance: none;
|
||||
appearance: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Make sure textareas without a rows attribute are not tiny */
|
||||
textarea:not([rows]) {
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
/* Anything that has been anchored to should have extra scroll margin */
|
||||
:target {
|
||||
scroll-margin-block: 5ex;
|
||||
}
|
||||
4
src/assets/css/src/0.1.fonts.css
Normal file
4
src/assets/css/src/0.1.fonts.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/* FONTS */
|
||||
|
||||
/* Font sans */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400..500&display=swap');
|
||||
79
src/assets/css/src/0.2.variables.css
Executable file
79
src/assets/css/src/0.2.variables.css
Executable file
|
|
@ -0,0 +1,79 @@
|
|||
/* CSS VARIABLES */
|
||||
|
||||
:root {
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: "Cera Pro", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--font-serif: "Vollkorn", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
/* Colors */
|
||||
--color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */
|
||||
--color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */
|
||||
--color-white: var(--color-white-100); /* White */
|
||||
--color-grey-50: hsla(0, 0%, 95%, 1); /* Light Grey */
|
||||
--color-grey-200: hsla(0, 0%, 85%, 1); /* Grey - 01 */
|
||||
--color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
|
||||
--color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
|
||||
--color-black: hsla(0, 0%, 10%, 1); /* Black */
|
||||
--color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */
|
||||
--color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */
|
||||
--color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */
|
||||
--color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */
|
||||
--color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */
|
||||
--color-primary: var(--color-primary-100); /* Focus */
|
||||
--color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
|
||||
--color-brand: var(--color-brand-100); /* Brand */
|
||||
--color-background: var(--color-white);
|
||||
--color-text: var(--color-black);
|
||||
--color-focus-ring: var(--color-primary-100);
|
||||
--color-disabled: var(--color-grey-400);
|
||||
|
||||
/* Space scale */
|
||||
--space: .275em; /* typographic space */
|
||||
--space-xs: .25rem; /* 4px */
|
||||
--space-sm: .5rem; /* 8px */
|
||||
--space-md: .75rem; /* 12px */
|
||||
--space-lg: 1rem; /* 16px */
|
||||
--space-xl: 1.5rem; /* 24px */
|
||||
--space-2xl: 2rem; /* 32px */
|
||||
|
||||
/* Type scale */
|
||||
--text-sm: 0.75rem; /* 12px */
|
||||
--text-md: 0.875rem; /* 14px */
|
||||
--text-lg: 0.9375rem; /* 16px */
|
||||
--text-xl: 1.5rem; /* 24px */
|
||||
|
||||
/* Leading */
|
||||
--leading-none: 1;
|
||||
--leading-sm: 1.25;
|
||||
--leading-md: 1.4285714286; /* 20/14 */
|
||||
--leading-lg: 1.5; /* 24/16 */
|
||||
|
||||
/* Tracking */
|
||||
--tracking-wide: 0.01em;
|
||||
|
||||
/* Layout */
|
||||
--gutter: 32px;
|
||||
--header-height: 3.5rem; /* 56px */
|
||||
--sidebar-width: 22.25rem; /* 356px */
|
||||
--flow-space: 1rem;
|
||||
--auto-grid-placement: auto-fill;
|
||||
--gap: var(--space-lg);
|
||||
|
||||
/* Borders */
|
||||
--rounded-xs: 1px;
|
||||
--rounded-sm: 4px;
|
||||
--rounded-md: 12px;
|
||||
--rounded-lg: 20px;
|
||||
--rounded-full: 9999px;
|
||||
--border-width: 1px;
|
||||
--border-color: var(--color-black);
|
||||
--border: var(--border-width) solid var(--border-color);
|
||||
|
||||
/* Prose */
|
||||
--max-width: 64ch;
|
||||
|
||||
/* Transitions */
|
||||
--timing: 200ms;
|
||||
--easing: ease;
|
||||
}
|
||||
273
src/assets/css/src/1.0.global.css
Normal file
273
src/assets/css/src/1.0.global.css
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
/* GLOBAL CSS */
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
font: var(--text-md)/var(--leading-md) var(--font-sans);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-rendering: optimizeSpeed;
|
||||
font-variant-ligatures: common-ligatures;
|
||||
-moz-font-feature-settings: "liga", "clig";
|
||||
-webkit-font-feature-settings: "liga", "clig";
|
||||
font-feature-settings: "liga", "clig";
|
||||
background-color: var(--color-grey-50);
|
||||
color: var(--color-text, black);
|
||||
padding: 2rem var(--gutter);
|
||||
}
|
||||
|
||||
/* If an element is [hidden] it needs to be max priority */
|
||||
.hidden, [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* Disabled state */
|
||||
.disabled, [disabled] {
|
||||
opacity: var(--alpha);
|
||||
}
|
||||
|
||||
/* Placeholder */
|
||||
::placeholder {
|
||||
font: inherit;
|
||||
color: rgba(0, 0, 0, .54);
|
||||
}
|
||||
|
||||
|
||||
/* Main */
|
||||
main {
|
||||
position: relative;
|
||||
border-top: var(--border);
|
||||
padding-top: var(--space-md);
|
||||
}
|
||||
|
||||
|
||||
/* Headings */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: var(--text-md);
|
||||
font-weight: 400;
|
||||
text-wrap: balance;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 > a,
|
||||
h2 > a,
|
||||
h3 > a,
|
||||
h4 > a,
|
||||
h5 > a,
|
||||
h6 > a {
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
*:not(.sr-only) + h2,
|
||||
*:not(.sr-only) + h3 {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
|
||||
/* General typesetting */
|
||||
|
||||
p {
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
|
||||
/* Lists */
|
||||
|
||||
ul:not([class]),
|
||||
ol:not([class]) {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Blockquotes */
|
||||
|
||||
blockquote {
|
||||
padding-left: 0;
|
||||
}
|
||||
blockquote > * {
|
||||
padding-left: var(--space-md);
|
||||
}
|
||||
|
||||
|
||||
/* Separators */
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: var(--border);
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
hr,
|
||||
hr + * {
|
||||
--flow-space: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Sub and sup */
|
||||
sub,
|
||||
sup {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
sub {
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
sup {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1ex;
|
||||
}
|
||||
|
||||
|
||||
/* Details */
|
||||
|
||||
summary {
|
||||
-webkit-appearance: none;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
summary::-webkit-details-marker,
|
||||
summary::marker {
|
||||
display: none;
|
||||
content: "";
|
||||
}
|
||||
summary::before {
|
||||
content: '+';
|
||||
margin-right: var(--space);
|
||||
}
|
||||
summary + p {
|
||||
margin-top: 0;
|
||||
}
|
||||
summary + .gallery,
|
||||
summary + figure {
|
||||
margin-top: .5em;
|
||||
}
|
||||
details > *:last-child {
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
details[open] > summary::before {
|
||||
content: '−';
|
||||
}
|
||||
|
||||
|
||||
/* Media */
|
||||
|
||||
figure {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
figcaption {
|
||||
font-size: var(--text-md);
|
||||
margin: .16666667em 0;
|
||||
position: relative;
|
||||
}
|
||||
figcaption::before {
|
||||
float: right;
|
||||
margin-left: var(--gap);
|
||||
}
|
||||
figure + p {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
video {
|
||||
background-color: var(--color-gray);
|
||||
max-width: 100%;
|
||||
border-radius: var(--rounded-md);
|
||||
}
|
||||
|
||||
/* Selects images that are likely to have a transparent BG and applies a */
|
||||
/* theme-driven mask to them */
|
||||
img[src$='.svg'],
|
||||
img[src$='.png'] {
|
||||
background-color: transparent;
|
||||
}
|
||||
img {
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[data-ratio="auto"] img {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: currentColor;
|
||||
}
|
||||
a:hover {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
a.link-full::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
transition: outline var(--timing) var(--easing);
|
||||
}
|
||||
a.link-full:focus-visible {
|
||||
outline-width: 0;
|
||||
}
|
||||
a.link-full:focus-visible::after {
|
||||
outline: none;
|
||||
outline-offset: 2px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/* Form, Input, Buttons */
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
input {
|
||||
font: inherit;
|
||||
max-height: 1.125rem; /* 18px */
|
||||
}
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* General interactive states */
|
||||
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
text-decoration: underline;
|
||||
outline-offset: 0;
|
||||
color: var(--color-background) !important;
|
||||
background: var(--color-text);
|
||||
}
|
||||
input:focus-visible {
|
||||
text-decoration: none;
|
||||
color: var(--color-text) !important;
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
|
||||
/* High contrast selection style */
|
||||
::selection {
|
||||
background: var(--color-grey);
|
||||
}
|
||||
13
src/assets/css/src/1.1.compositions.auto-grid.css
Normal file
13
src/assets/css/src/1.1.compositions.auto-grid.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* AUTO-GRID COMPOSITION */
|
||||
|
||||
.auto-grid {
|
||||
--column-gap: var(--gap);
|
||||
--row-gap: var(--gap);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
var(--auto-grid-placement, auto-fill),
|
||||
minmax(var(--min, 50%), 1fr)
|
||||
);
|
||||
grid-gap: var(--row-gap) var(--column-gap);
|
||||
gap: var(--row-gap) var(--column-gap);
|
||||
}
|
||||
55
src/assets/css/src/1.2.compositions.grid.css
Normal file
55
src/assets/css/src/1.2.compositions.grid.css
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/* LAYOUT GRID */
|
||||
|
||||
.grid {
|
||||
--gap: var(--gutter);
|
||||
--column-gap: var(--gap);
|
||||
--row-gap: var(--gap);
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-gap: var(--column-gap) var(--row-gap);
|
||||
gap: var(--column-gap) var(--row-gap);
|
||||
grid-template-columns: 1fr;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid > .column {
|
||||
margin-bottom: var(--gap);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: var(--justify-content, flex-start);
|
||||
align-items: var(--align-items, baseline);
|
||||
}
|
||||
|
||||
@media (min-width: 35rem) { /* >= 560px */
|
||||
|
||||
.grid {
|
||||
-ms-grid-columns: repeat(6, 1fr);
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
.grid > .column {
|
||||
-ms-grid-column: span 6;
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
||||
.grid > .column[style*="--columns:3"] {
|
||||
-ms-grid-column: span 3;
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 67.5rem) { /* >= 1080px */
|
||||
|
||||
.grid {
|
||||
-ms-grid-columns: repeat(12, 1fr);
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
.grid > .column {
|
||||
-ms-grid-column: span var(--columns);
|
||||
grid-column: span var(--columns);
|
||||
}
|
||||
|
||||
}
|
||||
11
src/assets/css/src/1.3.compositions.cluster.css
Normal file
11
src/assets/css/src/1.3.compositions.cluster.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* CLUSTER COMPOSITION */
|
||||
|
||||
.cluster {
|
||||
display: flex;
|
||||
flex-direction: var(--direction, row);
|
||||
flex-wrap: var(--wrap, wrap);
|
||||
align-items: var(--vertical-alignment, center);
|
||||
justify-content: var(--horizontal-alignment, flex-start);
|
||||
column-gap: var(--column-gap, var(--gutter, var(--space-sm)));
|
||||
row-gap: var(--row-gap, var(--gutter, var(--space-sm)));
|
||||
}
|
||||
49
src/assets/css/src/2.blocks.button.css
Normal file
49
src/assets/css/src/2.blocks.button.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/* BUTTON BLOCK */
|
||||
|
||||
.btn {
|
||||
--background: var(--color-primary-100);
|
||||
--color: var(--color-white);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: var(--text-md);
|
||||
line-height: var(--leading-md);
|
||||
font-weight: 500;
|
||||
border-radius: var(--rounded-md);
|
||||
cursor: pointer;
|
||||
background-color: var(--background, var(--color-primary-100));
|
||||
color: var(--color, var(--color-white));
|
||||
}
|
||||
|
||||
.btn--secondary {
|
||||
--background: var(--color-primary-10);
|
||||
--color: var(--color-primary-100);
|
||||
}
|
||||
.btn--black {
|
||||
--background: var(--color-black);
|
||||
--color: var(--color-white);
|
||||
}
|
||||
.btn--white {
|
||||
--background: var(--color-white);
|
||||
--color: var(--color-grey-700);
|
||||
}
|
||||
.btn--white-10 {
|
||||
--background: var(--color-white-10);
|
||||
--color: var(--color-white);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
|
||||
}
|
||||
29
src/assets/css/src/2.blocks.card.css
Normal file
29
src/assets/css/src/2.blocks.card.css
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/* CARD BLOCK */
|
||||
|
||||
.card {
|
||||
--padding: clamp(1.5rem, 0.5rem + 5vw, 5rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
.card header {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.card__title > a {
|
||||
font: inherit;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.card__date {
|
||||
position: absolute;
|
||||
bottom: var(--padding);
|
||||
right: var(--padding);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
11
src/assets/css/src/2.blocks.header.css
Normal file
11
src/assets/css/src/2.blocks.header.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* HEADER BLOCK */
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-height: var(--header-height);
|
||||
padding: 0 var(--gutter);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
47
src/assets/css/src/2.blocks.menu.css
Normal file
47
src/assets/css/src/2.blocks.menu.css
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
/* MENU BLOCK */
|
||||
|
||||
/* Button */
|
||||
|
||||
button[aria-controls="menu"] {
|
||||
padding: 10px;
|
||||
}
|
||||
button[aria-controls="menu"][aria-expanded="true"] {
|
||||
padding: 18px;
|
||||
}
|
||||
button[aria-controls="menu"][aria-expanded="false"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
/* Menu */
|
||||
|
||||
#menu {
|
||||
--flow-space: var(--space-2xl);
|
||||
--direction: column;
|
||||
--vertical-alignment: flex-start;
|
||||
padding: var(--gap);
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
#menu nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
--direction: column;
|
||||
--vertical-alignment: flex-start;
|
||||
--row-gap: var(--space-xs);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#menu li {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 2.5rem; /* 40px */
|
||||
max-height: 2.75rem; /* 44px */
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
}
|
||||
|
||||
#menu .active {
|
||||
background-color: var(--color-grey-50);
|
||||
}
|
||||
24
src/assets/css/src/2.blocks.pill.css
Normal file
24
src/assets/css/src/2.blocks.pill.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
/* PILL BLOCK */
|
||||
|
||||
.pill {
|
||||
--background: var(--color-primary-100);
|
||||
--color: var(--color-white);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: var(--text-md);
|
||||
font-weight: 500;
|
||||
border-radius: var(--rounded-full);
|
||||
background-color: var(--background, var(--color-primary-100));
|
||||
color: var(--color, var(--color-white));
|
||||
}
|
||||
|
||||
.pill--secondary {
|
||||
--background: var(--color-primary-10);
|
||||
--color: var(--color-primary-100);
|
||||
}
|
||||
|
||||
34
src/assets/css/src/2.blocks.skip-link.css
Normal file
34
src/assets/css/src/2.blocks.skip-link.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/* SKIP-LINK BLOCK */
|
||||
|
||||
/* The skip link is visually hidden when it is not focused. */
|
||||
/* It exists so when a user hits tab on load, they can quickly */
|
||||
/* skip to the main content of the site—avoiding navigation etc */
|
||||
.skip-link {
|
||||
z-index: 9999;
|
||||
display: inline-block;
|
||||
width: max-content;
|
||||
max-width: 10rem;
|
||||
right: var(--gutter);
|
||||
width: auto;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.skip-link:focus,
|
||||
.skip-link:focus-visible {
|
||||
background: var(--color-text);
|
||||
color: var(--color-background) !important;
|
||||
}
|
||||
|
||||
.skip-link:not(:focus) {
|
||||
/* @extend .visually-hidden */
|
||||
border: 0;
|
||||
clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
|
||||
height: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
17
src/assets/css/src/3.utilities.border.css
Normal file
17
src/assets/css/src/3.utilities.border.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/* BORDER UTILITY */
|
||||
|
||||
/* Borders */
|
||||
|
||||
.border-t { border-top: var(--border) }
|
||||
.border-b { border-bottom: var(--border) }
|
||||
.border-l { border-left: var(--border) }
|
||||
.border-r { border-right: var(--border) }
|
||||
.border { border: var(--border) }
|
||||
|
||||
/* Border radius */
|
||||
|
||||
.rounded-xs { border-radius: var(--rounded-xs) }
|
||||
.rounded-sm { border-radius: var(--rounded-sm) }
|
||||
.rounded-md { border-radius: var(--rounded-md) }
|
||||
.rounded-lg { border-radius: var(--rounded-lg) }
|
||||
.rounded-full { border-radius: var(--rounded-gull) }
|
||||
6
src/assets/css/src/3.utilities.flow.css
Normal file
6
src/assets/css/src/3.utilities.flow.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/* FLOW UTILITY */
|
||||
/* Info: https://web.dev/design-system/css-utilities/#flow */
|
||||
|
||||
.flow > * + * {
|
||||
margin-top: var(--flow-space);
|
||||
}
|
||||
5
src/assets/css/src/3.utilities.overflow.css
Normal file
5
src/assets/css/src/3.utilities.overflow.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/* OVERFLOW UTILITY */
|
||||
|
||||
.overflow-y-hidden {
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
13
src/assets/css/src/3.utilities.screen-readers.css
Normal file
13
src/assets/css/src/3.utilities.screen-readers.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* SCREEN READERS */
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
|
||||
height: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
12
src/assets/css/src/3.utilities.size.css
Normal file
12
src/assets/css/src/3.utilities.size.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/* SIZE UTILITY */
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
84
src/assets/css/src/3.utilities.spacing.css
Normal file
84
src/assets/css/src/3.utilities.spacing.css
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/* SPACING UTILITY */
|
||||
|
||||
/* Margins */
|
||||
|
||||
.m-0 { margin: 0 }
|
||||
|
||||
.mb-0 { margin-bottom: 0 }
|
||||
.mb-xs { margin-bottom: var(--space-xs) }
|
||||
.mb-sm { margin-bottom: var(--space-sm) }
|
||||
.mb-md { margin-bottom: var(--space-md) }
|
||||
.mb-lg { margin-bottom: var(--space-lg) }
|
||||
.mb-xl { margin-bottom: var(--space-xl) }
|
||||
.mb-2xl { margin-bottom: var(--space-2xl) }
|
||||
|
||||
.ml-auto { margin-left: auto }
|
||||
.ml-xs { margin-left: var(--space-xs) }
|
||||
.ml-sm { margin-left: var(--space-sm) }
|
||||
.ml-md { margin-left: var(--space-md) }
|
||||
.ml-lg { margin-left: var(--space-lg) }
|
||||
.ml-xl { margin-left: var(--space-xl) }
|
||||
|
||||
.mr-auto { margin-right: auto }
|
||||
.mr-xs { margin-right: var(--space-xs) }
|
||||
.mr-sm { margin-right: var(--space-sm) }
|
||||
.mr-md { margin-right: var(--space-md) }
|
||||
.mr-lg { margin-right: var(--space-lg) }
|
||||
.mr-xl { margin-right: var(--space-xl) }
|
||||
|
||||
.-mt-px { margin-top: -1px }
|
||||
.mt-0 { margin-top: 0 }
|
||||
.mt-xs { margin-top: var(--space-xs) }
|
||||
.mt-sm { margin-top: var(--space-sm) }
|
||||
.mt-md { margin-top: var(--space-md) }
|
||||
.mt-lg { margin-top: var(--space-lg) }
|
||||
.mt-xl { margin-top: var(--space-xl) }
|
||||
.mt-2xl { margin-top: var(--space-2xl) }
|
||||
|
||||
.mx-px { margin-left: 1px ; margin-right: 1px }
|
||||
.mx-xs { margin-left: var(--space-xs) ; margin-right: var(--space-xs) }
|
||||
.mx-sm { margin-left: var(--space-sm) ; margin-right: var(--space-sm) }
|
||||
.mx-md { margin-left: var(--space-md) ; margin-right: var(--space-md) }
|
||||
.mx-lg { margin-left: var(--space-lg) ; margin-right: var(--space-lg) }
|
||||
.mx-xl { margin-left: var(--space-xl) ; margin-right: var(--space-xl) }
|
||||
.mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl) }
|
||||
|
||||
.my-xs { margin-top: var(--space-xs) ; margin-bottom: var(--space-xs) }
|
||||
.my-sm { margin-top: var(--space-sm) ; margin-bottom: var(--space-sm) }
|
||||
.my-md { margin-top: var(--space-md) ; margin-bottom: var(--space-md) }
|
||||
.my-lg { margin-top: var(--space-lg) ; margin-bottom: var(--space-lg) }
|
||||
.my-xl { margin-top: var(--space-xl) ; margin-bottom: var(--space-xl) }
|
||||
.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl) }
|
||||
|
||||
|
||||
/* Padding */
|
||||
|
||||
.pl-0 { padding-left: 0 }
|
||||
|
||||
.pt-xs { padding-top: var(--space-xs) }
|
||||
.pt-sm { padding-top: var(--space-sm) }
|
||||
.pt-md { padding-top: var(--space-md) }
|
||||
.pt-lg { padding-top: var(--space-lg) }
|
||||
.pt-xl { padding-top: var(--space-xl) }
|
||||
.pt-2xl { padding-top: var(--space-2xl) }
|
||||
|
||||
.pb-xs { padding-bottom: var(--space-xs) }
|
||||
.pb-sm { padding-bottom: var(--space-sm) }
|
||||
.pb-md { padding-bottom: var(--space-md) }
|
||||
.pb-lg { padding-bottom: var(--space-lg) }
|
||||
.pb-xl { padding-bottom: var(--space-xl) }
|
||||
.pb-2xl { padding-bottom: var(--space-2xl) }
|
||||
|
||||
.px-xs { padding-left: var(--space-xs) ; padding-right: var(--space-xs) }
|
||||
.px-sm { padding-left: var(--space-sm) ; padding-right: var(--space-sm) }
|
||||
.px-md { padding-left: var(--space-md) ; padding-right: var(--space-md) }
|
||||
.px-lg { padding-left: var(--space-lg) ; padding-right: var(--space-lg) }
|
||||
.px-xl { padding-left: var(--space-xl) ; padding-right: var(--space-xl) }
|
||||
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl) }
|
||||
|
||||
.py-xs { padding-top: var(--space-xs) ; padding-bottom: var(--space-xs) }
|
||||
.py-sm { padding-top: var(--space-sm) ; padding-bottom: var(--space-sm) }
|
||||
.py-md { padding-top: var(--space-md) ; padding-bottom: var(--space-md) }
|
||||
.py-lg { padding-top: var(--space-lg) ; padding-bottom: var(--space-lg) }
|
||||
.py-xl { padding-top: var(--space-xl) ; padding-bottom: var(--space-xl) }
|
||||
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl) }
|
||||
97
src/assets/css/src/3.utilities.text.css
Normal file
97
src/assets/css/src/3.utilities.text.css
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/* TEXT UTILITY */
|
||||
|
||||
/* Font family*/
|
||||
|
||||
.font-serif {
|
||||
font-family: var(--font-serif);
|
||||
font-optical-sizing: auto;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/* Fonts weights */
|
||||
|
||||
.font-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
/* Font sizes */
|
||||
|
||||
.text-sm {
|
||||
font-size: 1rem;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5; /* 24px */
|
||||
}
|
||||
.text-md {
|
||||
font-size: var(--text-md);
|
||||
line-height: 1.4285714286; /* 20px */
|
||||
}
|
||||
.text-lg {
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.5; /* 24px */
|
||||
}
|
||||
.text-xl {
|
||||
font-size: var(--text-xl);
|
||||
line-height: 1.111;
|
||||
}
|
||||
|
||||
|
||||
/* Case */
|
||||
|
||||
.uppercase {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 1.333;
|
||||
letter-spacing: 0.3rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
/* Text align */
|
||||
|
||||
.text-right { text-align: right }
|
||||
.text-center { text-align: center }
|
||||
|
||||
|
||||
|
||||
/* Text colors */
|
||||
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.text-grey-200 {
|
||||
color: var(--color-grey-200);
|
||||
}
|
||||
.text-grey-400 {
|
||||
color: var(--color-grey-400);
|
||||
}
|
||||
.text-grey-700 {
|
||||
color: var(--color-grey-700);
|
||||
}
|
||||
.text-background {
|
||||
color: var(--color-background);
|
||||
}
|
||||
.text-transparent {
|
||||
color: transparent;
|
||||
}
|
||||
.text-brand-100 {
|
||||
color: var(--color-brand-100);
|
||||
}
|
||||
|
||||
|
||||
/* User select */
|
||||
|
||||
.select-none {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* Underline */
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue