Style: style loading screen

public/css/index-tailwind-output.css

@@ -805,11 +805,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -825,6 +820,15 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -861,10 +865,6 @@ video {
   margin-right: 0.25rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-4 {
   margin-left: 1rem;
 }
@@ -1075,6 +1075,10 @@ video {
   width: 100%;
 }
 
+.w-1\/2 {
+  width: 50%;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -1133,10 +1137,6 @@ video {
   width: 16rem;
 }
 
-.w-1\/2 {
-  width: 50%;
-}
-
 .w-96 {
   width: 24rem;
 }
@@ -1532,6 +1532,10 @@ video {
   padding: 0.25rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1548,10 +1552,6 @@ video {
   padding: 0px;
 }
 
-.p-8 {
-  padding: 2rem;
-}
-
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;

scripts/generateLayouts.ts

@@ -280,7 +280,8 @@ async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alr
         .replace(
             /<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s,
             asLangSpan(layout.shortDescription)
-        )
+        )  .replace(/<!-- IMAGE-START -->.*<!-- IMAGE-END-->/s, "<img class='p-8 h-32 w-32 self-start' src='"+ icon+"' />")
+
         .replace(
             '<script type="module" src="./index.ts"></script>',
             `<script type="module"  src='./index_${layout.id}.ts'></script>`

theme.html

@@ -39,20 +39,34 @@
 
 
 <span class="absolute" id="belowmap" style="z-index: -1; visibility: hidden">Below</span>
-<div id="maindiv" class="h-full">
-    <div id="default-main">
+<div class="h-full" id="maindiv">
+    <div id="default-main h-full">
+        <div class="w-full h-screen flex flex-col items-center justify-between">
+            <div class="w-full h-full flex flex-col items-center">
                 
-        <span id="default-title">Loading MapComplete, hang on...</span>
+            <h1 id="default-title">Loading MapComplete, hang on...</h1>
 
+            <p class="text-xl">
                 <!-- DESCRIPTION START -->
                 MapComplete is an easy to use map viewer and map editor
                 <!-- DESCRIPTION END -->
+            </p>
+            <p>
+                Made with OpenStreetMap
+            </p>
+            </div>
+            
+            <!-- IMAGE-START -->
+                <img class="p-8 h-32 w-32 self-start" src="./assets/svg/add.svg">
+            <!-- IMAGE-END -->
+        </div>
     </div>
 </div>
 
 <script>
 
     let lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || 'en').substr(0, 2);
+
     function filterLangs(maindiv) {
         let foundLangs = 0
         for (const child of Array.from(maindiv.children)) {
@@ -74,12 +88,13 @@
             child.parentElement.removeChild(child)
         }
     }
+
     filterLangs(document.getElementById("default-main"))
     filterLangs(document.getElementById("default-title"))
 </script>
 
 
-<script type="module" src="./index.ts"></script>
+<script src="./index.ts" type="module"></script>
 <script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="//gc.zgo.at/count.js"></script>
 
 <script>