php/archived-web-php
1
0
Fork 0
mirror of https://github.com/php/web-php.git synced 2026-03-23 23:02:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve homepage hero design

Browse Source 
Co-authored-by: Kamil Tekiela <tekiela246@gmail.com>
Co-authored-by: Christoph M. Becker <cmbecker69@gmx.de>

Closes GH-459.
This commit is contained in:
Lucas Azevedo
2022-06-13 11:07:27 -03:00
committed by GitHub
parent 41e736f108
commit cfcf303e02
4 changed files with 139 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
images/logos/php-logo-white.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

17
index.php
View File

@@ -93,16 +93,16 @@ $content .= '<p class="archive"><a href="/archive/">Older News Entries</a></p>';
$content .= "</div>"; $content .= "</div>";
$intro = <<<EOF $intro = <<<EOF
<div class="row clearfix"> <div class="hero">
<div class="blurb"> <img class="hero-logo" src="/images/logos/php-logo-white.svg" width="240" height="120">
<p>PHP is a popular general-purpose scripting language that is especially suited to web development.</p> <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>
<p>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>
<div class="download">
<h3>Download</h3>
EOF; EOF;
$intro .= "<ul>\n"; $intro .= "<ul class='hero-versions'>\n";
$active_branches = get_active_branches(); $active_branches = get_active_branches();
krsort($active_branches); krsort($active_branches);
foreach ($active_branches as $major => $releases) { foreach ($active_branches as $major => $releases) {
@@ -111,12 +111,11 @@ foreach ($active_branches as $major => $releases) {
$version = $release['version']; $version = $release['version'];
list($major, $minor, $_) = explode('.', $version); list($major, $minor, $_) = explode('.', $version);
$intro .= " $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 .= "</ul>\n";
$intro .= <<<EOF $intro .= <<<EOF
</div>
</div> </div>
EOF; EOF;

185
styles/home.css
View File

@@ -1,75 +1,153 @@
/* Home Page */ /* 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; text-rendering: optimizeLegibility;
} }
#intro p,
#intro ul { .hero-text strong {
text-shadow:0 1px 2px rgba(0,0,0,.5); font-weight: 500;
font-size:1.125rem;
} }
#intro ul a { .hero-actions {
word-spacing: 0; width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 24px;
} }
#intro .row .blurb p:first-child { .hero-btn {
margin-top:1.5rem; box-sizing: border-box;
} padding: 16px 32px;
#intro .row .blurb, margin-bottom: 12px;
#intro .row .download { border-radius: 30px;
display:table-cell; text-align: center;
float:none; display: inline-block;
padding:0 1.5rem; border: none;
font-size: 20px;
transition: background-color 0.2s;
} }
#intro h3 { .hero-btn-primary {
margin:1.5rem 0 0; background-color: #4f5b93;
color:#E6E6E6; color: #fff !important;
}
#intro h3:after {
display:none;
} }
#intro .row { .hero-btn-primary:hover, .hero-btn-primary:focus {
position:relative; background-color: #465081;
display:table-row;
} }
#intro ul { .hero-btn-secondary {
background-color: transparent;
color: #b8c0e9 !important;
border: 1px solid #6773ad;
}
.hero-btn-secondary:hover, .hero-btn-secondary:focus {
background-color: #6773ad20;
border: 1px solid #6773ad;
}
.hero-versions {
margin: 0;
list-style:none; list-style:none;
word-spacing:.25rem; display: flex;
margin-left:0; flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
} }
#intro .dot { .hero-version {
display: inline-block; margin-bottom: 12px;
width: 5px;
padding: 0 5px;
} }
#intro .download { .hero-versions a.notes {
} font-size:.875rem;
#intro .download a.notes {
font-size:.75em;
white-space:nowrap; white-space:nowrap;
} }
#intro .download a {
.hero-versions a {
color:#ccc; color:#ccc;
border:0; border:0;
} }
#intro .download a:hover,
#intro .download a:focus { .hero-versions a:hover,
.hero-versions a:focus {
border-bottom:1px dotted; border-bottom:1px dotted;
} }
#intro .download a.download-link { .hero-version-link {
color:#fff; color:#fff !important;
width: 50px;
display: inline-block; 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 { #layout-content {
border-right:.25rem solid #666; border-right:.25rem solid #666;
} }
@@ -82,42 +160,25 @@ p.archive {
text-align: right; text-align: right;
} }
@media (min-width: 480px) and (max-width: 768px) {
#intro .download {
width: 35%;
}
#intro .blurb {
width: 65%;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-search, .navbar-search,
#intro .download,
#intro .background, #intro .background,
aside.tips, aside.tips,
.layout-menu { .layout-menu {
width: 25%; width: 25%;
} }
#intro .blurb, #layout-content { #layout-content {
width: 75%; width: 75%;
} }
} }
@media (min-width: 480px) and (max-width: 590px) {
#intro .dot {
display: none;
}
}
@media (min-width: 768px) and (max-width: 784px) { @media (min-width: 768px) and (max-width: 784px) {
#intro .download, aside.tips, .navbar-search { aside.tips, .navbar-search {
width: 30%; width: 30%;
} }
#intro .blurb, #layout-content { #layout-content {
width:70%; width:70%;
} }
} }

7
styles/theme-base.css
View File

@@ -1541,7 +1541,6 @@ div.soft-deprecation-notice blockquote.sidebar {
display:block; display:block;
} }
.navbar-search, .navbar-search,
#intro .download,
#intro .background, #intro .background,
aside.tips, aside.tips,
.layout-menu { .layout-menu {
@@ -1549,7 +1548,7 @@ div.soft-deprecation-notice blockquote.sidebar {
float: left; float: left;
} }
#intro .blurb, #layout-content { #layout-content {
float:left; float:left;
width:75%; width:75%;
} }
@@ -1565,11 +1564,11 @@ div.soft-deprecation-notice blockquote.sidebar {
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
#intro .download, aside.tips, .navbar-search { aside.tips, .navbar-search {
width: 30% !important; width: 30% !important;
} }
#intro .blurb, #layout-content { #layout-content {
width: 70% !important; width: 70% !important;
} }
} }