Michael Fabian 'Xaymar' Dirks
95 lines
1.8 KiB
SCSS
95 lines
1.8 KiB
SCSS
// --------------------------------------------------------------------------------
|
|
// Columns
|
|
// --------------------------------------------------------------------------------
|
|
columns {
|
|
display: grid;
|
|
grid-column-gap: 0.75rem;
|
|
grid-row-gap: 0.75rem;
|
|
}
|
|
|
|
columns[count="2"] {
|
|
grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 2 - 5rem), 1fr));
|
|
}
|
|
|
|
columns[count="3"] {
|
|
grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 3 - 5rem), 1fr));
|
|
}
|
|
|
|
columns[count="4"] {
|
|
grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 4 - 5rem), 1fr));
|
|
}
|
|
|
|
// Columns: Horizontal Alignment
|
|
columns.halign-start,
|
|
columns.halign-left {
|
|
align-items: start;
|
|
}
|
|
|
|
columns.halign-end,
|
|
columns.halign-right {
|
|
align-items: end;
|
|
}
|
|
|
|
columns.halign-center,
|
|
columns.halign-middle {
|
|
align-items: center;
|
|
}
|
|
|
|
columns.halign-baseline,
|
|
columns.halign-text {
|
|
align-items: baseline;
|
|
}
|
|
|
|
columns.halign-stretch,
|
|
columns.halign-fill {
|
|
align-items: stretch;
|
|
}
|
|
|
|
columns.valign-start,
|
|
columns.valign-left {
|
|
justify-items: start;
|
|
}
|
|
|
|
columns.valign-end,
|
|
columns.valign-right {
|
|
justify-items: end;
|
|
}
|
|
|
|
columns.valign-center,
|
|
columns.valign-middle {
|
|
justify-items: center;
|
|
}
|
|
|
|
columns.valign-baseline,
|
|
columns.valign-text {
|
|
justify-items: baseline;
|
|
}
|
|
|
|
columns.valign-stretch,
|
|
columns.valign-fill {
|
|
justify-items: stretch;
|
|
}
|
|
|
|
// --------------------------------------------------------------------------------
|
|
// Individual Column
|
|
// --------------------------------------------------------------------------------
|
|
column {
|
|
padding: 0 0;
|
|
}
|
|
|
|
column ~ column {
|
|
margin-top: 0;
|
|
}
|
|
|
|
// --------------------------------------------------------------------------------
|
|
// Fix Headings inside Columns
|
|
// --------------------------------------------------------------------------------
|
|
column > h1,
|
|
column > h2,
|
|
column > h3,
|
|
column > h4,
|
|
column > h5,
|
|
column > h6 {
|
|
margin: 0;
|
|
}
|