diff options
Diffstat (limited to 'srcs/wordpress/wp-admin/css/about.css')
| -rw-r--r-- | srcs/wordpress/wp-admin/css/about.css | 1213 |
1 files changed, 1213 insertions, 0 deletions
diff --git a/srcs/wordpress/wp-admin/css/about.css b/srcs/wordpress/wp-admin/css/about.css new file mode 100644 index 0000000..00a296e --- /dev/null +++ b/srcs/wordpress/wp-admin/css/about.css @@ -0,0 +1,1213 @@ +/*------------------------------------------------------------------------------ + 22.0 - About Pages + + 1.0 Global: About, Credits, Freedoms, Privacy + 1.1 Layout + 1.2 Typography & Elements + 1.3 Header + 2.0 Credits Page + 3.0 Freedoms Page + x.2.0 Legacy About Styles: Global + x.2.1 Typography + x.2.2 Structure + x.2.3 Point Releases + x.3.0 Legacy About Styles: About Page + x.3.1 Typography + x.3.2 Structure + x.4.0 Legacy About Styles: Credits & Freedoms Pages + x.5.0 Legacy About Styles: Media Queries +------------------------------------------------------------------------------*/ + +.about__container { + /* Section backgrounds */ + --background: #f4efe1; + --subtle-background: #d7d2c5; + /* Main text color */ + --text: #413e38; + /* Navigation colors. */ + --nav-background: #fefcf7; + --nav-color: #716d64; + /* Reds, used as accents & in header. */ + --accent-1: #bd3854; + --accent-2: #5f1b29; + --accent-3: #321017; +} + +/*------------------------------------------------------------------------------ + 1.0 - Global: About, Credits, Freedoms, Privacy +------------------------------------------------------------------------------*/ + +.about-php, +.credits-php, +.freedoms-php, +.privacy-php { + background: #fff; +} + +.about-php #wpcontent, +.credits-php #wpcontent, +.freedoms-php #wpcontent, +.privacy-php #wpcontent { + background: white; + padding: 0 24px; +} + +@media screen and (max-width: 782px) { + .about-php.auto-fold #wpcontent, + .credits-php.auto-fold #wpcontent, + .freedoms-php.auto-fold #wpcontent, + .privacy-php.auto-fold #wpcontent { + padding-left: 24px; + } +} + +.about__container { + max-width: 1000px; + margin: 24px auto; + clear: both; +} + +.about__container .alignleft { + float: left; +} + +.about__container .alignright { + float: right; +} + +.about__container .aligncenter { + text-align: center; +} + +.about__container .is-vertically-aligned-top { + -ms-grid-row-align: start; + align-self: start; +} + +.about__container .is-vertically-aligned-center { + -ms-grid-row-align: center; + align-self: center; +} + +.about__container .is-vertically-aligned-bottom { + -ms-grid-row-align: end; + align-self: end; +} + +.about__section { + background: #F4EFE1; + background: var(--background); +} + +.about__container .has-accent-background-color { + background-color: #BD3854; + background-color: var(--accent-1); +} + +.about__container .has-subtle-background-color { + background-color: #D7D2C5; + background-color: var(--subtle-background); +} + +/* 1.1 - Layout */ + +.about__section { + margin: 0; +} + +.about__section .column { + padding: 32px; +} + +.about__section .column.is-edge-to-edge { + padding: 0; +} + +.about__section .column p:last-of-type { + margin-bottom: 0; +} + +.about__section .is-section-header { + margin-bottom: 0; + padding: 32px 32px 0; +} + +.about__section.is-feature { + padding: 32px; +} + +.about__section.is-feature p { + margin: 0; +} + +.about__section.has-2-columns, +.about__section.has-3-columns, +.about__section.has-4-columns { + display: -ms-grid; + display: grid; +} + +.about__section.has-2-columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; +} + +.about__section.has-2-columns.is-wider-right { + -ms-grid-columns: 1fr 2fr; + grid-template-columns: 1fr 2fr; +} + +.about__section.has-2-columns.is-wider-left { + -ms-grid-columns: 2fr 1fr; + grid-template-columns: 2fr 1fr; +} + +.about__section.has-2-columns .is-section-header { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-column-span: 2; + grid-column-end: span 2; +} + +.about__section.has-2-columns .column:nth-of-type(2n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about__section.has-2-columns .column:nth-of-type(2n) { + -ms-grid-column: 2; + grid-column-start: 2; +} + +.about__section.has-3-columns { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); +} + +.about__section.has-3-columns .is-section-header { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-column-span: 3; + grid-column-end: span 3; +} + +.about__section.has-3-columns .column:nth-of-type(3n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about__section.has-3-columns .column:nth-of-type(3n+2) { + -ms-grid-column: 2; + grid-column-start: 2; +} + +.about__section.has-3-columns .column:nth-of-type(3n) { + -ms-grid-column: 3; + grid-column-start: 3; +} + +.about__section.has-4-columns { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); +} + +.about__section.has-4-columns .is-section-header { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-column-span: 4; + grid-column-end: span 4; +} + +.about__section.has-4-columns .column:nth-of-type(4n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about__section.has-4-columns .column:nth-of-type(4n+2) { + -ms-grid-column: 2; + grid-column-start: 2; +} + +.about__section.has-4-columns .column:nth-of-type(4n+3) { + -ms-grid-column: 3; + grid-column-start: 3; +} + +.about__section.has-4-columns .column:nth-of-type(4n) { + -ms-grid-column: 4; + grid-column-start: 4; +} + +/* Any columns following a section header need to be expicitly put into the second row, for IE support. */ +.about__section.has-2-columns .is-section-header ~ .column, +.about__section.has-3-columns .is-section-header ~ .column, +.about__section.has-4-columns .is-section-header ~ .column { + -ms-grid-row: 2; + grid-row-start: 2; +} + +@media screen and (max-width: 782px) { + .about__section.has-3-columns, + .about__section.has-4-columns { + display: block; + padding-bottom: 16px; + } + + .about__section.has-3-columns .column:nth-of-type(n), + .about__section.has-4-columns .column:nth-of-type(n) { + padding-top: 16px; + padding-bottom: 16px; + } +} + +@media screen and (max-width: 600px) { + .about__section.has-2-columns { + display: flex; /* This is flex, not block, so we can use order below. */ + flex-wrap: wrap; + align-content: stretch; + padding-bottom: 16px; + } + + .about__section.has-2-columns .column:nth-of-type(n) { + padding-top: 16px; + padding-bottom: 16px; + width: 100%; + } + + .about__section.has-2-columns .is-edge-to-edge { + order: -1; + } +} + +/* 1.2 - Typography & Elements */ + +.about__container { + line-height: 1.4; +} + +.about__container h1 { + font-size: 5em; + line-height: 1; +} + +.about__container h2 { + margin-top: 0; + font-size: 1.4em; +} + +.about__container h3 { + margin-top: 0; + font-size: 1em; +} + +.about__container p { + font-size: inherit; + line-height: inherit; +} + +.about__section a { + color: #5f1b29; + text-decoration: underline; +} + +.about__section a:hover, +.about__section a:active, +.about__section a:focus { + text-decoration: none; +} + +.wp-credits-list a { + text-decoration: none; +} + +.wp-credits-list a:hover, +.wp-credits-list a:active, +.wp-credits-list a:focus { + text-decoration: underline; +} + +.about__container ul { + list-style: disc; + margin-left: 16px; +} + +.about__container img { + margin: 0; + vertical-align: middle; +} + +.about__container .about__image { + display: -ms-grid; + display: grid; + align-items: center; + justify-content: center; + height: 100%; +} + +.about__container .about__image img { + max-width: 100%; + width: 100%; + height: auto; +} + +.about__container hr { + margin: 0; + height: 32px; + border: none; +} + +.about__container div.updated, +.about__container div.error, +.about__container .notice { + display: none !important; +} + +.about__section { + font-size: 1.2em; +} + +.about__section.is-feature { + font-size: 1.6em; + font-weight: 600; +} + +@media screen and (max-width: 782px) { + .about__container h1 { + font-size: 4em; + } +} + +@media screen and (max-width: 480px) { + .about__container h1 { + font-size: 3.2em; + } + + .about__section.is-feature { + font-size: 1.4em; + font-weight: 500; + } +} + +/* 1.3 - Header */ + +.about__header { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; + -ms-grid-rows: 1fr 1fr; + grid-template-rows: 1fr 1fr; + min-height: 28em; + max-height: 36em; + height: 90vh; + margin-bottom: 32px; +} + +.about__header > div { + display: flex; +} + +.about__header > div > * { + align-self: flex-end; +} + +.about__header-title { + -ms-grid-column: 1; + grid-column: 1; + -ms-grid-row: 1; + -ms-grid-row-span: 2; + grid-row: 1/span 2; + padding: 32px; + background-color: #BD3854; + background-color: var(--accent-1); + color: white; + padding: 32px; +} + +.about__header-title h1 { + padding: 0; + color: inherit; +} + +.about__header-title h1 span { + display: block; + font-weight: 600; + font-size: 1.2em; + line-height: 1; +} + +.about__header-badge { + -ms-grid-column: 2; + grid-column: 2; + -ms-grid-row: 1; + grid-row: 1; + background-color: #5f1b29; + background-color: var(--accent-2); + margin: 0; + padding: 32px; + justify-content: flex-end; +} + +.about__header-badge img { + align-self: flex-start; + max-width: 100%; +} + +.about__header-text { + -ms-grid-column: 2; + grid-column: 2; + -ms-grid-row: 2; + grid-row: 2; + padding: 32px; + background-color: #321017; + background-color: var(--accent-3); + color: white; + font-size: 1.5em; + line-height: 1.4; +} + +.about__header-text p { + margin: 0; +} + +.about__header-navigation { + -ms-grid-column: 1; + -ms-grid-column-span: 2; + grid-column: 1/span 2; + -ms-grid-row: 3; + grid-row: 3; + padding-top: 0; + background: #FEFCF7; + background: var(--nav-background); + color: #716d64; + color: var(--nav-color); + border-bottom: 3px solid currentColor; +} + +.about__header-navigation .nav-tab { + margin-left: 0; + padding: 24px 32px; + font-size: 1.4em; + line-height: 1; + border-width: 0 0 3px; + border-style: solid; + border-color: transparent; + background: transparent; + color: inherit; +} + +.about__header-navigation .nav-tab:hover, +.about__header-navigation .nav-tab:active { + background-color: #F4EFE1; + background-color: var(--background); +} + +.about__header-navigation .nav-tab-active { + margin-bottom: -3px; + border-width: 0 0 6px; + color: #BD3854; + color: var(--accent-1); + border-color: currentColor; +} + +.about__header-navigation .nav-tab-active:hover, +.about__header-navigation .nav-tab-active:active { + background-color: transparent; + border-color: currentColor; +} + +@media screen and (max-width: 782px) { + .about__container .about__header-text { + font-size: 1.4em; + } +} + +@media screen and (max-width: 600px) { + .about__header { + display: block; + min-height: unset; + max-height: unset; + height: auto; + } + + .about__header-badge { + justify-content: flex-start; + } + + .about__header-navigation .nav-tab { + margin-top: 0; + margin-right: 0; + padding: 24px 16px; + } +} + +@media screen and (max-width: 480px) { + .about__header-navigation .nav-tab { + float: none; + display: block; + margin-bottom: 0; + padding: 16px 16px; + border-left-width: 3px; + border-bottom: none; + } + + .about__header-navigation .nav-tab-active { + border-bottom: none; + border-left-width: 3px; + background: #F4EFE1; + background: var(--background); + } +} + + +/*------------------------------------------------------------------------------ + 2.0 - Credits Page +------------------------------------------------------------------------------*/ + +.about__section .wp-people-group { + margin: 0; +} + +.about__section .wp-person { + display: inline-block; + vertical-align: top; + box-sizing: border-box; + padding: 0 1em 1em 0; + height: 6em; + width: calc( 33% - 4px ); + min-width: 280px; +} + +.about__section .compact .wp-person { + height: auto; + width: calc( 25% - 4px ); + min-width: 220px; + padding-bottom: 0.5em; +} + +.about__section .wp-person .gravatar { + float: left; + margin: -4px 0.85em 0.85em 0; + padding: 1px; + width: 80px; + height: 80px; + border-radius: 100%; +} + +.about__section .compact .wp-person .gravatar { + width: 40px; + height: 40px; +} + +.about__section .wp-person .web { + font-size: 1.4em; + font-weight: 600; + text-decoration: none; + color: #413E38; + color: var(--text); +} + +.about__section .wp-person .web:hover { + text-decoration: underline; +} + +.about__section .compact .wp-person .web { + font-size: 1.2em; +} + +.about__section .wp-person .title { + display: block; + margin-top: 0.5em; +} + +@media screen and (max-width: 480px) { + .about__section .wp-person { + min-width: 100%; + } + + .about__section .wp-person .gravatar { + width: 60px; + height: 60px; + } + + .about__section .wp-person .web { + font-size: 1em; + } + + .about__section .compact .wp-person .web { + font-size: 1em; + } +} + + +/*------------------------------------------------------------------------------ + 3.0 - Freedoms Page +------------------------------------------------------------------------------*/ + +.about__section .column .freedoms-image { + margin-bottom: 1em; +} + + +/*------------------------------------------------------------------------------ + x.2.0 - Legacy About Styles: Global +------------------------------------------------------------------------------*/ + +.about-wrap { + position: relative; + margin: 25px 40px 0 20px; + max-width: 1050px; /* readability */ + font-size: 15px; +} + +.about-wrap.full-width-layout { + max-width: 1200px; +} + +.about-wrap-content { + max-width: 1050px; +} + +.about-wrap div.updated, +.about-wrap div.error, +.about-wrap .notice { + display: none !important; +} + +.about-wrap hr { + border: 0; + height: 0; + margin: 3em 0 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.about-wrap img { + margin: 0; + width: 100%; + height: auto; + vertical-align: middle; +} + +.about-wrap .inline-svg img { + max-width: 100%; + width: auto; + height: auto; +} + +.about-wrap video { + margin: 1.5em auto; +} + +/* WordPress Version Badge */ + +.wp-badge { + background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat; + background-position: center 25px; + background-size: 80px 80px; + color: #fff; + font-size: 14px; + text-align: center; + font-weight: 600; + margin: 5px 0 0; + padding-top: 120px; + height: 40px; + display: inline-block; + width: 140px; + text-rendering: optimizeLegibility; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} + +.svg .wp-badge { + background-image: url(../images/wordpress-logo-white.svg?ver=20160308); +} + +.about-wrap .wp-badge { + position: absolute; + top: 0; + right: 0; +} + +/* Tabs */ + +.about-wrap .nav-tab { + padding-right: 15px; + padding-left: 15px; + font-size: 18px; + line-height: 1.33333333; +} + +/* x.2.1 - Typography */ + +.about-wrap h1 { + margin: 0.2em 200px 0 0; + padding: 0; + color: #32373c; + line-height: 1.2; + font-size: 2.8em; + font-weight: 400; +} + +.about-wrap h2 { + margin: 40px 0 0.6em; + font-size: 2.7em; + line-height: 1.3; + font-weight: 300; + text-align: center; +} + +.about-wrap h3 { + margin: 1.25em 0 0.6em; + font-size: 1.4em; + line-height: 1.5; +} + +.about-wrap h4 { + font-size: 16px; + color: #23282d; +} + +.about-wrap p { + line-height: 1.5; + font-size: 16px; +} + +.about-wrap code, +.about-wrap ol li p { + font-size: 14px; + font-weight: 400; +} + +.about-wrap figcaption { + font-size: 13px; + text-align: center; + color: white; + text-overflow: ellipsis; +} + +.about-wrap .about-description, +.about-wrap .about-text { + margin-top: 1.4em; + font-weight: 400; + line-height: 1.6; + font-size: 19px; +} + +.about-wrap .about-text { + margin: 1em 200px 1em 0; + color: #555d66; +} + +/* x.2.2 - Structure */ + +.about-wrap .has-1-columns, +.about-wrap .has-2-columns, +.about-wrap .has-3-columns, +.about-wrap .has-4-columns { + display: -ms-grid; + display: grid; + max-width: 800px; + margin-top: 40px; + margin-left: auto; + margin-right: auto; +} + +.about-wrap .column { + margin-right: 20px; + margin-left: 20px; +} + +.about-wrap .is-wide { + max-width: 760px; +} + +.about-wrap .is-fullwidth { + max-width: 100%; +} + +.about-wrap .has-1-columns { + display: block; + max-width: 680px; + margin: 0 auto 40px; +} + +.about-wrap .has-2-columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; +} + +.about-wrap .has-2-columns .column:nth-of-type(2n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about-wrap .has-2-columns .column:nth-of-type(2n) { + -ms-grid-column: 2; + grid-column-start: 2; +} + +.about-wrap .has-2-columns.is-wider-right { + -ms-grid-columns: 1fr 2fr; + grid-template-columns: 1fr 2fr; +} + +.about-wrap .has-2-columns.is-wider-left { + -ms-grid-columns: 2fr 1fr; + grid-template-columns: 2fr 1fr; +} + +.about-wrap .has-3-columns { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); +} + +.about-wrap .has-3-columns .column:nth-of-type(3n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about-wrap .has-3-columns .column:nth-of-type(3n+2) { + -ms-grid-column: 2; + grid-column-start: 2; +} + +.about-wrap .has-3-columns .column:nth-of-type(3n) { + -ms-grid-column: 3; + grid-column-start: 3; +} + +.about-wrap .has-4-columns { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+1) { + -ms-grid-column: 1; + grid-column-start: 1; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+2) { + -ms-grid-column: 2; + grid-column-start: 2; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n+3) { + -ms-grid-column: 3; + grid-column-start: 3; +} + +.about-wrap .has-4-columns .column:nth-of-type(4n) { + -ms-grid-column: 4; + grid-column-start: 4; +} + +.about-wrap .column :first-child { + margin-top: 0; +} + +.about-wrap .aligncenter { + text-align: center; +} + +.about-wrap .alignleft { + float: left; + margin-right: 40px; +} + +.about-wrap .alignright { + float: right; + margin-left: 40px; +} + +.about-wrap .is-vertically-aligned-top { + -ms-grid-row-align: start; + align-self: start; +} + +.about-wrap .is-vertically-aligned-center { + -ms-grid-row-align: center; + align-self: center; +} + +.about-wrap .is-vertically-aligned-bottom { + -ms-grid-row-align: end; + align-self: end; +} + +/* x.2.3 - Point Releases */ + +.about-wrap .point-releases { + margin-top: 5px; + border-bottom: 1px solid #ddd; +} + +.about-wrap .changelog { + margin-bottom: 40px; +} + +.about-wrap .changelog.point-releases h3 { + padding-top: 35px; +} + +.about-wrap .changelog.point-releases h3:first-child { + padding-top: 7px; +} + +.about-wrap .changelog.feature-section .col { + margin-top: 40px; +} + +/*------------------------------------------------------------------------------ + x.3.0 - Legacy About Styles: About Page +------------------------------------------------------------------------------*/ + +/* x.3.1 - Typography */ + +.about-wrap .lead-description { + font-size: 1.5em; + text-align: center; +} + +.about-wrap .feature-section p { + margin-top: 0.6em; +} + +/* x.3.2 - Structure */ + +.about-wrap .headline-feature { + margin: 0 auto 40px; + max-width: 680px; +} + +.about-wrap .headline-feature h2 { + margin: 50px 0 0; +} + +.about-wrap .headline-feature img { + max-width: 600px; + width: 100%; +} + +/* Return to Dashboard Home link */ + +.about-wrap .return-to-dashboard { + margin: 30px 0 0 -5px; + font-size: 14px; + font-weight: 600; +} + +.about-wrap .return-to-dashboard a { + text-decoration: none; + padding: 0 5px; +} + +/*------------------------------------------------------------------------------ + x.4.0 - Legacy About Styles: Credits & Freedoms Pages +------------------------------------------------------------------------------*/ + +/* Credits */ + +.about-wrap h2.wp-people-group { + margin: 2.6em 0 1.33em; + padding: 0; + font-size: 16px; + line-height: inherit; + font-weight: 600; + text-align: left; +} + +.about-wrap .wp-people-group { + padding: 0 5px; + margin: 0 -15px 0 -5px; +} + +.about-wrap .compact { + margin-bottom: 0; +} + +.about-wrap .wp-person { + display: inline-block; + vertical-align: top; + margin-right: 10px; + padding-bottom: 15px; + height: 70px; + width: 280px; +} + +.about-wrap .compact .wp-person { + height: auto; + width: 180px; + padding-bottom: 0; + margin-bottom: 0; +} + +.about-wrap .wp-person .gravatar { + float: left; + margin: 0 10px 10px 0; + padding: 1px; + width: 60px; + height: 60px; +} + +.about-wrap .compact .wp-person .gravatar { + width: 30px; + height: 30px; +} + +.about-wrap .wp-person .web { + margin: 6px 0 2px; + font-size: 16px; + font-weight: 400; + line-height: 2; + text-decoration: none; +} + +.about-wrap .wp-person .title { + display: block; +} + +.about-wrap #wp-people-group-validators + p.wp-credits-list { + margin-top: 0; +} + +.about-wrap p.wp-credits-list a { + white-space: nowrap; +} + +/* Freedoms */ + +.freedoms-php .about-wrap ol { + margin: 40px 60px; +} + +.freedoms-php .about-wrap ol li { + list-style-type: decimal; + font-weight: 600; +} + +.freedoms-php .about-wrap ol p { + font-weight: 400; + margin: 0.6em 0; +} + +.freedoms-php .has-4-columns { + margin-bottom: 40px; +} + +.freedoms-php .column .freedoms-image { + background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png'); + background-size: 100%; + padding-top: 100%; +} + +.freedoms-php .column:nth-of-type(2) .freedoms-image { + background-position: 0 34%; +} + +.freedoms-php .column:nth-of-type(3) .freedoms-image { + background-position: 0 66%; +} + +.freedoms-php .column:nth-of-type(4) .freedoms-image { + background-position: 0 100%; +} + +/*------------------------------------------------------------------------------ + x.5.0 - Legacy About Styles: Media Queries +------------------------------------------------------------------------------*/ + +@media screen and (max-width: 782px) { + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { + -ms-grid-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n+1), + .about-wrap .has-4-columns .column:nth-of-type(4n+1) { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-row: 1; + grid-row-start: 1; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n+2), + .about-wrap .has-4-columns .column:nth-of-type(4n+2) { + -ms-grid-column: 2; + grid-column-start: 2; + -ms-grid-row: 1; + grid-row-start: 1; + } + + .about-wrap .has-3-columns .column:nth-of-type(3n), + .about-wrap .has-4-columns .column:nth-of-type(4n+3) { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-row: 2; + grid-row-start: 2; + } + + .about-wrap .has-4-columns .column:nth-of-type(4n) { + -ms-grid-column: 2; + grid-column-start: 2; + -ms-grid-row: 2; + grid-row-start: 2; + } +} + +@media screen and (max-width: 600px) { + .about-wrap .has-2-columns, + .about-wrap .has-3-columns, + .about-wrap .has-4-columns { + display: block; + } + + .about-wrap :not(.is-wider-right):not(.is-wider-left) .column { + margin-right: 0; + margin-left: 0; + } + + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: -ms-grid; + display: grid; + } +} + +@media only screen and (max-width: 500px) { + .about-wrap { + margin-right: 20px; + margin-left: 10px; + } + + .about-wrap h1, + .about-wrap .about-text { + margin-right: 0; + } + + .about-wrap .about-text { + margin-bottom: 0.25em; + } + + .about-wrap .wp-badge { + position: relative; + margin-bottom: 1.5em; + width: 100%; + } +} + +@media only screen and (max-width: 480px) { + .about-wrap .has-2-columns.is-wider-right, + .about-wrap .has-2-columns.is-wider-left { + display: block; + } + + .about-wrap .column { + margin-right: 0; + margin-left: 0; + } + + .about-wrap .has-2-columns.is-wider-right img, + .about-wrap .has-2-columns.is-wider-left img { + max-width: 160px; + } +} |
