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 @@ + + + + + diff --git a/index.php b/index.php index 84dd7e3d3e..96021a3497 100644 --- a/index.php +++ b/index.php @@ -93,16 +93,16 @@ $content .= ""; $intro = << -
-

PHP is a popular general-purpose scripting language that is especially suited to web development.

-

Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.

+
+ +

A popular general-purpose scripting language that is especially suited to web development.
Fast, flexible and pragmatic, PHP powers everything from your blog to the most popular websites in the world.

+ -
-

Download

EOF; -$intro .= "
    \n"; +$intro .= "
      \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 .= " -
    • $version·Release Notes·Upgrading
    • \n"; +
    • $version · Changelog · Upgrading
    • \n"; } } $intro .= "
    \n"; $intro .= <<
EOF; diff --git a/styles/home.css b/styles/home.css index 20e987de36..191c93737b 100644 --- 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 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; } }