Sha256: e29abcc202074eb25171bd1a33e5e44457c23a08e1af7163c5182ae5d5301809
Contents?: true
Size: 1.41 KB
Versions: 12
Compression:
Stored size: 1.41 KB
Contents
@define-mixin grid-container {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-column-gap: var(--gutter);
}
@define-mixin grid-limit $limit {
@media screen and (min-width: $limit) {
--grid-limit: calc($limit - (var(--outer-padding) * 2));
}
}
:root {
--columns: 12;
--gutter: 2rem;
--outer-padding: 2rem;
@media (--tablet) {
//--columns: 9;
--gutter: 1.5rem;
--outer-padding: 1.5rem;
}
@media (--mobile) {
--columns: 4;
--outer-padding: 1rem;
}
@media print {
--outer-padding: 0px;
}
--column-width: calc(
(100% -
((var(--gutter) * (var(--columns) - 1)) + (var(--outer-padding) * 2))) /
var(--columns)
);
/* @mixin grid-limit 1400px; */
}
.grid-overlay {
display: none;
}
.grid-overlay--active {
--grid-overlay-width: var(--grid-limit,
calc(100% - (var(--outer-padding) * 2)));
display: block;
position: fixed;
z-index: 9000;
top: 0px;
width: var(--grid-overlay-width);
left: 50%;
margin-left: calc(var(--grid-overlay-width) / 2 * -1);
height: 100%;
pointer-events: none;
background: linear-gradient(
to right,
var(--grid-overlay-gutter, transparent) var(--gutter),
var(--grid-overlay-column, rgba(255, 0, 255, 0.05)) var(--gutter)
);
background-size: calc((100% + var(--gutter)) / var(--columns, 12)) 100%;
background-position: top 0px left calc(var(--gutter) * -1);
}
Version data entries
12 entries across 12 versions & 1 rubygems