From ce070307af2b11d5943660bb535b9a14e71207c9 Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Tue, 17 Jan 2023 14:18:12 +1300 Subject: [PATCH 01/14] Add draft about page to manifest and theme switcher --- env/page-manifest.json | 5 +++++ source/wp-content/mu-plugins/theme-switcher.php | 1 + 2 files changed, 6 insertions(+) diff --git a/env/page-manifest.json b/env/page-manifest.json index ca69ecd9..45ce1ff2 100644 --- a/env/page-manifest.json +++ b/env/page-manifest.json @@ -7,6 +7,11 @@ "slug": "download", "template": "page-download.html" }, + { + "slug": "about-2", + "pattern": "about.php", + "template": "page-about.html" + }, { "slug": "enterprise", "pattern": "enterprise.php", diff --git a/source/wp-content/mu-plugins/theme-switcher.php b/source/wp-content/mu-plugins/theme-switcher.php index 27ac3a0c..44dac1fb 100644 --- a/source/wp-content/mu-plugins/theme-switcher.php +++ b/source/wp-content/mu-plugins/theme-switcher.php @@ -52,6 +52,7 @@ function should_use_new_theme() { '/download/source/', '/mobile/', '/enterprise/', + '/about-2/', ); if ( ! in_array( $request_uri, $new_theme_pages ) ) { return false; From b522de181fa15a4a95acd6af5863cb2a150f874b Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Tue, 17 Jan 2023 14:21:05 +1300 Subject: [PATCH 02/14] Add About page template and pattern --- .../images/about-cover-arrow.svg | 3 + .../images/about-cover-underline.svg | 3 + .../themes/wporg-main-2022/patterns/about.php | 277 ++++++++++++++++++ .../wporg-main-2022/src/style/style.scss | 129 ++++++++ .../wporg-main-2022/templates/page-about.html | 9 + 5 files changed, 421 insertions(+) create mode 100644 source/wp-content/themes/wporg-main-2022/images/about-cover-arrow.svg create mode 100644 source/wp-content/themes/wporg-main-2022/images/about-cover-underline.svg create mode 100644 source/wp-content/themes/wporg-main-2022/patterns/about.php create mode 100644 source/wp-content/themes/wporg-main-2022/templates/page-about.html diff --git a/source/wp-content/themes/wporg-main-2022/images/about-cover-arrow.svg b/source/wp-content/themes/wporg-main-2022/images/about-cover-arrow.svg new file mode 100644 index 00000000..b201df18 --- /dev/null +++ b/source/wp-content/themes/wporg-main-2022/images/about-cover-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/wp-content/themes/wporg-main-2022/images/about-cover-underline.svg b/source/wp-content/themes/wporg-main-2022/images/about-cover-underline.svg new file mode 100644 index 00000000..0a1a8305 --- /dev/null +++ b/source/wp-content/themes/wporg-main-2022/images/about-cover-underline.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about.php b/source/wp-content/themes/wporg-main-2022/patterns/about.php new file mode 100644 index 00000000..e19b7492 --- /dev/null +++ b/source/wp-content/themes/wporg-main-2022/patterns/about.php @@ -0,0 +1,277 @@ + + + + +
+
+

+ + + +

democratizepublishing', 'wporg' ); ?>

+ + + +
+
+ + + +
+

the freedom to build. the freedom to change. the freedom to share.', 'wporg' ); ?>

+
+
+
+
+ + + +
+
+
+

+
+ + + +
+

b2/cafelog. The need for an elegant, well-architected personal publishing system was clear even then. Today, WordPress is built on PHP and MySQL, and licensed under the GPLv2. It is also the platform of choice for over 43% of all sites across the web.', 'wporg' ); ?>

+ + + +

+ + + +

+
+
+
+ + + +
+
+
+

+
+ + + +
+

+ + + +

+ + + +

+ + + +

+ + + +

+ + + +

+
+
+
+ + + +
+

+ + + +
+
+ + + +
+

General Public License (GPLv2 or later) which provides four core freedoms, known as the WordPress Bill of Rights:', 'wporg' ); ?>

+
+
+
+ + + +
+
+
+

+
+ + + +
+

+
+
+
+ + + +
+
+
+

+
+ + + +
+

+
+
+
+ + + +
+
+
+

+
+ + + +
+

+
+
+
+ + + +
+
+
+

+
+ + + +
+

+
+
+
+ + + +
+
+
+

+ + + +

+ + + +
    +
    • + + + +
    • + + + +
    • + + + +
    • + + + +
    • +
+
+ + + +
+

+ + + +

+ + + +
    +
    • + + + +
    • + + + +
    • + + + +
    • + + + +
    • +
+
+ + + +
+

+ + + +

+ + + +
    +
    • + + + +
    • + + + +
    • + + + +
    • + + + +
    • +
+
+
+
+ + + diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index 1cdf9ae9..2a2fcd4a 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -95,6 +95,96 @@ html[dir="rtl"] :where([style*="border-right-color"]) { } } +/** + * About page + */ + +[class*="wporg-about-section-"][style*="padding-top"] { + --wp--preset--spacing--60: clamp( 40px, calc( 100vw / 18 ), 80px ); +} + +.wporg-about-cover-title > span, +.wporg-about-section-heading { + font-size: clamp(3.25rem, 5.3vw + 1.3rem, 5.625rem) !important; +} + +.wporg-about-cover-pretext { + position: relative; + + &:after { + content: ""; + position: absolute; + left: -5px; + top: 25px; + width: 121px; + height: 6px; + background-image: url('../../images/about-cover-underline.svg'); + background-repeat: no-repeat; + background-position: center; + } +} + +.wporg-about-cover-title { + $text-row-height: clamp(3.5rem, 7.2vw + 0.8rem, 6.75rem); + + display: grid; + grid-template-rows: $text-row-height clamp(8.75rem, 5.5vw + 6.7rem, 11.25rem) $text-row-height; + grid-template-columns: 1fr 1fr; + width: 100%; + background-image: url('../../images/about-cover-arrow.svg'); + background-size: clamp(16rem, 12.8vw + 11.21rem, 21.75rem); + background-repeat: no-repeat; + background-position: 38% center; + + > span { + &:first-child { + grid-column: 2; + } + + &:last-child { + grid-column: 1; + grid-row: 3; + text-align: left; + } + } +} + +.wporg-about-section-freedoms { + --wp--preset--spacing--50: clamp( 20px, calc( 100vw / 16 ), 70px ); +} + +[class*="wporg-about-section-freedom-"] h3 { + word-break: initial; + overflow-wrap: initial; +} + +.wporg-about-section-software { + position: relative; +} + +@media (min-width: 1200px) { + .wporg-about-cover-title { + margin-block-end: -42px !important; + } +} + +@media (min-width: 782px) { + .wporg-about-section-heading { + margin-block-start: -10px !important; + } + + [class*="wporg-about-section-freedom-"] { + margin-block-end: -30px !important; + position: relative; + } +} + +@media (min-width: 600px) { + .wporg-about-cover-title { + margin-block-start: -30px !important; + } +} + /* * Spacing for small screens. */ @@ -118,6 +208,11 @@ html[dir="rtl"] :where([style*="border-right-color"]) { #intro .wp-block-columns { display: block; } + + .wporg-about-cover-intro > * { + display: grid; + grid-template-rows: 1fr 1fr 1fr; + } } @media (max-width: 1000px) { @@ -176,6 +271,36 @@ html[dir="rtl"] :where([style*="border-right-color"]) { border-top: 1px solid var(--wp--preset--color--light-grey-1) !important; } } + + .wporg-about-section-heading { + line-height: 1.1 !important; + } + + .wporg-about-cover-title { + grid-template-columns: 1fr; + background-position: center; + + > span:first-child { + grid-column: 1; + } + } + + [class*="wporg-about-section-freedom-"] { + padding-top: 40px !important; + padding-bottom: 40px !important; + + h3 { + font-size: 120px !important; + } + + p { + margin-top: 0 !important; + } + } + + .wporg-about-section-freedom-1 { + border-top: 1px solid var(--wp--preset--color--charcoal-1); + } } @media (max-width: 599px) { @@ -213,6 +338,10 @@ html[dir="rtl"] :where([style*="border-right-color"]) { .wporg-enterprise-get-wordpress .wp-block-heading.is-style-with-arrow { font-size: 52px !important; } + + .wporg-about-cover-intro { + margin-block-start: 20px !important; + } } diff --git a/source/wp-content/themes/wporg-main-2022/templates/page-about.html b/source/wp-content/themes/wporg-main-2022/templates/page-about.html new file mode 100644 index 00000000..da749735 --- /dev/null +++ b/source/wp-content/themes/wporg-main-2022/templates/page-about.html @@ -0,0 +1,9 @@ + + + +
+ +
+ + + From 2f30b39f79d0a2401917832335d963d4102743af Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Thu, 19 Jan 2023 12:28:51 +1300 Subject: [PATCH 03/14] :lipstick: Fix CSS lint --- .../themes/wporg-main-2022/src/style/style.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index 2a2fcd4a..0fed6ea0 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -100,7 +100,7 @@ html[dir="rtl"] :where([style*="border-right-color"]) { */ [class*="wporg-about-section-"][style*="padding-top"] { - --wp--preset--spacing--60: clamp( 40px, calc( 100vw / 18 ), 80px ); + --wp--preset--spacing--60: clamp(40px, calc(100vw / 18), 80px); } .wporg-about-cover-title > span, @@ -111,14 +111,14 @@ html[dir="rtl"] :where([style*="border-right-color"]) { .wporg-about-cover-pretext { position: relative; - &:after { + &::after { content: ""; position: absolute; left: -5px; top: 25px; width: 121px; height: 6px; - background-image: url('../../images/about-cover-underline.svg'); + background-image: url(../../images/about-cover-underline.svg); background-repeat: no-repeat; background-position: center; } @@ -131,7 +131,7 @@ html[dir="rtl"] :where([style*="border-right-color"]) { grid-template-rows: $text-row-height clamp(8.75rem, 5.5vw + 6.7rem, 11.25rem) $text-row-height; grid-template-columns: 1fr 1fr; width: 100%; - background-image: url('../../images/about-cover-arrow.svg'); + background-image: url(../../images/about-cover-arrow.svg); background-size: clamp(16rem, 12.8vw + 11.21rem, 21.75rem); background-repeat: no-repeat; background-position: 38% center; @@ -150,7 +150,7 @@ html[dir="rtl"] :where([style*="border-right-color"]) { } .wporg-about-section-freedoms { - --wp--preset--spacing--50: clamp( 20px, calc( 100vw / 16 ), 70px ); + --wp--preset--spacing--50: clamp(20px, calc(100vw / 16), 70px); } [class*="wporg-about-section-freedom-"] h3 { @@ -172,7 +172,7 @@ html[dir="rtl"] :where([style*="border-right-color"]) { .wporg-about-section-heading { margin-block-start: -10px !important; } - + [class*="wporg-about-section-freedom-"] { margin-block-end: -30px !important; position: relative; From c09565501b7daaeb914c04eb60ca6b8236570373 Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Thu, 19 Jan 2023 13:22:38 +1300 Subject: [PATCH 04/14] Change header and footer to white-on-black --- .../themes/wporg-main-2022/templates/page-about.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/templates/page-about.html b/source/wp-content/themes/wporg-main-2022/templates/page-about.html index da749735..3d2b4e69 100644 --- a/source/wp-content/themes/wporg-main-2022/templates/page-about.html +++ b/source/wp-content/themes/wporg-main-2022/templates/page-about.html @@ -1,4 +1,4 @@ - +
@@ -6,4 +6,4 @@
- + From 898b2f47a6eb90f67e379717d5dc449007f68bc8 Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Thu, 19 Jan 2023 13:48:51 +1300 Subject: [PATCH 05/14] Adjust vertical spacing --- source/wp-content/themes/wporg-main-2022/patterns/about.php | 4 ++-- source/wp-content/themes/wporg-main-2022/src/style/style.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about.php b/source/wp-content/themes/wporg-main-2022/patterns/about.php index e19b7492..a39bac91 100644 --- a/source/wp-content/themes/wporg-main-2022/patterns/about.php +++ b/source/wp-content/themes/wporg-main-2022/patterns/about.php @@ -97,8 +97,8 @@

- -
+ +
diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index 0fed6ea0..4812f6a2 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -100,7 +100,7 @@ html[dir="rtl"] :where([style*="border-right-color"]) { */ [class*="wporg-about-section-"][style*="padding-top"] { - --wp--preset--spacing--60: clamp(40px, calc(100vw / 18), 80px); + --wp--preset--spacing--60: clamp(60px, calc(100vw / 18), 80px); } .wporg-about-cover-title > span, From 67745d3b1db682bea0aa8946c5ce0822a8289086 Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Thu, 19 Jan 2023 15:01:33 +1300 Subject: [PATCH 06/14] Simplify cover layout --- .../wporg-main-2022/src/style/style.scss | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index 4812f6a2..72d02a01 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -129,7 +129,6 @@ html[dir="rtl"] :where([style*="border-right-color"]) { display: grid; grid-template-rows: $text-row-height clamp(8.75rem, 5.5vw + 6.7rem, 11.25rem) $text-row-height; - grid-template-columns: 1fr 1fr; width: 100%; background-image: url(../../images/about-cover-arrow.svg); background-size: clamp(16rem, 12.8vw + 11.21rem, 21.75rem); @@ -137,12 +136,7 @@ html[dir="rtl"] :where([style*="border-right-color"]) { background-position: 38% center; > span { - &:first-child { - grid-column: 2; - } - &:last-child { - grid-column: 1; grid-row: 3; text-align: left; } @@ -276,15 +270,6 @@ html[dir="rtl"] :where([style*="border-right-color"]) { line-height: 1.1 !important; } - .wporg-about-cover-title { - grid-template-columns: 1fr; - background-position: center; - - > span:first-child { - grid-column: 1; - } - } - [class*="wporg-about-section-freedom-"] { padding-top: 40px !important; padding-bottom: 40px !important; @@ -339,6 +324,10 @@ html[dir="rtl"] :where([style*="border-right-color"]) { font-size: 52px !important; } + .wporg-about-cover-title { + background-position-x: 80%; + } + .wporg-about-cover-intro { margin-block-start: 20px !important; } From 02659269631a729fe22439935b29623ed07348fc Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Thu, 19 Jan 2023 16:36:30 +1300 Subject: [PATCH 07/14] Rotate cover graphic on mobile --- .../wporg-main-2022/src/style/style.scss | 29 ++++++++++++++----- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index 72d02a01..e2c00bec 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -127,13 +127,30 @@ html[dir="rtl"] :where([style*="border-right-color"]) { .wporg-about-cover-title { $text-row-height: clamp(3.5rem, 7.2vw + 0.8rem, 6.75rem); + position: relative; display: grid; grid-template-rows: $text-row-height clamp(8.75rem, 5.5vw + 6.7rem, 11.25rem) $text-row-height; width: 100%; - background-image: url(../../images/about-cover-arrow.svg); - background-size: clamp(16rem, 12.8vw + 11.21rem, 21.75rem); - background-repeat: no-repeat; - background-position: 38% center; + + &::after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + background-image: url(../../images/about-cover-arrow.svg); + background-size: clamp(16rem, 12.8vw + 11.21rem, 21.75rem); + background-repeat: no-repeat; + background-position: 38% center; + } + + @media (max-width: 599px) { + grid-template-rows: $text-row-height 180px $text-row-height; + + &::after { + background-position: 90% 58%; + transform: rotate(-11.07deg); + } + } > span { &:last-child { @@ -324,10 +341,6 @@ html[dir="rtl"] :where([style*="border-right-color"]) { font-size: 52px !important; } - .wporg-about-cover-title { - background-position-x: 80%; - } - .wporg-about-cover-intro { margin-block-start: 20px !important; } From b96a63218a20d0953933c7210eb69c04ef0565db Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Fri, 20 Jan 2023 14:05:52 +1300 Subject: [PATCH 08/14] Add RTL support --- .../themes/wporg-main-2022/patterns/about.php | 4 +-- .../wporg-main-2022/src/style/style.scss | 30 +++++++++++++++++-- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about.php b/source/wp-content/themes/wporg-main-2022/patterns/about.php index a39bac91..28476245 100644 --- a/source/wp-content/themes/wporg-main-2022/patterns/about.php +++ b/source/wp-content/themes/wporg-main-2022/patterns/about.php @@ -93,8 +93,8 @@ -
-

+
+

diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index e2c00bec..3fe8f0f6 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -121,6 +121,12 @@ html[dir="rtl"] :where([style*="border-right-color"]) { background-image: url(../../images/about-cover-underline.svg); background-repeat: no-repeat; background-position: center; + + [dir="rtl"] & { + left: unset; + right: -5px; + transform: scaleX(-1); + } } } @@ -152,9 +158,27 @@ html[dir="rtl"] :where([style*="border-right-color"]) { } } - > span { - &:last-child { - grid-row: 3; + > span:last-child { + grid-row: 3; + text-align: left; + } + + [dir="rtl"] & { + text-align: left; + + &::after { + transform: scaleX(-1); + } + + > span:last-child { + text-align: right; + } + } +} + +.wporg-about-cover-intro { + [dir="rtl"] & { + p { text-align: left; } } From fffffd8f6daee5d27e0368000b2702be52d4c3dc Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Mon, 23 Jan 2023 10:49:23 +1300 Subject: [PATCH 09/14] Update brush styles --- .../images/about-cover-arrow.svg | 33 +++++++++++++++++-- .../images/about-cover-underline.svg | 19 +++++++++-- .../wporg-main-2022/src/style/style.scss | 10 +++--- 3 files changed, 51 insertions(+), 11 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/images/about-cover-arrow.svg b/source/wp-content/themes/wporg-main-2022/images/about-cover-arrow.svg index b201df18..e59173e3 100644 --- a/source/wp-content/themes/wporg-main-2022/images/about-cover-arrow.svg +++ b/source/wp-content/themes/wporg-main-2022/images/about-cover-arrow.svg @@ -1,3 +1,30 @@ - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/wp-content/themes/wporg-main-2022/images/about-cover-underline.svg b/source/wp-content/themes/wporg-main-2022/images/about-cover-underline.svg index 0a1a8305..62818b61 100644 --- a/source/wp-content/themes/wporg-main-2022/images/about-cover-underline.svg +++ b/source/wp-content/themes/wporg-main-2022/images/about-cover-underline.svg @@ -1,3 +1,16 @@ - - - + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index 3fe8f0f6..91a89176 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -115,9 +115,9 @@ html[dir="rtl"] :where([style*="border-right-color"]) { content: ""; position: absolute; left: -5px; - top: 25px; - width: 121px; - height: 6px; + top: 26px; + width: 134px; + height: 8px; background-image: url(../../images/about-cover-underline.svg); background-repeat: no-repeat; background-position: center; @@ -146,14 +146,14 @@ html[dir="rtl"] :where([style*="border-right-color"]) { background-image: url(../../images/about-cover-arrow.svg); background-size: clamp(16rem, 12.8vw + 11.21rem, 21.75rem); background-repeat: no-repeat; - background-position: 38% center; + background-position: 42% center; } @media (max-width: 599px) { grid-template-rows: $text-row-height 180px $text-row-height; &::after { - background-position: 90% 58%; + background-position: 72% 55%; transform: rotate(-11.07deg); } } From a3f49bd32501fb7b342a3db6696e15b9742155c3 Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Wed, 25 Jan 2023 12:07:51 +1300 Subject: [PATCH 10/14] Remove duplicate global header and footer from pattern --- source/wp-content/themes/wporg-main-2022/patterns/about.php | 4 ---- 1 file changed, 4 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about.php b/source/wp-content/themes/wporg-main-2022/patterns/about.php index 28476245..0e8bba01 100644 --- a/source/wp-content/themes/wporg-main-2022/patterns/about.php +++ b/source/wp-content/themes/wporg-main-2022/patterns/about.php @@ -6,8 +6,6 @@ */ ?> - -
@@ -273,5 +271,3 @@
- - From 87ce13859255230f829138d02adaeb1b84ba4178 Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Wed, 25 Jan 2023 13:49:57 +1300 Subject: [PATCH 11/14] Use spacing presets and add comments to CSS --- .../wporg-main-2022/src/style/style.scss | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index 91a89176..7ad9fe9f 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -199,16 +199,24 @@ html[dir="rtl"] :where([style*="border-right-color"]) { @media (min-width: 1200px) { .wporg-about-cover-title { - margin-block-end: -42px !important; + // move the intro text up to align with the bottom of the title + margin-block-end: + calc(( + ( + var(--wp--custom--body--typography--line-height) * var(--wp--preset--font-size--normal) + ) + var(--wp--preset--spacing--10) + ) * -1) !important // ~ -42px; } } @media (min-width: 782px) { .wporg-about-section-heading { + // move the section heading up to align with the top of the right column margin-block-start: -10px !important; } [class*="wporg-about-section-freedom-"] { + // move the numbered freedom sections up to overlap the previous one margin-block-end: -30px !important; position: relative; } @@ -216,7 +224,11 @@ html[dir="rtl"] :where([style*="border-right-color"]) { @media (min-width: 600px) { .wporg-about-cover-title { - margin-block-start: -30px !important; + // move the pretext down to align with the top of the title + margin-block-start: + calc(( + var(--wp--custom--body--typography--line-height) * var(--wp--preset--font-size--normal) + ) * -1) !important; } } @@ -312,8 +324,8 @@ html[dir="rtl"] :where([style*="border-right-color"]) { } [class*="wporg-about-section-freedom-"] { - padding-top: 40px !important; - padding-bottom: 40px !important; + padding-top: var(--wp--preset--spacing--40) !important; + padding-bottom: var(--wp--preset--spacing--40) !important; h3 { font-size: 120px !important; From a2e2142baa841bc2fe80a9ebc7f8cb560eedb042 Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Wed, 25 Jan 2023 14:28:38 +1300 Subject: [PATCH 12/14] Simplify intro layout --- .../themes/wporg-main-2022/patterns/about.php | 12 ++---------- .../themes/wporg-main-2022/src/style/style.scss | 2 +- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about.php b/source/wp-content/themes/wporg-main-2022/patterns/about.php index 0e8bba01..df3b4419 100644 --- a/source/wp-content/themes/wporg-main-2022/patterns/about.php +++ b/source/wp-content/themes/wporg-main-2022/patterns/about.php @@ -16,17 +16,9 @@

democratizepublishing', 'wporg' ); ?>

- -
-
- - - -
-

the freedom to build. the freedom to change. the freedom to share.', 'wporg' ); ?>

+ +

the freedom to build. the freedom to change. the freedom to share.', 'wporg' ); ?>

-
-
diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index 7ad9fe9f..a4f01ce8 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -256,7 +256,7 @@ html[dir="rtl"] :where([style*="border-right-color"]) { display: block; } - .wporg-about-cover-intro > * { + .wporg-about-cover-intro { display: grid; grid-template-rows: 1fr 1fr 1fr; } From 60c83e639cb2999ef9ee4595229a1994f054f9d5 Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Mon, 30 Jan 2023 13:13:47 +1300 Subject: [PATCH 13/14] Add brushstrokes to mission and 4 freedoms --- .../images/about-4-freedoms-underline.svg | 8 ++++++ .../images/about-mission-swirl.svg | 14 ++++++++++ .../wporg-main-2022/src/style/style.scss | 28 +++++++++++++++++++ 3 files changed, 50 insertions(+) create mode 100644 source/wp-content/themes/wporg-main-2022/images/about-4-freedoms-underline.svg create mode 100644 source/wp-content/themes/wporg-main-2022/images/about-mission-swirl.svg diff --git a/source/wp-content/themes/wporg-main-2022/images/about-4-freedoms-underline.svg b/source/wp-content/themes/wporg-main-2022/images/about-4-freedoms-underline.svg new file mode 100644 index 00000000..ca8a082b --- /dev/null +++ b/source/wp-content/themes/wporg-main-2022/images/about-4-freedoms-underline.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/source/wp-content/themes/wporg-main-2022/images/about-mission-swirl.svg b/source/wp-content/themes/wporg-main-2022/images/about-mission-swirl.svg new file mode 100644 index 00000000..7b52124a --- /dev/null +++ b/source/wp-content/themes/wporg-main-2022/images/about-mission-swirl.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/wp-content/themes/wporg-main-2022/src/style/style.scss b/source/wp-content/themes/wporg-main-2022/src/style/style.scss index a4f01ce8..561ecfb8 100644 --- a/source/wp-content/themes/wporg-main-2022/src/style/style.scss +++ b/source/wp-content/themes/wporg-main-2022/src/style/style.scss @@ -213,6 +213,34 @@ html[dir="rtl"] :where([style*="border-right-color"]) { .wporg-about-section-heading { // move the section heading up to align with the top of the right column margin-block-start: -10px !important; + + .wporg-about-section-mission & { + position: relative; + + &::after { + content: ""; + position: absolute; + width: 87px; + height: 41px; + top: 115%; + left: 2%; + background-image: url(../../images/about-mission-swirl.svg); + } + } + + .wporg-about-section-freedoms & { + position: relative; + + &::after { + content: ""; + position: absolute; + width: 315px; + height: 50px; + top: 84%; + left: 10%; + background-image: url(../../images/about-4-freedoms-underline.svg); + } + } } [class*="wporg-about-section-freedom-"] { From c24268fa12c4ee3139a15d69ed8cffefb432ec0c Mon Sep 17 00:00:00 2001 From: Adam Wood Date: Thu, 2 Feb 2023 14:41:03 +1300 Subject: [PATCH 14/14] Use Courier Prime font --- .../themes/wporg-main-2022/patterns/about.php | 86 +++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/source/wp-content/themes/wporg-main-2022/patterns/about.php b/source/wp-content/themes/wporg-main-2022/patterns/about.php index df3b4419..5e194207 100644 --- a/source/wp-content/themes/wporg-main-2022/patterns/about.php +++ b/source/wp-content/themes/wporg-main-2022/patterns/about.php @@ -8,16 +8,16 @@ ?>
-
-

+
+

- +

democratizepublishing', 'wporg' ); ?>

- -

the freedom to build. the freedom to change. the freedom to share.', 'wporg' ); ?>

+ +

the freedom to build. the freedom to change. the freedom to share.', 'wporg' ); ?>

@@ -25,13 +25,13 @@
-
+

- -
+ +

b2/cafelog. The need for an elegant, well-architected personal publishing system was clear even then. Today, WordPress is built on PHP and MySQL, and licensed under the GPLv2. It is also the platform of choice for over 43% of all sites across the web.', 'wporg' ); ?>

@@ -49,30 +49,30 @@
-
+

- -
-

+ +
+

- -

+ +

- -

+ +

@@ -83,7 +83,7 @@ -
+

@@ -92,8 +92,8 @@
- -
+ +

General Public License (GPLv2 or later) which provides four core freedoms, known as the WordPress Bill of Rights:', 'wporg' ); ?>

@@ -103,13 +103,13 @@
-
+

- -
+ +

@@ -119,13 +119,13 @@
-
+

- -
+ +

@@ -135,13 +135,13 @@
-
+

- -
+ +

@@ -151,13 +151,13 @@
-
+

- -
+ +

@@ -167,12 +167,12 @@
-
-

+
+

- -

+ +

@@ -199,12 +199,12 @@ -
-

+
+

- -

+ +

@@ -231,12 +231,12 @@ -
-

+
+

- -

+ +