a98665fdde
* Use content-visibility: auto for small render performance boost * Remove all but footer
62 lines
1.3 KiB
SCSS
62 lines
1.3 KiB
SCSS
@import '../config/import';
|
|
|
|
#footer-container {
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: 300px; // Chromium only. See our discussion here: https://github.com/forem/forem/pull/11560
|
|
@media (min-width: $breakpoint-l) {
|
|
contain-intrinsic-size: 260px;
|
|
}
|
|
}
|
|
|
|
.crayons-footer {
|
|
--footer-padding: var(--su-5);
|
|
background: var(--footer-bg);
|
|
color: var(--footer-color);
|
|
padding: var(--footer-padding);
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
@media (min-width: $breakpoint-m) {
|
|
--footer-padding: var(--su-8);
|
|
}
|
|
|
|
&__container {
|
|
justify-items: center;
|
|
font-size: var(--fs-s);
|
|
grid-gap: var(--su-6);
|
|
margin-bottom: env(safe-area-inset-bottom);
|
|
@media (min-width: $breakpoint-m) {
|
|
grid-gap: var(--su-5);
|
|
font-size: var(--fs-base);
|
|
}
|
|
}
|
|
|
|
&__divider {
|
|
border: none;
|
|
border-top: 1px solid var(--footer-color);
|
|
opacity: 0.15;
|
|
width: 20%;
|
|
margin: 0;
|
|
}
|
|
|
|
&__mascot {
|
|
position: absolute;
|
|
right: var(--footer-padding);
|
|
top: -2px;
|
|
display: none;
|
|
transform-origin: center top;
|
|
transition: all var(--transition-props);
|
|
|
|
@media (min-width: $breakpoint-l) {
|
|
display: block;
|
|
}
|
|
|
|
&:hover {
|
|
transform: rotate(-3deg);
|
|
}
|
|
}
|
|
|
|
.crayons-footer__description a {
|
|
font-weight: var(--fw-bold);
|
|
}
|
|
}
|