Added Masthead, CMDPalette and PostHeader Components

src/styles/mixins/borders.css

@@ -0,0 +1,55 @@
+@define-mixin border-l $width: var(--size-1), $style: solid,
+  $color: var(--color-surface-inverse) {
+  border-left: $width $style $color;
+}
+
+@define-mixin border-r $width: var(--size-1), $style: solid,
+  $color: var(--color-surface-inverse) {
+  border-right: $width $style $color;
+}
+
+@define-mixin border-t $width: var(--size-1), $style: solid,
+  $color: var(--color-surface-inverse) {
+  border-top: $width $style $color;
+}
+
+@define-mixin border-b $width: var(--size-1), $style: solid,
+  $color: var(--color-surface-inverse) {
+  border-bottom: $width $style $color;
+}
+
+@define-mixin border-x $width: var(--size-1), $style: solid,
+  $color: var(--color-surface-inverse) {
+  border-right: $width $style $color;
+  border-left: $width $style $color;
+}
+
+@define-mixin border-y $width: var(--size-1), $style: solid,
+  $color: var(--color-surface-inverse) {
+  border-top: $width $style $color;
+  border-bottom: $width $style $color;
+}
+
+@define-mixin rounded-top $radius {
+  border-top-left-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@define-mixin rounded-bottom $radius {
+  border-bottom-right-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@define-mixin rounded-left $radius {
+  border-top-left-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@define-mixin rounded-right $radius {
+  border-top-left-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@define-mixin circle {
+  border-radius: 50%;
+}

src/styles/mixins/containers.css

@@ -0,0 +1,25 @@
+@define-mixin responsive-wrapper $vspacing: 0, $hspacing: var(--spacing-cozy),
+  $fontSize: var(--typo-size-responsive) {
+  @mixin mx auto;
+
+  max-width: clamp(60ch, 90vw, 90ch);
+  padding: $vspacing $hspacing;
+  font-family: var(--font-body);
+  font-size: $fontSize;
+}
+
+@define-mixin layout-wrapper {
+  @mixin mx auto;
+  @mixin px var(--spacing-comfortable);
+  width: 100%;
+  max-width: var(--layout-max-width);
+
+  @media screen and (--max-layout) {
+    @mixin px var(--spacing-comfortable);
+  }
+}
+
+@define-mixin position $position: absolute, $inset-values {
+  position: $position;
+  inset: $inset-values;
+}

src/styles/mixins/grid.css

@@ -0,0 +1,19 @@
+@define-mixin grid-col $col, $spacing {
+  display: grid;
+  grid-template-columns: repeat($col, minmax(0, 1fr));
+  gap: $spacing;
+}
+
+@define-mixin grid-rows $row, $spacing {
+  display: grid;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+  gap: $spacing;
+}
+
+@define-mixin grid-col-span $span {
+  grid-column: span $span / span $span;
+}
+
+@define-mixin grid-row-span $span {
+  grid-row: span $span / span $span;
+}

src/styles/mixins/spacing.css

@@ -0,0 +1,85 @@
+@define-mixin ma $spacing {
+  margin: $spacing;
+}
+
+@define-mixin mt $spacing {
+  margin-top: $spacing;
+}
+
+@define-mixin mb $spacing {
+  margin-bottom: $spacing;
+}
+
+@define-mixin ml $spacing {
+  margin-left: $spacing;
+}
+
+@define-mixin mr $spacing {
+  margin-right: $spacing;
+}
+
+@define-mixin my $spacing {
+  margin-block: $spacing;
+}
+
+@define-mixin mx $spacing {
+  margin-inline: $spacing;
+}
+
+@define-mixin ms $spacing {
+  margin-line-start: $spacing;
+}
+
+@define-mixin me $spacing {
+  margin-line-end: $spacing;
+}
+
+@define-mixin space-x $spacing $reverse: 0 {
+  & > :not(:last-child) {
+    margin-inline-start: calc($spacing * $reverse);
+    margin-inline-end: calc($spacing * (1 - $reverse));
+  }
+}
+
+@define-mixin pa $spacing {
+  padding: $spacing;
+}
+
+@define-mixin pt $spacing {
+  padding-top: $spacing;
+}
+
+@define-mixin pb $spacing {
+  padding-bottom: $spacing;
+}
+
+@define-mixin pl $spacing {
+  padding-left: $spacing;
+}
+
+@define-mixin pr $spacing {
+  padding-right: $spacing;
+}
+
+@define-mixin py $spacing {
+  padding-block: $spacing;
+}
+
+@define-mixin px $spacing {
+  padding-inline: $spacing;
+}
+
+@define-mixin ps $spacing {
+  padding-line-start: $spacing;
+}
+
+@define-mixin pe $spacing {
+  padding-line-end: $spacing;
+}
+
+@define-mixin space-y $spacing, $reverse: 0 {
+  & > :not(:last-child) {
+    margin-block-start: calc($spacing * $reverse);
+    margin-block-end: calc($spacing * (1 - $reverse));
+  }
+}