fix: improve mobile homepage layout

This commit is contained in:
rohitg00
2026-05-10 18:08:32 +01:00
parent 913ae44973
commit 4c3b3ac545
+50 -26
View File
@@ -183,36 +183,60 @@ body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg)
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:768px){
.sidebar{display:none}
.nav-inner{padding:0 10px;gap:6px}
.nav-actions{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav{overflow:hidden}
.nav-inner{height:auto;min-height:56px;padding:8px 12px;gap:8px;align-items:center;justify-content:flex-start}
.nav-logo{max-width:150px;overflow:hidden;flex:0 0 auto}
.nav-logo img{height:24px;max-width:150px;object-fit:contain}
.nav-actions{flex:1;min-width:0;gap:6px;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0}
.nav-actions::-webkit-scrollbar{display:none}
.dir-link{padding:4px 8px;font-size:.75rem;min-width:0;flex-shrink:0}
.search-btn{padding:4px 8px;min-width:0;flex-shrink:0}
.search-btn .label,.search-btn .kbd{display:none}
.gh-link{padding:4px 8px;gap:4px;flex-shrink:0;min-width:0;overflow:visible}
.gh-link span:not(.gh-stars){display:none}
.gh-stars.loaded{font-size:.7rem}
.theme-toggle{width:30px;height:30px;font-size:.9rem}
.hero{padding:60px 16px 40px;overflow:hidden}
.hero h1{font-size:1.8rem;word-break:break-word}
.hero-inline-logo{height:.9em}
.hero-logo{max-width:180px}
.hero-orb{width:300px;height:300px}
.hero-tagline{font-size:.9rem;padding:0 4px}
.dir-link{padding:6px 10px;font-size:.78rem;line-height:1;min-width:0;flex-shrink:0;border-radius:9px}
.search-btn,.gh-link{display:none}
.theme-toggle{width:28px;height:28px;font-size:.85rem;flex:0 0 auto}
.hero{padding:44px 18px 36px;overflow:hidden}
.hero h1{font-size:clamp(2rem,10vw,2.45rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 8px;word-break:normal;margin-bottom:14px}
.hero-inline-logo{height:auto;width:min(42vw,160px);max-width:160px;margin-left:0}
.hero-logo{max-width:170px}
.hero-orb{width:260px;height:260px}
.hero-tagline{font-size:1rem;line-height:1.55;max-width:34rem;padding:0;margin-bottom:26px}
.stats-bar{gap:6px}
.stats-bar img{height:18px}
.stats-bar img{height:18px;max-width:46vw}
.hero-ctas{display:none}
.hero-badges{gap:4px;padding:0 8px}
.hero-badges img{height:16px}
.hero-search{margin-top:20px;padding:10px 14px;font-size:.85rem}
.content{padding:0 12px 40px}
.content h2{font-size:1.3rem}
.content pre{margin:12px -12px;border-radius:0;border-left:none;border-right:none}
.content pre code{padding:16px 12px;font-size:.8rem}
.table-wrap{margin:12px -12px;border-radius:0;border-left:none;border-right:none}
.content table{font-size:.8rem}
.hero-badges{gap:5px;padding:0 4px;margin-bottom:28px}
.hero-badges img{height:18px;max-width:46vw}
.hero-search{display:flex;width:100%;margin-top:18px;padding:12px 14px;font-size:.9rem;border-radius:16px;text-align:left}
.hero-search span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-search-kbd{display:none}
.content{padding:0 18px 48px;font-size:.98rem;line-height:1.65}
.content p{line-height:1.65;margin-bottom:14px}
.content h2{font-size:1.35rem;margin:34px 0 18px;padding-left:12px}
.content h3{font-size:1.1rem;margin:24px 0 12px}
.content ul,.content ol{margin-left:18px}
.content li{overflow-wrap:anywhere}
.content a{overflow-wrap:anywhere}
.content code{overflow-wrap:anywhere}
.content pre{margin:12px -18px;border-radius:0;border-left:none;border-right:none}
.content pre code{padding:16px 18px;font-size:.78rem}
.table-wrap{margin:12px -18px;border-radius:0;border-left:none;border-right:none;max-width:calc(100vw - 1px)}
.content table{font-size:.78rem;min-width:640px}
.content th{padding:8px 10px}
.content td{padding:8px 10px}
.content td{padding:8px 10px;vertical-align:top}
.search-overlay{padding-top:10vh}
.search-box{width:calc(100vw - 24px);border-radius:14px}
.search-input-wrap{padding:0 14px}
.search-input{font-size:.95rem;padding:14px 10px}
.back-to-top{right:16px;bottom:16px;width:40px;height:40px}
}
@media(max-width:420px){
.nav-inner{padding:8px 10px}
.nav-logo{max-width:136px}
.nav-logo img{max-width:136px;height:23px}
.dir-link{padding:6px 9px;font-size:.75rem}
.theme-toggle{display:none}
.hero{padding-top:38px}
.hero-tagline{font-size:.95rem}
.hero-badges img{height:17px}
.content{padding-left:16px;padding-right:16px}
.content pre,.table-wrap{margin-left:-16px;margin-right:-16px}
}
@media(min-width:769px) and (max-width:1200px){.sidebar{display:none}}
</style>