Skip to content

Commit bd4e822

Browse files
imswarnilimswarnil
authored
as
1 parent c490ccc commit bd4e822

File tree

2 files changed

+20
-165
lines changed

2 files changed

+20
-165
lines changed

‎_includes/header.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
<div class="header__column">
33
<a class="header__logo" href="{{ '/' | relative_url }}" aria-label="{{ site.title }}">
44
<img class="image" src="{{ site.logo | relative_url }}" alt="{{ site.title | escape }} Logo">
5+
<span class="site__header">{{site.title}}</span>
56
</a>
6-
<span class="site__header">{{site.title}}</span>
77

8-
98
<!-- ============================================= -->
109
<!-- DYNAMIC NAVIGATION WITH ACTIVE STATE LOGIC -->
1110
<!-- ============================================= -->

‎_sass/_vars.scss‎

Lines changed: 19 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@
1515
--spruce-base-color-border: hsla(0, 0%, 0%, 0.05);
1616
--spruce-base-color-heading: hsl(232, 68%, 11%);
1717
--spruce-base-color-text: hsl(208, 21%, 39%);
18-
--spruce-base-color-primary: hsl(197, 100%, 44%);
19-
--spruce-base-color-secondary: hsl(186, 100%, 60%);
20-
--spruce-base-color-link: hsl(197, 100%, 44%);
21-
--spruce-base-color-link-hover: hsl(210, 87%, 52%);
18+
--spruce-base-color-primary: hsl(203, 96%, 79%); /* light blue */
19+
--spruce-base-color-secondary: hsl(203, 96%, 79%); /* medium blue */
20+
--spruce-base-color-link: hsl(203, 96%, 79%);
21+
--spruce-base-color-link-hover: hsl(208, 80%, 36%); /* dark blue */
2222
--spruce-base-color-strong: hsl(245, 31%, 21%);
2323

2424
// Element-specific Colors
25-
--spruce-base-color-blockquote-border: hsl(197, 100%, 44%);
26-
--spruce-base-color-marker: hsl(197, 100%, 44%);
25+
--spruce-base-color-blockquote-border: hsl(203, 96%, 79%);
26+
--spruce-base-color-marker: hsl(203, 96%, 79%);
2727
--spruce-base-color-code-background: hsl(224, 94%, 97%);
2828
--spruce-base-color-code-foreground: hsl(245, 31%, 21%);
2929
--spruce-base-color-mark-background: hsl(50, 100%, 80%);
@@ -36,12 +36,12 @@
3636
--spruce-alert-color-warning: hsl(48, 89%, 55%);
3737

3838
// Component Colors: Buttons
39-
--spruce-btn-color-primary-background: hsl(197, 100%, 44%);
40-
--spruce-btn-color-primary-background-hover: hsl(355, 92%, 47%);
39+
--spruce-btn-color-primary-background: hsl(203, 96%, 79%);
40+
--spruce-btn-color-primary-background-hover: hsl(208, 80%, 36%);
4141
--spruce-btn-color-primary-foreground: hsl(0, 0%, 100%);
42-
--spruce-btn-color-primary-shadow: hsl(355, 57%, 77%);
43-
--spruce-btn-color-secondary-background: hsl(186, 100%, 60%);
44-
--spruce-btn-color-secondary-background-hover: #00e6ff;
42+
--spruce-btn-color-primary-shadow: hsl(203, 96%, 79%);
43+
--spruce-btn-color-secondary-background: hsl(203, 96%, 79%);
44+
--spruce-btn-color-secondary-background-hover: hsl(208, 80%, 36%);
4545
--spruce-btn-color-secondary-foreground: #002e33;
4646
--spruce-btn-color-secondary-shadow: #99f5ff;
4747

@@ -50,9 +50,9 @@
5050
--spruce-form-color-background-disabled: hsl(0, 0%, 95%);
5151
--spruce-form-color-border: hsl(260, 4%, 70%);
5252
--spruce-form-color-border-disabled: hsl(215, 63%, 93%);
53-
--spruce-form-color-border-focus: hsl(197, 100%, 44%);
54-
--spruce-form-color-check-background: hsl(197, 100%, 44%);
55-
--spruce-form-color-check-focus-ring: hsl(197, 100%, 44%);
53+
--spruce-form-color-border-focus: hsl(203, 96%, 79%);
54+
--spruce-form-color-check-background: hsl(203, 96%, 79%);
55+
--spruce-form-color-check-focus-ring: hsl(203, 96%, 79%);
5656
--spruce-form-color-check-foreground: hsl(0, 0%, 100%);
5757
--spruce-form-color-group-label-background: hsl(210, 60%, 98%);
5858
--spruce-form-color-group-label-foreground: hsl(208, 9%, 42%);
@@ -61,8 +61,8 @@
6161
--spruce-form-color-label: hsl(245, 31%, 21%);
6262
--spruce-form-color-legend: hsl(245, 31%, 21%);
6363
--spruce-form-color-placeholder: hsl(208, 7%, 40%);
64-
--spruce-form-color-range-thumb-background: hsl(197, 100%, 44%);
65-
--spruce-form-color-range-thumb-focus-ring: hsl(197, 100%, 44%);
64+
--spruce-form-color-range-thumb-background: hsl(203, 96%, 79%);
65+
--spruce-form-color-range-thumb-focus-ring: hsl(203, 96%, 79%);
6666
--spruce-form-color-range-track-background: hsl(215, 63%, 93%);
6767
--spruce-form-color-ring-focus: rgba(0, 9, 255, 0.25);
6868
--spruce-form-color-select-foreground: hsl(245, 31%, 21%);
@@ -84,11 +84,11 @@
8484
--spruce-footer-color-background: hsl(224, 94%, 98%);
8585
--spruce-navigation-color-arrow: hsla(0, 0%, 0%, 0.15);
8686
--spruce-navigation-color-icon-background: hsl(224, 94%, 98%);
87-
--spruce-navigation-color-icon-background-hover: hsl(197, 100%, 44%);
88-
--spruce-navigation-color-icon-foreground: hsl(197, 100%, 44%);
87+
--spruce-navigation-color-icon-background-hover: hsl(203, 96%, 79%);
88+
--spruce-navigation-color-icon-foreground: hsl(203, 96%, 79%);
8989
--spruce-navigation-color-icon-foreground-hover: hsl(0, 0%, 100%);
9090
--spruce-search-color-icon: hsla(229, 26%, 48%, 0.25);
91-
--spruce-selection-color-background: hsl(238, 100%, 50%);
91+
--spruce-selection-color-background: hsl(208, 80%, 36%);
9292
--spruce-selection-color-foreground: hsl(0, 0%, 100%);
9393
--spruce-scrollbar-color-thumb-background: hsla(229, 26%, 48%, 0.15);
9494
--spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, 0.25);
@@ -106,148 +106,4 @@
106106
--spruce-prism-color-constant: hsl(221, 57%, 52%);
107107
--spruce-prism-color-class-name: hsl(0, 0%, 7%);
108108
--spruce-prism-color-regex: hsl(1, 48%, 59%);
109-
110-
//
111-
// --- TYPOGRAPHY & SIZING ---
112-
//
113-
114-
// Font Families
115-
--spruce-font-family-base: "Open Sans", sans-serif;
116-
--spruce-font-family-heading: "Manrope", sans-serif;
117-
--spruce-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
118-
119-
// Font Sizing & Weights
120-
--spruce-font-size-base: 1rem;
121-
--spruce-font-size-sm: 0.875rem;
122-
--spruce-font-size-lg: 1.125rem;
123-
--spruce-font-size-lead: clamp(1.1rem, 2vw, 1.25rem);
124-
--spruce-font-size-ratio: 1.25;
125-
--spruce-font-weight-heading: 700;
126-
127-
// Line Heights
128-
--spruce-line-height-base: 1.8;
129-
--spruce-line-height-sm: 1.2;
130-
--spruce-line-height-md: 1.5;
131-
--spruce-line-height-lg: 1.8;
132-
--spruce-line-height-heading: calc(2px + 2ex + 2px);
133-
134-
//
135-
// --- LAYOUT & SPACING ---
136-
//
137-
138-
// Borders & Shadows
139-
--spruce-border-radius: 0.425rem;
140-
--spruce-border-radius-sm: 0.425rem;
141-
--spruce-border-radius-lg: 0.925rem;
142-
--spruce-box-shadow: 0 0.75rem 1.25rem hsla(0, 0%, 0%, 0.05);
143-
144-
// Layout Sizing
145-
--spruce-container-inline-size: 84rem;
146-
--spruce-max-content-inline-size: 70rem;
147-
--spruce-container-gap: clamp(1.5rem, 5vw, 3rem);
148-
--spruce-section-gap: clamp(5rem, 7vw, 7rem);
149-
150-
// Misc
151-
--spruce-inline-padding: 0.1em 0.3em;
152-
--spruce-page-margin: 2cm;
153-
--spruce-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"];
154-
}
155-
156-
157-
// -----------------------------------------------------------------------------
158-
// Dark Theme
159-
// -----------------------------------------------------------------------------
160-
161-
:root[data-theme-mode="dark"] {
162-
color-scheme: dark;
163-
164-
// Base Colors (Dark Mode)
165-
--spruce-base-color-background: hsl(245, 38%, 11%);
166-
--spruce-base-color-border: hsla(0, 0%, 100%, 0.08);
167-
--spruce-base-color-heading: hsl(0, 0%, 95%);
168-
--spruce-base-color-text: hsl(0, 0%, 97%);
169-
--spruce-base-color-primary: hsl(186, 100%, 60%);
170-
--spruce-base-color-secondary: hsl(227, 92%, 55%);
171-
--spruce-base-color-link: hsl(186, 100%, 60%);
172-
--spruce-base-color-link-hover: #47edff;
173-
174-
// Element-specific Colors (Dark Mode)
175-
--spruce-base-color-blockquote-border: hsl(186, 100%, 60%);
176-
--spruce-base-color-marker: hsl(186, 100%, 60%);
177-
--spruce-base-color-code-background: hsl(207, 64%, 21%);
178-
--spruce-base-color-code-foreground: hsl(0, 0%, 95%);
179-
--spruce-base-color-mark-background: hsl(50, 100%, 80%);
180-
--spruce-base-color-mark-foreground: hsl(245, 38%, 11%);
181-
182-
// Component Colors: Buttons (Dark Mode)
183-
--spruce-btn-color-primary-background: hsl(186, 100%, 60%);
184-
--spruce-btn-color-primary-background-hover: hsl(186, 100%, 45%);
185-
--spruce-btn-color-primary-foreground: hsl(186, 100%, 5%);
186-
--spruce-btn-color-primary-shadow: hsl(186, 100%, 25%);
187-
--spruce-btn-color-secondary-background: hsl(227, 92%, 55%);
188-
--spruce-btn-color-secondary-background-hover: #3b64f7;
189-
--spruce-btn-color-secondary-foreground: hsl(0, 0%, 95%);
190-
--spruce-btn-color-secondary-shadow: #072bab;
191-
192-
// Component Colors: Forms (Dark Mode)
193-
--spruce-form-color-background: #1b1836;
194-
--spruce-form-color-background-disabled: hsl(245, 38%, 11%);
195-
--spruce-form-color-border: hsla(0, 0%, 100%, 0.08);
196-
--spruce-form-color-border-disabled: hsla(0, 0%, 100%, 0.08);
197-
--spruce-form-color-border-focus: hsl(186, 100%, 60%);
198-
--spruce-form-color-check-background: hsl(186, 100%, 60%);
199-
--spruce-form-color-check-foreground: hsl(245, 38%, 11%);
200-
--spruce-form-color-ring-focus: rgba(51, 235, 255, 0.25);
201-
--spruce-form-color-label: hsl(0, 0%, 95%);
202-
--spruce-form-color-legend: hsl(0, 0%, 95%);
203-
--spruce-form-color-placeholder: hsl(0, 0%, 60%);
204-
--spruce-form-color-select-foreground: hsl(0, 0%, 100%);
205-
--spruce-form-color-text: hsl(0, 0%, 97%);
206-
207-
// Component Colors: Other (Dark Mode)
208-
--spruce-card-color-background: hsl(245, 38%, 11%);
209-
--spruce-container-color-background: hsl(207, 92%, 12%);
210-
--spruce-footer-color-background: hsl(245, 38%, 10%);
211-
--spruce-navigation-color-arrow: hsla(0, 0%, 100%, 0.15);
212-
--spruce-navigation-color-icon-background: hsl(245, 38%, 10%);
213-
--spruce-navigation-color-icon-background-hover: hsl(186, 100%, 60%);
214-
--spruce-navigation-color-icon-foreground: hsl(186, 100%, 60%);
215-
--spruce-navigation-color-icon-foreground-hover: hsl(186, 100%, 5%);
216-
--spruce-table-color-border: hsla(0, 0%, 100%, 0.08);
217-
--spruce-table-color-caption: hsl(0, 0%, 97%);
218-
--spruce-table-color-heading: hsl(0, 0%, 95%);
219-
--spruce-table-color-hover: hsla(0, 0%, 100%, 0.05);
220-
--spruce-table-color-stripe: hsla(0, 0%, 100%, 0.025);
221-
--spruce-table-color-text: hsl(0, 0%, 97%);
222-
--spruce-selection-color-background: hsl(186, 100%, 60%);
223-
--spruce-selection-color-foreground: hsl(186, 100%, 5%);
224-
--spruce-search-color-icon: hsla(0, 0%, 100%, 0.25);
225-
--spruce-scrollbar-color-thumb-background: hsla(0, 0%, 100%, 0.15);
226-
--spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 100%, 0.25);
227-
--spruce-scrollbar-color-track-background: hsla(0, 0%, 100%, 0.05);
228-
229-
// Component Colors: Prism (Dark Mode)
230-
--spruce-prism-color-background: hsl(245, 38%, 7%);
231-
--spruce-prism-color-color: hsl(217, 34%, 88%);
232-
--spruce-prism-color-comment: hsl(180, 9%, 55%);
233-
--spruce-prism-color-punctuation: hsl(276, 68%, 75%);
234-
--spruce-prism-color-namespace: hsl(197, 31%, 77%);
235-
--spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56);
236-
--spruce-prism-color-boolean: hsl(350, 100%, 67%);
237-
--spruce-prism-color-number: hsl(14, 90%, 70%);
238-
--spruce-prism-color-constant: hsl(221, 100%, 75%);
239-
--spruce-prism-color-class-name: hsl(33, 100%, 77%);
240-
--spruce-prism-color-regex: hsl(217, 34%, 88%);
241109
}
242-
243-
244-
//
245-
// --- ANIMATION ---
246-
//
247-
248-
@media (prefers-reduced-motion: no-preference) {
249-
:root {
250-
--spruce-duration: 0.15s;
251-
--spruce-timing-function: ease-in-out;
252-
}
253-
}

0 commit comments

Comments
 (0)