112 lines
1.7 KiB
SCSS
112 lines
1.7 KiB
SCSS
|
///
|
||
|
|
/// Massively by HTML5 UP
|
||
|
|
/// html5up.net | @ajlkn
|
||
|
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||
|
|
///
|
||
|
|
|
||
|
|
/* Section/Article */
|
||
|
|
|
||
|
|
section, article {
|
||
|
|
&.special {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
cursor: default;
|
||
|
|
|
||
|
|
> .date {
|
||
|
|
display: block;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
height: 1;
|
||
|
|
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
> p {
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
> h1 + p {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
margin-top: -0.5rem;
|
||
|
|
line-height: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
> h2 + p {
|
||
|
|
font-size: 1rem;
|
||
|
|
margin-top: -0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
> h3 + p {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
margin-top: -0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
> h4 + p {
|
||
|
|
font-size: 0.8rem;
|
||
|
|
margin-top: -0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.major {
|
||
|
|
margin: 0 0 (_size(element-margin) * 2) 0;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
> :last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
> p {
|
||
|
|
margin-top: 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .date {
|
||
|
|
font-size: 1rem;
|
||
|
|
margin: 0 0 (_size(element-margin) * 2) 0;
|
||
|
|
|
||
|
|
&:before, &:after {
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
width: calc(50% - 6rem);
|
||
|
|
border-top: solid 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:after {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include breakpoint(medium) {
|
||
|
|
br {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include breakpoint(small) {
|
||
|
|
&.major {
|
||
|
|
margin: 0 0 _size(element-margin) 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin color-section($p: null) {
|
||
|
|
header {
|
||
|
|
&.major {
|
||
|
|
.date {
|
||
|
|
&:before, &:after {
|
||
|
|
border-top-color: _palette($p, border);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include color-section;
|