106 lines
3.7 KiB
CSS
106 lines
3.7 KiB
CSS
/* temp */
|
|
section {
|
|
/* background: gray; */
|
|
margin-block: var(--space);
|
|
}
|
|
|
|
:where(header, section, footer) > * {
|
|
background-image: url('https://res.cloudinary.com/demo/image/upload/cashew_chicken.jpg');
|
|
background-size: cover;
|
|
color: var(--color-01);
|
|
/* text-shadow: 1px 1px 3px var(--color-02); */
|
|
}
|
|
|
|
:where(header, section, footer) {
|
|
display: grid;
|
|
row-gap: var(--content-gap);
|
|
grid-template-columns:
|
|
[viewport-start] 1fr
|
|
[site-padding-start] var(--site-padding)
|
|
[content-padding-start] var(--content-padding)
|
|
[content-start]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[one-twelfth]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[two-twelfths one-sixth]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[three-twelfths one-fourth fourth one-quarter]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[four-twelfths one-third]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[five-twelfths]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[six-twelfths one-half half]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[seven-twelfths]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[eight-twelfths two-thirds]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[nine-twelfths three-fourths third three-quarters]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[ten-twelfths five-sixths]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[eleven-twelfths]
|
|
minmax(0, calc(var(--max-content-width) / 12))
|
|
[content-end twelve-twelfths]
|
|
var(--content-padding) [content-padding-end]
|
|
var(--site-padding) [site-padding-end]
|
|
1fr [viewport-end];
|
|
|
|
> * {
|
|
display: grid;
|
|
grid-column: content-padding;
|
|
grid-template-columns: subgrid;
|
|
padding: var(--content-padding) 0;
|
|
|
|
> * { grid-column: content; }
|
|
|
|
&.full-viewport { grid-column: viewport !important; }
|
|
|
|
&.half-content-left {
|
|
grid-column-end: half !important;
|
|
padding: var(--content-padding) var(--content-padding) var(--content-padding) 0;
|
|
}
|
|
&.half-content-right {
|
|
grid-column-start: half !important;
|
|
padding: var(--content-padding) 0 var(--content-padding) var(--content-padding);
|
|
> * { grid-column-start: inherit; }
|
|
}
|
|
|
|
&.half-viewport-left {
|
|
grid-column: viewport-start / half !important;
|
|
padding: var(--content-padding) var(--content-padding) var(--content-padding) 0;
|
|
}
|
|
&.half-viewport-right {
|
|
grid-column: half / viewport-end !important;
|
|
padding: var(--content-padding) 0 var(--content-padding) var(--content-padding);
|
|
> * { grid-column-start: inherit; }
|
|
}
|
|
|
|
&.remove-padding {
|
|
grid-column: content;
|
|
padding: 0;
|
|
}
|
|
|
|
&.remove-inline-padding {
|
|
grid-column: content;
|
|
padding: var(--content-padding) 0;
|
|
}
|
|
|
|
@media (max-width: 1240px) {
|
|
&[class*="-left"] { grid-column-end: three-quarters !important; }
|
|
&[class*="-right"] { grid-column-start: one-quarter !important; }
|
|
}
|
|
|
|
@media (max-width: 940px) {
|
|
&[class*="-left"] { grid-column-end: five-sixths !important; }
|
|
&[class*="-right"] { grid-column-start: one-sixth !important; }
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
&[class*="-left"] { grid-column-end: content-end !important; }
|
|
&[class*="-right"] { grid-column-start: content-start !important; }
|
|
}
|
|
}
|
|
}
|