Screen size tweak

AirportAlphabetGame/Program.fs

@@ -44,7 +44,7 @@ module Program =
             use_router router
             use_developer_exceptions
             service_config ServiceConfig
-            url "http://0.0.0.0:8181"
+            url "http://0.0.0.0:5001"
         }
 
     run app

AirportAlphabetGame/Properties/launchSettings.json

@@ -13,7 +13,7 @@
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": true,
-      "applicationUrl": "http://localhost:8181",
+      "applicationUrl": "http://localhost:5001",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
@@ -22,7 +22,7 @@
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": true,
-      "applicationUrl": "https://localhost:7051;http://localhost:8181",
+      "applicationUrl": "https://localhost:7051;http://localhost:5001",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

AirportAlphabetGame/View.fs

@@ -16,7 +16,7 @@ let index content =
         head [] [
             meta [_name "viewport"; _content "width=device-width"]
             title [] [str "Have you flown the alphabet?"]
-            link [_rel "stylesheet" ; _href "/styles/core.css"]
+            link [_rel "stylesheet" ; _href "/styles/core.css?v=56"]
             script [_src "/scripts/htmx.min.js"] []
             script [_src "/scripts/json-enc.js"] []
             script [_src "/scripts/index.js"] []
@@ -88,6 +88,7 @@ let table (message) (title: string) (plaintextAirports: string) (rows: XmlNode[]
             ]
             yield! rows
         ]
+        br []
     ]
 
 

AirportAlphabetGame/sass/core.sass

@@ -44,7 +44,7 @@ h1
     abbr
         cursor: pointer
 
-    section
+    > section
         @include flex
         height: 100dvh
         width: 100dvw
@@ -71,11 +71,10 @@ h1
                 @include flex-column
                 flex-basis: 50%
                 width: 100%
-                gap: 0.6em
+                gap: 0.5em
 
                 section
                     @include flex
-                    flex-basis: 50%
                     width: 100%
                     > input
                         flex-basis: 75%
@@ -108,6 +107,12 @@ h1
                     .loading
                         display: none
 
+                section:first-of-type
+                    flex-basis: 70%
+
+                section:nth-of-type(2)
+                    flex-basis: 30%
+
 
             @include mobile
                 gap: 2em
@@ -127,6 +132,17 @@ h1
                         width: 100%
                         font-size: 1em
 
+                    > section:first-of-type
+                        @include flex-column
+
+                    > section:nth-of-type(2)
+                        width: 100%
+                        flex-basis: 25%
+
+                        label
+                            flex-basis: 50%
+                            height: 50%
+
 
 
             form.htmx-request
@@ -189,6 +205,7 @@ h1
                     th, td
                         background-color: lightcoral
                         color: black
+
             @include mobile
                 min-height: 100%
                 h1

AirportAlphabetGame/wwwroot/styles/core.css

@@ -38,7 +38,7 @@ h1 {
 #pageContainer abbr {
   cursor: pointer;
 }
-#pageContainer section {
+#pageContainer > section {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -72,13 +72,12 @@ h1 {
   flex-direction: column;
   flex-basis: 50%;
   width: 100%;
-  gap: 0.6em;
+  gap: 0.5em;
 }
 #pageContainer section#input article form section {
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-basis: 50%;
   width: 100%;
 }
 #pageContainer section#input article form section > input {
@@ -114,6 +113,12 @@ h1 {
 #pageContainer section#input article form section .loading {
   display: none;
 }
+#pageContainer section#input article form section:first-of-type {
+  flex-basis: 70%;
+}
+#pageContainer section#input article form section:nth-of-type(2) {
+  flex-basis: 30%;
+}
 @media screen and (max-width: 900px) {
   #pageContainer section#input article {
     gap: 2em;
@@ -133,6 +138,20 @@ h1 {
     width: 100%;
     font-size: 1em;
   }
+  #pageContainer section#input article form > section:first-of-type {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  #pageContainer section#input article form > section:nth-of-type(2) {
+    width: 100%;
+    flex-basis: 25%;
+  }
+  #pageContainer section#input article form > section:nth-of-type(2) label {
+    flex-basis: 50%;
+    height: 50%;
+  }
 }
 #pageContainer section#input article form.htmx-request input, #pageContainer section#input article form.htmx-request button, #pageContainer section#input article form.htmx-request label {
   display: none;

AirportAlphabetGame/wwwroot/styles/core.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../sass/core.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;;AACJ;EACI;;;AAeJ;EARI;EACA;EACA;EAQA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EA/BA;EACA;EACA;EA+BI;EACA;EACA;EACA;;AAEJ;EACI;;AAGJ;EACI;;AAEA;EA7CJ;EACA;EACA;EAIA;EAyCQ;;AAEA;EACI;EACA;EACA;;AAEJ;EAtDR;EACA;EACA;EAIA;EAkDY;EACA;EACA;;AAEA;EA5DZ;EACA;EACA;EA4DgB;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EAvEhB;EACA;EACA;EAuEoB;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAjGpB;EAiDI;IAoDQ;IACA;;EAEA;IACI;;EAEJ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;;AAKR;EACI;;AAEJ;EACI;;AAEhB;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EArIJ;EACA;EACA;EAIA;EAiIQ;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAER;EACI;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AACJ;EACI;EACA;;AAnLpB;EAyII;IA4CQ;;EACA;IACI;IACA;IACA;;EAEJ;IACI;;EAEA;AAAA;IAEI;IACA;IACA;IACA;;EAEJ;AAAA;IAEI;IACA;IACA;IACA;IACA","file":"core.css"}
+{"version":3,"sourceRoot":"","sources":["../../sass/core.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;;AACJ;EACI;;;AAeJ;EARI;EACA;EACA;EAQA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EA/BA;EACA;EACA;EA+BI;EACA;EACA;EACA;;AAEJ;EACI;;AAGJ;EACI;;AAEA;EA7CJ;EACA;EACA;EAIA;EAyCQ;;AAEA;EACI;EACA;EACA;;AAEJ;EAtDR;EACA;EACA;EAIA;EAkDY;EACA;EACA;;AAEA;EA5DZ;EACA;EACA;EA4DgB;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EAtEhB;EACA;EACA;EAsEoB;EACA;EACA;EACA;;AAEA;EACI;;AAER;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAER;EACI;;AAEJ;EACI;;AAtGhB;EAiDI;IAyDQ;IACA;;EAEA;IACI;;EAEJ;IACI;IACA;IACA;IACA;;EAEA;IACI;IACA;IACA;;EAEJ;IAvHhB;IACA;IACA;IAIA;;EAoHgB;IACI;IACA;;EAEA;IACI;IACA;;;AAKZ;EACI;;AAEJ;EACI;;AAEhB;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EArJJ;EACA;EACA;EAIA;EAiJQ;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAER;EACI;;AAGA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AACJ;EACI;EACA;;AAnMpB;EAyJI;IA6CQ;;EACA;IACI;IACA;IACA;;EAEJ;IACI;;EAEA;AAAA;IAEI;IACA;IACA;IACA;;EAEJ;AAAA;IAEI;IACA;IACA;IACA;IACA","file":"core.css"}