More actions
Created page with "→=== Layout ===: .main-banner { text-align: center; padding: 1em; background-color: #333; color: white; } .banner-title { font-size: 2em; margin-top: 0.5em; } .search-area { text-align: center; background: #222; padding: 0.5em; margin-top: 1em; color: white; } .intro-text { max-width: 800px; margin: 1em auto; text-align: center; color: white; } →Info Boxes Row: .info-row { display: flex; flex-wrap: wrap; justify-content: spa..." |
No edit summary |
||
| Line 4: | Line 4: | ||
padding: 1em; | padding: 1em; | ||
background-color: #333; | background-color: #333; | ||
color: | color: red; | ||
} | } | ||
.banner-title { | .banner-title { | ||
Latest revision as of 15:54, 12 July 2025
/* === Layout === */
.main-banner {
text-align: center;
padding: 1em;
background-color: #333;
color: red;
}
.banner-title {
font-size: 2em;
margin-top: 0.5em;
}
.search-area {
text-align: center;
background: #222;
padding: 0.5em;
margin-top: 1em;
color: white;
}
.intro-text {
max-width: 800px;
margin: 1em auto;
text-align: center;
color: white;
}
/* Info Boxes Row */
.info-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1em;
margin: 2em auto;
max-width: 1000px;
}
.info-box {
flex: 1 1 300px;
background: #444;
color: white;
padding: 1em;
}
/* Lower section */
.lower-row {
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-between;
margin: 2em auto;
max-width: 1000px;
gap: 2em;
}
/* About box should appear first on small screens */
.about-box {
flex: 1 1 250px;
background: #333;
color: white;
padding: 1em;
order: -1; /* Makes it appear first when wrapped */
}
/* Grid of links */
.link-grid {
flex: 3 1 600px;
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.link-tile {
flex: 1 1 120px;
background: #222;
color: white;
padding: 1em;
text-align: center;
min-width: 100px;
}
/* === Responsive tweaks === */
@media (max-width: 768px) {
.info-row {
flex-direction: column;
}
.info-box {
flex: 1 1 auto;
}
.lower-row {
flex-direction: column;
}
}