Add CSS files to src/assets/css/src

src/assets/css/src/0.0.reset.css

@@ -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;
+}

src/assets/css/src/0.1.fonts.css

@@ -0,0 +1,4 @@
+/* FONTS */
+
+/* Font sans */
+@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400..500&display=swap');

src/assets/css/src/0.2.variables.css

@@ -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;
+}

src/assets/css/src/1.0.global.css

@@ -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);
+}

src/assets/css/src/1.1.compositions.auto-grid.css

@@ -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);
+}

src/assets/css/src/1.2.compositions.grid.css

@@ -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);
+  }
+
+}

src/assets/css/src/1.3.compositions.cluster.css

@@ -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)));
+}

src/assets/css/src/2.blocks.button.css

@@ -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 {
+  
+}

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

@@ -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);
+}

src/assets/css/src/2.blocks.header.css

@@ -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);
+}
+

src/assets/css/src/2.blocks.menu.css

@@ -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);
+}

src/assets/css/src/2.blocks.pill.css

@@ -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);
+}
+

src/assets/css/src/2.blocks.skip-link.css

@@ -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;
+}

src/assets/css/src/3.utilities.border.css

@@ -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) }

src/assets/css/src/3.utilities.flow.css

@@ -0,0 +1,6 @@
+/* FLOW UTILITY */
+/* Info: https://web.dev/design-system/css-utilities/#flow */
+
+.flow > * + * {
+  margin-top: var(--flow-space);
+}

src/assets/css/src/3.utilities.overflow.css

@@ -0,0 +1,5 @@
+/* OVERFLOW UTILITY */
+
+.overflow-y-hidden {
+  overflow-y: hidden !important;
+}

src/assets/css/src/3.utilities.screen-readers.css

@@ -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;
+}

src/assets/css/src/3.utilities.size.css

@@ -0,0 +1,12 @@
+/* SIZE UTILITY */
+
+.h-full {
+	height: 100%;
+}
+.min-h-screen {
+	min-height: 100vh;
+	min-height: 100dvh;
+}
+.w-full {
+	width: 100%;
+}

src/assets/css/src/3.utilities.spacing.css

@@ -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) }

src/assets/css/src/3.utilities.text.css

@@ -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;
+}