Author: Nafis Reza (nafisreza) Committer: GitHub (web-flow) Pusher: sy-records Date: 2024-10-30T11:03:34+08:00
Commit: https://github.com/php/web-php/commit/cb385e3e05e99c079f3b2e3b39ce68ba462318ff 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',
