Changeset 46616
- Timestamp:
- 10/29/2019 08:08:32 PM (5 years ago)
- Location:
- trunk/src/wp-admin
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/about.php
r46572 r46616 17 17 include( ABSPATH . 'wp-admin/admin-header.php' ); 18 18 ?> 19 <div class="wrap about -wrap full-width-layout">19 <div class="wrap about__container"> 20 20 21 21 <div class="about__header"> … … 27 27 </div> 28 28 29 <div class="about__header-badge wp-badge"> 30 <?php 31 printf( 32 /* translators: %s: The current WordPress version number. */ 33 __( 'Version %s' ), 34 $display_version 35 ); 36 ?> 29 <div class="about__header-badge"> 30 <img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" /> 37 31 </div> 38 32 … … 68 62 <div class="column is-edge-to-edge has-accent-background-color"> 69 63 <div class="about__image aligncenter"> 70 <img src="data:image/svg+xml; utf8,%3Csvg width='660' height='818' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='99' y='178' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='231' y='310' width='99' height='99' fill='%2344141E'/%3E%3Crect x='330' y='409' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='462' y='541' width='99' height='99' fill='%2344141E'/%3E%3C/svg%3E" alt="" />64 <img src="data:image/svg+xml;charset=utf8,%3Csvg width='660' height='818' viewbox='0 0 660 818' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='99' y='178' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='231' y='310' width='99' height='99' fill='%2344141E'/%3E%3Crect x='330' y='409' width='132' height='132' fill='%23F4EFE1'/%3E%3Crect x='462' y='541' width='99' height='99' fill='%2344141E'/%3E%3C/svg%3E" alt="" /> 71 65 </div> 72 66 </div> 73 67 <div class="column is-vertically-aligned-center"> 74 <h 3><?php _e( 'Block Editor Improvements' ); ?></h3>68 <h2><?php _e( 'Block Editor Improvements' ); ?></h2> 75 69 <p> 76 70 <?php _e( 'This enhancement-focused update introduces over 150 new features and usability improvements, including improved large image support for uploading non-optimized, high-resolution pictures taken from your smartphone or other high-quality cameras. Combined with larger default image sizes, pictures always look their best.' ); ?> … … 85 79 <div class="about__section has-2-columns"> 86 80 <div class="column is-vertically-aligned-center"> 87 <h 3><?php _e( 'Expanded Design Flexibility' ); ?></h3>81 <h2><?php _e( 'Expanded Design Flexibility' ); ?></h2> 88 82 <p> 89 83 <?php … … 105 99 <div class="column is-edge-to-edge has-accent-background-color"> 106 100 <div class="about__image aligncenter"> 107 <img src="data:image/svg+xml; utf8,%3Csvg width='500' height='500' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='75' y='200' width='150' height='75' fill='%2344141E'/%3E%3Crect x='175' y='75' width='50' height='100' fill='%2385273B'/%3E%3Crect x='75' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='250' y='200' width='175' height='75' fill='%2344141E'/%3E%3Crect x='350' y='75' width='75' height='100' fill='%2385273B'/%3E%3Crect x='250' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='75' y='375' width='150' height='50' fill='%2344141E'/%3E%3Crect x='175' y='300' width='50' height='50' fill='%2385273B'/%3E%3Crect x='75' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3Crect x='250' y='372.5' width='175' height='52.5' fill='%2344141E'/%3E%3Crect x='350' y='300' width='75' height='50' fill='%2385273B'/%3E%3Crect x='250' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3C/svg%3E%0A" alt="">101 <img src="data:image/svg+xml;charset=utf8,%3Csvg width='500' height='500' viewbox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='75' y='200' width='150' height='75' fill='%2344141E'/%3E%3Crect x='175' y='75' width='50' height='100' fill='%2385273B'/%3E%3Crect x='75' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='250' y='200' width='175' height='75' fill='%2344141E'/%3E%3Crect x='350' y='75' width='75' height='100' fill='%2385273B'/%3E%3Crect x='250' y='75' width='75' height='100' fill='%23F4EFE1'/%3E%3Crect x='75' y='375' width='150' height='50' fill='%2344141E'/%3E%3Crect x='175' y='300' width='50' height='50' fill='%2385273B'/%3E%3Crect x='75' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3Crect x='250' y='372.5' width='175' height='52.5' fill='%2344141E'/%3E%3Crect x='350' y='300' width='75' height='50' fill='%2385273B'/%3E%3Crect x='250' y='300' width='75' height='50' fill='%23F4EFE1'/%3E%3C/svg%3E%0A" alt=""> 108 102 </div> 109 103 </div> … … 112 106 <div class="about__section has-2-columns has-subtle-background-color"> 113 107 <div class="column is-vertically-aligned-center"> 114 <h 3><?php _e( 'Introducing Twenty Twenty' ); ?></h3>108 <h2><?php _e( 'Introducing Twenty Twenty' ); ?></h2> 115 109 <p><?php _e( 'As the block editor celebrates its first birthday, we are proud that Twenty Twenty is designed with flexibility at its core. Show off your services or products with a combination of columns, groups, and media blocks. Set your content to wide or full alignment for dynamic and engaging layouts. Or let your thoughts be the star with a centered content column!' ); ?></p> 116 110 … … 127 121 <div class="column is-edge-to-edge"> 128 122 <div class="about__image aligncenter"> 129 <img src="https:// cldup.com/rsaSI50LvZ.png" alt="" />123 <img src="https://make.wordpress.org/core/files/2019/10/twentytwenty-mobile.png" alt="" /> 130 124 </div> 131 125 </div> … … 135 129 <div class="column is-edge-to-edge"> 136 130 <div class="about__image aligncenter"> 137 <img src="https:// cldup.com/8AuwuFLW0J.png" alt="" />131 <img src="https://make.wordpress.org/core/files/2019/10/twentytwenty-desktop.png" alt="" /> 138 132 </div> 139 133 </div> … … 143 137 144 138 <div class="about__section has-3-columns"> 145 <h 3 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h3>146 147 <div class="column"> 148 <h 4><?php _e( 'Automatic Image Rotation' ); ?></h4>139 <h2 class="is-section-header"><?php _e( 'Improvements for Everyone' ); ?></h2> 140 141 <div class="column"> 142 <h3><?php _e( 'Automatic Image Rotation' ); ?></h3> 149 143 <p><?php _e( 'Your images will be correctly rotated upon upload according to the embedded orientation data. This feature was first proposed nine years ago and made possible through the perserverance of many dedicated contributors.' ); ?></p> 150 144 </div> 151 145 <div class="column"> 152 <h 4><?php _e( 'Site Health Checks' ); ?></h4>146 <h3><?php _e( 'Site Health Checks' ); ?></h3> 153 147 <p><?php _e( 'The improvements introduced in 5.3 make it even easier to identify issues. Expanded recommendations highlight areas that may need troubleshooting on your site from the Health Check screen.' ); ?></p> 154 148 </div> 155 149 <div class="column"> 156 <h 4><?php _e( 'Admin Email Verification' ); ?></h4>157 <p><?php _e( 'You’ll now be periodically asked to confirm that your admin email address is up to date when you log in as an administrator. This reduces the chance of getting locked out o ut of your site if you change your email address.' ); ?></p>150 <h3><?php _e( 'Admin Email Verification' ); ?></h3> 151 <p><?php _e( 'You’ll now be periodically asked to confirm that your admin email address is up to date when you log in as an administrator. This reduces the chance of getting locked out of your site if you change your email address.' ); ?></p> 158 152 </div> 159 153 </div> … … 162 156 <div class="column is-edge-to-edge"> 163 157 <div class="about__image aligncenter"> 164 <img src="data:image/svg+xml; utf8,%3Csvg width='1000' height='498' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='865.463' y='36.8596' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='865.463' y='180.98' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='866.2' y='328.05' width='133.8' height='132.694' fill='%23942F44'/%3E%3Crect y='331.736' width='405.455' height='134.169' fill='%234E1521'/%3E%3Crect y='36.8596' width='405.455' height='129.008' fill='%234E1521'/%3E%3Crect y='184.298' width='387.025' height='133.8' fill='%234E1521'/%3E%3Crect x='719.13' y='34.6479' width='133.8' height='428.677' fill='%23BD3854'/%3E%3Crect x='571.323' y='18.4297' width='133.8' height='423.885' fill='%23BD3854'/%3E%3Crect x='423.516' y='35.0164' width='133.8' height='425.728' fill='%23BD3854'/%3E%3C/svg%3E" alt="" />158 <img src="data:image/svg+xml;charset=utf8,%3Csvg width='1000' height='498' viewbox='0 0 1000 498' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='865.463' y='36.8596' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='865.463' y='180.98' width='133.8' height='132.326' fill='%23942F44'/%3E%3Crect x='866.2' y='328.05' width='133.8' height='132.694' fill='%23942F44'/%3E%3Crect y='331.736' width='405.455' height='134.169' fill='%234E1521'/%3E%3Crect y='36.8596' width='405.455' height='129.008' fill='%234E1521'/%3E%3Crect y='184.298' width='387.025' height='133.8' fill='%234E1521'/%3E%3Crect x='719.13' y='34.6479' width='133.8' height='428.677' fill='%23BD3854'/%3E%3Crect x='571.323' y='18.4297' width='133.8' height='423.885' fill='%23BD3854'/%3E%3Crect x='423.516' y='35.0164' width='133.8' height='425.728' fill='%23BD3854'/%3E%3C/svg%3E" alt="" /> 165 159 </div> 166 160 </div> … … 170 164 171 165 <div class="about__section has-2-columns has-subtle-background-color"> 172 <h 3 class="is-section-header"><?php _e( 'For Developers' ); ?></h3>173 174 <div class="column"> 175 <h 4><?php _e( 'Date/Time Component Fixes' ); ?></h4>166 <h2 class="is-section-header"><?php _e( 'For Developers' ); ?></h2> 167 168 <div class="column"> 169 <h3><?php _e( 'Date/Time Component Fixes' ); ?></h3> 176 170 <p> 177 171 <?php … … 185 179 </div> 186 180 <div class="column"> 187 <h 4><?php _e( 'PHP 7.4 Compatibility' ); ?></h4>181 <h3><?php _e( 'PHP 7.4 Compatibility' ); ?></h3> 188 182 <p> 189 183 <?php -
trunk/src/wp-admin/credits.php
r46572 r46616 16 16 17 17 include( ABSPATH . 'wp-admin/admin-header.php' ); 18 19 $credits = wp_credits(); 18 20 ?> 19 <div class="wrap about -wrap full-width-layout">21 <div class="wrap about__container"> 20 22 21 23 <div class="about__header"> … … 27 29 </div> 28 30 29 <div class="about__header-badge wp-badge"> 30 <?php 31 printf( 32 /* translators: %s: The current WordPress version number. */ 33 __( 'Version %s' ), 34 $display_version 35 ); 36 ?> 31 <div class="about__header-badge"> 32 <img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" /> 37 33 </div> 38 34 … … 57 53 </div> 58 54 59 <div class="about-wrap-content"> 55 <div class="about__section"> 56 <div class="column"> 57 <h2><?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?></h2> 58 59 <p> 60 <?php 61 if ( ! $credits ) { 62 printf( 63 /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */ 64 __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ), 65 __( 'https://wordpress.org/about/' ), 66 __( 'https://make.wordpress.org/' ) 67 ); 68 } else { 69 printf( 70 /* translators: %s: https://make.wordpress.org/ */ 71 __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ), 72 __( 'https://make.wordpress.org/' ) 73 ); 74 } 75 ?> 76 </p> 77 </div> 78 79 <div class="about__image aligncenter"> 80 <img src="data:image/svg+xml;charset=utf8,%3Csvg width='1320' height='350' viewbox='0 0 1320 350' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 61 220)' fill='%23321017'/%3E%3Crect width='72' height='250' transform='matrix(1 0 0 -1 166 300)' fill='%23BD3854'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 272 220)' fill='%23321017'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 378 220)' fill='%235F1B29'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 483 220)' fill='%23321017'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 587 220)' fill='%235F1B29'/%3E%3Crect width='71.28' height='250' transform='matrix(1 0 0 -1 689 300)' fill='%23BD3854'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 884 220)' fill='%235F1B29'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 789 220)' fill='%23321017'/%3E%3Crect width='71' height='220' transform='matrix(1 0 0 -1 985 220)' fill='%23321017'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 1084 220)' fill='%235F1B29'/%3E%3Crect width='72' height='220' transform='matrix(1 0 0 -1 1179 220)' fill='%233D0F19'/%3E%3C/svg%3E%0A" alt="" /> 81 </div> 82 </div> 83 60 84 <?php 61 62 $credits = wp_credits();63 64 85 if ( ! $credits ) { 65 echo '<p class="about-description">';66 printf(67 /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */68 __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),69 __( 'https://wordpress.org/about/' ),70 __( 'https://make.wordpress.org/' )71 );72 echo '</p>';73 echo '</div>';74 86 echo '</div>'; 75 87 include( ABSPATH . 'wp-admin/admin-footer.php' ); … … 77 89 } 78 90 79 echo '<p class="about-description">' . __( 'WordPress is created by a worldwide team of passionate individuals.' ) . "</p>\n";91 $previous_type = ''; 80 92 81 echo '<p>' . sprintf( 82 /* translators: %s: https://make.wordpress.org/ */ 83 __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ), 84 __( 'https://make.wordpress.org/' ) 85 ) . '</p>'; 93 foreach ( $credits['groups'] as $group_slug => $group_data ) : 94 ?> 95 <?php 96 if ( $previous_type !== $group_data['type'] ) { 97 echo '<hr />'; 98 } 99 ?> 100 <div class="about__section"> 101 <div class="column <?php echo 'titles' === $group_data['type'] ? 'has-subtle-background-color' : ''; ?>"> 86 102 87 foreach ( $credits['groups'] as $group_slug => $group_data ) { 103 <?php 88 104 if ( $group_data['name'] ) { 89 105 if ( 'Translators' == $group_data['name'] ) { … … 98 114 } 99 115 100 echo '<h2 class="wp-people-group ">' . esc_html( $title ) . "</h2>\n";116 echo '<h2 class="wp-people-group-title">' . esc_html( $title ) . "</h2>\n"; 101 117 } 102 118 … … 121 137 echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t"; 122 138 echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '" class="web">'; 123 $size = 'compact' == $group_data['type'] ? 30 : 60;139 $size = 'compact' == $group_data['type'] ? 40 : 80; 124 140 $data = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) ); 125 141 $size *= 2; … … 136 152 break; 137 153 } 138 } 154 $previous_type = $group_data['type']; 155 ?> 139 156 140 ?>157 </div> 141 158 </div> 159 <?php endforeach; ?> 142 160 </div> 143 161 <?php -
trunk/src/wp-admin/css/about.css
r45287 r46616 2 2 22.0 - About Pages 3 3 4 1.0 Global: About, Credits, Freedoms 5 1.1 Typography 6 1.2 Structure 7 1.3 Point Releases 8 2.0 About Page 9 2.1 Typography 10 2.2 Structure 11 3.0 Credits & Freedoms Pages 4 1.0 Global: About, Credits, Freedoms, Privacy 5 1.1 Layout 6 1.2 Typography & Elements 7 1.3 Header 8 2.0 Credits Page 9 3.0 Freedoms Page 10 x.2.0 Legacy About Styles: Global 11 x.2.1 Typography 12 x.2.2 Structure 13 x.2.3 Point Releases 14 x.3.0 Legacy About Styles: About Page 15 x.3.1 Typography 16 x.3.2 Structure 17 x.4.0 Legacy About Styles: Credits & Freedoms Pages 18 x.5.0 Legacy About Styles: Media Queries 12 19 ------------------------------------------------------------------------------*/ 13 20 21 :root { 22 /* Beiges, used as text backgrounds. */ 23 --base-1: #FEFCF7; 24 --base-2: #F4EFE1; 25 --base-3: #D7D2C5; 26 --base-4: #7B776C; 27 --text: #413E38; 28 /* Reds, used as accents, backgrounds, etc */ 29 --accent-1: #BD3854; 30 --accent-2: #5F1B29; 31 --accent-3: #321017; 32 } 33 14 34 /*------------------------------------------------------------------------------ 15 1.0 - Global: About, Credits, Freedoms 35 1.0 - Global: About, Credits, Freedoms, Privacy 36 ------------------------------------------------------------------------------*/ 37 38 .about-php #wpcontent, 39 .credits-php #wpcontent, 40 .freedoms-php #wpcontent, 41 .privacy-php #wpcontent { 42 background: white; 43 padding: 0 24px; 44 } 45 46 @media screen and (max-width: 782px) { 47 .about-php.auto-fold #wpcontent, 48 .credits-php.auto-fold #wpcontent, 49 .freedoms-php.auto-fold #wpcontent, 50 .privacy-php.auto-fold #wpcontent { 51 padding-left: 24px; 52 } 53 } 54 55 .about__container { 56 max-width: 1000px; 57 margin: 24px auto; 58 } 59 60 .about__container .alignleft { 61 float: left; 62 } 63 64 .about__container .alignright { 65 float: right; 66 } 67 68 .about__container .aligncenter { 69 text-align: center; 70 } 71 72 .about__container .is-vertically-aligned-top { 73 -ms-grid-row-align: start; 74 align-self: start; 75 } 76 77 .about__container .is-vertically-aligned-center { 78 -ms-grid-row-align: center; 79 align-self: center; 80 } 81 82 .about__container .is-vertically-aligned-bottom { 83 -ms-grid-row-align: end; 84 align-self: end; 85 } 86 87 .about__section { 88 background: #F4EFE1; 89 background: var(--base-2); 90 } 91 92 .about__container .has-accent-background-color { 93 background-color: #BD3854; 94 background-color: var(--accent-1); 95 } 96 97 .about__container .has-subtle-background-color { 98 background-color: #D7D2C5; 99 background-color: var(--base-3); 100 } 101 102 /* 1.1 - Layout */ 103 104 .about__section { 105 margin: 0; 106 } 107 108 .about__section .column { 109 padding: 32px; 110 } 111 112 .about__section .column.is-edge-to-edge { 113 padding: 0; 114 } 115 116 .about__section .column p:last-of-type { 117 margin-bottom: 0; 118 } 119 120 .about__section .is-section-header { 121 margin-bottom: 0; 122 padding: 32px 32px 0; 123 } 124 125 .about__section.is-feature { 126 padding: 32px; 127 } 128 129 .about__section.is-feature p { 130 margin: 0; 131 } 132 133 .about__section.has-2-columns, 134 .about__section.has-3-columns, 135 .about__section.has-4-columns { 136 display: -ms-grid; 137 display: grid; 138 } 139 140 .about__section.has-2-columns { 141 -ms-grid-columns: 1fr 1fr; 142 grid-template-columns: 1fr 1fr; 143 } 144 145 .about__section.has-2-columns.is-wider-right { 146 -ms-grid-columns: 1fr 2fr; 147 grid-template-columns: 1fr 2fr; 148 } 149 150 .about__section.has-2-columns.is-wider-left { 151 -ms-grid-columns: 2fr 1fr; 152 grid-template-columns: 2fr 1fr; 153 } 154 155 .about__section.has-2-columns .is-section-header { 156 -ms-grid-column: 1; 157 grid-column-start: 1; 158 -ms-grid-column-span: 2; 159 grid-column-end: span 2; 160 } 161 162 .about__section.has-2-columns .column:nth-of-type(2n+1) { 163 -ms-grid-column: 1; 164 grid-column-start: 1; 165 } 166 167 .about__section.has-2-columns .column:nth-of-type(2n) { 168 -ms-grid-column: 2; 169 grid-column-start: 2; 170 } 171 172 .about__section.has-3-columns { 173 -ms-grid-columns: (1fr)[3]; 174 grid-template-columns: repeat(3, 1fr); 175 } 176 177 .about__section.has-3-columns .is-section-header { 178 -ms-grid-column: 1; 179 grid-column-start: 1; 180 -ms-grid-column-span: 3; 181 grid-column-end: span 3; 182 } 183 184 .about__section.has-3-columns .column:nth-of-type(3n+1) { 185 -ms-grid-column: 1; 186 grid-column-start: 1; 187 } 188 189 .about__section.has-3-columns .column:nth-of-type(3n+2) { 190 -ms-grid-column: 2; 191 grid-column-start: 2; 192 } 193 194 .about__section.has-3-columns .column:nth-of-type(3n) { 195 -ms-grid-column: 3; 196 grid-column-start: 3; 197 } 198 199 .about__section.has-4-columns { 200 -ms-grid-columns: (1fr)[4]; 201 grid-template-columns: repeat(4, 1fr); 202 } 203 204 .about__section.has-4-columns .is-section-header { 205 -ms-grid-column: 1; 206 grid-column-start: 1; 207 -ms-grid-column-span: 4; 208 grid-column-end: span 4; 209 } 210 211 .about__section.has-4-columns .column:nth-of-type(4n+1) { 212 -ms-grid-column: 1; 213 grid-column-start: 1; 214 } 215 216 .about__section.has-4-columns .column:nth-of-type(4n+2) { 217 -ms-grid-column: 2; 218 grid-column-start: 2; 219 } 220 221 .about__section.has-4-columns .column:nth-of-type(4n+3) { 222 -ms-grid-column: 3; 223 grid-column-start: 3; 224 } 225 226 .about__section.has-4-columns .column:nth-of-type(4n) { 227 -ms-grid-column: 4; 228 grid-column-start: 4; 229 } 230 231 /* Any columns following a section header need to be expicitly put into the second row, for IE support. */ 232 .about__section.has-2-columns .is-section-header ~ .column, 233 .about__section.has-3-columns .is-section-header ~ .column, 234 .about__section.has-4-columns .is-section-header ~ .column { 235 -ms-grid-row: 2; 236 grid-row-start: 2; 237 } 238 239 @media screen and (max-width: 782px) { 240 .about__section.has-3-columns, 241 .about__section.has-4-columns { 242 display: block; 243 padding-bottom: 16px; 244 } 245 246 .about__section.has-3-columns .column:nth-of-type(n), 247 .about__section.has-4-columns .column:nth-of-type(n) { 248 padding-top: 16px; 249 padding-bottom: 16px; 250 } 251 } 252 253 @media screen and (max-width: 600px) { 254 .about__section.has-2-columns { 255 display: flex; /* This is flex, not block, so we can use order below. */ 256 flex-wrap: wrap; 257 align-content: stretch; 258 padding-bottom: 16px; 259 } 260 261 .about__section.has-2-columns .column:nth-of-type(n) { 262 padding-top: 16px; 263 padding-bottom: 16px; 264 width: 100%; 265 } 266 267 .about__section.has-2-columns .is-edge-to-edge { 268 order: -1; 269 } 270 } 271 272 /* 1.2 - Typography & Elements */ 273 274 .about__container { 275 line-height: 1.4; 276 } 277 278 .about__container h1 { 279 font-size: 5em; 280 line-height: 1; 281 } 282 283 .about__container h2 { 284 margin-top: 0; 285 font-size: 1.4em; 286 } 287 288 .about__container h3 { 289 margin-top: 0; 290 font-size: 1em; 291 } 292 293 .about__container p { 294 font-size: inherit; 295 line-height: inherit; 296 } 297 298 .about__container ul { 299 list-style: disc; 300 margin-left: 16px; 301 } 302 303 .about__container img { 304 margin: 0; 305 vertical-align: middle; 306 } 307 308 .about__container .about__image { 309 display: -ms-grid; 310 display: grid; 311 align-items: center; 312 justify-content: center; 313 height: 100%; 314 } 315 316 .about__container .about__image img { 317 max-width: 100%; 318 width: 100%; 319 height: auto; 320 } 321 322 .about__container hr { 323 margin: 0; 324 height: 32px; 325 border: none; 326 } 327 328 .about__section { 329 font-size: 1.2em; 330 } 331 332 .about__section.is-feature { 333 font-size: 1.6em; 334 font-weight: bold; 335 } 336 337 @media screen and (max-width: 782px) { 338 .about__container h1 { 339 font-size: 4em; 340 } 341 } 342 343 @media screen and (max-width: 480px) { 344 .about__container h1 { 345 font-size: 3.2em; 346 } 347 348 .about__section.is-feature { 349 font-size: 1.4em; 350 font-weight: 500; 351 } 352 } 353 354 /* 1.3 - Header */ 355 356 .about__header { 357 display: -ms-grid; 358 display: grid; 359 -ms-grid-columns: 1fr 1fr; 360 grid-template-columns: 1fr 1fr; 361 -ms-grid-rows: 1fr 1fr; 362 grid-template-rows: 1fr 1fr; 363 min-height: 28em; 364 max-height: 36em; 365 height: 90vh; 366 margin-bottom: 32px; 367 } 368 369 .about__header > div { 370 display: flex; 371 } 372 373 .about__header > div > * { 374 align-self: flex-end; 375 } 376 377 .about__header-title { 378 -ms-grid-column: 1; 379 grid-column: 1; 380 -ms-grid-row: 1; 381 -ms-grid-row-span: 2; 382 grid-row: 1/span 2; 383 padding: 32px; 384 background-color: #BD3854; 385 background-color: var(--accent-1); 386 color: white; 387 padding: 32px; 388 } 389 390 .about__header-title h1 { 391 padding: 0; 392 color: inherit; 393 } 394 395 .about__header-title h1 span { 396 display: block; 397 font-weight: bold; 398 font-size: 1.2em; 399 line-height: 1; 400 } 401 402 .about__header-badge { 403 -ms-grid-column: 2; 404 grid-column: 2; 405 -ms-grid-row: 1; 406 grid-row: 1; 407 background-color: #5F1B29; 408 background-color: var(--accent-2); 409 margin: 0; 410 padding: 32px; 411 justify-content: flex-end; 412 } 413 414 .about__header-badge img { 415 align-self: flex-start; 416 max-width: 100%; 417 } 418 419 .about__header-text { 420 -ms-grid-column: 2; 421 grid-column: 2; 422 -ms-grid-row: 2; 423 grid-row: 2; 424 padding: 32px; 425 background-color: #321017; 426 background-color: var(--accent-3); 427 color: white; 428 font-size: 1.6em; 429 line-height: 1.4; 430 } 431 432 .about__header-text p { 433 margin: 0; 434 } 435 436 .about__header-navigation { 437 -ms-grid-column: 1; 438 -ms-grid-column-span: 2; 439 grid-column: 1/span 2; 440 -ms-grid-row: 3; 441 grid-row: 3; 442 padding-top: 0; 443 background: #FEFCF7; 444 background: var(--base-1); 445 color: #7B776C; 446 color: var(--base-4); 447 border-bottom: 3px solid currentColor; 448 } 449 450 .about__header-navigation .nav-tab { 451 margin-left: 0; 452 margin-bottom: -3px; 453 padding: 24px 32px; 454 font-size: 1.4em; 455 line-height: 1; 456 border-width: 0 0 3px; 457 border-style: solid; 458 border-color: transparent; 459 background: transparent; 460 color: inherit; 461 } 462 463 .about__header-navigation .nav-tab-active { 464 color: #BD3854; 465 color: var(--accent-1); 466 border-color: currentColor; 467 } 468 469 @media screen and (max-width: 782px) { 470 .about__container .about__header-text { 471 font-size: 1.4em; 472 } 473 } 474 475 @media screen and (max-width: 600px) { 476 .about__header { 477 display: block; 478 min-height: unset; 479 max-height: unset; 480 height: auto; 481 } 482 483 .about__header-badge { 484 justify-content: flex-start; 485 } 486 487 .about__header-navigation .nav-tab { 488 margin-top: 0; 489 margin-right: 0; 490 padding: 24px 16px; 491 } 492 } 493 494 @media screen and (max-width: 480px) { 495 .about__header-navigation .nav-tab { 496 float: none; 497 display: block; 498 margin-bottom: 0; 499 padding: 16px 16px; 500 border-left-width: 3px; 501 border-bottom: none; 502 } 503 504 .about__header-navigation .nav-tab-active { 505 border-bottom: none; 506 border-left-width: 3px; 507 background: #F4EFE1; 508 background: var(--base-2); 509 } 510 } 511 512 513 /*------------------------------------------------------------------------------ 514 2.0 - Credits Page 515 ------------------------------------------------------------------------------*/ 516 517 .about__section .wp-people-group-title { 518 margin-bottom: 2em; 519 font-size: 1.4em; 520 } 521 522 .about__section .wp-people-group { 523 margin: 0; 524 } 525 526 .about__section .wp-person { 527 display: inline-block; 528 vertical-align: top; 529 box-sizing: border-box; 530 padding: 0 1em 1em 0; 531 height: 6em; 532 width: calc( 33% - 4px ); 533 min-width: 280px; 534 } 535 536 .about__section .compact .wp-person { 537 height: auto; 538 width: calc( 25% - 4px ); 539 min-width: 220px; 540 padding-bottom: 0.5em; 541 } 542 543 .about__section .wp-person .gravatar { 544 float: left; 545 margin: -4px 0.85em 0.85em 0; 546 padding: 1px; 547 width: 80px; 548 height: 80px; 549 border-radius: 100%; 550 } 551 552 .about__section .compact .wp-person .gravatar { 553 width: 40px; 554 height: 40px; 555 } 556 557 .about__section .wp-person .web { 558 font-size: 1.4em; 559 font-weight: 700; 560 text-decoration: none; 561 color: #413E38; 562 color: var(--text); 563 } 564 565 .about__section .wp-person .web:hover { 566 text-decoration: underline; 567 } 568 569 .about__section .compact .wp-person .web { 570 font-size: 1.2em; 571 } 572 573 .about__section .wp-person .title { 574 display: block; 575 margin-top: 0.5em; 576 } 577 578 579 /*------------------------------------------------------------------------------ 580 3.0 - Freedoms Page 581 ------------------------------------------------------------------------------*/ 582 583 .about__section .column .freedoms-image { 584 margin-bottom: 1em; 585 } 586 587 588 /*------------------------------------------------------------------------------ 589 x.2.0 - Legacy About Styles: Global 16 590 ------------------------------------------------------------------------------*/ 17 591 … … 99 673 } 100 674 101 /* 1.1 - Typography */675 /* x.2.1 - Typography */ 102 676 103 677 .about-wrap h1 { … … 160 734 } 161 735 162 /* 1.2 - Structure */736 /* x.2.2 - Structure */ 163 737 164 738 .about-wrap .has-1-columns, … … 282 856 283 857 .about-wrap .is-vertically-aligned-top { 858 -ms-grid-row-align: start; 284 859 align-self: start; 285 860 } 286 861 287 862 .about-wrap .is-vertically-aligned-center { 863 -ms-grid-row-align: center; 288 864 align-self: center; 289 865 } 290 866 291 867 .about-wrap .is-vertically-aligned-bottom { 868 -ms-grid-row-align: end; 292 869 align-self: end; 293 870 } 294 871 295 /* 1.3 - Point Releases */872 /* x.2.3 - Point Releases */ 296 873 297 874 .about-wrap .point-releases { … … 317 894 318 895 /*------------------------------------------------------------------------------ 319 2.0 -About Page896 x.3.0 - Legacy About Styles: About Page 320 897 ------------------------------------------------------------------------------*/ 321 898 322 /* 2.1 - Typography */899 /* x.3.1 - Typography */ 323 900 324 901 .about-wrap .lead-description { … … 331 908 } 332 909 333 /* 2.2 - Structure */910 /* x.3.2 - Structure */ 334 911 335 912 .about-wrap .headline-feature { … … 361 938 362 939 /*------------------------------------------------------------------------------ 363 3.0 -Credits & Freedoms Pages940 x.4.0 - Legacy About Styles: Credits & Freedoms Pages 364 941 ------------------------------------------------------------------------------*/ 365 942 … … 472 1049 473 1050 /*------------------------------------------------------------------------------ 474 4.0 -Media Queries1051 x.5.0 - Legacy About Styles: Media Queries 475 1052 ------------------------------------------------------------------------------*/ 476 1053 -
trunk/src/wp-admin/freedoms.php
r46572 r46616 22 22 include( ABSPATH . 'wp-admin/admin-header.php' ); 23 23 ?> 24 <div class="wrap about -wrap full-width-layout">24 <div class="wrap about__container"> 25 25 26 26 <div class="about__header"> … … 32 32 </div> 33 33 34 <div class="about__header-badge wp-badge"> 35 <?php 36 printf( 37 /* translators: %s: The current WordPress version number. */ 38 __( 'Version %s' ), 39 $display_version 40 ); 41 ?> 34 <div class="about__header-badge"> 35 <img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" /> 42 36 </div> 43 37 … … 62 56 </div> 63 57 64 <div class="about-wrap-content"> 65 <div class="feature-section has-1-columns"> 66 <h2><?php _e( 'Freedoms' ); ?></h2> 67 <p class="about-description"> 68 <?php 69 printf( 70 /* translators: %s: https://wordpress.org/about/license/ */ 71 __( 'WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ), 72 __( 'https://wordpress.org/about/license/' ) 73 ); 74 ?> 75 </p> 58 <div class="about__section has-subtle-background-color is-feature"> 59 <h2><?php _e( 'Freedoms' ); ?></h2> 60 61 <p class="about-description"> 62 <?php 63 printf( 64 /* translators: %s: https://wordpress.org/about/license/ */ 65 __( 'WordPress is Free and open source software, built by a distributed community of mostly volunteer developers from around the world. WordPress comes with some awesome, worldview-changing rights courtesy of its <a href="%s">license</a>, the GPL.' ), 66 __( 'https://wordpress.org/about/license/' ) 67 ); 68 ?> 69 </p> 70 </div> 71 72 <hr /> 73 74 <div class="about__section has-4-columns"> 75 <div class="column"> 76 <div class="freedoms-image"></div> 77 <h3><?php _e( 'The 1st Freedom' ); ?></h3> 78 <p><?php _e( 'To run the program for any purpose.' ); ?></p> 76 79 </div> 80 <div class="column"> 81 <div class="freedoms-image"></div> 82 <h3><?php _e( 'The 2nd Freedom' ); ?></h3> 83 <p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p> 84 </div> 85 <div class="column"> 86 <div class="freedoms-image"></div> 87 <h3><?php _e( 'The 3rd Freedom' ); ?></h3> 88 <p><?php _e( 'To redistribute.' ); ?></p> 89 </div> 90 <div class="column"> 91 <div class="freedoms-image"></div> 92 <h3><?php _e( 'The 4th Freedom' ); ?></h3> 93 <p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p> 94 </div> 95 </div> 77 96 78 <div class="feature-section has-4-columns is-fullwidth"> 79 <div class="column"> 80 <div class="freedoms-image"></div> 81 <h3><?php _e( 'The 1st Freedom' ); ?></h3> 82 <p><?php _e( 'To run the program for any purpose.' ); ?></p> 83 </div> 84 <div class="column"> 85 <div class="freedoms-image"></div> 86 <h3><?php _e( 'The 2nd Freedom' ); ?></h3> 87 <p><?php _e( 'To study how the program works and change it to make it do what you wish.' ); ?></p> 88 </div> 89 <div class="column"> 90 <div class="freedoms-image"></div> 91 <h3><?php _e( 'The 3rd Freedom' ); ?></h3> 92 <p><?php _e( 'To redistribute.' ); ?></p> 93 </div> 94 <div class="column"> 95 <div class="freedoms-image"></div> 96 <h3><?php _e( 'The 4th Freedom' ); ?></h3> 97 <p><?php _e( 'To distribute copies of your modified versions to others.' ); ?></p> 98 </div> 99 </div> 100 101 <div class="feature-section has-1-columns"> 97 <div class="about__section"> 98 <div class="column"> 102 99 <p> 103 100 <?php -
trunk/src/wp-admin/privacy.php
r46572 r46616 16 16 include( ABSPATH . 'wp-admin/admin-header.php' ); 17 17 ?> 18 <div class="wrap about -wrap full-width-layout">18 <div class="wrap about__container"> 19 19 20 20 <div class="about__header"> … … 26 26 </div> 27 27 28 <div class="about__header-badge wp-badge"> 29 <?php 30 printf( 31 /* translators: %s: The current WordPress version number. */ 32 __( 'Version %s' ), 33 $display_version 34 ); 35 ?> 28 <div class="about__header-badge"> 29 <img src="https://wordpress.org/images/core/5.4/code-is-poetry-rc.svg" alt="<?php _e( 'Code is Poetry' ); ?>" /> 36 30 </div> 37 31 … … 56 50 </div> 57 51 58 <div class="about-wrap-content"> 59 <p class="about-description"><?php _e( 'From time to time, your WordPress site may send data to WordPress.org — including, but not limited to — the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p> 52 <div class="about__section"> 53 <div class="column"> 54 <h2><?php _e( 'Privacy' ); ?></h2> 60 55 61 <p> 62 <?php 63 printf( 64 /* translators: %s: https://wordpress.org/about/stats/ */ 65 __( 'This data is used to provide general enhancements to WordPress, which includes helping to protect your site by finding and automatically installing new updates. It is also used to calculate statistics, such as those shown on the <a href="%s">WordPress.org stats page</a>.' ), 66 __( 'https://wordpress.org/about/stats/' ) 67 ); 68 ?> 69 </p> 56 <p><?php _e( 'From time to time, your WordPress site may send data to WordPress.org — including, but not limited to — the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p> 70 57 71 <p> 72 <?php 73 printf( 74 /* translators: %s: https://wordpress.org/about/privacy/ */ 75 __( 'We take privacy and transparency very seriously. To learn more about what data we collect, and how we use it, please visit <a href="%s">WordPress.org/about/privacy</a>.' ), 76 __( 'https://wordpress.org/about/privacy/' ) 77 ); 78 ?> 79 </p> 58 <p> 59 <?php 60 printf( 61 /* translators: %s: https://wordpress.org/about/stats/ */ 62 __( 'This data is used to provide general enhancements to WordPress, which includes helping to protect your site by finding and automatically installing new updates. It is also used to calculate statistics, such as those shown on the <a href="%s">WordPress.org stats page</a>.' ), 63 __( 'https://wordpress.org/about/stats/' ) 64 ); 65 ?> 66 </p> 67 68 <p> 69 <?php 70 printf( 71 /* translators: %s: https://wordpress.org/about/privacy/ */ 72 __( 'We take privacy and transparency very seriously. To learn more about what data we collect, and how we use it, please visit <a href="%s">WordPress.org/about/privacy</a>.' ), 73 __( 'https://wordpress.org/about/privacy/' ) 74 ); 75 ?> 76 </p> 77 </div> 80 78 </div> 81 79
Note: See TracChangeset
for help on using the changeset viewer.