diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid
index f5418caf..01e5583c 100644
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@@ -8,7 +8,10 @@
{{ pageTitle }}
+
+
{% capture css %}
+ {% render "../assets/styles/partials/fonts.css" %}
{% render "../assets/styles/partials/vars.css" %}
{% render "../assets/styles/partials/animations.css" %}
{% render "../assets/styles/index.css" %}
diff --git a/src/assets/fonts/Poppins-Bold.woff2 b/src/assets/fonts/Poppins-Bold.woff2
new file mode 100644
index 00000000..fd7e21b3
Binary files /dev/null and b/src/assets/fonts/Poppins-Bold.woff2 differ
diff --git a/src/assets/fonts/Poppins-Regular.woff2 b/src/assets/fonts/Poppins-Regular.woff2
new file mode 100644
index 00000000..bd4e3bd7
Binary files /dev/null and b/src/assets/fonts/Poppins-Regular.woff2 differ
diff --git a/src/assets/styles/components/pagefind.css b/src/assets/styles/components/pagefind.css
new file mode 100644
index 00000000..ee1c7ebc
--- /dev/null
+++ b/src/assets/styles/components/pagefind.css
@@ -0,0 +1,115 @@
+.pagefind-ui {
+ margin-bottom: var(--sizing-base);
+ --pagefind-ui-primary: var(--accent-color);
+ --pagefind-ui-text: var(--text-color);
+ --pagefind-ui-background: var(--color-lightest);
+ --pagefind-ui-border: var(--gray-light);
+ --pagefind-ui-tag: var(--gray-light);
+ --pagefind-ui-border-width: 1px;
+ --pagefind-ui-border-radius: 0;
+ --pagefind-ui-image-border-radius: 0;
+ --pagefind-ui-image-box-ratio: 3 / 2;
+ --pagefind-ui-font: var(--font-sans);
+}
+
+.pagefind-ui,
+.pagefind-ui__filter-name,
+.pagefind-ui__filter-label,
+.pagefind-ui__result-excerpt,
+.pagefind-ui__message,
+.pagefind-ui__button {
+ font-size: var(--font-size-base) !important;
+}
+
+.pagefind-ui__result-excerpt {
+ word-break: break-word !important;
+}
+
+.pagefind-ui__form:before {
+ opacity: 1 !important;
+ top: calc(19px * var(--pagefind-ui-scale)) !important;
+}
+
+.pagefind-ui__result-title {
+ color: var(--accent-color);
+ font-size: var(--font-size-2xl);
+ line-height: var(--line-height-2xl);
+ font-weight: var(--font-weight-bold);
+ margin: 0;
+ transition-property: color;
+ transition-timing-function: var(--transition-ease-in-out);
+ transition-duration: var(--transition-duration-default);
+}
+
+.pagefind-ui__result-title:hover,
+.pagefind-ui__result-title:focus,
+.pagefind-ui__result-title:active {
+ color: var(--accent-color-hover);
+}
+
+.pagefind-ui__results-area {
+ margin-bottom: var(--sizing-base);
+}
+
+:is(input[type="text"], input[type="search"]).pagefind-ui__search-input {
+ padding-left: 2.375rem !important;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ height: 42px !important;
+}
+
+.pagefind-ui__search-clear {
+ color: var(--text-color);
+ background-color: transparent !important;
+}
+
+.pagefind-ui__search-clear:hover,
+.pagefind-ui__search-clear:focus,
+.pagefind-ui__search-clear:active {
+ color: var(--accent-color-hover) !important;
+}
+
+.pagefind-ui__result-title {
+ margin-bottom: var(--sizing-xs) !important;
+}
+
+.pagefind-ui__result-link {
+ font-size: var(--font-size-2xl) !important;
+ color: var(--accent-color) !important;
+}
+
+.pagefind-ui__result-link:hover,
+.pagefind-ui__result-link:focus,
+.pagefind-ui__result-link:active {
+ color: var(--accent-color-hover) !important;
+}
+
+.pagefind-ui__button {
+ color: var(--color-lightest) !important;
+ line-height: var(--line-height-base);
+ border-radius: var(--rounded-full) !important;
+ padding: var(--sizing-sm) var(--sizing-lg) !important;
+ margin: 0 var(--sizing-xs) var(--sizing-md) 0;
+ cursor: pointer !important;
+ height: unset !important;
+ background-color: var(--accent-color) !important;
+ transition-property: background-color;
+ transition-timing-function: var(--transition-ease-in-out);
+ transition-duration: var(--transition-duration-default);
+}
+
+.pagefind-ui__search-clear {
+ height: calc(48px * var(--pagefind-ui-scale)) !important;
+}
+
+.pagefind-ui__button:hover,
+.pagefind-ui__button:active,
+.pagefind-ui__button:focus {
+ color: var(--color-lightest) !important;
+ background-color: var(--accent-color-hover) !important;
+}
+
+.pagefind__placeholder {
+ height: 42px !important;
+ font-weight: var(--font-weight-bold);
+}
\ No newline at end of file
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 3eaf3609..347b4f2c 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -90,7 +90,7 @@ a:active,
/* headers */
h1, h2, h3, h4, h5, h6 {
- font-weight: var(--font-weight-heavy);
+ font-weight: var(--font-weight-bold);
}
h1 { font-size: var(--font-size-3xl) }
diff --git a/src/assets/styles/partials/fonts.css b/src/assets/styles/partials/fonts.css
new file mode 100644
index 00000000..847c1050
--- /dev/null
+++ b/src/assets/styles/partials/fonts.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: Poppins;
+ src: url('/assets/fonts/Poppins-Bold.woff2') format("woff2");
+ font-weight: 700;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Poppins;
+ src: url('/assets/fonts/Poppins-Regular.woff2') format("woff2");
+ font-weight: 400;
+ font-display: swap;
+}
\ No newline at end of file
diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/partials/vars.css
index 8ffe49a0..eb326eb4 100644
--- a/src/assets/styles/partials/vars.css
+++ b/src/assets/styles/partials/vars.css
@@ -56,7 +56,7 @@
--sun: #ffa700;
/* fonts */
- --font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+ --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
--font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, ui-monospace, monospace;
/* text */
@@ -83,7 +83,6 @@
--font-weight-base: 400;
--font-weight-bold: 700;
- --font-weight-heavy: 900;
/* spacing */
--sizing-xs: .25rem;