/* ============================================================================ CSS for Dudley Community Climate Justice Archive ============================================================================ This stylesheet contains all the styles for the archive website. STRUCTURE: 1. Global Reset & Variables 2. Typography & Links 3. Layout (Header, Footer, Main Content) 4. Story Grid & Popups 5. Filter System 6. Responsive Design (Mobile/Tablet/Desktop) For learning about CSS properties, visit: https://developer.mozilla.org/en-US/docs/Web/CSS For learning about responsive design: https://web.dev/responsive-web-design-basics/ */ /* ============================================================================ GLOBAL RESET ============================================================================ Sets box-sizing to border-box for all elements. This means padding and border are included in width/height calculations instead of being added. */ * { box-sizing: border-box; } html { /* Base font size - all rem units calculate from this 1rem = 18px */ font-size: 18px; } /* ============================================================================ CSS VARIABLES (Custom Properties) ============================================================================ These variables store reusable values. Reference them throughout the stylesheet with var(--variable-name). Change the value here to update it everywhere it's used. */ :root { /* Background Colours */ --background: #FFFAF3; /* Cream background */ --white: #ffffff; --highlight-yellow: #FFFF99; /* Used for hovers */ --light-gray: var(--light-gray); --light-blue: var(--light-blue); --border-gray: var(--border-gray); /* Text Colours */ --black: #000; --white-text: #FFF; --gray-text: #666; --black-alt: #000000; /* Shadow Colours - RGBA values for transparency */ --shadow-light: rgba(0, 0, 0, 0.1); /* 10% opacity */ --shadow-medium: rgba(0, 0, 0, 0.15); /* 15% opacity */ --shadow-dark: rgba(0, 0, 0, 0.2); /* 20% opacity */ --shadow-darker: rgba(0, 0, 0, 0.25); /* 25% opacity */ --shadow-darkest: rgba(0, 0, 0, 0.3); /* 30% opacity */ --shadow-scroll-track: rgba(0, 0, 0, 0.1); --shadow-scroll-thumb: rgba(0, 0, 0, 0.3); --shadow-scroll-thumb-hover: rgba(0, 0, 0, 0.5); --shadow-text: rgba(0, 0, 0, 0.50); --shadow-heavy: #00000040; } /* ============================================================================ BODY ============================================================================ Base styles for the element. */ body { background-color: var(--background); /* #FFFAF3 cream colour */ font-family: 'Times New Roman', serif; /* Serif font */ max-width: 100vw; /* 100% of viewport width */ overflow-x: hidden; /* Hides horizontal scrollbar */ } /* ============================================================================ LINKS & HOVER EFFECTS ============================================================================ */ /* a - Base link style */ a { color: var(--black); } /* Content Link Hover Effect Uses a ::before pseudo-element positioned absolutely behind the link to create a yellow highlight box on hover. Applied to links in: .story-finding, .story-metadata, .footer-content, and header h1. Excludes .tag elements. */ /* Sets positioning context for the ::before pseudo-element */ .story-finding a, .story-metadata a:not(.tag), .footer-content a, header h1 a { position: relative; /* Creates positioning context */ } /* Creates the highlight box */ .story-finding a::before, .story-metadata a:not(.tag)::before, .footer-content a::before, header h1 a::before { content: ''; /* Required for pseudo-element */ position: absolute; /* Positions relative to the link */ inset: -5px; /* Shorthand for top/right/bottom/left: -5px */ background: transparent; /* Invisible by default */ z-index: -1; /* Behind the link text */ } /* Shows the yellow background on hover */ .story-finding a:hover::before, .story-metadata a:not(.tag):hover::before, .footer-content a:hover::before, header h1 a:hover::before { background: var(--highlight-yellow); /* Makes the box visible */ } /* These links don't get the hover effect */ .related-story a:hover, .story a:hover, .story-nav-arrow a:hover { background: none; } /* ============================================================================ LAYOUT & SPACING ============================================================================ Page-specific margin overrides. */ /* header.homepage Narrower margins for homepage header */ header.homepage { margin-left: 1.11111rem; /* 20px */ margin-right: 1.11111rem; } /* .homepage-content Side margins for homepage content area */ .homepage-content { margin-left: 2.22222rem; /* 40px */ margin-right: 2.22222rem; } /* .main-content.wander Side margins for wander page */ .main-content.wander { margin-left: 2.22222rem; margin-right: 2.22222rem; } /* ============================================================================ HEADER & NAVIGATION ============================================================================ */ /* header Main site header (sticks to top when scrolling) */ header { font-family: Arial, sans-serif; margin-left: 2.222222rem; margin-right: 2.222222rem; position: sticky; /* Remains visible during scroll */ top: 0; z-index: 101; /* Above popups (z-index: 100) */ padding: 1.11111rem 0; /* 20px top and bottom */ } /* .main-header Layout for header - site title on left, navigation on right */ .main-header { display: flex; justify-content: space-between; /* Pushes children apart */ align-items: center; /* Vertically centers */ } /* header h1 Site title "Dudley Time Portal" */ header h1 { color: var(--black); font-family: Arial; font-size: 22px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.22px; } /* header h1 a Site title link (no underline by default) */ header h1 a { text-decoration: none; } /* header h1 a:hover Site title link hover (adds underline) */ header h1 a:hover { text-decoration: underline; } /* header p Paragraphs in header area */ header p { text-transform: lowercase; color: var(--black); font-family: Arial; font-size: 1.22222rem; /* 22px */ font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.01222rem; } /* .header-nav Holds the Wander/Archive/Random/Add navigation buttons */ .header-nav { display: flex; gap: 20px; /* Space between buttons */ } /* .header-nav .dashed-button Navigation buttons (Wander, Archive, Random, Add) */ .header-nav .dashed-button { height: 41px; padding: 5px 10px; text-transform: lowercase; } /* .header-nav .dashed-button:hover Navigation button hover state (repeats padding to prevent movement) */ .header-nav .dashed-button:hover { padding: 5px 10px; } /* ============================================================================ PAGE HEADINGS ============================================================================ Headers for different sections and index pages. */ /* .tag-list-header, .wander-through-archive-header, .theme-index-header, .type-index-header Standard headers for tag/category pages - Serif font (Times New Roman) matches the body text - Larger size (32px) makes them prominent - Negative letter spacing tightens large text */ .tag-list-header, .wander-through-archive-header, .theme-index-header, .type-index-header { color: var(--black); font-family: "Times New Roman"; font-size: 1.77778rem; /* 32px */ font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.03556rem; /* Tighten large text */ } /* .wander-through-archive-header (specific override) Extra large size for the main "Wander through archive" heading */ .wander-through-archive-header { margin-top: 40px; color: var(--black); font-family: "Times New Roman"; font-size: 52px; /* Much larger than other headers */ font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -1.04px !important; /* Proportionally tighter */ margin-bottom: 1.66667rem; /* 30px spacing below */ } /* ============================================================================ FILTER SYSTEM ============================================================================ The filtering interface on the Archive page. Uses custom dropdown menus (not native