hobokenchicken/dustins-fault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve responsive layout and mobile experience

Browse Source 
- Add responsive breakpoints for better mobile support
- Improve stats grid layout for small screens (1 col → 2 col → auto-fit)
- Fix main content layout to stack properly on mobile
- Adjust padding, margins, and font sizes for different screen sizes
- Make header, controls, and forms more mobile-friendly
- Optimize incident log height and spacing for mobile devices
- Ensure nuclear option button scales appropriately
This commit is contained in:
Dustin Newkirk
2026-02-25 13:15:43 -05:00
parent 0d0963198e
commit 958edb5308
1 changed files with 146 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
www/index.html
View File

@@ -30,10 +30,16 @@
background: var(--terminal-bg);
color: var(--terminal-text);
min-height: 100vh;
padding: 20px;
padding: 10px;
overflow-x: hidden;
position: relative;
}
@media (min-width: 768px) {
body {
padding: 20px;
}
}
body::before {
content: '';
@@ -72,13 +78,20 @@
.header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
margin-bottom: 20px;
padding: 15px;
border: 3px solid var(--terminal-red);
background: rgba(255, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.header {
margin-bottom: 30px;
padding: 20px;
}
}
.header::before {
content: '⚠ WARNING: DUSTIN DETECTED ⚠';
@@ -100,11 +113,25 @@
.title {
font-family: 'Share Tech Mono', monospace;
font-size: 3.5em;
font-size: 2em;
color: var(--terminal-red);
text-shadow: 0 0 10px var(--terminal-red);
margin: 20px 0;
letter-spacing: 2px;
margin: 15px 0;
letter-spacing: 1px;
}
@media (min-width: 480px) {
.title {
font-size: 2.5em;
letter-spacing: 2px;
}
}
@media (min-width: 768px) {
.title {
font-size: 3.5em;
margin: 20px 0;
}
}
.subtitle {
@@ -121,19 +148,38 @@
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
grid-template-columns: 1fr;
gap: 15px;
margin-bottom: 30px;
}
@media (min-width: 480px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
}
.stat-card {
background: rgba(0, 255, 0, 0.05);
border: 1px solid var(--terminal-green);
padding: 20px;
padding: 15px;
border-radius: 5px;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.stat-card {
padding: 20px;
}
}
.stat-card.critical {
border-color: var(--terminal-red);
@@ -155,10 +201,22 @@
}
.stat-value {
font-size: 2.5em;
font-size: 1.8em;
font-weight: bold;
color: var(--terminal-red);
}
@media (min-width: 480px) {
.stat-value {
font-size: 2.2em;
}
}
@media (min-width: 768px) {
.stat-value {
font-size: 2.5em;
}
}
.stat-value.green {
color: var(--terminal-green);
@@ -170,34 +228,50 @@
.main-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 30px;
}
@media (max-width: 768px) {
@media (min-width: 1024px) {
.main-content {
grid-template-columns: 1fr;
grid-template-columns: 2fr 1fr;
gap: 30px;
}
}
.incident-log {
background: rgba(0, 0, 0, 0.8);
border: 2px solid var(--terminal-green);
padding: 20px;
padding: 15px;
border-radius: 5px;
max-height: 600px;
max-height: 400px;
overflow-y: auto;
}
@media (min-width: 768px) {
.incident-log {
padding: 20px;
max-height: 600px;
}
}
.log-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid var(--terminal-green);
}
@media (min-width: 768px) {
.log-header {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.log-title {
font-size: 1.5em;
@@ -206,7 +280,15 @@
.controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
@media (min-width: 768px) {
.controls {
justify-content: flex-end;
}
}
.control-btn {
@@ -299,15 +381,27 @@
.sidebar {
display: flex;
flex-direction: column;
gap: 20px;
gap: 15px;
}
@media (min-width: 1024px) {
.sidebar {
gap: 20px;
}
}
.blame-generator {
background: rgba(255, 0, 0, 0.1);
border: 2px solid var(--terminal-red);
padding: 20px;
padding: 15px;
border-radius: 5px;
}
@media (min-width: 768px) {
.blame-generator {
padding: 20px;
}
}
.blame-title {
color: var(--terminal-red);
@@ -369,9 +463,15 @@
.apology-generator {
background: rgba(0, 255, 255, 0.1);
border: 2px solid var(--terminal-cyan);
padding: 20px;
padding: 15px;
border-radius: 5px;
}
@media (min-width: 768px) {
.apology-generator {
padding: 20px;
}
}
.apology-title {
color: var(--terminal-cyan);
@@ -410,11 +510,19 @@
.footer {
text-align: center;
margin-top: 40px;
padding-top: 20px;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid var(--terminal-green);
color: var(--terminal-cyan);
font-size: 0.9em;
font-size: 0.8em;
}
@media (min-width: 768px) {
.footer {
margin-top: 40px;
padding-top: 20px;
font-size: 0.9em;
}
}
.easter-egg {
@@ -515,16 +623,26 @@
background: linear-gradient(45deg, #ff0000, #ff9900, #ffff00);
color: black;
border: none;
padding: 15px 30px;
padding: 12px 20px;
font-family: 'IBM Plex Mono', monospace;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
margin-top: 15px;
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 1px;
font-size: 0.9em;
animation: nuclear-pulse 2s infinite;
}
@media (min-width: 768px) {
.nuclear-option {
padding: 15px 30px;
letter-spacing: 2px;
font-size: 1em;
margin-top: 20px;
}
}
@keyframes nuclear-pulse {
0%, 100% { box-shadow: 0 0 10px #ff0000; }