hugo-story/assets/sass/components/_index.scss

67 lines
1.1 KiB
SCSS

/*
Hugo Story by CaressOfSteel
A (modular, highly tweakable) responsive one-page theme for Hugo.
Ported from Story by HTML5UP.
This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
*/
/* Index */
.index {
> * {
@include padding(3rem, 0);
@include vendor('display', 'flex');
border-top: solid 1px;
> header {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
width: 15rem;
}
> .content {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
}
}
> :first-child {
border-top: 0;
}
@include breakpoint('<=medium') {
> * {
> header {
width: 11rem;
}
}
}
@include breakpoint('<=small') {
> * {
> header {
width: 10rem;
}
}
}
@include breakpoint('<=xsmall') {
> * {
@include vendor('flex-direction', 'column');
> header {
width: 100%;
}
}
}
}
@mixin color-index($p: null) {
.index {
> * {
border-top-color: _palette($p, border);
}
}
}
@include color-index;