johnruina/serversite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile support

Browse Source
This commit is contained in:
johnruina
2026-06-16 09:45:49 -04:00
parent 9c7d1e2c6a
commit 12a102a3ca
9 changed files with 125 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aero.html
+17 -4
View File
@@ -208,11 +208,24 @@
.s-btn.active { color: #fff; border-color: #4a4a8a; background: #1a1a2e; } .s-btn.active { color: #fff; border-color: #4a4a8a; background: #1a1a2e; }
@media (max-width: 800px) { @media (max-width: 800px) {
.layout { flex-direction: column; padding: 1rem; padding-top: 3rem; } .layout { flex-direction: column; padding: 0.75rem; padding-top: 3rem; gap: 0.75rem; }
.settings { width: 100%; max-height: 200px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; padding: 0.8rem; } .settings { width: 100%; max-height: 170px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem; padding: 0.6rem; }
.settings .settings-title { width: 100%; } .settings .settings-title { width: 100%; font-size: 0.55rem; }
.settings .s-group { flex: 1; min-width: 100px; } .settings .s-group { flex: 1; min-width: 80px; }
.settings .s-group label { font-size: 0.5rem; }
.settings .palette-row { width: 100%; } .settings .palette-row { width: 100%; }
.palette-swatch { width: 24px; height: 16px; }
.subtitle { font-size: 0.5rem; }
.s-btn { font-size: 0.5rem; padding: 0.35rem 0; }
}
@media (max-width: 480px) {
.layout { padding: 0.5rem; padding-top: 2.6rem; gap: 0.5rem; }
.settings { max-height: 130px; padding: 0.4rem; gap: 0.3rem; }
.settings .s-group { min-width: 60px; }
.canvas-wrap canvas { border-radius: 8px; }
.s-group input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; }
.s-group input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
.info-row { font-size: 0.5rem; }
} }
</style> </style>
</head> </head>
cps.html
+16
View File
@@ -146,6 +146,22 @@
color: #555; color: #555;
font-size: 0.7rem; font-size: 0.7rem;
} }
@media (max-width: 600px) {
.cps-display { font-size: 3.5rem; }
.timer-display { font-size: 1rem; }
.stats { gap: 1.5rem; margin-top: 1rem; }
.stat-box .value { font-size: 1.1rem; }
.stat-box .label { font-size: 0.5rem; }
#statusMsg { font-size: 0.75rem; margin-top: 1.5rem; }
.back-btn { font-size: 0.65rem; padding: 0.3rem 0.6rem; }
.timer-btn { font-size: 0.65rem; padding: 0.3rem 0.6rem; }
}
@media (max-width: 400px) {
.cps-display { font-size: 2.5rem; }
.stats { gap: 1rem; }
.top-bar { padding: 0.5rem 0.75rem; }
}
</style> </style>
</head> </head>
<body> <body>
draw.html
+19 -7
View File
@@ -251,13 +251,25 @@
.settings-btn:hover { color: #ccc; border-color: #555; background: rgba(255,255,255,0.03); } .settings-btn:hover { color: #ccc; border-color: #555; background: rgba(255,255,255,0.03); }
@media (max-width: 700px) { @media (max-width: 700px) {
.draw-layout { flex-direction: column; padding: 1rem; padding-top: 3rem; } .draw-layout { flex-direction: column; padding: 0.75rem; padding-top: 3rem; gap: 0.5rem; }
.draw-settings { width: 100%; max-height: 200px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.8rem; } .draw-settings { width: 100%; max-height: 170px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.6rem; }
.draw-settings .settings-title { width: 100%; } .draw-settings .settings-title { width: 100%; font-size: 0.55rem; }
#wheelCanvas { width: 80px; height: 80px; } #wheelCanvas { width: 70px; height: 70px; }
.color-preview { width: 40px; height: 40px; } .color-preview { width: 35px; height: 35px; }
.slider-group { flex: 1; min-width: 80px; } .slider-group { flex: 1; min-width: 70px; }
.brush-row { width: auto; } .slider-group label { font-size: 0.5rem; }
.brush-btn { font-size: 0.5rem; padding: 0.3rem 0.5rem; }
.settings-btn { font-size: 0.5rem; padding: 0.35rem 0; }
}
@media (max-width: 480px) {
.draw-layout { padding: 0.4rem; padding-top: 2.6rem; gap: 0.4rem; }
.draw-settings { max-height: 130px; padding: 0.4rem; gap: 0.3rem; }
#wheelCanvas { width: 55px; height: 55px; }
.color-preview { width: 28px; height: 28px; }
.slider-group { min-width: 55px; }
.slider-group input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; }
.slider-group input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
.recent-swatch { width: 16px; height: 16px; }
} }
</style> </style>
</head> </head>
fluid.html
+17 -5
View File
@@ -234,12 +234,24 @@
.settings-btn:hover { color: #ccc; border-color: #555; background: rgba(255,255,255,0.03); } .settings-btn:hover { color: #ccc; border-color: #555; background: rgba(255,255,255,0.03); }
@media (max-width: 800px) { @media (max-width: 800px) {
.fluid-layout { flex-direction: column; padding: 1rem; padding-top: 3rem; } .fluid-layout { flex-direction: column; padding: 0.75rem; padding-top: 3rem; gap: 0.75rem; }
.fluid-settings { width: 100%; max-height: 200px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; padding: 0.8rem; } .fluid-settings { width: 100%; max-height: 170px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem; padding: 0.6rem; }
.fluid-settings .settings-title { width: 100%; } .fluid-settings .settings-title { width: 100%; font-size: 0.55rem; }
.fluid-settings .settings-group { flex: 1; min-width: 100px; } .fluid-settings .settings-group { flex: 1; min-width: 80px; }
.fluid-settings .settings-group label { font-size: 0.5rem; }
.fluid-settings .palette-row { width: 100%; } .fluid-settings .palette-row { width: 100%; }
.fluid-settings .settings-btn { flex: 1; } .palette-swatch { width: 24px; height: 16px; }
.settings-subtitle { font-size: 0.5rem; }
.settings-btn { font-size: 0.5rem; padding: 0.35rem 0; }
.fluid-label { font-size: 0.55rem; bottom: 0.5rem; }
}
@media (max-width: 480px) {
.fluid-layout { padding: 0.5rem; padding-top: 2.6rem; gap: 0.5rem; }
.fluid-settings { max-height: 130px; padding: 0.4rem; gap: 0.3rem; }
.fluid-settings .settings-group { min-width: 60px; }
.fluid-settings .settings-group input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; }
.fluid-settings .settings-group input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
.settings-info { font-size: 0.5rem; }
} }
</style> </style>
</head> </head>
fractal.html
+8 -1
View File
@@ -142,7 +142,14 @@
@media (max-width: 700px) { @media (max-width: 700px) {
.fractal-layout { flex-direction: column; padding: 1rem; padding-top: 3rem; } .fractal-layout { flex-direction: column; padding: 1rem; padding-top: 3rem; }
.fractal-sidebar { flex-direction: row; flex-wrap: wrap; justify-content: center; max-height: none; } .fractal-sidebar { flex-direction: row; flex-wrap: wrap; justify-content: center; max-height: none; gap: 0.35rem; order: 1; }
.fractal-main { order: 0; }
.fractal-sidebar button { padding: 0.4rem 0.7rem; font-size: 0.55rem; }
.fractal-hint { font-size: 0.5rem; }
.fractal-label { font-size: 0.55rem; }
}
@media (max-width: 400px) {
.fractal-sidebar button { padding: 0.3rem 0.5rem; font-size: 0.5rem; }
} }
</style> </style>
</head> </head>
index.html
+8 -2
View File
@@ -74,8 +74,14 @@
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.main-content { flex-direction: column; align-items: center; } .main-content { flex-direction: column; align-items: center; gap: 0.75rem; }
.button-sidebar { flex-direction: row; } .button-sidebar { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.action-btn { padding: 0.6rem 0.8rem; font-size: 0.7rem; white-space: nowrap; flex: 0 1 auto; }
.video-wrapper video { max-height: 40vh; object-fit: cover; }
}
@media (max-width: 400px) {
.action-btn { padding: 0.5rem 0.6rem; font-size: 0.6rem; }
} }
</style> </style>
</head> </head>
info.html
+10 -1
View File
@@ -130,7 +130,16 @@
@media (max-width: 600px) { @media (max-width: 600px) {
.row { flex-direction: column; gap: 0.1rem; } .row { flex-direction: column; gap: 0.1rem; }
.row .key { min-width: auto; } .row .key { min-width: auto; font-size: 0.55rem; }
.row .val { font-size: 0.7rem; }
h1 { font-size: 0.9rem; }
body { padding: 3.5rem 0.75rem 1rem; }
.section-title { font-size: 0.55rem; }
.copy-btn { font-size: 0.6rem; padding: 0.5rem 1rem; }
}
@media (max-width: 400px) {
body { padding: 3rem 0.5rem 0.75rem; }
.row .val { font-size: 0.65rem; }
} }
</style> </style>
</head> </head>
reaction.html
+15
View File
@@ -148,6 +148,21 @@
box-shadow: 0 0 20px rgba(74,74,138,0.3); box-shadow: 0 0 20px rgba(74,74,138,0.3);
transform: scale(1.03); transform: scale(1.03);
} }
@media (max-width: 600px) {
#statusText { font-size: 1.1rem; }
#statusText .sub { font-size: 0.7rem; }
.results { gap: 1rem; margin-top: 1.5rem; }
.result-box .value { font-size: 1.4rem; }
.result-box .label { font-size: 0.5rem; }
.play-again-btn { padding: 0.7rem 1.8rem; font-size: 0.75rem; }
}
@media (max-width: 400px) {
#statusText { font-size: 0.95rem; }
#statusText .sub { font-size: 0.6rem; }
.results { gap: 0.75rem; }
.result-box .value { font-size: 1.1rem; }
}
</style> </style>
</head> </head>
<body> <body>
wave.html
+15 -4
View File
@@ -198,11 +198,22 @@
.s-btn:hover { color: #ccc; border-color: #555; background: rgba(255,255,255,0.03); } .s-btn:hover { color: #ccc; border-color: #555; background: rgba(255,255,255,0.03); }
@media (max-width: 800px) { @media (max-width: 800px) {
.layout { flex-direction: column; padding: 1rem; padding-top: 3rem; } .layout { flex-direction: column; padding: 0.75rem; padding-top: 3rem; gap: 0.75rem; }
.settings { width: 100%; max-height: 200px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; padding: 0.8rem; } .settings { width: 100%; max-height: 170px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem; padding: 0.6rem; }
.settings .settings-title { width: 100%; } .settings .settings-title { width: 100%; font-size: 0.55rem; }
.settings .s-group { flex: 1; min-width: 100px; } .settings .s-group { flex: 1; min-width: 80px; }
.settings .s-group label { font-size: 0.5rem; }
.settings .palette-row { width: 100%; } .settings .palette-row { width: 100%; }
.palette-swatch { width: 24px; height: 16px; }
.subtitle { font-size: 0.5rem; }
.s-btn { font-size: 0.5rem; padding: 0.35rem 0; }
}
@media (max-width: 480px) {
.layout { padding: 0.5rem; padding-top: 2.6rem; gap: 0.5rem; }
.settings { max-height: 130px; padding: 0.4rem; gap: 0.3rem; }
.settings .s-group { min-width: 60px; }
.s-group input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; }
.s-group input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
} }
</style> </style>
</head> </head>