blt/assets/styles/layout.less

60 lines
1.4 KiB
Plaintext

@footer-height: 40px;
@container-md-max-width: 1100px;
[v-cloak] { display: none; }
html, body {
height: 100%;
margin: 0;
}
[purpose='page-wrap'] {
height: 100%;
/* lesshint-disable */height: auto !important;/* lesshint-enable */
// ^^The above is to disable "importantRule" and "duplicateProperty" rules.
min-height: 100%;
position: relative;
padding-bottom: @footer-height;
}
[purpose='page-footer'] {
border-top: 1px solid rgba(0, 0, 0, 0.1);
height: @footer-height;
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
}
body.detected-mobile {
// Above and beyond the media queries below, this selector (which relies on
// `parasails` automatically attaching this class, if appropriate) contains
// styles intended to be activated specifically when loaded from a recognized
// mobile device, regardless of viewport dimensions. This includes tablet
// devices (like the iPad) as well as handset devices (like the iPhone).
// …
}
@media (max-width: 800px) {
[purpose='page-wrap'] {
padding-bottom: 75px;
[purpose='page-footer'] {
height: 75px;
[purpose='footer-copy'], [purpose='footer-nav'] {
width: 100%;
display: block;
text-align: center;
}
}
}
}
@media (max-width: 575px) {
[purpose='page-wrap'] {
padding-bottom: 100px;
[purpose='page-footer'] {
height: 100px;
}
}
}