whilb/calculator.127local.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile responsiveness

Browse source
This commit is contained in:
whilb 2025-09-01 18:37:33 -07:00
parent b93349aa4d
commit ad664c32ea
4 changed files with 494 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

123
public/css/styles.css
View file

@ -65,16 +65,135 @@ select:disabled{ opacity:.55; cursor:not-allowed; }
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif}
.wrap{max-width:var(--max);margin:0 auto;padding:16px}
.bar{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0));backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
.bar__inner{display:flex;align-items:center;gap:12px;justify-content:space-between}
.bar{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0));backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10;min-height:70px}
.bar__inner{display:flex;align-items:center;gap:12px;justify-content:space-between;min-height:70px}
.brand{font-weight:700}
.btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:999px;cursor:pointer}
/* Mobile navigation toggle button */
.nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: 8px;
border-radius: 8px;
cursor: pointer;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.nav-toggle svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* ---- Layout ---- */
.layout{display:grid;grid-template-columns:240px 1fr;gap:16px}
@media (max-width: 820px){
.layout{grid-template-columns:1fr}
/* Show mobile nav toggle */
.nav-toggle {
display: flex !important;
}
/* Hide desktop navigation by default on mobile */
.sidenav {
display: none;
position: fixed;
top: 70px;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: var(--card);
border-radius: 0;
border: none;
box-shadow: var(--shadow);
overflow-y: auto;
}
/* Show navigation when active */
.sidenav.mobile-active {
display: block;
}
/* Add mobile overlay */
.sidenav::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
/* Adjust main content spacing for mobile */
.content {
margin-top: 16px;
}
/* Improve mobile spacing */
.wrap {
padding: 12px;
}
/* Better mobile grid */
.content {
grid-template-columns: 1fr;
gap: 12px;
}
/* Mobile-friendly cards */
.card {
padding: 12px;
}
/* Mobile-friendly inputs */
input, select, textarea {
padding: 12px;
font-size: 16px; /* Prevents zoom on iOS */
}
/* Mobile-friendly results */
.result {
margin-top: 16px;
padding: 12px;
overflow-x: auto;
}
/* Mobile-friendly tables */
table {
font-size: 14px;
}
/* Mobile-friendly calculator inputs */
.calculator-container {
padding: 16px 0;
}
/* Ensure proper spacing from navigation */
.layout {
padding-top: 16px;
}
/* Mobile-friendly footer */
.footer-content {
flex-direction: column;
gap: 12px;
text-align: center;
}
.source-link {
margin-left: 0;
}
}
/* ---- Vertical nav ---- */