nfp_sites/app/footer/footer.scss

108 lines
2.0 KiB
SCSS

footer {
margin-top: 0px;
border-top: 1px solid $border;
display: flex;
padding: 20px;
background: $border;
color: $border-fg;
.sitemap {
display: flex;
flex: 2 1 auto;
flex-direction: column;
text-align: center;
align-items: center;
font-size: 11px;
font-weight: bold;
a {
text-decoration: none;
color: $border-fg-url;
}
a.root {
display: block;
margin: 2px;
padding: 2px 0 0;
}
ul {
margin: 2px 0 0;
display: flex;
padding: 0;
li {
padding: 2px 5px;
list-style-type: disc;
list-style-position: inside;
}
}
}
.footer-logo {
background: center no-repeat transparent;
background-size: contain;
width: 119px;
height: 150px;
}
.meta {
flex-grow: 2;
display: flex;
flex-wrap: wrap;
padding-top: 5px;
align-items: flex-end;
text-align: center;
justify-content: center;
a { margin: 0 3px; }
}
}
.darkmodeon {
footer {
border-top: 1px solid $dark_border;
background: $dark_border;
color: $dark_border-fg;
.sitemap {
a {
color: $dark_border-fg-url;
}
}
}
}
.daymode footer .footer-logo {
background-image: url("/assets/img/tsun_small.jpg");
}
.darkmodeon footer .footer-logo {
background-image: url("/assets/img/dark_tsun_small.jpg");
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.daymode .footer-logo {
background-image: url("/assets/img/tsun.jpg");
}
.darkmodeon .footer-logo {
background-image: url("/assets/img/dark_tsun.jpg");
}
}
@media (pointer:coarse) {
footer .sitemap a.root,
footer .sitemap a.child {
// padding: 10px 10px;
// display: inline-block;
}
}