Author: Nafis Reza (nafisreza)
Committer: GitHub (web-flow)
Pusher: sy-records
Date: 2024-10-30T11:03:34+08:00
Commit: Update hero section styles according to BEM methodology (#1107) · php/web-php@cb385e3 · GitHub
Raw diff: https://github.com/php/web-php/commit/cb385e3e05e99c079f3b2e3b39ce68ba462318ff.diff
Update hero section styles according to BEM methodology (#1107)
Changed paths:
M index.php
M styles/home.css
M tests/Visual/SmokeTest.spec.ts
Diff:
diff --git a/index.php b/index.php
index 3e2f74ef0f..06c0add468 100644
--- a/index.php
+++ b/index.php
@@ -93,15 +93,15 @@
$intro = <<<EOF
<div class="hero">
- <img class="hero-logo" src="/images/logos/php-logo-white.svg" alt="php" 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.3/index.php" class="hero-btn hero-btn-primary">What's new in 8.3</a>
- <a href="/downloads.php" class="hero-btn hero-btn-secondary">Download</a>
+ <img class="hero__logo" src="/images/logos/php-logo-white.svg" alt="php" 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.3/index.php" class="hero__btn hero__btn--primary">What's new in 8.3</a>
+ <a href="/downloads.php" class="hero__btn hero__btn--secondary">Download</a>
</div>
EOF;
-$intro .= "<ul class='hero-versions'>\n";
+$intro .= "<ul class='hero__versions'>\n";
$active_branches = get_active_branches();
krsort($active_branches);
foreach ($active_branches as $major => $releases) {
@@ -110,7 +110,7 @@
$version = $release['version'];
[$major, $minor, $_] = explode('.', $version);
$intro .= "
- <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";
+ <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";
diff --git a/styles/home.css b/styles/home.css
index c04fec4118..c7cafbcdf7 100644
--- a/styles/home.css
+++ b/styles/home.css
@@ -16,13 +16,13 @@
margin: 32px 0;
}
-.hero-logo {
+.hero__logo {
width: 100%;
max-width: 240px;
margin-bottom: 24px;
}
-.hero-text {
+.hero__text {
margin-top: 0;
margin-bottom: 28px;
line-height: 1.5;
@@ -30,18 +30,18 @@
text-rendering: optimizeLegibility;
}
-.hero-text strong {
+.hero__text strong {
font-weight: 500;
}
-.hero-actions {
+.hero__actions {
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 24px;
}
-.hero-btn {
+.hero__btn {
box-sizing: border-box;
padding: 16px 32px;
margin-bottom: 12px;
@@ -53,28 +53,28 @@
transition: background-color 0.2s;
}
-.hero-btn-primary {
+.hero__btn--primary {
background-color: var(--dark-blue-color);
color: #fff !important;
}
-.hero-btn-primary:hover, .hero-btn-primary:focus {
+.hero__btn--primary:hover, .hero__btn--primary:focus {
background-color: var(--dark-magenta-color);
}
-.hero-btn-secondary {
+.hero__btn--secondary {
background-color: transparent;
color: #b8c0e9 !important;
border: 1px solid #6773ad;
}
-.hero-btn-secondary:hover, .hero-btn-secondary:focus {
+.hero__btn--secondary:hover, .hero__btn--secondary:focus {
background-color: var(--dark-magenta-color);
border-color: var(--dark-magenta-color);
color: #fff !important;
}
-.hero-versions {
+.hero__versions {
margin: 0;
list-style:none;
display: flex;
@@ -85,41 +85,41 @@
width: 100%;
}
-.hero-version {
+.hero__version {
margin-bottom: 12px;
}
-.hero-versions a.notes {
+.hero__versions a.notes {
font-size:.875rem;
white-space:nowrap;
}
-.hero-versions a {
+.hero__versions a {
color: var(--background-text-color);
border:0;
}
-.hero-versions a:hover,
-.hero-versions a:focus {
+.hero__versions a:hover,
+.hero__versions a:focus {
border-bottom:1px dotted;
}
-.hero-version-link {
+.hero__version-link {
color:#fff !important;
display: inline-block;
}
@media (min-width: 540px) {
- .hero-actions {
+ .hero__actions {
flex-direction: row;
width: auto;
}
- .hero-btn {
+ .hero__btn {
min-width: 188px;
}
- .hero-btn-secondary {
+ .hero__btn--secondary {
margin-left: 8px;
}
}
@@ -129,20 +129,20 @@
margin: 60px 0;
}
- .hero-versions {
+ .hero__versions {
flex-direction: row;
}
- .hero-version {
+ .hero__version {
font-size: 1.125rem;
padding: 0 1.5rem;
}
- .hero-version:not(:first-child) {
+ .hero__version:not(:first-child) {
border-left: 1px dotted #666;
}
- .hero-text {
+ .hero__text {
font-size: 18px;
}
}
@@ -213,7 +213,7 @@ aside.tips .social-media .icon-twitter {
color: #fff !important;
}
-.btn-primary:hover, .hero-btn-primary:focus {
+.btn-primary:hover, .hero__btn--primary:focus {
background-color: var(--dark-magenta-color) !important;
border-color: var(--dark-magenta-color) !important;
}
diff --git a/tests/Visual/SmokeTest.spec.ts b/tests/Visual/SmokeTest.spec.ts
index 06d0c9f776..7d8979edcc 100644
--- a/tests/Visual/SmokeTest.spec.ts
+++ b/tests/Visual/SmokeTest.spec.ts
@@ -18,7 +18,7 @@ const items: TestPageOptions = [
fullPage: true,
timeout: 10000,
},
- mask: ['.hero-versions'],
+ mask: ['.hero__versions'],
},
{
path: 'archive/1998.php',