nfp_sites/app/footer/footer.scss

140 lines
2.5 KiB
SCSS
Raw Normal View History

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;
padding-right: 20px;
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;
flex-wrap: wrap;
padding: 0 0 10px;
justify-content: center;
border-bottom: 1px solid white;
margin-bottom: 10px;
min-width: 300px;
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;
flex: 0 0 119px;
}
.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;
}
}
}
}
2019-10-01 03:45:44 +00:00
.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;
}
}
@media screen and (max-width: 480px){
footer {
flex-direction: column;
align-items: center;
.footer-logo {
margin-top: 20px;
}
.sitemap {
padding-right: 0px;
ul {
align-self: stretch;
}
}
}
footer .sitemap a.root,
footer .sitemap a.child {
padding: 9px 10px;
display: inline-block;
2019-10-01 03:45:44 +00:00
}
}