mirror of https://github.com/kremalicious/blog.git
76 lines
1.6 KiB
CSS
76 lines
1.6 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);
|
|
padding-bottom: calc(var(--spacer) * 2);
|
|
transform: translate3d(0, 0, 0);
|
|
transition: 0.4s var(--easing);
|
|
transition-property: transform, background, border, box-shadow;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.85);
|
|
box-shadow: 0 1px 10px rgba(1, 85, 101, 0.1),
|
|
0 -1px 4px rgba(1, 85, 101, 0.05);
|
|
}
|
|
|
|
:global(.has-menu-open) .document {
|
|
transform: translate3d(0, calc(var(--spacer) * 2), 0);
|
|
}
|
|
|
|
:global(.dark) .document {
|
|
border-top-color: rgba(255, 255, 255, 0.05);
|
|
box-shadow: 0 1px 8px rgba(0, 7, 8, 0.3), 0 -1px 4px rgba(0, 21, 25, 0.8);
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: var(--maxWidthContent);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.wide {
|
|
composes: container;
|
|
max-width: none;
|
|
}
|
|
|
|
.breakout {
|
|
margin-left: calc(-50vw + 50%);
|
|
margin-right: calc(-50vw + 50%);
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
.breakout {
|
|
margin-left: -8rem;
|
|
margin-right: -8rem;
|
|
}
|
|
}
|