Skip to content

Commit

Permalink
Improve homepage hero design
Browse files Browse the repository at this point in the history 
Co-authored-by: Kamil Tekiela <tekiela246@gmail.com>
Co-authored-by: Christoph M. Becker <cmbecker69@gmx.de>

Closes GH-459.
  • Loading branch information
@lhsazevedo
lhsazevedo authored Jun 13, 2022
1 parent 41e736f commit cfcf303
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 73 deletions.
5 changes: 5 additions & 0 deletions images/logos/php-logo-white.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 8 additions & 9 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;

Expand Down
181 changes: 121 additions & 60 deletions styles/home.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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%;
}
}
Expand Down
7 changes: 3 additions & 4 deletions styles/theme-base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Expand All @@ -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;
}
}
Expand Down

0 comments on commit cfcf303

Please sign in to comment.