rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/site-header #1

Merged
rubberducky merged 4 commits from feature/site-header into main 2026-01-15 07:49:02 +00:00
Conversation 0 Commits 4 Files Changed 17 +33 -27
6 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3aff4d1630 - Show all commits

7
book.html
View File

@@ -8,12 +8,7 @@
content="The Midnight Library - Between life and death there is a library" content="The Midnight Library - Between life and death there is a library"
/> />
<title>The Midnight Library - BookStore</title> <title>The Midnight Library - BookStore</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <!-- Fonts are loaded via @font-face in styles.css -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/styles.css" />
</head> </head>
<body> <body>

22
css/styles.css
View File

@@ -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) CSS Reset & Normalize (Modern Best Practices)
Based on normalize.css v8.0.1 + modern resets Based on normalize.css v8.0.1 + modern resets
@@ -180,7 +193,7 @@ table {
--color-warning: #f59e0b; --color-warning: #f59e0b;
/* Typography */ /* 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", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif; sans-serif;
--font-family-heading: var(--font-family-base); --font-family-heading: var(--font-family-base);
@@ -199,8 +212,9 @@ table {
--font-weight-bold: 700; --font-weight-bold: 700;
--line-height-tight: 1.25; --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-relaxed: 1.75;
--line-height-24: 24px;
/* Spacing */ /* Spacing */
--spacing-xs: 0.25rem; /* 4px */ --spacing-xs: 0.25rem; /* 4px */
@@ -268,8 +282,8 @@ top-bar .icon-button svg {
top-bar .logo { top-bar .logo {
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-size: 1.25rem; font-size: var(--font-size-xl);
font-weight: 700; font-weight: var(--font-weight-bold);
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
} }

7
index.html
View File

@@ -8,12 +8,7 @@
content="Milinda - Discover and buy your next favorite book" content="Milinda - Discover and buy your next favorite book"
/> />
<title>Milinda - Home</title> <title>Milinda - Home</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <!-- Fonts are loaded via @font-face in styles.css -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/styles.css" />
</head> </head>
<body> <body>

6
js/components/horizontal-scroll-nav.js
View File

@@ -76,9 +76,10 @@ class HorizontalScrollNav extends HTMLElement {
flex-shrink: 0; flex-shrink: 0;
height: 32px; height: 32px;
padding: 0; 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); font-weight: var(--font-weight-medium, 500);
line-height: 1.5; line-height: var(--line-height-24, 24px);
color: #000000; color: #000000;
background-color: transparent; background-color: transparent;
border: none; border: none;
@@ -87,6 +88,7 @@ class HorizontalScrollNav extends HTMLElement {
transition: all var(--transition-fast, 150ms ease); transition: all var(--transition-fast, 150ms ease);
white-space: nowrap; white-space: nowrap;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
} }

12
js/components/search-bar.js
View File

@@ -182,9 +182,9 @@ class SearchBar extends HTMLElement {
flex: 1; flex: 1;
height: 100%; height: 100%;
padding: 0 16px; padding: 0 16px;
font-family: 'Outfit', system-ui, sans-serif; font-family: var(--font-family-base);
font-size: 16px; font-size: var(--font-size-base, 16px);
font-weight: 300; font-weight: var(--font-weight-normal, 400);
color: #383838; color: #383838;
background-color: transparent; background-color: transparent;
border: none; border: none;
@@ -192,9 +192,9 @@ class SearchBar extends HTMLElement {
} }
.search-input::placeholder { .search-input::placeholder {
font-family: 'Outfit', system-ui, sans-serif; font-family: var(--font-family-base);
font-size: 16px; font-size: var(--font-size-base, 16px);
font-weight: 300; font-weight: var(--font-weight-normal, 400);
color: rgba(56, 56, 56, 0.5); color: rgba(56, 56, 56, 0.5);
} }

6
js/components/top-bar.js
View File

@@ -65,9 +65,9 @@ class TopBar extends HTMLElement {
} }
::slotted([slot="logo"]) { ::slotted([slot="logo"]) {
font-family: 'Outfit', system-ui, sans-serif; font-family: var(--font-family-base);
font-size: 1.25rem; font-size: var(--font-size-xl, 1.25rem);
font-weight: 700; font-weight: var(--font-weight-bold, 700);
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
} }