minor #33614 New tweaks to the Welcome Page (javiereguiluz)

This PR was merged into the 4.4 branch. Discussion ---------- New tweaks to the Welcome Page | Q | A | ------------- | --- | Branch? | 4.4 | Bug fix? | no | New feature? | no | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - Sorry for the noise! This is hopefully the last pull request related to the Welcome Page design tweaks. This one tweaks some margins, makes it look better on ultra-wide screens and prevents some unwanted horizontal/vertical scrollbars on some browsers. Commits ------- 2737a00 New tweaks to the Welcome Page
symfony · Sep 17, 2019 · 8ccacab · 8ccacab
2 parents 3c78fde + 2737a00
commit 8ccacab
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/src/Symfony/Component/HttpKernel/Resources/welcome.html.php b/src/Symfony/Component/HttpKernel/Resources/welcome.html.php
@@ -8,7 +8,7 @@
         <?php $hue = random_int(0, 360); ?>
         <?php $darkColor = static function (float $alpha = 1) use ($hue) { return "hsla($hue, 20%, 45%, $alpha)"; }; ?>
         <?php $lightColor = static function (float $alpha = 1) use ($hue) { return "hsla($hue, 20%, 95%, $alpha)"; }; ?>
-        body { background: <?= $lightColor(); ?>; color: <?= $darkColor(); ?>; display: flex; font: 16px/1.5 sans-serif; height: 100vh; justify-content: center; margin: 0; width: 100vw; }
+        body { background: <?= $lightColor(); ?>; color: <?= $darkColor(); ?>; display: flex; font: 16px/1.5 sans-serif; justify-content: center; margin: 0; }
         h1, h2 { line-height: 1.2; margin: 0 0 .5em; }
         h1 { font-size: 36px; }
         h2 { font-size: 21px; margin-bottom: 1em; }
@@ -31,9 +31,9 @@
         .version { font-size: 34px; }
         .check { display: inline-block; background: <?= $darkColor(); ?>; border-radius: 20px; margin: 0 10px; width: 54px; }
         .check svg { fill: <?= $lightColor(); ?>; }
-        .status-ready { margin-top: 28px; }
-        .resources { position: relative; padding: 3.5em 0; }
-        .resources .row { margin-left: 30px; margin-right: 30px; display: flex; justify-content: space-around; }
+        .status-ready { margin: 28px 0 0; }
+        .resources { margin: 0 auto; max-width: 960px; padding: 2.5em 0 3.5em; }
+        .resources .row { margin-left: 30px; margin-right: 30px; display: flex; justify-content: center; }
         .resource { padding: 0 10px; }
         .resource svg { height: 48px; width: 48px; fill: <?= $darkColor(); ?>; margin-bottom: 5px; }
         .resource h2 { font-size: 18px; font-weight: normal; margin-bottom: 5px; }
@@ -53,6 +53,7 @@
             .warning { text-align: center; }
             .warning svg { height: 32px; width: 32px; }
             .resources .row { margin-left: 50px; margin-right: 50px; }
+            .resource { padding: 0 30px; }
 
             .status { padding-bottom: 4em; }
             .status code { display: inline-flex; }
@@ -68,7 +69,7 @@
 <div class="wrapper">
     <div class="warning">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="32"><path fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" class=""></path></svg>
-        You're seeing this debug page because you haven't configured any homepage URL.
+        You're seeing this page because you haven't configured any homepage URL.
     </div>
 
     <div class="container">