makary/grav-theme-future2021
1
0
Fork 0
mirror of https://github.com/pmoreno-rodriguez/grav-theme-future2021.git synced 2025-07-23 02:18:57 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improved heading class

Browse source
This commit is contained in:
pmoreno.rodriguez 2023-02-07 11:30:59 +01:00 • committed by GitHub
parent 7b5a2a3830
commit 21576b63ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
assets/sass/components/_heading.scss
View file

@ -1,58 +1,74 @@
/* Sytles for heading */ /* Sytles for heading */
.heading { .heading {
padding: 1em 3em; @include padding((_size(section-spacing)) * 0, _size(section-spacing));
background-color: #fff; background: _palette(bg);
position: relative; border: solid 1px _palette(border);
border: solid 1px rgba(160, 160, 160, 0.3); margin: 0 0 (_size(section-spacing) * 0.25 ) 0;
border-bottom: none; position: relative;
.title { > header {
h2 { @include vendor('display', 'flex');
font-weight: 900; border-bottom: solid 1px _palette(border);
font-size: 1.5em; left: (_size(section-spacing) * -1);
} margin: (_size(section-spacing) * -1) 0 _size(section-spacing) 0;
} position: relative;
} width: calc(100% + #{_size(section-spacing) * 2});
@media screen and (max-width: 980px) {
.post { .title {
border-left: 0; @include vendor('flex-grow', '1');
border-right: 0; -ms-flex: 1;
left: -3em; padding: (_size(section-spacing) * 1.25) _size(section-spacing) (_size(section-spacing) * 1.1) _size(section-spacing);
width: calc(100% + (3em * 2));
h2 {
> header { font-weight: _font(weight-heading-extrabold);
-moz-flex-direction: column; font-size: 1.5em;
flex-direction: column; }
padding: 3.75em 3em 1.25em 3em;
border-left: 0; > :last-child {
margin-bottom: 0;
.title { }
-ms-flex: 0 1 auto; }
margin: 0 0 2em 0;
padding: 0;
text-align: center;
}
}
}
}
@media screen and (max-width: 736px) {
.heading {
padding: 1.5em 1.5em 0.1em 1.5em;
left: -1.5em;
margin: 0 0 2em 0;
width: calc(100% + (1.5em * 2));
> header {
padding: 3em 1.5em 0.5em 1.5em;
left: -1.5em;
margin: -1.5em 0 1.5em 0;
width: calc(100% + 3em);
.title h2 {
font-size: 1.1em;
}
}
} }
@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;
}
}
}
}
} }