Website config Update

2025-11-28 06:17:25 +00:00
parent 88b068a2b5
commit 8cdb39afbe
11 changed files with 949 additions and 813 deletions
@@ -0,0 +1,94 @@
+// ============================================================================
+// LAYOUT & DIMENSIONS
+// ============================================================================
+
+export const layout = {
+	// Navbar
+	navbarHeight: 60, // px
+	navbarMaxWidth: 1400, // px
+	navbarZIndex: 1000,
+
+	// Container
+	containerMaxWidth: 1200, // px
+	containerPadding: '1.5rem',
+
+	// Grid
+	gridGap: '1.5rem',
+	gridMinColumnWidth: 300, // px
+
+	// Page margins
+	pageBottomMargin: 80, // px (desktop)
+	pageMobileBottomMargin: 60, // px (mobile)
+};
+
+// ============================================================================
+// RESPONSIVE BREAKPOINTS
+// ============================================================================
+
+export const breakpoints = {
+	mobile: 768, // px
+	tablet: 1024, // px
+	desktop: 1400, // px
+};
+
+// ============================================================================
+// FONTS
+// ============================================================================
+
+export const fonts = {
+	mono: "'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace",
+	sans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+	monoWeight: 600,
+};
+
+// ============================================================================
+// NAVBAR
+// ============================================================================
+
+export const navbar = {
+	height: 60, // px - also update layout.navbarHeight if changing
+	maxWidth: 1400, // px
+	padding: '0.75rem 1.5rem',
+	gap: '2rem',
+	zIndex: 1000,
+
+	// Brand
+	brandFontSize: '0.9rem',
+	cursorWidth: 8, // px
+
+	// Hamburger menu
+	hamburgerWidth: 24, // px
+	hamburgerHeight: 2, // px
+	hamburgerSpacing: 7, // px
+
+	// Links
+	linksGap: '1.5rem',
+	linkFontSize: '0.85rem',
+	linkPadding: '0.5rem 0.75rem',
+	linkBorderRadius: 4, // px
+	linkUnderlineHeight: 2, // px
+
+	// Mode toggle
+	modeToggleSize: 40, // px
+	modeToggleBorderRadius: 8, // px
+	themeButtonBorderRadius: 6, // px
+
+	// Dropdown
+	dropdownMinWidth: 180, // px
+	dropdownBorderRadius: 8, // px
+	dropdownZIndex: 1001,
+	backdropZIndex: 999,
+	mobileExpandedHeight: 200, // px
+};
+
+// ============================================================================
+// SCROLLBAR
+// ============================================================================
+
+export const scrollbar = {
+	width: 8, // px
+	borderRadius: 4, // px
+	trackColor: 'rgba(0, 0, 0, 0.1)',
+	thumbColor: 'rgba(128, 128, 128, 0.5)',
+	thumbHoverColor: 'rgba(128, 128, 128, 0.7)',
+};