Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Race intro/styles.css: Difference between revisions

Template page
Created page with "Template:Race intro/styles.css: .wizlords-race-intro--with-examples { display: grid; grid-template-columns: 100px minmax(16rem, 1fr) minmax(240px, 34%); align-items: center; gap: 28px; margin: 18px 0 24px; } .wizlords-race-intro--with-examples .wizlords-race-intro-icon { min-width: 0; } .wizlords-race-intro--with-examples .wizlords-race-intro-icon img { display: block; width: 100px; height: 100px; object-fit: contain; border: 0; background: transparent..."
 
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 2: Line 2:
.wizlords-race-intro--with-examples {
.wizlords-race-intro--with-examples {
display: grid;
display: grid;
grid-template-columns: 100px minmax(16rem, 1fr) minmax(240px, 34%);
grid-template-columns: 100px minmax(16rem, 1fr) minmax(200px, 250px);
align-items: center;
align-items: center;
gap: 28px;
gap: 28px;
Line 22: Line 22:


.wizlords-race-intro--with-examples .wizlords-race-quote {
.wizlords-race-intro--with-examples .wizlords-race-quote {
position: relative;
min-width: 0;
min-width: 0;
margin: 0;
padding: 0 34px;
color: var(--wiz-text, #d2d2d2);
font-size: 16px;
font-style: italic;
line-height: 1.6;
}
.wizlords-race-intro--with-examples .wizlords-race-quote::before,
.wizlords-race-intro--with-examples .wizlords-race-quote::after {
position: absolute;
color: #555;
font-size: 42px;
line-height: 1;
}
.wizlords-race-intro--with-examples .wizlords-race-quote::before {
content: "\201C";
left: 0;
top: -6px;
}
.wizlords-race-intro--with-examples .wizlords-race-quote::after {
content: "\201D";
right: 0;
bottom: -18px;
}
.wizlords-race-intro--with-examples .wizlords-race-quote-source {
margin-top: 8px;
text-align: right;
font-size: 12px;
font-style: normal;
font-weight: bold;
}
}


.wizlords-race-intro-examples {
.wizlords-race-intro-examples {
min-width: 0;
min-width: 0;
width: 100%;
box-sizing: border-box;
justify-self: end;
margin: 0;
margin: 0;
padding: 4px;
padding: 4px;
Line 37: Line 75:
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
gap: 4px;
box-sizing: border-box;
border: 1px solid var(--wiz-content-border, #ff942d);
}
}


.wizlords-race-intro-example-image {
.wizlords-race-intro-example-image {
min-width: 0;
min-width: 0;
aspect-ratio: 3 / 4;
aspect-ratio: 4 / 5;
overflow: hidden;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
background: rgba(255, 255, 255, 0.04);
Line 85: Line 125:
width: 100%;
width: 100%;
box-sizing: border-box;
box-sizing: border-box;
justify-self: stretch;
}
}
}
}