CSS Architecture (style.css)
The styling for WittySearch focuses on clean readability, closely mirroring modern search engine aesthetics. It utilizes standard CSS without reliance on external frameworks.
Layout & Flexbox
Flexbox is used extensively to manage alignments:
.result-itemuses flex to align the media thumbnail cleanly next to the text snippet block..title-rowand.result-metause flex-wrap to ensure titles and metadata badges don't overflow on smaller screens.- The top navigation bar uses flex to separate the logo from the search input field.
Interactive Elements
Hover states provide immediate feedback to the user. The media thumbnails (.media-thumb) feature a CSS-driven hover effect where the image darkens via a brightness(0.8) filter, and a semi-transparent "Play" overlay scales up to invite interaction.
Responsive Design Rules
Media queries ensure the application scales down gracefully:
- Max-width 850px (Tablets): Reduces the heavy left and right padding on the search results container.
- Max-width 600px (Mobile): Converts the top bar to a column layout, drastically reduces the logo size, shrinks the media thumbnails from 90px to 70px, and centers the pagination controls.