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; } }