bludit/bl-themes/massively/assets/sass/layout/_footer.scss
2017-05-21 22:01:44 +02:00

243 lines
5.0 KiB
SCSS

///
/// Massively by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Footer */
#footer {
@include color(alt);
@include vendor('display', 'flex');
background-color: _palette(alt, bg);
color: _palette(fg-light);
cursor: default;
position: relative;
margin: 0 auto;
width: calc(100% - #{_size(padding) * 2});
max-width: _size(wrapper);
z-index: 2;
> section {
@include vendor('flex-basis', '50%');
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
@include padding((_size(padding) * 2), (_size(padding) * 2));
border-left: solid 2px _palette(alt, border);
&:first-child {
border-left: 0;
}
&.split {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
padding: 0;
> section {
@include padding((_size(padding) * 2) - 1, (_size(padding) * 2));
border-top: solid 2px _palette(alt, border);
&:first-child {
@include padding((_size(padding) * 2) - 1, (_size(padding) * 2), (_size(padding), 0, 0, 0));
border-top: 0;
}
&:last-child {
@include padding((_size(padding) * 2) - 1, (_size(padding) * 2), (0, 0, _size(padding), 0));
}
}
&.contact {
> section {
@include vendor('display', 'flex');
@include vendor('align-items', 'center');
padding: (_size(padding) * 1.575) (_size(padding) * 2);
> * {
margin-bottom: 0;
}
> :first-child {
@include vendor('flex-shrink', '0');
@include vendor('flex-grow', '0');
width: 6rem;
}
> :last-child {
@include vendor('flex-shrink', '1');
@include vendor('flex-grow', '1');
}
&:first-child {
padding: (_size(padding) * 2) (_size(padding) * 2) ((_size(padding) * 2) - 1) (_size(padding) * 2);
}
&:last-child {
padding: ((_size(padding) * 2) - 1) (_size(padding) * 2) (_size(padding) * 2) (_size(padding) * 2);
}
&.alt {
@include vendor('align-items', 'flex-start');
> :last-child {
margin-top: -0.325rem;
}
}
}
}
}
}
form label,
h3,
p {
font-size: 0.8rem;
}
@include breakpoint(medium) {
display: block;
> section {
border-top: solid 2px _palette(alt, border);
&:first-child {
border-top: 0;
}
&.split {
> section {
@include padding((_size(padding) * 2), (_size(padding) * 2));
&:first-child {
@include padding((_size(padding) * 2), (_size(padding) * 2));
}
&:last-child {
@include padding((_size(padding) * 2), (_size(padding) * 2));
}
}
&.contact {
> section {
padding: (_size(padding) * 2);
&:first-child {
padding: (_size(padding) * 2);
}
&:last-child {
padding: (_size(padding) * 2);
}
}
}
}
}
form label,
h3,
p {
font-size: 0.9rem;
}
}
@include breakpoint(small) {
> section {
@include padding((_size(padding) * 1), (_size(padding) * 1));
&.split {
> section {
@include padding((_size(padding) * 1), (_size(padding) * 1));
&:first-child {
@include padding((_size(padding) * 1), (_size(padding) * 1));
}
&:last-child {
@include padding((_size(padding) * 1), (_size(padding) * 1));
}
}
&.contact {
> section {
padding: (_size(padding) * 1);
&:first-child {
padding: (_size(padding) * 1);
}
&:last-child {
padding: (_size(padding) * 1);
}
}
}
}
}
}
@include breakpoint(xsmall) {
width: 100%;
}
}
#copyright {
@include color-typography(invert);
position: relative;
color: transparentize(_palette(invert, fg), 0.75);
cursor: default;
font-family: _font(family-heading);
font-size: 0.8rem;
font-weight: _font(weight-heading);
letter-spacing: 0.075em;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
margin: (_size(padding) * 2) auto (_size(padding) * 4) auto;
width: calc(100% - #{_size(padding) * 2});
max-width: _size(wrapper);
z-index: 2;
a {
color: inherit;
border-bottom-color: inherit;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
li {
border-left: solid 2px;
display: inline-block;
line-height: 1;
margin-left: 1rem;
padding-left: 1rem;
&:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
}
}
@include breakpoint(large) {
margin: (_size(padding) * 2) auto;
}
@include breakpoint(xsmall) {
ul {
li {
border-left: 0;
margin: 1rem 0 0 0;
padding-left: 0;
display: block;
&:first-child {
margin-top: 0;
}
}
}
}
}