Add mobile layout.

This commit is contained in:
天クマ 2026-02-06 21:34:52 -03:00
commit 3fae160fc2
2 changed files with 44 additions and 30 deletions

View file

@ -3,7 +3,6 @@
margin: 0;
box-sizing: border-box;
user-select: none;
/* scrollbar-width: thich; */
scrollbar-color: white black;
--border-contrast: darkgray;
}
@ -23,7 +22,7 @@ h1, h2 {
#previewText::after {
content: "↩";
color: rgba(255, 255, 255, 0.4);
color: rgba(0, 0, 0, 0.4);
}
body {
@ -39,19 +38,8 @@ body {
transition: .2s;
}
/* .stringParagraph:hover {
border-left-width: 1.05em;
}
.stringParagraph:hover::before {
content: ">";
color: black;
margin-left: -1em;
} */
.paragraphContainer::before {
color: white;
/* text-decoration:underline; */
border: medium solid white;
border-bottom: none;
padding: .2em;
@ -123,26 +111,31 @@ aside {
overflow-y: auto;
}
aside p {
text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
aside::before {
filter: grayscale(1);
content: "";
position: absolute;
inset: 0;
opacity: .2;
background-size: contain;
background-position: left bottom;
background-image: url('./background.png');
background-repeat: no-repeat;
z-index: 0;
pointer-events: none
filter: grayscale(1);
content: "";
position: absolute;
inset: 0;
opacity: .1;
background-size: cover;
background-position: left top;
background-image: url('./background.png');
background-repeat: no-repeat;
transform: rotateX(180deg);
z-index: 0;
pointer-events: none
}
aside > * {
position: relative;
z-index: 1;
position: relative;
z-index: 1;
}
aside.closed {
@ -215,11 +208,30 @@ header h1 {
background-size: 400% 100%;
}
.mobilePopupExit {
display: none;
font-size: large;
}
.mobilePopupExit::before {
content: "< ";
}
@media screen and (max-width: 1280px) {
aside {
width: 100vw;
}
.mobilePopupExit {
display: unset;
}
}
@keyframes movingGradientAnimation {
0%,100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}