1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-06-30 05:31:56 +02:00
blog/src/components/Layout.module.css

46 lines
1.0 KiB
CSS

.content {
padding: 0 calc(var(--spacer) / 1.5);
width: 100%;
max-width: var(--maxWidthContainer);
margin-left: auto;
margin-right: auto;
}
/* topbar and footer as fixed
site background
///////////////////////////////////// */
.document {
width: 100%;
padding-top: var(--spacer);
background-color: var(--body-background-color);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding-bottom: calc(var(--spacer) * 2);
transform: translate3d(0, 0, 0);
transition: 0.4s var(--easing);
transition-property: transform, background;
}
:global(.has-menu-open) .document {
transform: translate3d(0, calc(var(--spacer) * 2), 0);
}
@media (min-width: 60rem) {
.document {
padding-top: calc(var(--spacer) * 2);
}
}
@media (min-width: 40rem) and (min-height: 500px) {
.document {
margin-top: calc(var(--spacer) * 2.5);
/* height of footer */
margin-bottom: calc(var(--spacer) * 12);
position: relative;
z-index: 2;
min-height: 500px;
}
}