Template:Quote fancy/style.css: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
m (Padding around quote) |
||
(11 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.bg3wiki- | /* | ||
display: | * The content of the template is layed out in a 3x3 grid with the main quote | ||
* always at the center (2,2) and the author attribution just below at (2,3). | |||
* The image may be placed to the left at (1,2), to the right at (3,2), or above | |||
* at (2,1) depending on the specified layout. | |||
* | |||
* Mobile always uses the vertical layout. | |||
*/ | |||
/* Main div for for the template */ | |||
.bg3wiki-fancy-quote { | |||
display: grid; | |||
margin: 10px 4px; | |||
} | } | ||
/* Blockquote style changes depending if the image is on the left or right and on mobile */ | |||
.bg3wiki-fancy-quote-blockquote-left, .bg3wiki-fancy-quote-blockquote-right { | |||
padding: 8px 16px; | |||
margin: auto; | |||
} | } | ||
.bg3wiki-image-quote-image { | /* Mobile-specific style. Override the layout to be vertical and centered */ | ||
@media screen and (max-width: 779px) { | |||
.bg3wiki-fancy-quote-blockquote-left, .bg3wiki-fancy-quote-blockquote-right { | |||
margin-top: 10px; | |||
padding: 8px 2px; | |||
border-left: 0 !important; | |||
grid-row: 2; | |||
grid-column: 2; | |||
} | |||
.bg3wiki-fancy-quote-image-right, .bg3wiki-fancy-quote-image-left { | |||
margin: auto; | |||
grid-row: 1; | |||
grid-column: 2; | |||
} | |||
.bg3wiki-fancy-quote-author { | |||
grid-row: 3; | |||
grid-column: 2; | |||
} | |||
.bg3wiki-fancy-quote { | |||
justify-content: center !important; | |||
} | |||
} | } | ||
.bg3wiki- | /* Non-mobile style */ | ||
@media screen and (min-width: 780px) { | |||
.bg3wiki-fancy-quote-blockquote-left { | |||
margin- | margin-left: 10px; | ||
border-left: 2px solid #3d3d3d !important; | |||
} | grid-row: 1; | ||
grid-column: 2; | |||
} | |||
.bg3wiki-fancy-quote-blockquote-right { | |||
margin-right: 10px; | |||
border-left: 0 !important; | |||
border-right: 2px solid #3d3d3d; | |||
grid-row: 1; | |||
grid-column: 2; | |||
} | |||
.bg3wiki- | .bg3wiki-fancy-quote-image-right { | ||
margin: auto 0; | |||
grid-row: 1; | |||
grid-column: 3; | |||
} | |||
.bg3wiki-fancy-quote-image-left { | |||
margin: auto 0; | |||
grid-row: 1; | |||
grid-column: 1; | |||
} | |||
.bg3wiki-fancy-quote-author { | |||
grid-row: 2; | |||
grid-column: 2; | |||
} | |||
} | } | ||
.bg3wiki- | /* Author/attribution of the quote is aligned to the bottom-right corner of the quote */ | ||
.bg3wiki-fancy-quote-author { | |||
margin-left: auto; | margin-left: auto; | ||
margin-right: | margin-right: 32px; | ||
font-size: smaller; | font-size: smaller; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.bg3wiki- | /* Style for the beginning and ending quotation marks aligned with the corners of the quote */ | ||
.bg3wiki-fancy-quote-begin, .bg3wiki-fancy-quote-end { | |||
font-size: 300%; | font-size: 300%; | ||
font-family: serif; | font-family: serif; | ||
color: #3d3d3d; | |||
line-height: 1em; | line-height: 1em; | ||
} | |||
.bg3wiki-fancy-quote-begin { | |||
margin-bottom: auto; | margin-bottom: auto; | ||
margin-right: 8px | margin-right: 8px | ||
} | } | ||
.bg3wiki-fancy-quote-end { | |||
.bg3wiki- | |||
margin-top: auto; | margin-top: auto; | ||
margin-left: 8px | margin-left: 8px | ||
} | } |
Latest revision as of 18:39, 25 July 2024
/*
* The content of the template is layed out in a 3x3 grid with the main quote
* always at the center (2,2) and the author attribution just below at (2,3).
* The image may be placed to the left at (1,2), to the right at (3,2), or above
* at (2,1) depending on the specified layout.
*
* Mobile always uses the vertical layout.
*/
/* Main div for for the template */
.bg3wiki-fancy-quote {
display: grid;
margin: 10px 4px;
}
/* Blockquote style changes depending if the image is on the left or right and on mobile */
.bg3wiki-fancy-quote-blockquote-left, .bg3wiki-fancy-quote-blockquote-right {
padding: 8px 16px;
margin: auto;
}
/* Mobile-specific style. Override the layout to be vertical and centered */
@media screen and (max-width: 779px) {
.bg3wiki-fancy-quote-blockquote-left, .bg3wiki-fancy-quote-blockquote-right {
margin-top: 10px;
padding: 8px 2px;
border-left: 0 !important;
grid-row: 2;
grid-column: 2;
}
.bg3wiki-fancy-quote-image-right, .bg3wiki-fancy-quote-image-left {
margin: auto;
grid-row: 1;
grid-column: 2;
}
.bg3wiki-fancy-quote-author {
grid-row: 3;
grid-column: 2;
}
.bg3wiki-fancy-quote {
justify-content: center !important;
}
}
/* Non-mobile style */
@media screen and (min-width: 780px) {
.bg3wiki-fancy-quote-blockquote-left {
margin-left: 10px;
border-left: 2px solid #3d3d3d !important;
grid-row: 1;
grid-column: 2;
}
.bg3wiki-fancy-quote-blockquote-right {
margin-right: 10px;
border-left: 0 !important;
border-right: 2px solid #3d3d3d;
grid-row: 1;
grid-column: 2;
}
.bg3wiki-fancy-quote-image-right {
margin: auto 0;
grid-row: 1;
grid-column: 3;
}
.bg3wiki-fancy-quote-image-left {
margin: auto 0;
grid-row: 1;
grid-column: 1;
}
.bg3wiki-fancy-quote-author {
grid-row: 2;
grid-column: 2;
}
}
/* Author/attribution of the quote is aligned to the bottom-right corner of the quote */
.bg3wiki-fancy-quote-author {
margin-left: auto;
margin-right: 32px;
font-size: smaller;
font-weight: bold;
}
/* Style for the beginning and ending quotation marks aligned with the corners of the quote */
.bg3wiki-fancy-quote-begin, .bg3wiki-fancy-quote-end {
font-size: 300%;
font-family: serif;
color: #3d3d3d;
line-height: 1em;
}
.bg3wiki-fancy-quote-begin {
margin-bottom: auto;
margin-right: 8px
}
.bg3wiki-fancy-quote-end {
margin-top: auto;
margin-left: 8px
}