feat: move all css to includes dir

src/includes/css/utilities/flex.css

@@ -0,0 +1,36 @@
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-1 {
+  flex: 1;
+}

src/includes/css/utilities/flow.css

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

src/includes/css/utilities/fonts.css

@@ -0,0 +1,39 @@
+.font-size-s {
+  font-size: 0.8rem;
+}
+
+.font-size-m {
+  font-size: 1.125rem;
+}
+
+.font-size-l {
+  font-size: 1.5rem;
+}
+
+.font-size-xl {
+  font-size: 2rem;
+}
+
+.font-size-2xl {
+  font-size: 3rem;
+}
+
+.line-height-s {
+  line-height: 0.8rem;
+}
+
+.line-height-m {
+  line-height: 1.125rem;
+}
+
+.line-height-l {
+  line-height: 1.5rem;
+}
+
+.line-height-xl {
+  line-height: 2rem;
+}
+
+.text-skew {
+  transform: var(--text-skew);
+}

src/includes/css/utilities/image.css

@@ -0,0 +1,11 @@
+.image-shrink {
+  max-width: 50%;
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
+}
+
+.image-tiny {
+  max-width: 25%;
+  border-radius: var(--spacing-0\.5);
+  overflow: hidden;
+}

src/includes/css/utilities/list.css

@@ -0,0 +1,11 @@
+.list-none {
+  list-style-type: none;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.list-decimal {
+  list-style-type: decimal;
+}

src/includes/css/utilities/table.css

@@ -0,0 +1,3 @@
+.table-wrapper {
+  overflow-x: auto;
+}

src/includes/css/utilities/visually-hidden.css

@@ -0,0 +1,15 @@
+/*
+ * VISUALLY HIDDEN UTILITY
+ * Info: https://piccalil.li/quick-tip/visually-hidden/
+ */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}

src/includes/css/utilities/wrapper.css

@@ -0,0 +1,16 @@
+/**
+ * WRAPPER
+ * Sets a max width, adds a consistent gutter and horizontally
+ * centers the contents
+ * https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
+ */
+.wrapper {
+  container-type: inline-size;
+  width: 90vw;
+  width: clamp(16rem, 90vw, 65ch);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  position: relative;
+}