Improve mobile responsiveness

config.nims

@@ -6,7 +6,8 @@
 
 # disable annoying warnings
 warning("GcUnsafe2", off)
-warning("ObservableStores", off)
+hint("XDeclaredButNotUsed", off)
+hint("User", off)
 
 const
   nimVersion = (major: NimMajor, minor: NimMinor, patch: NimPatch)

src/sass/profile/_base.scss

@@ -51,9 +51,10 @@
     margin-bottom: unset;
 }
 
-@media(max-width: 600px) {
+@media(max-width: 700px) {
     .profile-tabs {
         width: 100vw;
+        max-width: 600px;
 
         .timeline-container {
             width: 100% !important;
@@ -71,3 +72,9 @@
         padding: 0;
     }
 }
+
+@media (min-height: 900px) {
+    .profile-tab.sticky {
+        position: sticky;
+    }
+}

src/sass/profile/card.scss

@@ -103,7 +103,7 @@
     color: var(--profile_stat);
 }
 
-@media(max-width: 600px) {
+@media(max-width: 700px) {
     .profile-card-info {
         display: flex;
     }

src/sass/profile/photo-rail.scss

@@ -59,7 +59,7 @@
     padding-bottom: 12px;
 }
 
-@media(max-width: 600px) {
+@media(max-width: 700px) {
     .photo-rail-header {
         display: none;
     }
@@ -74,9 +74,7 @@
         overflow: hidden;
         transition: max-height 0.4s;
     }
-}
 
-@media(max-width: 600px) {
     .photo-rail-grid {
         grid-template-columns: repeat(6, 1fr);
     }

src/sass/timeline.scss

@@ -75,6 +75,7 @@
 
     &.wide {
         flex-grow: 1.2;
+        flex-basis: 50px;
     }
 }
 

src/views/general.nim

@@ -45,7 +45,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; titleText=""; desc=""; video="";
   let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
 
   buildHtml(head):
-    link(rel="stylesheet", type="text/css", href="/css/style.css?v=8")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=9")
     link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=2")
 
     if theme.len > 0:

src/views/profile.nim

@@ -105,8 +105,8 @@ proc renderProfile*(profile: Profile; timeline: var Timeline;
       tdiv(class="profile-banner"):
         renderBanner(profile)
 
-    let sticky = if prefs.stickyProfile: "sticky" else: "unset"
-    tdiv(class="profile-tab", style={position: sticky}):
+    let sticky = if prefs.stickyProfile: " sticky" else: ""
+    tdiv(class=(&"profile-tab{sticky}")):
       renderProfileCard(profile, prefs)
       if photoRail.len > 0:
         renderPhotoRail(profile, photoRail)