tenkuma/lyGen
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add mobile layout.

Browse source
This commit is contained in:
天クマ 2026-02-06 21:34:52 -03:00
commit 3fae160fc2
2 changed files with 44 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -25,6 +25,7 @@
<div id="inputBox"></div> <div id="inputBox"></div>
</main> </main>
<aside class="closed" id="options"> <aside class="closed" id="options">
<p class="mobilePopupExit" onclick="togglePopup('#options')">Close</p>
<h2>Options</h2> <h2>Options</h2>
<div id="settingsOptions"> <div id="settingsOptions">
<div id="newVariation"> <div id="newVariation">
@ -45,6 +46,7 @@
</aside> </aside>
<aside class="closed" id="Preview"> <aside class="closed" id="Preview">
<p class="mobilePopupExit" onclick="togglePopup('#preview')">Close</p>
<h2>Preview</h2> <h2>Preview</h2>
<div id="previewTextBox"></div> <div id="previewTextBox"></div>
</aside> </aside>

72
style.css
View file

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