156 lines
2.8 KiB
SCSS
156 lines
2.8 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;
|
|
padding: 0 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-filler {
|
|
width: 119px;
|
|
flex: 0 0 119px;
|
|
}
|
|
|
|
.footer-logo {
|
|
background: center no-repeat transparent;
|
|
background-size: contain;
|
|
align-self: center;
|
|
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_secondary-darker-fg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.daymode.jpegonly footer .footer-logo {
|
|
background-image: url("/assets/img/tsun_small.jpg");
|
|
}
|
|
|
|
.darkmodeon.jpegonly footer .footer-logo {
|
|
background-image: url("/assets/img/dark_tsun_small.jpg");
|
|
}
|
|
|
|
.avifsupport footer .footer-logo {
|
|
background-image: url("/assets/img/tsun.avif");
|
|
}
|
|
|
|
@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.jpegonly .footer-logo {
|
|
background-image: url("/assets/img/tsun.jpg");
|
|
}
|
|
|
|
.darkmodeon.jpegonly .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: 900px){
|
|
footer .footer-filler {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 480px){
|
|
footer {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.footer-logo {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.sitemap {
|
|
padding: 0px;
|
|
|
|
ul {
|
|
align-self: stretch;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer .sitemap a.root,
|
|
footer .sitemap a.child {
|
|
padding: 9px 10px;
|
|
display: inline-block;
|
|
}
|
|
}
|