diff options
| -rw-r--r-- | src/css/style.css | 65 |
1 files changed, 63 insertions, 2 deletions
diff --git a/src/css/style.css b/src/css/style.css index 8f4b120..5076da9 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -221,7 +221,8 @@ body { scrollbar-width: thin; display: flex; flex-direction: column; - height: 100vh; + min-height: 100vh; + min-height: 100dvh; } /* webkit scrollbar (chrome, safari, edge) */ @@ -590,6 +591,66 @@ nav a:active { border-bottom-color: var(--primary); } +@media (max-width: 520px) { + body { + padding: var(--space-sm); + padding-top: calc(var(--space-sm) + 3rem); + padding-left: calc(var(--space-sm) + env(safe-area-inset-left)); + padding-right: calc(var(--space-sm) + env(safe-area-inset-right)); + } + + header { + gap: var(--space-sm); + padding-left: calc(var(--space-md) + env(safe-area-inset-left)); + padding-right: calc(var(--space-md) + env(safe-area-inset-right)); + } + + header nav { + flex-wrap: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + gap: var(--space-sm); + padding: 0.1rem 0; + } + + header nav a { + white-space: nowrap; + padding: 0.35rem 0.4rem; + } + + article { + padding: var(--space-sm); + box-shadow: + inset 1px 1px 0 var(--border-light), + inset -1px -1px 0 var(--border-dark), + 2px 2px 0 rgba(0, 0, 0, 0.14), + 3px 3px 0 rgba(0, 0, 0, 0.06); + } + + article h2 { + margin: calc(var(--space-sm) * -1) calc(var(--space-sm) * -1) var(--space-sm); + } + + table { + display: block; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 2px 2px 0 + rgba(0, 0, 0, 0.12); + } + + th, + td { + padding: var(--space-xs) 0.6rem; + } + + pre { + padding: var(--space-sm); + box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 2px 2px 0 + rgba(0, 0, 0, 0.12); + } +} + main { flex: 1; } @@ -1299,7 +1360,7 @@ button:disabled { .demo-page .component-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-md); margin: var(--space-md) 0; } |