--- a/wp/wp-admin/css/about.css Wed Sep 21 18:19:35 2022 +0200
+++ b/wp/wp-admin/css/about.css Tue Sep 27 16:37:53 2022 +0200
@@ -21,7 +21,7 @@
.about__container {
/* Section backgrounds */
--background: transparent;
- --subtle-background: #def;
+ --subtle-background: #f0f0f0;
/* Main text color */
--text: #000;
@@ -29,7 +29,7 @@
/* Accent colors: used in header, on special classes. */
--accent-1: #3858e9; /* Accent background, link color */
- --accent-2: #2d46ba; /* Header background */
+ --accent-2: #3858e9; /* Header background */
/* Navigation colors. */
--nav-background: #fff;
@@ -48,14 +48,14 @@
.credits-php,
.freedoms-php,
.privacy-php {
- background: #f0f7ff;
+ background: #fff;
}
.about-php #wpcontent,
.credits-php #wpcontent,
.freedoms-php #wpcontent,
.privacy-php #wpcontent {
- background: linear-gradient(180deg, #fff 50%, #f0f7ff 100%);
+ background: #fff;
padding: 0 24px;
}
@@ -140,25 +140,19 @@
margin: 0 0 var(--gap);
}
-.about__section .column {
+.about__section .column:not(.is-edge-to-edge) {
padding: var(--gap);
}
-.about__section + .about__section .column {
- padding-top: 0;
-}
-
.about__section + .about__section .is-section-header {
padding-bottom: var(--gap);
}
.about__section .column[class*="background-color"],
+.about__section:where([class*="background-color"]) .column,
.about__section .column.has-border {
padding-top: var(--gap);
-}
-
-.about__section .column.is-edge-to-edge {
- padding: 0;
+ padding-bottom: var(--gap);
}
.about__section .column p:first-of-type {
@@ -214,7 +208,8 @@
}
.about__section.has-gutters {
- gap: calc(var(--gap) / 2);
+ gap: var(--gap);
+ margin-bottom: calc(var(--gap) * 2);
}
.about__section.has-2-columns {
@@ -222,11 +217,11 @@
}
.about__section.has-2-columns.is-wider-right {
- grid-template-columns: 1fr 2fr;
+ grid-template-columns: 2fr 3fr;
}
.about__section.has-2-columns.is-wider-left {
- grid-template-columns: 2fr 1fr;
+ grid-template-columns: 3fr 2fr;
}
.about__section.has-2-columns .is-section-header {
@@ -328,13 +323,24 @@
.about__section.has-2-columns.is-wider-left,
.about__section.has-3-columns {
display: block;
- padding-bottom: calc(var(--gap) / 2);
+ margin-bottom: calc(var(--gap) / 2);
+ }
+
+ .about__section .column:not(.is-edge-to-edge) {
+ padding-top: var(--gap);
+ padding-bottom: var(--gap);
+ }
+
+ .about__section.has-2-columns.has-gutters.is-wider-right,
+ .about__section.has-2-columns.has-gutters.is-wider-left,
+ .about__section.has-3-columns.has-gutters {
+ margin-bottom: calc(var(--gap) * 2);
}
.about__section.has-2-columns.has-gutters .column,
.about__section.has-2-columns.has-gutters .column,
.about__section.has-3-columns.has-gutters .column {
- margin-bottom: calc(var(--gap) / 2);
+ margin-bottom: var(--gap);
}
.about__section.has-2-columns.has-gutters .column:last-child,
@@ -393,21 +399,25 @@
@media screen and (max-width: 600px) {
.about__section.has-2-columns {
display: block;
+ margin-bottom: var(--gap);
+ }
+
+ .about__section.has-2-columns:not(.has-gutters) .column:nth-of-type(n) {
+ padding-top: calc(var(--gap) / 2);
padding-bottom: calc(var(--gap) / 2);
}
+ .about__section.has-2-columns.has-gutters {
+ margin-bottom: calc(var(--gap) * 2);
+ }
+
.about__section.has-2-columns.has-gutters .column {
- margin-bottom: calc(var(--gap) / 2);
+ margin-bottom: var(--gap);
}
.about__section.has-2-columns.has-gutters .column:last-child {
margin-bottom: 0;
}
-
- .about__section.has-2-columns .column:nth-of-type(n) {
- padding-top: calc(var(--gap) / 2);
- padding-bottom: calc(var(--gap) / 2);
- }
}
@media screen and (max-width: 480px) {
@@ -451,18 +461,18 @@
.about__container h3.is-larger-heading {
margin-top: 0;
margin-bottom: 0.5em;
- font-size: 2em;
- line-height: 1.2;
+ font-size: 2rem;
font-weight: 700;
+ line-height: 1.16;
}
.about__container h3,
.about__container h1.is-smaller-heading,
.about__container h2.is-smaller-heading {
margin-top: 0;
- font-size: 1.6em;
- line-height: 1.3;
- font-weight: 400;
+ font-size: 1.625rem;
+ font-weight: 700;
+ line-height: 1.4;
}
.about__container p {
@@ -470,6 +480,13 @@
line-height: inherit;
}
+.about__container p.is-subheading {
+ margin-top: 0;
+ font-size: 1.5rem;
+ font-weight: 300;
+ line-height: 160%;
+}
+
.about__section a {
color: var(--accent-1);
text-decoration: underline;
@@ -497,6 +514,10 @@
margin-left: calc(var(--gap) / 2);
}
+.about__container li {
+ margin-bottom: 0.75rem;
+}
+
.about__container img {
margin: 0;
max-width: 100%;
@@ -523,48 +544,12 @@
margin-right: auto;
}
-.about__container .about__image-comparison {
- position: relative;
- display: inline-block;
- max-width: 100%;
-}
-
-.about__container .about__image-comparison img {
- -webkit-user-select: none;
- user-select: none;
- width: auto;
- max-width: none;
- max-height: 100%;
-}
-
-.about__container .about__image-comparison > img {
- max-width: 100%;
+.about__container .about__image + h3 {
+ margin-top: 1.5em;
}
-.about__container .about__image-comparison-resize {
- position: absolute !important; /* Needed to override inline style on ResizableBox */
- top: 0;
- bottom: 0;
- left: 0;
- width: 50%;
- max-width: 100%;
-}
-
-.about__container .about__image-comparison.no-js .about__image-comparison-resize {
- overflow: hidden;
- border-right: 2px solid var(--wp-admin-theme-color);
-}
-
-.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
- width: 4px;
- right: calc(50% - 2px);
- transition: none;
- animation: none;
- opacity: 1;
-}
-
-.about__container .about__image + h3 {
- margin-top: 1.5em;
+.about__container .column .about__image {
+ margin-bottom: calc(var(--gap) / 2);
}
.about__container hr {
@@ -589,7 +574,8 @@
}
.about__section {
- font-size: 1.2em;
+ font-size: 1.125rem;
+ line-height: 1.55;
}
.about__section.is-feature {
@@ -611,26 +597,45 @@
/* 1.3 - Header */
.about__header {
+ --about-header-image-width: 521px;
+ --about-header-image-height: 504px;
+ --about-header-bg-width: var(--about-header-image-width);
+ --about-header-bg-height: var(--about-header-image-height);
+ --about-header-bg-offset-inline: calc(var(--gap) * -2);
+
+ position: relative;
margin-bottom: var(--gap);
padding-top: 0;
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- background-image: url('../images/about-header-about.svg');
- background-color: var(--accent-2);
- color: var(--text-light);
+ background: var(--subtle-background) url('../images/about-header-about.svg?ver=6.0') no-repeat;
+ background-size: var(--about-header-bg-width) var(--about-header-bg-height);
+ background-position: right var(--about-header-bg-offset-inline) center;
}
.credits-php .about__header {
- background-image: url('../images/about-header-credits.svg');
+ --about-header-image-width: 477px;
+ --about-header-image-height: 470px;
+ --about-header-bg-offset-inline: calc(var(--gap) * -4);
+
+ background-image: url('../images/about-header-credits.svg?ver=6.0');
+ background-position: right var(--about-header-bg-offset-inline) top var(--gap);
}
.freedoms-php .about__header {
- background-image: url('../images/about-header-freedoms.svg');
+ --about-header-image-width: 411px;
+ --about-header-image-height: 498px;
+ --about-header-bg-offset-inline: var(--gap);
+
+ background-image: url('../images/about-header-freedoms.svg?ver=6.0');
+ background-position: right var(--about-header-bg-offset-inline) top calc(var(--gap) * 4);
}
.privacy-php .about__header {
- background-image: url('../images/about-header-privacy.svg');
+ --about-header-image-width: 277px;
+ --about-header-image-height: 361px;
+ --about-header-bg-offset-inline: var(--gap);
+
+ background-image: url('../images/about-header-privacy.svg?ver=6.0');
+ background-position: right var(--about-header-bg-offset-inline) top var(--gap);
}
.about__header-image {
@@ -638,27 +643,50 @@
}
.about__header-title {
- padding: 2rem 0 0;
- margin: 0 2rem;
+ box-sizing: border-box;
+ margin: 0 0 0 var(--gap);
+ padding: 8rem 0 0;
+ padding-right: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap));
+}
+
+.credits-php .about__header-title,
+.privacy-php .about__header-title {
+ padding-top: 6rem;
+}
+
+.freedoms-php .about__header-title {
+ padding-top: 3rem;
}
.about__header-title h1 {
- margin: 0 0 0.5rem;
+ margin: 0 0 1rem;
padding: 0;
- font-size: 4.5rem;
+ font-size: clamp(3rem, 18.46vw - 8.08rem, 6rem);
line-height: 1;
font-weight: 400;
}
.about__header-text {
- max-width: 42rem;
- margin: 0 0 5em;
- padding: 0 2rem;
- font-size: 2rem;
+ box-sizing: border-box;
+ margin: 0 0 9rem;
+ padding: 0 0 0 2rem;
+ padding-right: calc(var(--about-header-bg-width) + var(--about-header-bg-offset-inline) + var(--gap));
+ font-size: 1.6rem;
line-height: 1.15;
}
+.credits-php .about__header-text,
+.privacy-php .about__header-text {
+ margin-bottom: 7rem;
+}
+
+.freedoms-php .about__header-text {
+ margin-bottom: 6rem;
+}
+
.about__header-navigation {
+ position: relative;
+ z-index: 1;
display: flex;
justify-content: center;
padding-top: 0;
@@ -700,9 +728,15 @@
border-color: var(--nav-current);
}
-@media screen and (max-width: 960px){
+@media screen and (max-width: 960px) {
+ .about__header {
+ --about-header-bg-width: calc(var(--about-header-image-width) * 0.7);
+ --about-header-bg-height: calc(var(--about-header-image-height) * 0.7);
+ --about-header-bg-offset-inline: calc(var(--gap) * -1);
+ }
+
.about__header-title h1 {
- font-size: 4.8em;
+ font-size: clamp(3rem, 18.46vw - 5.08rem, 6rem);
}
}
@@ -721,7 +755,12 @@
margin-right: calc(var(--gap) / 2);
}
- .about__header-text,
+ .about__header-text {
+ margin-top: 0;
+ margin-right: 0;
+ padding-left: calc(var(--gap) / 2);
+ }
+
.about__header-navigation .nav-tab {
margin-top: 0;
margin-right: 0;
@@ -730,13 +769,35 @@
}
}
+@media screen and (max-width: 600px) {
+ .about__header,
+ .credits-php .about__header,
+ .privacy-php .about__header,
+ .freedoms-php .about__header {
+ background-image: none;
+ }
+
+ .about__header-title,
+ .about__header-text {
+ padding-right: calc(var(--gap) / 2) !important;
+ }
+
+ .about__header-title h1 {
+ font-size: clamp(2rem, 11.43vw - 0.29rem, 4rem);
+ }
+}
+
@media screen and (max-width: 480px) {
.about__header-title p {
font-size: 2.4em;
}
+ .about__header-title {
+ padding-top: 2rem;
+ }
+
.about__header-text {
- margin-bottom: 1em;
+ margin-bottom: 2rem;
}
.about__header-navigation {