diff --git a/frontend/src/index.css b/frontend/src/index.css index 65b30639..75500db4 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -93,6 +93,12 @@ Other button classes are defined further down together with other classes for th align-items: center; } +@media (max-width: 700px) and (orientation: portrait) { + .header-wrapper { + width: 200vw; + } +} + .header-heading { color: hsl(186deg 92% 11%); font-size: 3rem; @@ -122,7 +128,8 @@ Other button classes are defined further down together with other classes for th } /* stylelint-enable selector-class-pattern */ -.usr-header { +.usr-header, +.help-header { display: flex; justify-content: space-between; align-items: center; @@ -136,11 +143,27 @@ Other button classes are defined further down together with other classes for th height: 80px; } +@media (max-width: 700px) and (orientation: portrait) { + .usr-header { + width: 200vw; + } + + .help-header { + width: 200vw; + } +} + .spreadsheet { min-height: 100vh; margin-bottom: 5rem; } +@media (max-width: 700px) and (orientation: portrait) { + .spreadsheet { + width: 200vw; + } +} + .footer { z-index: 100; width: 100%; @@ -149,6 +172,13 @@ Other button classes are defined further down together with other classes for th background-color: white; } +@media (max-height: 700px) and (orientation: landscape) { + .footer { + position: relative; + z-index: 0; + } +} + .input-label { margin-left: 0.4rem; margin-top: 0.5rem; @@ -257,6 +287,12 @@ Other button classes are defined further down together with other classes for th background-color: hsl(70deg 55% 98%); } +@media (max-width: 700px) and (orientation: portrait) { + .login-wrapper { + width: 200vw; + } +} + .login-info { margin: 2rem 0 3rem; } @@ -678,13 +714,27 @@ Other button classes are defined further down together with other classes for th position: relative; } +@media (max-width: 700px) and (orientation: portrait) { + .help-wrapper { + position: flex; + flex-direction: column; + width: 200vw; + } +} + .help-title { font-size: 2rem; - margin-top: 1.5rem; + margin-top: 1rem; margin-left: 2rem; color: hsl(186deg 92% 11%); } +@media (max-width: 700px) and (orientation: portrait) { + .help-title { + font-size: 1.2rem; + } +} + .help-subtitle { font-size: 1.5rem; padding-top: 1.5rem; diff --git a/frontend/src/pages/Help.tsx b/frontend/src/pages/Help.tsx index 173868d4..f9fc6a16 100644 --- a/frontend/src/pages/Help.tsx +++ b/frontend/src/pages/Help.tsx @@ -47,8 +47,8 @@ export const Help = () => { }; return ( <> -
-

How do I use the urdr service?

+
+

What is urdr?