-
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.
-
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;
}
}
Download
EOF; -$intro .= "- \n";
+$intro .= "
- $version·Release Notes·Upgrading \n"; +
- $version · Changelog · Upgrading \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 .= "
-