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;