[web-php] master: Improve homepage hero design

Author: Lucas Azevedo (lhsazevedo) Committer: GitHub (web-flow) Pusher: cmb69 Date: 2022-06-13T16:07:27+02:00 Commit: https://github.com/php/web-php/commit/cfcf303e024eacbe89dbf7d126d185a8be11653b Raw diff: https://github.com/php/web-php/commit/cfcf303e024eacbe89dbf7d126d185a8be11653b.diff Improve homepage hero design Co-authored-by: Kamil Tekiela <tekiela246@gmail.com> Co-authored-by: Christoph M. Becker <cmbecker69@gmx.de> Closes GH-459. Changed paths: A images/logos/php-logo-white.svg M index.php M styles/home.css M styles/theme-base.css Diff: diff --git a/images/logos/php-logo-white.svg b/images/logos/php-logo-white.svg new file mode 100644 index 0000000000..d64788f11b --- /dev/null +++ b/images/logos/php-logo-white.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 100 50" fill="#ffffff"> + <path d="m7.579 10.123 14.204 0c4.169 0.035 7.19 1.237 9.063 3.604 1.873 2.367 2.491 5.6 1.855 9.699-0.247 1.873-0.795 3.71-1.643 5.512-0.813 1.802-1.943 3.427-3.392 4.876-1.767 1.837-3.657 3.003-5.671 3.498-2.014 0.495-4.099 0.742-6.254 0.742l-6.36 0-2.014 10.07-7.367 0 7.579-38.001 0 0m6.201 6.042-3.18 15.9c0.212 0.035 0.424 0.053 0.636 0.053 0.247 0 0.495 0 0.742 0 3.392 0.035 6.219-0.3 8.48-1.007 2.261-0.742 3.781-3.321 4.558-7.738 0.636-3.71 0-5.848-1.908-6.413-1.873-0.565-4.222-0.83-7.049-0.795-0.424 0.035-0.83 0.053-1.219 0.053-0.353 0-0.724 0-1.113 0l0.053-0.053"/> + <path d="m41.093 0 7.314 0-2.067 10.123 6.572 0c3.604 0.071 6.289 0.813 8.056 2.226 1.802 1.413 2.332 4.099 1.59 8.056l-3.551 17.649-7.42 0 3.392-16.854c0.353-1.767 0.247-3.021-0.318-3.763-0.565-0.742-1.784-1.113-3.657-1.113l-5.883-0.053-4.346 21.783-7.314 0 7.632-38.054 0 0"/> + <path d="m70.412 10.123 14.204 0c4.169 0.035 7.19 1.237 9.063 3.604 1.873 2.367 2.491 5.6 1.855 9.699-0.247 1.873-0.795 3.71-1.643 5.512-0.813 1.802-1.943 3.427-3.392 4.876-1.767 1.837-3.657 3.003-5.671 3.498-2.014 0.495-4.099 0.742-6.254 0.742l-6.36 0-2.014 10.07-7.367 0 7.579-38.001 0 0m6.201 6.042-3.18 15.9c0.212 0.035 0.424 0.053 0.636 0.053 0.247 0 0.495 0 0.742 0 3.392 0.035 6.219-0.3 8.48-1.007 2.261-0.742 3.781-3.321 4.558-7.738 0.636-3.71 0-5.848-1.908-6.413-1.873-0.565-4.222-0.83-7.049-0.795-0.424 0.035-0.83 0.053-1.219 0.053-0.353 0-0.724 0-1.113 0l0.053-0.053"/> +</svg> diff --git a/index.php b/index.php index 929ab536ed..3be49af4a0 100644 --- 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="/releases/8.1/index.php" class="hero-btn hero-btn-primary">What's new in 8.1</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 index 20e987de36..b40b03fb20 100644 --- a/styles/home.css +++ b/styles/home.css @@ -1,75 +1,153 @@ /* Home Page */ -#intro p { - color:#fff; + +/* Hero */ + +#intro .container { + padding: 0 24px; +} + +.hero { + width: 100%; + flex: none; + display: flex; + flex-direction: column; + align-items: center; + margin: 32px 0; +} + +.hero-logo { + width: 100%; + max-width: 240px; + margin-bottom: 24px; +} + +.hero-text { + margin-top: 0; + margin-bottom: 28px; + line-height: 1.5; + text-align: center; text-rendering: optimizeLegibility; } -#intro p, -#intro ul { - text-shadow:0 1px 2px rgba(0,0,0,.5); - font-size:1.125rem; + +.hero-text strong { + font-weight: 500; } -#intro ul a { - word-spacing: 0; +.hero-actions { + width: 100%; + display: flex; + flex-direction: column; + margin-bottom: 24px; } -#intro .row .blurb p:first-child { - margin-top:1.5rem; +.hero-btn { + box-sizing: border-box; + padding: 16px 32px; + margin-bottom: 12px; + border-radius: 30px; + text-align: center; + display: inline-block; + border: none; + font-size: 20px; + transition: background-color 0.2s; } -#intro .row .blurb, -#intro .row .download { - display:table-cell; - float:none; - padding:0 1.5rem; + +.hero-btn-primary { + background-color: #4f5b93; + color: #fff !important; } -#intro h3 { - margin:1.5rem 0 0; - color:#E6E6E6; +.hero-btn-primary:hover, .hero-btn-primary:focus { + background-color: #465081; } -#intro h3:after { - display:none; + +.hero-btn-secondary { + background-color: transparent; + color: #b8c0e9 !important; + border: 1px solid #6773ad; } -#intro .row { - position:relative; - display:table-row; +.hero-btn-secondary:hover, .hero-btn-secondary:focus { + background-color: #6773ad20; + border: 1px solid #6773ad; } -#intro ul { +.hero-versions { + margin: 0; list-style:none; - word-spacing:.25rem; - margin-left:0; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; + justify-content: center; } -#intro .dot { - display: inline-block; - width: 5px; - padding: 0 5px; +.hero-version { + margin-bottom: 12px; } -#intro .download { -} -#intro .download a.notes { - font-size:.75em; +.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 { + min-width: 188px; + } + + .hero-btn-secondary { + margin-left: 8px; + } +} + +@media (min-width: 992px) { + .hero { + margin: 60px 0; + } + + .hero-versions { + flex-direction: row; + } + + .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 +160,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 index fead11a7d9..7457cbab0c 100644 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -1541,7 +1541,6 @@ div.soft-deprecation-notice blockquote.sidebar { display:block; } .navbar-search, - #intro .download, #intro .background, aside.tips, .layout-menu { @@ -1549,7 +1548,7 @@ div.soft-deprecation-notice blockquote.sidebar { 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; } }