Adjust homepage hero

php · Nov 18, 2021 · e6ebe3c · e6ebe3c
1 parent 46473cc
commit e6ebe3c
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 74 deletions.
diff --git a/images/logos/php-logo-white.svg b/images/logos/php-logo-white.svg
diff --git a/index.php b/index.php
@@ -93,16 +93,16 @@
 $content .= "</div>";
 
 $intro = <<<EOF
-  <div class="row clearfix">
-    <div class="blurb">
-      <p>PHP is a popular general-purpose scripting language that is especially suited to web development.</p>
-      <p>Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.</p>
+  <div class="hero">
+    <img class="hero-logo" src="/images/logos/php-logo-white.svg" width="240" height="120">
+    <p class="hero-text">A <strong>popular general-purpose scripting language</strong> that is especially suited to web development.<br />Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.</p>
+    <div class="hero-actions">
+      <a href="/manual/en/getting-started.php" class="hero-btn hero-btn-primary">Get Started</a>
+      <a href="/downloads.php" class="hero-btn hero-btn-secondary">Download</a>
     </div>
-    <div class="download">
-      <h3>Download</h3>
 EOF;
 
-$intro .= "<ul>\n";
+$intro .= "<ul class='hero-versions'>\n";
 $active_branches = get_active_branches();
 krsort($active_branches);
 foreach ($active_branches as $major => $releases) {
@@ -111,12 +111,11 @@
         $version = $release['version'];
         list($major, $minor, $_) = explode('.', $version);
         $intro .= "
-            <li><a class='download-link' href='/downloads.php#v$version'>$version</a><span class='dot'>&middot;</span><a class='notes' href='/ChangeLog-$major.php#$version'>Release Notes</a><span class='dot'>&middot;</span><a class='notes' href='/migration$major$minor'>Upgrading</a></li>\n";
+            <li class='hero-version'><a class='hero-version-link' href='/downloads.php#v$version'>$version</a> &middot; <a class='notes' href='/ChangeLog-$major.php#$version'>Changelog</a> &middot; <a class='notes' href='/migration$major$minor'>Upgrading</a></li>\n";
     }
 }
 $intro .= "</ul>\n";
 $intro .= <<<EOF
-    </div>
   </div>
 EOF;
 

diff --git a/styles/home.css b/styles/home.css
@@ -1,75 +1,142 @@
 /* Home Page */
 
-#intro p {
-  color:#fff;
-  text-rendering: optimizeLegibility;
+
+/* Hero */
+
+#intro .container {
+  padding: 0 24px;
 }
-#intro p,
-#intro ul {
-    text-shadow:0 1px 2px rgba(0,0,0,.5);
-    font-size:1.125rem;
+
+.hero {
+  width: 100%;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 32px 0;
 }
 
-#intro ul a {
-    word-spacing: 0;
+.hero-logo {
+  width: 100%;
+  max-width: 240px;
+  margin-bottom: 24px;
 }
 
-#intro .row .blurb p:first-child {
-  margin-top:1.5rem;
+.hero-text {
+  margin-top: 0;
+  margin-bottom: 28px;
+  color:#E6E6E6;
+  line-height: 1.5;
+  text-align: center;
+  text-rendering: optimizeLegibility;
 }
-#intro .row .blurb,
-#intro .row .download {
-  display:table-cell;
-  float:none;
-  padding:0 1.5rem;
+
+.hero-actions {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24px;
 }
 
-#intro h3 {
-  margin:1.5rem 0 0;
-  color:#E6E6E6;
+.hero-btn {
+  padding: 16px 46px;
+  margin-bottom: 12px;
+  border-radius: 30px;
+  text-align: center;
+  display: inline-block;
+  border: none;
+  font-size: 20px;
+  transition: background-color 0.2s;
 }
-#intro h3:after {
-  display:none;
+
+.hero-btn-primary {
+  background-color: #4f5b93;
+  color: #fff !important;
 }
 
-#intro .row {
-  position:relative;
-  display:table-row;
+.hero-btn-primary:hover, .hero-btn-primary:focus {
+  background-color: #465081;
 }
 
-#intro ul {
-  list-style:none;
-  word-spacing:.25rem;
-  margin-left:0;
+.hero-btn-secondary {
+  background-color: transparent;
+  color: #b8c0e9 !important;
+  border: 1px solid #6773ad;
 }
 
-#intro .dot {
-    display: inline-block;
-    width: 5px;
-    padding: 0 5px;
+.hero-btn-secondary:hover, .hero-btn-secondary:focus {
+  background-color: #6773ad20;
+  border: 1px solid #6773ad;
 }
 
-#intro .download {
+.hero-versions {
+  margin: 0;
+  list-style:none;
+  flex-wrap: wrap;
+  justify-content: center;
 }
-#intro .download a.notes {
-    font-size:.75em;
+
+.hero-version {
+  margin-bottom: 8px;
+}
+
+.hero-versions a.notes {
+    font-size:.875rem;
     white-space:nowrap;
 }
-#intro .download a {
+
+.hero-versions a {
     color:#ccc;
     border:0;
 }
-#intro .download a:hover,
-#intro .download a:focus {
+
+.hero-versions a:hover,
+.hero-versions a:focus {
   border-bottom:1px dotted;
 }
 
-#intro .download a.download-link {
-    color:#fff;
-    width: 50px;
+.hero-version-link {
+    color:#fff !important;
     display: inline-block;
 }
 
+@media (min-width: 540px) {
+  .hero-actions {
+    flex-direction: row;
+    width: auto;
+  }
+
+  .hero-btn-secondary {
+    margin-left: 8px;
+  }
+}
+
+@media (min-width: 768px) {
+  .hero {
+    margin: 60px 0;
+  }
+
+  .hero-versions {
+    display: flex;
+  }
+
+  .hero-version {
+    font-size: 1.125rem;
+    padding: 0 1.5rem;
+  }
+
+  .hero-version:not(:first-child) {
+    border-left: 1px dotted #666;
+  }
+
+  .hero-text {
+    font-size: 18px;
+  }
+}
+
+
+/* Layout */
+
 #layout-content {
   border-right:.25rem solid #666;
 }
@@ -82,42 +149,25 @@ p.archive {
 	text-align: right;
 }
 
-@media (min-width: 480px) and (max-width: 768px) {
-    #intro .download {
-        width: 35%;
-    }
-
-    #intro .blurb {
-        width: 65%;
-    }
-}
-
 @media (min-width: 768px) {
     .navbar-search,
-    #intro .download,
     #intro .background,
     aside.tips,
     .layout-menu {
         width: 25%;
     }
 
-    #intro .blurb, #layout-content {
+    #layout-content {
         width: 75%;
     }
 }
 
-@media (min-width: 480px) and (max-width: 590px) {
-    #intro .dot {
-        display: none;
-    }
-}
-
 @media (min-width: 768px) and (max-width: 784px) {
-    #intro .download, aside.tips, .navbar-search {
+    aside.tips, .navbar-search {
         width: 30%;
     }
 
-    #intro .blurb, #layout-content {
+    #layout-content {
         width:70%;
     }
 }

diff --git a/styles/theme-base.css b/styles/theme-base.css
@@ -1541,15 +1541,14 @@ div.soft-deprecation-notice blockquote.sidebar {
     display:block;
   }
   .navbar-search,
-  #intro .download,
   #intro .background,
   aside.tips,
   .layout-menu {
     width: 25%;
     float: left;
   }
 
-  #intro .blurb, #layout-content {
+  #layout-content {
     float:left;
     width:75%;
   }
@@ -1565,11 +1564,11 @@ div.soft-deprecation-notice blockquote.sidebar {
 
 
 @media (min-width: 768px) and (max-width: 979px) {
-    #intro .download, aside.tips, .navbar-search {
+    aside.tips, .navbar-search {
         width: 30% !important;
     }
 
-    #intro .blurb, #layout-content {
+    #layout-content {
         width: 70% !important;
     }
 }