160 lines
5.5 KiB
CSS
160 lines
5.5 KiB
CSS
/* RESPONSIVE DESIGN, MOBILE */
|
|
|
|
@media only all and (max-width:700px){
|
|
/* ------------- Order ------------- */
|
|
.blinkies.one { order: 0; }
|
|
.main { order: 1; }
|
|
.articles { order: 2; }
|
|
.chat-webrings { order: 3; }
|
|
.verticalscroll { order: 4; }
|
|
|
|
/* -------- Display changes ---------- */
|
|
.blinkies.two { display: none; }
|
|
.verticalscroll { display: flex; }
|
|
.scroll_below-clip-box { display: block; }
|
|
|
|
/* Decoration */
|
|
|
|
#try_hovering--blinkie { display: none; }
|
|
#try_tapping--blinkie { display: block; }
|
|
|
|
/* ------------- Layout ------------- */
|
|
|
|
.primary {
|
|
width: calc(100% - var(--scrolls-height) - var(--gap) * 2);
|
|
height: fit-content;
|
|
flex-direction: column;
|
|
padding-right: 0;}
|
|
|
|
.primary > * {
|
|
width: 100%;}
|
|
|
|
.main {
|
|
height: fit-content;
|
|
flex-grow: 1;
|
|
flex-basis: auto;}
|
|
|
|
.verticalscroll {
|
|
position: fixed;
|
|
right: 0; /* There is a slight inconsistency with this, as scrollbar width isn't considered with fixed, but the blank version does contemplate, creating a gap wider than expected */
|
|
margin: var(--gap);
|
|
justify-content: center;
|
|
height: calc(100% - (var(--mobile-botnavbar-height) + 5px) - (var(--mobile-topnavbar-height) + 5px) - var(--gap) * 2);
|
|
width: var(--scrolls-height);
|
|
overflow: hidden;}
|
|
|
|
.verticalscroll.blank {
|
|
height: 100%;
|
|
position: relative;
|
|
opacity: 0;}
|
|
|
|
.vertical-scroll-wrapper {
|
|
height: fit-content;}
|
|
|
|
.verticalscroll .clip-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: fit-content;
|
|
display: flex;
|
|
justify-content: center;}
|
|
|
|
.verticalscroll .auto-scroll{
|
|
display: flex;
|
|
flex-direction: column;}
|
|
|
|
.verticalscroll p {
|
|
writing-mode: vertical-lr;
|
|
text-orientation: sideways;
|
|
text-wrap: nowrap;}
|
|
|
|
.webrings {
|
|
gap: var(--blinkies-gap);
|
|
height: var(--webrings-mobile-height);
|
|
flex-shrink: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;}
|
|
|
|
.webrings .clip-box {
|
|
align-content: center;}
|
|
|
|
.webrings .auto-scroll {
|
|
height: 65%;
|
|
width: fit-content;
|
|
flex-direction: row;
|
|
animation-name: scroll-webring-mobile;}
|
|
|
|
.webrings .scroll_one, .webrings .scroll_two {
|
|
gap: 2em;
|
|
flex-direction: row;}
|
|
|
|
.webrings .scroll_one > div , .webrings .scroll_two > div {
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
width: fit-content;
|
|
}
|
|
|
|
.webrings .auto-scroll > * > div img {
|
|
height: 100%;
|
|
width: auto;}
|
|
|
|
.scroll_below-clip-box {
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 50px;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
clip-path: border-box;}
|
|
|
|
.scroll_below {
|
|
position: fixed;
|
|
left: 0px;
|
|
bottom: var(--mobile-botnavbar-height);
|
|
margin-bottom: 0px;
|
|
height: fit-content;
|
|
width: fit-content;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
text-align: center;}
|
|
|
|
/* ----------- Animation ----------- */
|
|
|
|
/* Blinkies */
|
|
.blinkies.one .auto-scroll {
|
|
animation-duration: 20s;
|
|
animation-direction: reverse;}
|
|
|
|
/* Webrings */
|
|
.webrings .clip-box {
|
|
height: 100%;
|
|
width: 100%;}
|
|
|
|
@keyframes scroll-webring-mobile {
|
|
from {transform: translateX(calc(-50%));}
|
|
to {transform: translateX(0%);}}
|
|
|
|
.webrings .auto-scroll {
|
|
animation-duration: 25s;
|
|
}
|
|
|
|
/* Vertical scroll text */
|
|
.verticalscroll .auto-scroll {
|
|
animation-name: scroll-vertical;
|
|
animation-direction: reverse;
|
|
animation-duration: 20s;}
|
|
|
|
@keyframes scroll-vertical {
|
|
from {transform: translateY(calc(-50%));}
|
|
to {transform: translateY(0%);}}
|
|
|
|
/* Opacity enhancements */
|
|
.webrings .clip-box{
|
|
mask-image: linear-gradient(to right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,1) 5%,
|
|
rgba(0,0,0,1) 95%,
|
|
rgba(0,0,0,0) 100%);}
|
|
} |