mirror of
https://github.com/pmoreno-rodriguez/grav-theme-future2021.git
synced 2025-07-23 02:18:57 +00:00
74 lines
No EOL
2 KiB
SCSS
74 lines
No EOL
2 KiB
SCSS
/* Sytles for heading */
|
|
|
|
.heading {
|
|
@include padding((_size(section-spacing)) * 0, _size(section-spacing));
|
|
background: _palette(bg);
|
|
border: solid 1px _palette(border);
|
|
margin: 0 0 (_size(section-spacing) * 0.25 ) 0;
|
|
position: relative;
|
|
|
|
> header {
|
|
@include vendor('display', 'flex');
|
|
border-bottom: solid 1px _palette(border);
|
|
left: (_size(section-spacing) * -1);
|
|
margin: (_size(section-spacing) * -1) 0 _size(section-spacing) 0;
|
|
position: relative;
|
|
width: calc(100% + #{_size(section-spacing) * 2});
|
|
|
|
.title {
|
|
@include vendor('flex-grow', '1');
|
|
-ms-flex: 1;
|
|
padding: (_size(section-spacing) * 1.25) _size(section-spacing) (_size(section-spacing) * 1.1) _size(section-spacing);
|
|
|
|
h2 {
|
|
font-weight: _font(weight-heading-extrabold);
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
@include breakpoint('<=medium') {
|
|
border-left: 0;
|
|
border-right: 0;
|
|
left: _size(section-spacing) * -1;
|
|
width: calc(100% + (#{_size(section-spacing)} * 2));
|
|
|
|
> header {
|
|
@include vendor('flex-direction', 'column');
|
|
@include padding(_size(section-spacing) * 1.25, _size(section-spacing), (0, 0, -0.5em, 0));
|
|
border-left: 0;
|
|
|
|
.title {
|
|
-ms-flex: 0 1 auto;
|
|
margin: 0 0 _size(element-margin) 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=small') {
|
|
@include padding(_size(section-spacing-small), _size(section-spacing-small));
|
|
left: _size(section-spacing-small) * -1;
|
|
margin: 0 0 (_size(section-spacing) * 0.15 ) 0;
|
|
width: calc(100% + (#{_size(section-spacing-small)} * 2));
|
|
|
|
> header {
|
|
@include padding(_size(section-spacing-small) * 2, _size(section-spacing-small), (0, 0, -0.5em, 0));
|
|
left: (_size(section-spacing-small) * -1);
|
|
margin: (_size(section-spacing-small) * -1) 0 _size(section-spacing-small) 0;
|
|
width: calc(100% + #{_size(section-spacing-small) * 2});
|
|
|
|
.title {
|
|
h2 {
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|