Fixed: Better layouts on small screens

mnot · Dec 9, 2023 · cfa4987 · cfa4987
1 parent bb6f493
commit cfa4987
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/src/scss/red_layout.scss b/src/scss/red_layout.scss
@@ -1,13 +1,14 @@
 /* layout, major elements */
 
 body {
+  --width: 650px;
   background-color: #fcfcfc;
   color: $text_colour;
   font: 12pt/14pt "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 1em $column_spacing;
   &.blank {
     margin: $vertical_space * 2 auto $vertical_space auto;
-    width: $left_width;
+    width: var(--width);
   }
 }
 
@@ -17,7 +18,7 @@ body {
 }
 
 #left_column {
-  width: $left_width;
+  width: var(--width);
   margin: 0;
   padding: 0;
 }
@@ -28,9 +29,10 @@ body {
   padding: 0;
 }
 
-@media screen and (max-width: $left_width) {
+@media screen and (max-width: 650px) {
   body {
     @include flex-flow(column wrap);
+    --width: calc(100% - 4px);
   }
 
   #right_column {
@@ -99,7 +101,7 @@ br {
   font-size: $detail_font_size;
   margin-top: 1em;
   @include centered-detail;
-  width: $left_width;
+  width: var(--width);
 }
 
 #final_status {
@@ -131,7 +133,7 @@ body.blank > .footer {
   position: absolute;
   margin: 0 auto;
   bottom: 15%;
-  width: $left_width;
+  width: var(--width);
 }
 
 /* news */
@@ -140,7 +142,7 @@ body.blank > .footer {
   text-align: center;
   font-size: 1.0;
   font-weight: normal;
-  width: $left_width;
+  width: var(--width);
 }
 .news-banner {
   color: $detail_text_colour;
@@ -155,7 +157,7 @@ body.blank > .footer {
   padding: 0.5em;
   font-weight: bold;
   font-size: 1.1em;
-  width: $left_width;
+  width: var(--width);
   box-sizing: content-box;
 }
 

diff --git a/src/scss/red_request.scss b/src/scss/red_request.scss
@@ -14,11 +14,11 @@ input#uri, input#go {
 }
 
 #request_form {
-  width: $left_width;
+  width: var(--width);
 }
 
 input#uri {
-  width: $left_width - 40px;
+  width: calc(var(--width) - 40px);
   color: $text_colour;
   border-right: none;
   &::placeholder {
@@ -40,7 +40,7 @@ input#go {
   -moz-border-radius-bottomleft: 0.5em;
   -moz-border-radius-bottomright: 0.5em;
   background-color: $input_colour;
-  width: $left_width;
+  width: var(--width);
   margin: 0;
 }
 
@@ -58,7 +58,7 @@ input#go {
 
 .req_hdr {
   background-color: $input_colour;
-  width: $left_width;
+  width: var(--width);
   white-space: nowrap;
 }
 
@@ -68,7 +68,7 @@ input.hdr_name, select.hdr_name {
 }
 
 input.hdr_val, select.hdr_val {
-  width: $left_width - 130px - 40px;
+  width: calc(var(--width) - 130px - 40px);
   box-sizing: border-box;
 }
 

diff --git a/src/scss/red_vars.scss b/src/scss/red_vars.scss
@@ -1,4 +1,3 @@
-$left_width: 650px;
 $column_spacing: 40px;
 $text_colour: #111;
 $link_colour: blue;