123 lines
1.7 KiB
CSS
123 lines
1.7 KiB
CSS
/* =========================
|
|
RESET & BASE
|
|
========================= */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f9f9f9;
|
|
color: #333;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* =========================
|
|
GLOBAL LAYOUT
|
|
========================= */
|
|
|
|
main {
|
|
padding: 1rem;
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* =========================
|
|
HEADER
|
|
========================= */
|
|
|
|
.site-header {
|
|
background-color: #3dd0a9;
|
|
color: #222; /* fixed contrast */
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* =========================
|
|
SEARCH SECTION
|
|
========================= */
|
|
|
|
.event-search h2 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.search__controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* =========================
|
|
EVENTS LIST
|
|
========================= */
|
|
|
|
.events h2 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
#event-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* =========================
|
|
FOOTER
|
|
========================= */
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
margin-top: 2rem;
|
|
font-size: 0.9rem;
|
|
color: #777;
|
|
}
|
|
|
|
/* =========================
|
|
TABLET (>=768px)
|
|
========================= */
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
.search__controls {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.search__controls input,
|
|
.search__controls select {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.search__controls button {
|
|
flex: 0 0 auto;
|
|
min-width: 120px;
|
|
}
|
|
|
|
#event-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
}
|
|
|
|
/* =========================
|
|
DESKTOP (>=1024px)
|
|
========================= */
|
|
|
|
@media (min-width: 1024px) {
|
|
|
|
#event-list {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
} |