aaaa

Author: RealMathModel

index.html

@@ -38,9 +38,9 @@
     radial-gradient(900px 520px at -8% 112%, rgba(79,184,154,.07), transparent 55%),
     radial-gradient(700px 700px at 50% 45%, rgba(11,18,32,.55), rgba(11,18,32,.0) 70%);}
 
-.wrap{position:relative; z-index:2; max-width:760px; margin:0 auto;
-  transition:max-width .2s}
-@media(min-width:900px){.wrap{max-width:1120px}}
+.wrap{position:relative; z-index:2; width:100%; max-width:min(1240px, 96vw); margin:0 auto;
+  padding:0 16px env(safe-area-inset-bottom) 16px; padding-top:calc(14px + env(safe-area-inset-top));}
+@media(max-width:899px){.wrap{max-width:760px}}
   padding:0 16px env(safe-area-inset-bottom) 16px; padding-top:calc(14px + env(safe-area-inset-top));}
 
 .term{position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden;
@@ -85,11 +85,23 @@
 .search input::placeholder{color:var(--faint)}
 
 .grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:4px}
-@media(min-width:900px){
-  .grid{grid-auto-flow:column; grid-template-rows:repeat(4,auto);
-        grid-template-columns:none; grid-auto-columns:minmax(260px,1fr);
-        overflow-x:auto; padding-bottom:6px; scrollbar-width:thin}
+
+@media(min-width:620px){
+  .grid{grid-auto-flow:column; grid-template-columns:none;
+        grid-template-rows:repeat(4,minmax(0,auto));
+        grid-auto-columns:minmax(0,1fr);}
   .grid .cblurb{white-space:normal; overflow:visible; text-overflow:clip}
+  .card{align-items:flex-start}
+  .cmeta{display:none}
+}
+@media(min-width:620px) and (max-width:899px){
+  .grid{grid-template-rows:repeat(4,minmax(0,auto))}
+  .card{padding:12px; gap:10px}
+  .ic{width:36px;height:36px;font-size:15px;border-radius:9px}
+  .ctitle{font-size:13.5px}
+}
+@media(min-width:900px){
+  .cmeta{display:flex}
 }
   .card{display:flex; align-items:center; gap:13px; padding:14px; cursor:pointer;
   background:var(--panel); border:1px solid var(--line); border-radius:12px;