mirror of
https://github.com/php/web-php.git
synced 2026-03-23 23:02:13 +01:00
Improve homepage hero design
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
5
images/logos/php-logo-white.svg
Normal file
5
images/logos/php-logo-white.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
17
index.php
17
index.php
@@ -93,16 +93,16 @@ $content .= '<p class="archive"><a href="/archive/">Older News Entries</a></p>';
|
||||
$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 @@ foreach ($active_branches as $major => $releases) {
|
||||
$version = $release['version'];
|
||||
list($major, $minor, $_) = explode('.', $version);
|
||||
$intro .= "
|
||||
<li><a class='download-link' href='/downloads.php#v$version'>$version</a><span class='dot'>·</span><a class='notes' href='/ChangeLog-$major.php#$version'>Release Notes</a><span class='dot'>·</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> · <a class='notes' href='/ChangeLog-$major.php#$version'>Changelog</a> · <a class='notes' href='/migration$major$minor'>Upgrading</a></li>\n";
|
||||
}
|
||||
}
|
||||
$intro .= "</ul>\n";
|
||||
$intro .= <<<EOF
|
||||
</div>
|
||||
</div>
|
||||
EOF;
|
||||
|
||||
|
||||
185
styles/home.css
185
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;
|
||||
}
|
||||
#intro .row .blurb,
|
||||
#intro .row .download {
|
||||
display:table-cell;
|
||||
float:none;
|
||||
padding:0 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 h3 {
|
||||
margin:1.5rem 0 0;
|
||||
color:#E6E6E6;
|
||||
}
|
||||
#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 {
|
||||
.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;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user