Template:Quote/styles.css: Difference between revisions
Jump to navigation
Jump to search
Created page with "→Big quote with attribution (independent of Quotebox): .gq-quote { margin: 1em auto; padding: .5rem 0 .25rem .8rem; border-left: 4px solid #b0005a; →subtle brand accent: } .gq-text { font-size: 1.28rem; →bigger than body text: line-height: 1.45; font-style: italic; color: #3d3340; white-space: pre-line; →keep user line breaks: } .gq-meta { margin-top: .35rem; color: #5a4d55; font-weight: 600; } .gq-source { opacity: .85; } /*..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Big quote with | /* Big quote with curved vertical bar (independent of Quotebox) */ | ||
.gq-quote { | .gq-quote { | ||
position: relative; | |||
margin: 1em auto; | margin: 1em auto; | ||
padding: | padding-left: 1.25rem; /* space for the bar + gap */ | ||
} | } | ||
/* Curved/pill bar (same color family as Quotebox accent) */ | |||
.gq-bar { | |||
position: absolute; | |||
left: 0; | |||
top: .5rem; | |||
bottom: .5rem; /* makes the bar’s height adapt to content */ | |||
width: 8px; | |||
background: #b0005a; /* accent */ | |||
border-radius: 12px; /* curved ends */ | |||
} | |||
/* Quote body */ | |||
.gq-body { } | |||
/* Big, italic quote text; keep user line breaks */ | |||
.gq-text { | .gq-text { | ||
font-size: 1.28rem; | font-size: 1.28rem; | ||
line-height: 1.45; | line-height: 1.45; | ||
font-style: italic; | font-style: italic; | ||
color: #3d3340; | color: #3d3340; | ||
white-space: pre-line; | white-space: pre-line; | ||
} | } | ||
/* Attribution line */ | |||
.gq-meta { | .gq-meta { | ||
margin-top: .35rem; | margin-top: .35rem; | ||
| Line 22: | Line 38: | ||
/* alignment helpers + max-width control */ | /* alignment helpers + max-width control */ | ||
.gq-align-left { margin-left: 0; margin-right: auto; } | .gq-align-left { margin-left: 0; margin-right: auto; } | ||
.gq-align-center { margin-left: auto; margin-right: auto; } | .gq-align-center { margin-left: auto; margin-right: auto; } | ||
.gq-align-right { margin-left: auto; margin-right: 0; } | .gq-align-right { margin-left: auto; margin-right: 0; } | ||
Latest revision as of 02:28, 25 August 2025
/* Big quote with curved vertical bar (independent of Quotebox) */
.gq-quote {
position: relative;
margin: 1em auto;
padding-left: 1.25rem; /* space for the bar + gap */
}
/* Curved/pill bar (same color family as Quotebox accent) */
.gq-bar {
position: absolute;
left: 0;
top: .5rem;
bottom: .5rem; /* makes the bar’s height adapt to content */
width: 8px;
background: #b0005a; /* accent */
border-radius: 12px; /* curved ends */
}
/* Quote body */
.gq-body { }
/* Big, italic quote text; keep user line breaks */
.gq-text {
font-size: 1.28rem;
line-height: 1.45;
font-style: italic;
color: #3d3340;
white-space: pre-line;
}
/* Attribution line */
.gq-meta {
margin-top: .35rem;
color: #5a4d55;
font-weight: 600;
}
.gq-source { opacity: .85; }
/* alignment helpers + max-width control */
.gq-align-left { margin-left: 0; margin-right: auto; }
.gq-align-center { margin-left: auto; margin-right: auto; }
.gq-align-right { margin-left: auto; margin-right: 0; }