95 lines
2.4 KiB
TypeScript
95 lines
2.4 KiB
TypeScript
// ============================================================================
|
|
// 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)',
|
|
};
|