Documentation Index
Fetch the complete documentation index at: https://mintlify.com/ClaytonSeager/InifinityScroll/llms.txt
Use this file to discover all available pages before exploring further.
All visual styling for the Infinity Scroll gallery is contained in a single file, style.css. It covers the sticky header, search bar, loader overlay, image grid, scroll-to-top button, responsive breakpoints, and a keyframe animation — with no CSS preprocessor or build step required. Edit any of the values described below to customise the gallery’s appearance.
Typography
The gallery uses the Inter typeface, loaded from Google Fonts via an @import declaration at the top of style.css.
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
body rule, which also sets the default background colour:
body {
margin: 0;
font-family: 'Inter', sans-serif;
background-color: whitesmoke;
}
@import URL with another Google Fonts link (or remove it entirely for a system font stack) and update the font-family value on body.
The html rule sets box-sizing: border-box globally so that padding and borders are included in element dimensions:
html {
box-sizing: border-box;
}
Heading Styles
The <h1> and <h2> elements inside .Title__Column are styled directly with element selectors:
h1 {
margin: 0;
padding: 0;
letter-spacing: 2px;
}
h2 {
margin-top: 3px;
padding: 0;
align-self: flex-start;
font-size: 1em;
line-height: 1;
letter-spacing: 2px;
font-style: italic;
}
h1 renders “INFINITY” in the default browser font size (typically 32 px) with wide letter-spacing. h2 renders “scroll” in italic at 1em (matching body text size), aligned to the top of its flex row via align-self: flex-start.
Gallery Layout
.Image__Container uses horizontal margin to create a centred, single-column layout on desktop screens:
.Image__Container {
margin: 10px 25%;
}
margin: 10px 25%, the gallery occupies the middle 50 % of the viewport width (25 % margin on each side). Images and anchors inside the container are set to full container width:
.Image__Container img, .Image__Container a {
width: 100%;
margin-top: 5px;
}
To widen the gallery column, reduce the horizontal margin percentage. For example, margin: 10px 10% gives the gallery 80 % of the viewport width — useful on large monitors or if you want a more immersive photo feed. At margin: 10px 0 the gallery spans the full viewport width (this is the default on mobile; see Responsive Breakpoints below).
Color Scheme
The following table lists every significant colour value in style.css and where to find and change it.
| Element | Property | Value | Selector |
|---|
| Page background | background-color | whitesmoke | body |
| Header background (default) | background-color | whitesmoke | .Title__Column |
| Header background (scrolled) | background-color | rgba(245, 245, 245, 0.9) | .Title__Column.scrolled |
| Counter badge | background-color | white | .counter |
| Counter badge shadow | box-shadow | 0 1px 3px rgba(0, 0, 0, 0.05) | .counter |
| Counter badge (scrolled) | background-color | rgba(255, 255, 255, 0.9) | .Title__Column.scrolled .counter |
| Loader overlay | background | rgba(255, 255, 255, 0.8) | .Loader |
| Search bar | background | white | .search-bar |
| Scroll-to-top button | background-color | white | .scroll-top |
| Scroll-to-top button (mobile) | background-color | rgba(255, 255, 255, 0.6) | .scroll-top inside @media (max-width: 600px) |
.Title__Column is a position: sticky bar that stays visible at the top of the viewport as the user scrolls. It has two visual states:
Default state — full padding, opaque background, subtle shadow:
.Title__Column {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0;
padding: 15px 0;
position: sticky;
top: 0;
background-color: whitesmoke;
transition: all 0.3s ease;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.Title__Column.scrolled {
opacity: 0.8;
padding: 5px 0;
backdrop-filter: blur(5px);
background-color: rgba(245, 245, 245, 0.9);
}
scrolled class to .Title__Column when window.scrollY > 50 and removes it when the user scrolls back above that threshold. The transition: all 0.3s ease on the base rule ensures the switch between states is animated smoothly.
The .counter badge inside the header also responds to the scrolled state:
.Title__Column.scrolled .counter {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
transform: translateY(1px);
}
Counter Badge
The .counter element is positioned at the left side of the sticky header and displays the total image count:
.counter {
position: absolute;
left: 50px;
display: flex;
align-items: center;
font-size: 12px;
gap: 8px;
font-weight: 500;
background-color: white;
padding: 6px 12px;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
letter-spacing: 0.5px;
color: #333;
border: 1px solid rgba(0, 0, 0, 0.05);
}
Animations
The picture-frame emoji inside the counter badge uses a subtle floating animation defined with @keyframes bounce:
.counter-icon {
font-size: 14px;
opacity: 0.8;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
| Parameter | Value | Effect |
|---|
| Duration | 2s | One full bounce cycle takes two seconds |
| Iteration | infinite | Loops forever |
0% / 100% position | translateY(0) | Resting position — no vertical offset |
50% position | translateY(-3px) | Peak of the bounce — 3 px above resting |
animation property from .counter-icon. To slow it down, increase the 2s duration value.
Search Bar
The search UI uses two nested containers to produce a centred pill-shaped input field:
.search-container {
display: flex;
justify-content: center;
padding: 20px;
}
.search-bar {
display: flex;
align-items: center;
max-width: 500px;
width: 90%;
background: white;
border-radius: 30px;
padding: 8px 16px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.search-bar are styled to blend seamlessly into the pill:
.search-bar input {
flex: 1;
border: none;
outline: none;
padding: 8px;
font-size: 16px;
background: transparent;
font-family: inherit;
}
.search-bar button {
border: none;
background: none;
cursor: pointer;
padding: 8px;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.search-bar button:hover {
opacity: 1;
}
.search-icon {
font-size: 18px;
}
Responsive Breakpoints
A single breakpoint at max-width: 600px adapts the layout for narrow mobile screens. Two separate @media blocks handle different sections of the page.
Gallery and header adjustments:
@media (max-width: 600px) {
.Title__Column {
flex-direction: row;
justify-content: center;
align-items: center;
}
.Image__Container {
margin: 10px 0;
}
.counter {
position: static;
margin-right: 15px;
font-size: 11px;
padding: 4px 10px;
}
.counter-icon {
font-size: 12px;
}
}
| Change | Effect |
|---|
.Title__Column → flex-direction: row | Counter, title, and subtitle sit in a single horizontal row rather than their default stacked arrangement |
.Image__Container → margin: 10px 0 | Gallery expands to full viewport width; side margins are removed |
.counter → position: static | Counter is pulled out of absolute positioning and flows inline with the header content |
.counter font and padding reduced | Smaller text and tighter padding to fit narrow screens |
@media (max-width: 600px) {
.search-bar {
width: 95%;
}
}
@media (max-width: 600px) {
.scroll-top {
bottom: 0;
right: 0;
width: 100%;
justify-content: center;
padding: 12px;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
}
.scroll-text {
display: inline;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
}
}
.scroll-text “Back to Top” label that is display: none on desktop.
Scroll-to-Top Button Transitions
The scroll-to-top button starts hidden and slides in from below when JavaScript adds the visible class.
Default (hidden) state:
.scroll-top {
position: fixed;
bottom: 30px;
right: 30px;
background-color: white;
padding: 12px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
z-index: 1000;
}
scrollY > innerHeight):
.scroll-top.visible {
opacity: 1;
transform: translateY(0);
}
transition: all 0.3s ease on the base rule means that both the opacity and transform properties animate over 300 ms whenever the visible class is added or removed. The button fades in and slides up into its resting position, then fades out and slides down when scrolling back near the top.
The .scroll-text label and .scroll-icon emoji inside the button are also controlled by CSS:
.scroll-icon {
font-size: 16px;
}
.scroll-text {
display: none;
}
To adjust how far the button slides in from, change the translateY(20px) value on .scroll-top. A larger value (e.g. translateY(40px)) produces a more pronounced entrance animation. To disable the slide entirely, set transform: translateY(0) on both the default and .visible states, keeping only the opacity transition.