feat: 3-column layout with centered results and right column
- results-layout: 3-column grid (1fr | min(768px,100%) | 300px) max-width 1400px, centered - Widen center results column to 768px max - Right column (formerly sidebar): sticky, contains knowledge panel + related searches - Knowledge panel: Wikipedia/infobox summary with optional thumbnail - Related searches: clickable links to refine the query - Empty left buffer creates balanced whitespace on large screens - Responsive: 2-col at 1000px, 1-col at 700px
This commit is contained in:
parent
2d22a8cdbb
commit
4b0cde91ed
4 changed files with 105 additions and 92 deletions
|
|
@ -235,11 +235,22 @@ main {
|
|||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* 3-column layout: empty left buffer | center results | right column
|
||||
max-width 1400px, centered on page */
|
||||
.results-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 220px;
|
||||
grid-template-columns: 1fr min(768px, 100%) 300px;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.results-layout {
|
||||
grid-template-columns: 1fr 260px;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
|
|
@ -249,7 +260,7 @@ main {
|
|||
}
|
||||
}
|
||||
|
||||
/* Compact search bar on results page */
|
||||
/* Compact search bar spans all columns */
|
||||
.search-compact {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
|
@ -380,12 +391,15 @@ main {
|
|||
}
|
||||
|
||||
/* ============================================================
|
||||
Sidebar
|
||||
Right Column (formerly sidebar)
|
||||
============================================================ */
|
||||
|
||||
.sidebar {
|
||||
.right-column {
|
||||
position: sticky;
|
||||
top: calc(var(--header-height) + 1.5rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
|
|
@ -393,18 +407,65 @@ main {
|
|||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 0.75rem;
|
||||
.sidebar-card-title {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Knowledge Panel card */
|
||||
.knowledge-panel {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.knowledge-panel-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.knowledge-panel-content {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.knowledge-panel-thumb {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Related searches */
|
||||
.related-searches {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.related-search-link {
|
||||
font-size: 0.85rem;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.related-search-link:hover {
|
||||
color: var(--accent-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Suggestions in sidebar */
|
||||
.suggestion-list {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue