Changeset 44264 for trunk/src/wp-admin/css/about.css
- Timestamp:
- 12/17/2018 04:35:32 PM (5 years ago)
- Location:
- trunk
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk
- Property svn:mergeinfo changed
/branches/5.0 merged: 43913,43921-43922,43937-43938,43946-43947,43952-43953,43967-43969
- Property svn:mergeinfo changed
-
trunk/src/wp-admin/css/about.css
r43309 r44264 41 41 border: 0; 42 42 height: 0; 43 margin: 0;43 margin: 3em 0 0; 44 44 border-top: 1px solid rgba(0, 0, 0, 0.1); 45 45 } … … 47 47 .about-wrap img { 48 48 margin: 0; 49 max-width: 100%;49 width: 100%; 50 50 height: auto; 51 51 vertical-align: middle; 52 } 53 54 .about-wrap figure { 55 position: relative; 56 margin: 0; 57 } 58 59 .about-wrap .feature-section figure img { 60 margin-bottom: 0; 61 } 62 63 .about-wrap figcaption { 64 position: absolute; 65 bottom: 0; 66 width: 100%; 67 padding: 40px 10px 15px; 68 overflow: auto; 69 box-sizing: border-box; 70 background: linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 60%,transparent); 71 font-weight: 600; 72 text-shadow: 0px 0px 5px rgba(0,0,0,.75); 52 73 } 53 74 … … 133 154 } 134 155 135 .about-wrap .changelog h2 {136 font-size: 1.4em;137 font-weight: 600;138 text-align: left;139 }140 141 .about-wrap .changelog h3 {142 margin: 1.33em 0;143 font-size: 1em;144 line-height: inherit;145 color: #23282d;146 }147 148 156 .about-wrap code, 149 157 .about-wrap ol li p { 150 158 font-size: 14px; 151 159 font-weight: 400; 160 } 161 162 .about-wrap figcaption { 163 font-size: 13px; 164 text-align: center; 165 color: white; 166 text-overflow: ellipsis; 152 167 } 153 168 … … 162 177 .about-wrap .about-text { 163 178 margin: 1em 200px 1em 0; 164 min-height: 60px;165 179 color: #555d66; 166 180 } … … 176 190 .about-wrap .feature-section.one-col { 177 191 margin: 0 auto; 178 max-width: 700px;192 max-width: 680px; 179 193 } 180 194 … … 198 212 } 199 213 214 .about-wrap .three-col, 215 .about-wrap .four-col { 216 margin: auto; 217 max-width: 1020px; 218 } 219 200 220 .about-wrap .three-col .col { 201 221 align-self: flex-start; … … 204 224 } 205 225 226 .about-wrap .four-col .col { 227 align-self: flex-start; 228 min-width: 23%; 229 max-width: 23%; 230 } 231 232 .about-wrap .feature-section.eight-col .col { 233 align-self: flex-start; 234 margin-top: 6px; 235 min-width: 12%; 236 max-width: 12%; 237 } 238 239 .about-wrap .one-col img { 240 margin: 1em 0 2em; 241 } 242 206 243 .about-wrap .two-col img { 207 244 margin-bottom: 1.5em; … … 214 251 .about-wrap .feature-video .mejs-overlay-loading span { 215 252 background: transparent; /* Hide loading.gif */ 253 } 254 255 .about-wrap video { 256 margin: 1.5em auto; 257 } 258 259 .about-wrap .cta { 260 text-align: center; 261 } 262 .about-wrap .cta .button { 263 margin: 0 auto 5px; 264 font-weight: 600; 216 265 } 217 266 … … 256 305 257 306 .about-wrap .two-col-text { 258 -webkit-column-count: 2;259 307 column-count: 2; 260 -webkit-column-gap: 40px;261 308 column-gap: 40px; 262 309 } … … 269 316 .about-wrap .native-fonts p { 270 317 margin-bottom: 3em; 318 } 319 320 .about-wrap .under-the-hood img + h3 { 321 margin-top: 1.25em; 271 322 } 272 323 … … 297 348 .about-wrap .feature-section { 298 349 overflow: hidden; 299 padding: 0 0 40px;300 350 } 301 351 … … 306 356 .about-wrap .feature-section .media-container { 307 357 overflow: hidden; 308 }309 310 .about-wrap .feature-section img {311 margin-bottom: 1em;312 358 } 313 359 … … 347 393 text-decoration: none; 348 394 padding: 0 5px; 349 }350 351 /* 2.3 Floating Header Layout */352 353 .about-wrap .floating-header-section {354 display: -ms-grid;355 display: grid;356 grid-gap: 0 60px;357 -ms-grid-columns: 5fr 11fr;358 grid-template-columns: 5fr 11fr;359 max-width: 1020px;360 margin: 0 auto 120px;361 }362 363 .about-wrap .floating-header-section .section-header {364 -ms-grid-column: 1;365 grid-column: 1;366 position: relative;367 min-width: 230px;368 max-width: 300px;369 }370 371 .about-wrap .floating-header-section h2 {372 margin: 0;373 text-align: left;374 position: absolute;375 }376 377 .about-wrap .floating-header-section .section-content {378 -ms-grid-column: 2;379 grid-column: 2;380 display: flex;381 justify-content: space-between;382 align-items: flex-start;383 flex-flow: row wrap;384 flex-grow: 2;385 flex-shrink: 0;386 }387 388 .about-wrap .floating-header-section .section-item {389 flex-grow: 1;390 max-width: calc(50% - 30px);391 }392 393 .about-wrap .floating-header-section .section-item:nth-child(1),394 .about-wrap .floating-header-section .section-item:nth-child(2) {395 margin-bottom: 60px;396 }397 398 .about-wrap .floating-header-section .section-item:nth-child(1):nth-last-child(2),399 .about-wrap .floating-header-section .section-item:nth-child(2):nth-last-child(1) {400 margin-bottom: 0;401 }402 403 .about-wrap .floating-header-section.has-long-title {404 display: block;405 }406 407 .about-wrap .floating-header-section.has-long-title .section-header {408 max-width: 100%;409 }410 411 .about-wrap .floating-header-section.has-long-title h2 {412 position: static;413 margin-bottom: 60px;414 }415 416 .about-wrap .floating-header-section.has-long-title .section-content {417 justify-content: flex-start;418 }419 420 .about-wrap .floating-header-section.has-long-title .section-item {421 max-width: 300px;422 margin-bottom: 0;423 }424 425 .about-wrap .floating-header-section.has-long-title .section-item + .section-item {426 margin-left: 60px;427 395 } 428 396 … … 514 482 } 515 483 484 .freedoms-php .about-wrap .col .freedoms-image { 485 background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png'); 486 background-size: 100%; 487 padding-top: 100%; 488 } 489 .freedoms-php .about-wrap .col:nth-of-type(2) .freedoms-image { 490 background-position: 0 34%; 491 } 492 .freedoms-php .about-wrap .col:nth-of-type(3) .freedoms-image { 493 background-position: 0 66%; 494 } 495 .freedoms-php .about-wrap .col:nth-of-type(4) .freedoms-image { 496 background-position: 0 100%; 497 } 498 516 499 /*------------------------------------------------------------------------------ 517 500 4.0 - Media Queries … … 537 520 @media screen and (max-width: 782px) { 538 521 .about-wrap .two-col-text { 539 -webkit-column-count: 1;540 522 column-count: 1; 541 523 } 542 524 543 525 .about-wrap .two-col .col, 544 .about-wrap .three-col .col { 526 .about-wrap .three-col .col, 527 .about-wrap .four-col .col { 545 528 min-width: 48% !important; 546 529 } 547 530 548 .about-wrap .three-col img { 531 .about-wrap .eight-col .col { 532 min-width: 24% !important; 533 } 534 535 .about-wrap .three-col img, 536 .about-wrap .four-col img, 537 .about-wrap .eight-col img { 549 538 display: block; 550 539 margin: 0 auto; 540 } 541 542 .about-wrap figcaption { 543 position: relative; 544 margin-top: 10px; 545 margin-bottom: 15px; 546 padding: 0; 547 background: none; 548 color: #40464D; 549 text-shadow: none; 551 550 } 552 551 … … 587 586 } 588 587 588 .about-wrap .feature-section .col { 589 margin-top: 1em; 590 } 591 589 592 .about-wrap .two-col .col, 593 .about-wrap .three-col .col, 590 594 .about-wrap .three-col .col { 591 595 min-width: 100% !important; 592 596 } 593 597 598 .about-wrap .eight-col .col { 599 min-width: 48% !important; 600 } 601 602 .about-wrap .under-the-hood.four-col .col, 594 603 .about-wrap .under-the-hood.three-col .col, 595 604 .about-wrap .under-the-hood.two-col .col, … … 604 613 } 605 614 606 .about-wrap .under-the-hood:nth-of-type(2n) h3, 607 .about-wrap .under-the-hood:nth-of-type(3n) h3 { 608 margin-top: 0; 615 .about-wrap .under-the-hood img + h3 { 616 margin-top: 1.25em; 609 617 } 610 618
Note: See TracChangeset
for help on using the changeset viewer.