55 lines
1.7 KiB
CSS
55 lines
1.7 KiB
CSS
/**
|
|
* Responsive Styles
|
|
*/
|
|
/**
|
|
* Required Variables
|
|
*/
|
|
/**
|
|
* Root Media Query Variables
|
|
*/
|
|
:root {
|
|
--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
|
|
--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
|
|
--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
|
|
--responsive--alignfull-width: 100%;
|
|
--responsive--alignright-margin: var(--global--spacing-horizontal);
|
|
--responsive--alignleft-margin: var(--global--spacing-horizontal);
|
|
}
|
|
|
|
@media only screen and (min-width: 482px) {
|
|
:root {
|
|
--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
|
|
--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
|
|
--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
|
|
--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
|
|
}
|
|
}
|
|
@media only screen and (min-width: 822px) {
|
|
:root {
|
|
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
|
|
--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
|
|
}
|
|
}
|
|
/**
|
|
* Extends
|
|
*/
|
|
.default-max-width {
|
|
max-width: var(--responsive--aligndefault-width);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.wide-max-width {
|
|
max-width: var(--responsive--alignwide-width);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
@media only screen and (min-width: 482px) {
|
|
.full-max-width {
|
|
max-width: var(--responsive--alignfull-width);
|
|
width: auto;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}/*# sourceMappingURL=breakpoints.css.map */ |