From 1f652a9090ca5779e09b2eac90765b284f0e3bb2 Mon Sep 17 00:00:00 2001 From: Trevor Fitzgerald Date: Mon, 16 Dec 2024 21:31:43 -0500 Subject: [PATCH] recap: responsive tweaks for summary slide --- ui/recap/css/_recap.scss | 80 ++++++++++++++++++++++++++-------------- 1 file changed, 52 insertions(+), 28 deletions(-) diff --git a/ui/recap/css/_recap.scss b/ui/recap/css/_recap.scss index 44e3129a00949..96cdfa0ac2bcd 100644 --- a/ui/recap/css/_recap.scss +++ b/ui/recap/css/_recap.scss @@ -159,31 +159,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; @@ -195,32 +180,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; } } }