.footer {
margin: $spacing-2; padding: $spacing-3; border-radius: $spacing-2; font-size: $small-font-size; text-align: center; @include with-theme { background-color: color-for(hl-area); color: color-for(hl); }
}
.footer-container {
margin: auto; @include on-desktop { max-width: 50%; } @include on-tablet { max-width: 75%; }
}
@mixin footer-section {
margin: $spacing-1 0pt;
}
.site-description {
@include footer-section; text-align: justify;
}
.social-bar {
@include footer-section;
}
.copyright {
@include footer-section; font-style: italic;
}
.social-link {
// Sizing and spacing margin: $spacing-1; // Sizing is scaled by font $font-size: $medium-font-size; // Manually set width and height width: $font-size + 2*$spacing-1; height: $font-size + 2*$spacing-1; border-radius: $font-size; // Center icon display: inline-grid; grid-template-rows: 1fr; grid-template-columns: 1fr; place-items: center; // Style icon font-size: $font-size; text-decoration: none; color: inherit !important;
}
.colormode-set {
// Vertical alignment display: inline-flex; flex-direction: row; align-items: center; justify-content: center; // Sizing and spacing font-size: $normal-font-size; padding: $spacing-1 $spacing-2; // Border @include with-theme { border: 1px solid color-for(text); border-radius: $spacing-1; } // Subcomponents > .colormode-icon { margin-right: $spacing-1; } #colormode-selector { background: transparent; border: none; @include with-theme { color: color-for(text); } }
}