mai
/
posimai-boki
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: モバイルセーフエリアと 100dvh でシステムナビと重ならないよう調整 

Made-with: Cursor
This commit is contained in:
posimai 2026-04-18 23:43:23 +09:00
parent 5377e508ae
commit e96efb776e
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -10,7 +10,7 @@
document.documentElement.setAttribute('data-theme',dark?'dark':'light');
})();
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
<meta name="description" content="簿記2級 概念学習・理解度チェックアプリ">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#0C1221" media="(prefers-color-scheme: dark)">
@ -47,6 +47,10 @@
--err:#F87171;
--radius:12px;
--radius-sm:8px;
--safe-top:env(safe-area-inset-top, 0px);
--safe-right:env(safe-area-inset-right, 0px);
--safe-bottom:env(safe-area-inset-bottom, 0px);
--safe-left:env(safe-area-inset-left, 0px);
}
[data-theme="light"]{
--accent:#0891B2;
@ -64,7 +68,9 @@
--warn:#D97706;
--err:#DC2626;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Geist',sans-serif;overflow:hidden}
html{height:100%}
html,body{background:var(--bg);color:var(--text);font-family:'Geist',sans-serif;overflow:hidden}
body{min-height:100%;min-height:-webkit-fill-available}
.aurora{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.aurora-blob{position:absolute;border-radius:50%;will-change:transform}
@ -76,7 +82,7 @@ html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Geist'
@keyframes ab3{from{transform:translate(0,0) scale(1)}to{transform:translate(-50px,60px) scale(0.93)}}
[data-theme="light"] .aurora-blob{opacity:0.35}
#app{position:relative;z-index:1;height:100vh;display:flex;flex-direction:column}
#app{position:relative;z-index:1;box-sizing:border-box;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:52px;border-bottom:1px solid var(--border);background:rgba(12,18,33,0.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-shrink:0}
@ -219,7 +225,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
.overlay-mob{display:none;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.5)}
.overlay-mob.open{display:block}
@media(max-width:680px){
#sidebar{position:fixed;left:0;top:52px;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.9,.2,1);width:260px}
#sidebar{position:fixed;left:0;top:calc(52px + var(--safe-top));bottom:var(--safe-bottom);z-index:50;transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.9,.2,1);width:260px}
#sidebar.open{transform:translateX(0)}
.sidebar-toggle{display:flex}
#main{padding:16px}

2
sw.js
View File

@ -1,5 +1,5 @@
// posimai-boki SW — stale-while-revalidate + skipWaiting
const CACHE = 'posimai-boki-v5';
const CACHE = 'posimai-boki-v6';
const STATIC = ['/', '/index.html', '/manifest.json', '/logo.png'];
self.addEventListener('install', e => {