Toggle search
Toggle menu
41
155
1
1.5K
Wizards and Warlords
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older editNewer edit →
Aurelian (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,509 edits
No edit summary
No edit summary
Line 40: Line 40:
}
}


 
/* PAGE BANNERS */
/* INTRO RULES */
/* ------------ */
/* ----------- */
.main-intro {
max-width: 1000px;
margin: 0 auto 12px auto;
text-align: center;
font-size: 1.05em;
line-height: 1.45;
}
 
.main-intro p {
margin: 0 0 10px 0;
}
 
 
/* SECTION BANNER RULES */
/* -------------------- */
.section-banner {
text-align: center;
margin: 28px auto 14px auto;
clear: both;
position: relative;
z-index: 2;
}
 
.section-banner img {
display: block;
width: 100%;
max-width: 700px;
height: auto;
margin: 0 auto;
}
 
 
/* PAGE BANNER */
/* ----------- */
.page-banner {
.page-banner {
text-align: center;
text-align: left;
margin: 0 auto 12px auto;
margin: 0 0 16px 0;
}
}


Line 86: Line 51:
width: 100%;
width: 100%;
height: auto;
height: auto;
margin: 0 auto;
margin: 0;
}
}


/* PAGE BANNER MOBILE/DESKTOP */
/* -------------------------- */
.page-banner-desktop {
.page-banner-desktop {
display: block;
display: block;
Line 97: Line 59:


.page-banner-desktop img {
.page-banner-desktop img {
max-width: 1400px;
max-width: 1600px;
}
}


Line 105: Line 67:


.page-banner-mobile img {
.page-banner-mobile img {
max-width: 700px;
max-width: 900px;
}
}


Line 118: Line 80:
}
}


/* MAIN INTRO */
/* ---------- */
.main-intro {
max-width: 1200px;
margin: 0 0 24px 0;
text-align: left;
font-size: 1.18em;
line-height: 1.6;
}
.main-intro p {
margin: 0 0 14px 0;
}
/* HOME PAGE SECTIONS */
/* ------------------ */
.home-section {
margin: 0 0 36px 0;
}
.home-section-title {
margin: 0 0 10px 0;
font-size: 2.4em;
line-height: 1.1;
font-weight: bold;
text-align: left;
border-bottom: 1px solid #c8ccd1;
padding-bottom: 4px;
}
.home-section-intro {
margin: 0 0 18px 0;
max-width: 1100px;
font-size: 1.08em;
line-height: 1.55;
text-align: left;
}


/* SHARED GRID RULES */
/* SHARED GRID RULES */
Line 129: Line 128:


.grid-item img {
.grid-item img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.grid-text {
margin-top: 10px;
font-size: 0.95em;
line-height: 1.45;
text-align: center;
}
/* IMAGE OVERLAY TITLE RULES */
/* ------------------------- */
.grid-image-wrap {
position: relative;
}
.grid-image-wrap img {
display: block;
display: block;
width: 100%;
width: 100%;
Line 157: Line 135:
}
}


.grid-overlay-title {
.grid-title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.92);
padding: 8px 14px;
font-variant: small-caps;
font-weight: bold;
font-weight: bold;
font-size: 26px;
font-size: 1.9em;
line-height: 1.1;
line-height: 1.1;
text-align: center;
text-align: left;
max-width: 80%;
margin: 0 0 10px 0;
box-sizing: border-box;
}
}


.grid-overlay-title a {
.grid-title a {
text-decoration: none;
text-decoration: none;
}
}


.grid-text {
margin-top: 10px;
font-size: 1.08em;
line-height: 1.55;
text-align: left;
}


/* GRID FOUR */
/* GRID FOUR */
Line 183: Line 159:
display: grid;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
gap: 24px;
width: 100%;
width: 100%;
text-align: center;
align-items: start;
align-items: start;
margin-bottom: 28px;
margin-bottom: 12px;
clear: both;
}
 
.grid-four .grid-item {
display: grid;
grid-template-rows: 72px auto 1fr;
align-items: start;
}
 
.grid-four .grid-title {
height: 72px;
display: flex;
align-items: end;
}
}


Line 194: Line 180:
.grid-four {
.grid-four {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.grid-four .grid-item {
grid-template-rows: auto auto 1fr;
}
.grid-four .grid-title {
height: auto;
font-size: 1.7em;
}
}
}
}


/* GRID THREE */
/* GRID THREE */
Line 203: Line 198:
display: grid;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
gap: 24px;
width: 100%;
width: 100%;
text-align: center;
align-items: start;
align-items: start;
}
}
Line 211: Line 205:
.grid-three .grid-item {
.grid-three .grid-item {
display: grid;
display: grid;
grid-template-rows: 85px auto 1fr;
grid-template-rows: 70px auto 1fr;
align-items: start;
align-items: start;
}
}


.grid-three .grid-title {
.grid-three .grid-title {
font-variant: small-caps;
height: 70px;
font-weight: bold;
font-size: 28px;
line-height: 1.1;
margin: 0 0 10px 0;
height: 85px;
display: flex;
display: flex;
align-items: center;
align-items: end;
justify-content: center;
font-size: 1.8em;
box-sizing: border-box;
text-align: center;
overflow-wrap: break-word;
}
 
.grid-three .grid-item img {
border: 1px solid #777;
}
 
.grid-three .grid-text {
margin-top: 8px;
}
}


Line 241: Line 219:
.grid-three {
.grid-three {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
}


.grid-three .grid-item {
.grid-three .grid-item {
grid-template-rows: 72px auto 1fr;
grid-template-rows: auto auto 1fr;
}
}


.grid-three .grid-title {
.grid-three .grid-title {
font-size: 24px;
height: auto;
height: 72px;
font-size: 1.6em;
}
}
}
}


/* GRID TWO */
/* GRID TWO */
Line 265: Line 243:
.grid-two-item {
.grid-two-item {
width: 100%;
width: 100%;
display: grid;
grid-template-rows: 80px auto;
align-items: start;
}
}


.grid-two-title {
.grid-two-title {
font-variant: small-caps;
font-weight: bold;
font-weight: bold;
font-size: 30px;
font-size: 2em;
line-height: 1.1;
line-height: 1.1;
text-align: center;
text-align: left;
margin: 0 0 12px 0;
margin: 0 0 12px 0;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
}


.grid-two-row {
.grid-two-row {
display: grid;
display: grid;
grid-template-columns: 140px 1fr;
grid-template-columns: 180px 1fr;
gap: 16px;
gap: 18px;
align-items: start;
align-items: start;
}
}
Line 301: Line 270:
.grid-two-text {
.grid-two-text {
text-align: left;
text-align: left;
font-size: 1.05em;
line-height: 1.55;
}
}


Line 306: Line 277:
.grid-two {
.grid-two {
grid-template-columns: 1fr;
grid-template-columns: 1fr;
}
.grid-two-item {
grid-template-rows: auto auto;
}
}


Line 316: Line 283:
}
}


.grid-two-title,
.grid-two-text {
.grid-two-text {
text-align: center;
text-align: left;
}
 
.grid-two-title {
font-size: 26px;
height: auto;
}
}
}
}


/* GRID ONE */
/* GRID ONE */
Line 332: Line 294:
width: 100%;
width: 100%;
margin: 0 0 32px 0;
margin: 0 0 32px 0;
padding-top: 24px;
padding: 20px 0;
padding-bottom: 24px;
border-top: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #ccc;
Line 339: Line 300:


.grid-one-title {
.grid-one-title {
font-variant: small-caps;
font-weight: bold;
font-weight: bold;
font-size: 36px;
font-size: 2.3em;
line-height: 1.1;
line-height: 1.1;
text-align: center;
text-align: left;
margin: 0 0 16px 0;
margin: 0 0 16px 0;
}
}
Line 364: Line 324:
.grid-one-text {
.grid-one-text {
text-align: left;
text-align: left;
font-size: 1.08em;
line-height: 1.6;
}
}


Line 369: Line 331:
.grid-one-row {
.grid-one-row {
grid-template-columns: 1fr;
grid-template-columns: 1fr;
}
.grid-one-text {
text-align: center;
}
.grid-one-title {
font-size: 30px;
}
}
}
}
Retrieved from "https://wizlords.wiki/MediaWiki:Common.css"