Merge pull request lichess-org#16613 from fitztrev/recap-responsive

recap: responsive tweaks for summary slide
johndoknjas · Dec 17, 2024 · c3c8b0e · c3c8b0e
2 parents 7423ee9 + 43dc359
commit c3c8b0e
Showing 1 changed file with 52 additions and 28 deletions.
diff --git a/ui/recap/css/_recap.scss b/ui/recap/css/_recap.scss
@@ -160,31 +160,16 @@ body {
 }
 
 .recap__shareable {
-  .logo {
-    width: 60%;
-    max-width: 400px;
-  }
+  .logo,
   h2 {
-    font-size: 1.5em;
-    margin: 0.4em 0 1.5em;
-  }
-  .stat {
-    font-size: 1.5em;
-    @media (max-width: at-most($x-small)) {
-      font-size: 1.3em;
-    }
-    @media (max-width: at-most($xx-small)) {
-      font-size: 1.2em;
-    }
+    display: none;
   }
   .grid {
     display: flex;
     flex-wrap: wrap;
-    row-gap: 1.5em;
-    padding: 0.5em;
+    row-gap: 0.5em;
 
     .stat {
-      flex: 50%;
       a {
         border: none;
 
@@ -196,32 +181,71 @@ body {
   }
 
   .openings {
-    margin-top: 2em;
+    margin-top: 1em;
+    display: flex;
 
     .stat {
+      flex: 50%;
+      font-size: 0.8em;
       margin-top: 1em;
     }
   }
-  @media (max-height: 650px) {
+}
+
+@media screen and (orientation: portrait) {
+  .recap__shareable .grid .stat {
+    flex: 50%;
+  }
+}
+@media screen and (orientation: landscape) {
+  .recap__shareable .grid .stat {
+    flex: 33%;
+  }
+}
+
+@media (min-height: at-least($short)) {
+  .recap__shareable {
     .logo {
-      height: 20px;
-      width: auto;
+      display: inline;
+      height: 30px;
     }
     h2 {
-      font-size: 1.2em;
-      margin: 0.4em 0;
+      display: block;
+      margin: 0.5em 0;
+    }
+    .grid {
+      row-gap: 1em;
+      padding: 0.5em;
+    }
+  }
+}
+
+@media (min-width: at-least($x-small)) and (max-width: at-most($small)) and (min-height: at-least($tall)) and (max-width: at-most($x-tall)) {
+  .recap__shareable {
+    .logo {
+      height: 40px;
+    }
+  }
+}
+
+@media (min-width: at-least($small)) and (max-width: at-most($large)), (min-height: at-least($x-tall)) {
+  .recap__shareable {
+    .logo {
+      height: 40px;
     }
     .openings {
-      margin-top: 1em;
+      margin-top: 2em;
       .stat {
         font-size: 1em;
-        margin-top: 0.5em;
       }
     }
   }
-  @media (min-width: at-least($xx-small)) {
+}
+
+@media (min-width: at-least($large)) and (min-height: at-least($x-tall)) {
+  .recap__shareable {
     .logo {
-      display: none;
+      height: 80px;
     }
   }
 }