Template:Callout/styles.css: Difference between revisions
From Space Station 14 Wiki
(stacked notices improv) |
(mobile fixes) |
||
Line 73: | Line 73: | ||
/* fit to the page on small resoltuions, preventing overflow */ | /* fit to the page on small resoltuions, preventing overflow */ | ||
max-width: 100%; | max-width: 100%; | ||
} | |||
/* when on tablet or smaller device, take up the whole width of the page. */ | |||
@media (max-width:801px) { | |||
/* actual callout */ | |||
.callout { | |||
width: 100%; | |||
} | |||
/* callout wrapper → a special class for creating same-width notices for stacking */ | |||
.callout-wrapper.stacked-notice { | |||
/* fill the page width */ | |||
width: 100%; | |||
/* no more float */ | |||
float: none; | |||
/* no more clear, since float is disabled */ | |||
clear: none; | |||
} | |||
/* callout wrapper → a special class for creating same-width notices for stacking → callout element */ | |||
.callout-wrapper.stacked-notice > .callout { | |||
/* fill the page width */ | |||
width: 100%; | |||
} | |||
} | } |
Revision as of 08:45, 24 August 2024
/* wrapper around the callout that manages its alignment. */
.callout-wrapper {
display: flex;
/* set by template */
/*justify-content: XXX;*/
margin-top: .5em;
}
/* actual callout */
.callout {
box-sizing: border-box;
display: flex;
flex-direction: row;
gap: .5rem;
min-width: 20rem;
width: fit-content;
/* set by template */
/*min-width: XXX;*/
padding: .5rem;
background-color: var(--bg-color-light-x2);
border: 1px solid;
border-left: 10px solid;
/* set by template */
/*border-color: XXX;*/
}
/* added to callout when it's should be a centered, page-wide banner */
.callout-banner {
width: 80%;
}
/* wrapper for images */
.callout-images { }
/* contains header and content elements */
.callout-header-content-container {
display: flex;
flex-direction: column;
}
/* header element */
.callout-header {
font-weight: bold;
font-size: large;
}
/* wrapper around content element */
.callout-content-container {
display: flex;
align-items: center;
height: 100%;
}
/* callout wrapper → a special class for creating same-width notices for stacking */
.callout-wrapper.stacked-notice {
/* make the wrapper fit the callout element */
width: fit-content;
/* stacked notices go right */
float: right;
/* allow for stacking */
clear: right;
}
/* callout wrapper → a special class for creating same-width notices for stacking → callout element */
.callout-wrapper.stacked-notice > .callout {
/* set to fixed width */
width: 30rem;
/* fit to the page on small resoltuions, preventing overflow */
max-width: 100%;
}
/* when on tablet or smaller device, take up the whole width of the page. */
@media (max-width:801px) {
/* actual callout */
.callout {
width: 100%;
}
/* callout wrapper → a special class for creating same-width notices for stacking */
.callout-wrapper.stacked-notice {
/* fill the page width */
width: 100%;
/* no more float */
float: none;
/* no more clear, since float is disabled */
clear: none;
}
/* callout wrapper → a special class for creating same-width notices for stacking → callout element */
.callout-wrapper.stacked-notice > .callout {
/* fill the page width */
width: 100%;
}
}