Template:MainPageWelcomeCSS.css: Difference between revisions
From KSI Wiki
(Void changed the content model of the page Template:MainPageWelcomeCSS.css from "wikitext" to "Sanitized CSS") Tag: content model change |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
. | /* Outer purple container */ | ||
.mainpage-welcome-box { | |||
border: 2px solid #ddcef2; | |||
width: 95%; | |||
margin: 0 auto; | |||
padding: 1em; | |||
box-sizing: border-box; | |||
overflow: hidden; | |||
} | |||
/* Orange image box */ | |||
.mainpage-banner-wrapper { | |||
border: 2px solid #f79200; | border: 2px solid #f79200; | ||
padding: 0; | |||
margin: 0 auto; | |||
max-width: 1500px; | |||
width: 100%; | width: 100%; | ||
overflow: hidden; | overflow: hidden; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
. | /* Responsive image */ | ||
.mainpage-banner-img img { | |||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
display: block; | display: block; | ||
} | |||
/* Inline text row */ | |||
.mainpage-welcome-text { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-top: 1em; | |||
font-size: 95%; | |||
color: white; | |||
flex-wrap: wrap; | |||
text-align: center; | |||
padding: 0 1em; | |||
height: 3em; | |||
line-height: 3em; | |||
} | |||
.mainpage-welcome-text span { | |||
flex: 1; | |||
text-align: center; | |||
} | |||
/* Text alignment for different widths */ | |||
@media (min-width: 768px) { | |||
.mainpage-welcome-text span:first-child { text-align: left; } | |||
.mainpage-welcome-text span:last-child { text-align: right; } | |||
} | } | ||
Latest revision as of 12:53, 10 April 2025
/* Outer purple container */
.mainpage-welcome-box {
border: 2px solid #ddcef2;
width: 95%;
margin: 0 auto;
padding: 1em;
box-sizing: border-box;
overflow: hidden;
}
/* Orange image box */
.mainpage-banner-wrapper {
border: 2px solid #f79200;
padding: 0;
margin: 0 auto;
max-width: 1500px;
width: 100%;
overflow: hidden;
box-sizing: border-box;
}
/* Responsive image */
.mainpage-banner-img img {
width: 100%;
height: auto;
display: block;
}
/* Inline text row */
.mainpage-welcome-text {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1em;
font-size: 95%;
color: white;
flex-wrap: wrap;
text-align: center;
padding: 0 1em;
height: 3em;
line-height: 3em;
}
.mainpage-welcome-text span {
flex: 1;
text-align: center;
}
/* Text alignment for different widths */
@media (min-width: 768px) {
.mainpage-welcome-text span:first-child { text-align: left; }
.mainpage-welcome-text span:last-child { text-align: right; }
}