User:Vaileasys/sandbox 3: Difference between revisions
VaileasysBot (talk | contribs) (test (by SublimeText.Mediawiker)) |
(quote & infobox css) |
||
Line 1: | Line 1: | ||
{{User:Vaileasys/sandbox 3|text=this is some text|author=this is an author}} | |||
{{ | <onlyinclude><div class="quote"> | ||
| | <div class="quote-mark">“</div> | ||
| | <div class="quote-text">{{{text|}}}{{#if:{{{author|}}}|<div class="quote-author">— {{{author}}}</div>}}</div> | ||
</div></onlyinclude> | |||
<syntaxhighlight lang="css"> | |||
/* Outer container */ | |||
.quote { | |||
< | display: flex; | ||
font-family: 'Georgia', 'Times New Roman', 'Times', serif; | |||
} | |||
/* Inner left quotation mark */ | |||
< | .quote .quote-mark { | ||
font-weight: bold; | |||
font-size: 4em; | |||
height: 1em; | |||
} | |||
/* Inner text container */ | |||
.quote .quote-text { | |||
margin: 0.5em; | |||
padding-left: 0.5em; | |||
border-left: 1px solid #000000; | |||
< | font-style: italic; | ||
} | |||
/* Author section */ | |||
.quote .quote-author { | |||
text-align: right; | |||
| | } | ||
</syntaxhighlight> | |||
<syntaxhighlight lang="css"> | |||
/* increase infobox size when screen width is less than 720px */ | |||
@media screen and (max-width: 719px) { | |||
div.infobox { | |||
width: 100%; | |||
}} | } | ||
{{ | } | ||
</syntaxhighlight> | |||
{{ | |||
| | |||
| | |||
< | |||
}} | |||
< | |||
< | |||
< | |||
}} |
Revision as of 07:25, 29 March 2024
“
this is some text
“
/* Outer container */
.quote {
display: flex;
font-family: 'Georgia', 'Times New Roman', 'Times', serif;
}
/* Inner left quotation mark */
.quote .quote-mark {
font-weight: bold;
font-size: 4em;
height: 1em;
}
/* Inner text container */
.quote .quote-text {
margin: 0.5em;
padding-left: 0.5em;
border-left: 1px solid #000000;
font-style: italic;
}
/* Author section */
.quote .quote-author {
text-align: right;
}
/* increase infobox size when screen width is less than 720px */
@media screen and (max-width: 719px) {
div.infobox {
width: 100%;
}
}