diff --git a/book.html b/book.html
index c7b4fae..e6a1042 100644
--- a/book.html
+++ b/book.html
@@ -8,12 +8,7 @@
content="The Midnight Library - Between life and death there is a library"
/>
The Midnight Library - BookStore
-
-
-
+
diff --git a/css/styles.css b/css/styles.css
index 288ee32..37fb476 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,3 +1,16 @@
+/* ==========================================================================
+ Font Definitions
+ ========================================================================== */
+
+@font-face {
+ font-family: "Outline";
+ src: url("../fonts/Outline-Regular.woff2") format("woff2"),
+ url("../fonts/Outline-Regular.woff") format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
/* ==========================================================================
CSS Reset & Normalize (Modern Best Practices)
Based on normalize.css v8.0.1 + modern resets
@@ -180,7 +193,7 @@ table {
--color-warning: #f59e0b;
/* Typography */
- --font-family-base: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
+ --font-family-base: "Outline", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
--font-family-heading: var(--font-family-base);
@@ -199,8 +212,9 @@ table {
--font-weight-bold: 700;
--line-height-tight: 1.25;
- --line-height-normal: 1.5;
+ --line-height-normal: 1.5; /* 24px at 16px base */
--line-height-relaxed: 1.75;
+ --line-height-24: 24px;
/* Spacing */
--spacing-xs: 0.25rem; /* 4px */
@@ -268,8 +282,8 @@ top-bar .icon-button svg {
top-bar .logo {
font-family: var(--font-family-base);
- font-size: 1.25rem;
- font-weight: 700;
+ font-size: var(--font-size-xl);
+ font-weight: var(--font-weight-bold);
color: #ffffff;
text-decoration: none;
}
diff --git a/index.html b/index.html
index 8b988ca..cf9066d 100644
--- a/index.html
+++ b/index.html
@@ -8,12 +8,7 @@
content="Milinda - Discover and buy your next favorite book"
/>
Milinda - Home
-
-
-
+
diff --git a/js/components/horizontal-scroll-nav.js b/js/components/horizontal-scroll-nav.js
index a5190af..4b0c2fd 100644
--- a/js/components/horizontal-scroll-nav.js
+++ b/js/components/horizontal-scroll-nav.js
@@ -76,9 +76,10 @@ class HorizontalScrollNav extends HTMLElement {
flex-shrink: 0;
height: 32px;
padding: 0;
- font-size: 16px;
+ font-family: var(--font-family-base);
+ font-size: var(--font-size-base, 16px);
font-weight: var(--font-weight-medium, 500);
- line-height: 1.5;
+ line-height: var(--line-height-24, 24px);
color: #000000;
background-color: transparent;
border: none;
@@ -87,6 +88,7 @@ class HorizontalScrollNav extends HTMLElement {
transition: all var(--transition-fast, 150ms ease);
white-space: nowrap;
text-decoration: underline;
+ text-underline-offset: 4px;
display: flex;
align-items: center;
}
diff --git a/js/components/search-bar.js b/js/components/search-bar.js
index e232126..0f50633 100644
--- a/js/components/search-bar.js
+++ b/js/components/search-bar.js
@@ -182,9 +182,9 @@ class SearchBar extends HTMLElement {
flex: 1;
height: 100%;
padding: 0 16px;
- font-family: 'Outfit', system-ui, sans-serif;
- font-size: 16px;
- font-weight: 300;
+ font-family: var(--font-family-base);
+ font-size: var(--font-size-base, 16px);
+ font-weight: var(--font-weight-normal, 400);
color: #383838;
background-color: transparent;
border: none;
@@ -192,9 +192,9 @@ class SearchBar extends HTMLElement {
}
.search-input::placeholder {
- font-family: 'Outfit', system-ui, sans-serif;
- font-size: 16px;
- font-weight: 300;
+ font-family: var(--font-family-base);
+ font-size: var(--font-size-base, 16px);
+ font-weight: var(--font-weight-normal, 400);
color: rgba(56, 56, 56, 0.5);
}
diff --git a/js/components/top-bar.js b/js/components/top-bar.js
index bdaf489..b93d207 100644
--- a/js/components/top-bar.js
+++ b/js/components/top-bar.js
@@ -65,9 +65,9 @@ class TopBar extends HTMLElement {
}
::slotted([slot="logo"]) {
- font-family: 'Outfit', system-ui, sans-serif;
- font-size: 1.25rem;
- font-weight: 700;
+ font-family: var(--font-family-base);
+ font-size: var(--font-size-xl, 1.25rem);
+ font-weight: var(--font-weight-bold, 700);
color: #ffffff;
text-decoration: none;
}