Changeset 224757 in webkit


Ignore:
Timestamp:
Nov 13, 2017 9:40:31 AM (6 years ago)
Author:
Jon Davis
Message:

Add a new landing page design and site-wide design detail updates for webkit.org
​https://bugs.webkit.org/show_bug.cgi?id=179558

Reviewed by Alexey Proskuryakov.

  • wp-content/themes/webkit/404.php: Removed unnecessary prefixed CSS.
  • wp-content/themes/webkit/444.php: Removed unnecessary prefixed CSS.
  • wp-content/themes/webkit/css-status.php: Removed unnecessary prefixed CSS.
  • wp-content/themes/webkit/footer.php: Added new page wrapper container.
  • wp-content/themes/webkit/front-header.php: Redesigned landing hero.
  • wp-content/themes/webkit/functions.php: Added support for configurable non-breaking words.
  • wp-content/themes/webkit/header.php: Added viewport-fit, changed web font, changed logo title.
  • wp-content/themes/webkit/images/chevron.svg: Added.
  • wp-content/themes/webkit/images/circular.svg: Added.
  • wp-content/themes/webkit/images/compass.svg: Added.
  • wp-content/themes/webkit/images/download-white.svg: Added.
  • wp-content/themes/webkit/images/template.svg: Added.
  • wp-content/themes/webkit/loop.php: Updated "read more" link presentation.
  • wp-content/themes/webkit/nightly-start.php: Adjusted header background colors.
  • wp-content/themes/webkit/nightly-survey.php: Adjusted header background colors.
  • wp-content/themes/webkit/nightly.php: Adjusted header background colors.
  • wp-content/themes/webkit/page.php: Page clean up.
  • wp-content/themes/webkit/single.php: Updated "read more" link presentation.
  • wp-content/themes/webkit/status.php: Removed unnecessary prefixed CSS, improved page title.
  • wp-content/themes/webkit/style.css: Redesigned.

(html):
(body):
(strong):
(em):
(code):
(main):
(h1,):
(input[type=text]):
(input[type=submit]):
(header):
(.home header):
(@supports ( -webkit-backdrop-filter: blur(10px) )):
(.sub-menu-layer):
(.nextrouter .link,):
(.pagination):
(.pagination::after):
(.pagination .page-numbers):
(.pagination .dots,):
(.pagination .next-button):
(.nextrouter):
(.nextrouter:hover):
(.nextrouter.previous):
(.nextrouter.previous:hover):
(.nextrouter .bodycopy):
(.nextrouter a):
(.nextrouter a:hover):
(.nextrouter-copy):
(.nextrouter .label):
(.nextrouter .title):
(.nextrouter .link):
(.nextrouter a:hover .link):
(footer):
(.tiles):
(.tile):
(.third-tile):
(.two-thirds-tile):
(.tile .background-image):
(.tile .background-image.has-featured-image):
(.tile .featured-image):
(.tile:not(.has-post-thumbnail) .background-image,):
(.tile h1):
(.tile h2):
(.tile .summary,):
(pre):
(article):
(article::after):
(article h1):
(article h2):
(article h3):
(article h4):
(article h5):
(article h6):
(article h2 + h3,):
(article figcaption):
(article figcaption::before):
(.table-of-contents):
(article .table-of-contents label):
(.table-of-contents ul):
(.table-of-contents ul li):
(.table-of-contents ul li > ul):
(.site-logo):
(footer nav):
(header nav li):
(header nav a,):
(header .menu-item-has-children .label-toggle::after):
(header .menu-item):
(@media only screen and (max-width: 1180px)):
(article .byline):
(@media only screen and (max-width: 920px)):
(.main-menu.label-toggle):
(header .menu):
(header nav a):
(header .menu-main-menu-container > ul > li):
(header .sub-menu-layer):
(@media only screen and (max-width: 690px)):
(.third-tile,):
(@media only screen and (max-width: 600px)):
(.table-of-contents label:after):
(@media only screen and (max-width: 415px)):
(@media only screen and (max-height: 415px)):
(@supports(padding:max(0px))):
(header .menu .menu-item > .sub-menu):
(.sub-menu-layer .menu-item:first-child,):
(#template):
(#compass):
(.tile .featured-image,): Deleted.
(.site-logo .tagline): Deleted.
(.timeline): Deleted.
(.timeline:after): Deleted.
(.timeline *): Deleted.
(.timeline:before): Deleted.
(.timeline > li): Deleted.
(.timeline > li:before): Deleted.
(.timeline .content): Deleted.
(.timeline figure): Deleted.
(.timeline .time): Deleted.
(.timeline h2, .timeline h3): Deleted.
(.timeline .time::before): Deleted.
(.timeline img): Deleted.
(@media (min-width: 900px)): Deleted.
(.timeline > li.force-clear): Deleted.
(.timeline > li:nth-child(odd)): Deleted.
(.timeline > li:nth-child(even)): Deleted.
(.timeline > li:nth-child(2),): Deleted.
(.timeline li .time): Deleted.
(.timeline li:nth-child(odd) .time): Deleted.
(.timeline li:nth-child(even) .time): Deleted.
(.timeline li:nth-child(even) .time::before): Deleted.
(.timeline > li:nth-child(even):before): Deleted.
(@media (max-width: 900px)): Deleted.
(.timeline li .time::before): Deleted.
(.hero .logo,): Deleted.
(.home .hero): Deleted.
(.home.admin-bar .hero): Deleted.
(@media only screen and (max-width: 320px)): Deleted.

  • wp-content/themes/webkit/widgets/post.php: Updated "read more" link presentation.
Location:
trunk/Websites/webkit.org
Files:
5 added
17 edited

Legend:

Unmodified
Added
Removed

  • trunk/Websites/webkit.org/ChangeLog

    r224219 r224757  
     12017-11-13  Jon Davis  <jond@apple.com>
     2
     3        Add a new landing page design and site-wide design detail updates for webkit.org
     4        https://bugs.webkit.org/show_bug.cgi?id=179558
     5
     6        Reviewed by Alexey Proskuryakov.
     7
     8        * wp-content/themes/webkit/404.php: Removed unnecessary prefixed CSS.
     9        * wp-content/themes/webkit/444.php: Removed unnecessary prefixed CSS.
     10        * wp-content/themes/webkit/css-status.php: Removed unnecessary prefixed CSS.
     11        * wp-content/themes/webkit/footer.php: Added new page wrapper container.
     12        * wp-content/themes/webkit/front-header.php: Redesigned landing hero.
     13        * wp-content/themes/webkit/functions.php: Added support for configurable non-breaking words.
     14        * wp-content/themes/webkit/header.php: Added viewport-fit, changed web font, changed logo title.
     15        * wp-content/themes/webkit/images/chevron.svg: Added.
     16        * wp-content/themes/webkit/images/circular.svg: Added.
     17        * wp-content/themes/webkit/images/compass.svg: Added.
     18        * wp-content/themes/webkit/images/download-white.svg: Added.
     19        * wp-content/themes/webkit/images/template.svg: Added.
     20        * wp-content/themes/webkit/loop.php: Updated "read more" link presentation.
     21        * wp-content/themes/webkit/nightly-start.php: Adjusted header background colors.
     22        * wp-content/themes/webkit/nightly-survey.php: Adjusted header background colors.
     23        * wp-content/themes/webkit/nightly.php: Adjusted header background colors.
     24        * wp-content/themes/webkit/page.php: Page clean up.
     25        * wp-content/themes/webkit/single.php: Updated "read more" link presentation.
     26        * wp-content/themes/webkit/status.php: Removed unnecessary prefixed CSS, improved page title.
     27        * wp-content/themes/webkit/style.css: Redesigned.
     28        (html):
     29        (body):
     30        (strong):
     31        (em):
     32        (code):
     33        (main):
     34        (h1,):
     35        (input[type=text]):
     36        (input[type=submit]):
     37        (header):
     38        (.home header):
     39        (@supports ( -webkit-backdrop-filter: blur(10px) )):
     40        (.sub-menu-layer):
     41        (.nextrouter .link,):
     42        (.pagination):
     43        (.pagination::after):
     44        (.pagination .page-numbers):
     45        (.pagination .dots,):
     46        (.pagination .next-button):
     47        (.nextrouter):
     48        (.nextrouter:hover):
     49        (.nextrouter.previous):
     50        (.nextrouter.previous:hover):
     51        (.nextrouter .bodycopy):
     52        (.nextrouter a):
     53        (.nextrouter a:hover):
     54        (.nextrouter-copy):
     55        (.nextrouter .label):
     56        (.nextrouter .title):
     57        (.nextrouter .link):
     58        (.nextrouter a:hover .link):
     59        (footer):
     60        (.tiles):
     61        (.tile):
     62        (.third-tile):
     63        (.two-thirds-tile):
     64        (.tile .background-image):
     65        (.tile .background-image.has-featured-image):
     66        (.tile .featured-image):
     67        (.tile:not(.has-post-thumbnail) .background-image,):
     68        (.tile h1):
     69        (.tile h2):
     70        (.tile .summary,):
     71        (pre):
     72        (article):
     73        (article::after):
     74        (article h1):
     75        (article h2):
     76        (article h3):
     77        (article h4):
     78        (article h5):
     79        (article h6):
     80        (article h2 + h3,):
     81        (article figcaption):
     82        (article figcaption::before):
     83        (.table-of-contents):
     84        (article .table-of-contents label):
     85        (.table-of-contents ul):
     86        (.table-of-contents ul li):
     87        (.table-of-contents ul li > ul):
     88        (.site-logo):
     89        (footer nav):
     90        (header nav li):
     91        (header nav a,):
     92        (header .menu-item-has-children .label-toggle::after):
     93        (header .menu-item):
     94        (@media only screen and (max-width: 1180px)):
     95        (article .byline):
     96        (@media only screen and (max-width: 920px)):
     97        (.main-menu.label-toggle):
     98        (header .menu):
     99        (header nav a):
     100        (header .menu-main-menu-container >  ul > li):
     101        (header .sub-menu-layer):
     102        (@media only screen and (max-width: 690px)):
     103        (.third-tile,):
     104        (@media only screen and (max-width: 600px)):
     105        (.table-of-contents label:after):
     106        (@media only screen and (max-width: 415px)):
     107        (@media only screen and (max-height: 415px)):
     108        (@supports(padding:max(0px))):
     109        (header .menu .menu-item > .sub-menu):
     110        (.sub-menu-layer .menu-item:first-child,):
     111        (#template):
     112        (#compass):
     113        (.tile .featured-image,): Deleted.
     114        (.site-logo .tagline): Deleted.
     115        (.timeline): Deleted.
     116        (.timeline:after): Deleted.
     117        (.timeline *): Deleted.
     118        (.timeline:before): Deleted.
     119        (.timeline > li): Deleted.
     120        (.timeline > li:before): Deleted.
     121        (.timeline .content): Deleted.
     122        (.timeline figure): Deleted.
     123        (.timeline .time): Deleted.
     124        (.timeline h2, .timeline h3): Deleted.
     125        (.timeline .time::before): Deleted.
     126        (.timeline img): Deleted.
     127        (@media (min-width: 900px)): Deleted.
     128        (.timeline > li.force-clear): Deleted.
     129        (.timeline > li:nth-child(odd)): Deleted.
     130        (.timeline > li:nth-child(even)): Deleted.
     131        (.timeline > li:nth-child(2),): Deleted.
     132        (.timeline li .time): Deleted.
     133        (.timeline li:nth-child(odd) .time): Deleted.
     134        (.timeline li:nth-child(even) .time): Deleted.
     135        (.timeline li:nth-child(even) .time::before): Deleted.
     136        (.timeline > li:nth-child(even):before): Deleted.
     137        (@media (max-width: 900px)): Deleted.
     138        (.timeline li .time::before): Deleted.
     139        (.hero .logo,): Deleted.
     140        (.home .hero): Deleted.
     141        (.home.admin-bar .hero): Deleted.
     142        (@media only screen and (max-width: 320px)): Deleted.
     143        * wp-content/themes/webkit/widgets/post.php: Updated "read more" link presentation.
     144
    11452017-10-30  Tim Horton  <timothy_horton@apple.com>
    2146

  • trunk/Websites/webkit.org/wp-content/themes/webkit/404.php

    r192832 r224757  
    4141input[type=submit] {
    4242    background-color: #1d9bd9;
    43     background: -webkit-linear-gradient(#3baee7, #0088cc);
    4443    background: linear-gradient(#3baee7, #0088cc);
    4544    border-radius: 4px;

  • trunk/Websites/webkit.org/wp-content/themes/webkit/444.php

    r192832 r224757  
    4040input[type=submit] {
    4141    background-color: #1d9bd9;
    42     background: -webkit-linear-gradient(#3baee7, #0088cc);
    4342    background: linear-gradient(#3baee7, #0088cc);
    4443    border-radius: 4px;

  • trunk/Websites/webkit.org/wp-content/themes/webkit/css-status.php

    r215154 r224757  
    134134    overflow-y: hidden;
    135135    cursor: pointer;
    136     -webkit-transition: background-color 0.3s ease-in;
    137     -moz-transition: background-color 0.3s ease-in;
    138136    transition: background-color 0.3s ease-in;
    139137}
    … …  
    219217    right: 0;
    220218    top: 0.5rem;
    221     -webkit-transition: transform 0.3s ease-out;
    222     -moz-transition: transform 0.3s ease-out;
    223219    transition: transform 0.3s ease-out;
    224220}

  • trunk/Websites/webkit.org/wp-content/themes/webkit/footer.php

    r192832 r224757  
    1     </main><!-- #content -->
     1    </div><!--.page-width-->
     2</main><!-- #content -->
    23       
    3     <footer class="page-width">
    4     <hr>
    5     <nav id="footer-nav" aria-label="Footer menu"><?php wp_nav_menu( array('theme_location'  => 'footer-nav') ); ?></nav>
    6     </footer>
     4<footer>
     5    <div class="page-width">
     6        <nav id="footer-nav" aria-label="Footer menu"><?php wp_nav_menu( array('theme_location'  => 'footer-nav') ); ?></nav>
     7    </div>
     8</footer>
    79
    810<?php if ( is_front_page() ): ?></div> <!-- .page-layer --><?php endif; ?>

  • trunk/Websites/webkit.org/wp-content/themes/webkit/front-header.php

    r192832 r224757  
    11    <style>
    2     body.home {
    3         background-color: white;
     2    header {
     3        position: absolute;
    44    }
    5 
     5   
    66    .home .site-logo {
    7         opacity: 0;
    8         transition: opacity 0.5s ease-out;
     7        color: #ffffff;
    98    }
    10 
    11     .home .page-layer {
    12         background-color: #f7f7f7;
    13         border-top: 1px solid #e7e7e7;
     9   
     10    .content-scroll #menu-main-menu > li > a:not(:hover),
     11    .content-scroll .site-logo {
     12        color: #333333;
     13    }
     14   
     15    .page-layer {
     16        overflow: hidden;
     17    }
     18   
     19    .hero {
    1420        position: relative;
     21        overflow: hidden;
     22        max-width: 100vw;
     23        box-sizing: border-box;
     24        padding: 0 0 6rem;
     25        color: #ffffff;
     26        background-color: #00253D;
    1527        z-index: 1;
     28        top: -30rem;
     29        padding-top: 45rem;
     30        margin-bottom: -30rem;
    1631    }
    17 
    18     .admin-bar header {
    19         top: 32px;
     32   
     33    .hero h1 {
     34        font-size: 4.8rem;
     35        font-weight: 500;
     36        letter-spacing: 0.006rem;
     37        text-align: center;
     38        line-height: 1.04167;
    2039    }
    21 
    22     .home header {
    23         -webkit-backdrop-filter: none;
    24         border: none;
    25         background: none;
    26         position: fixed;
    27 
     40   
     41    .hero p {
     42        font-size: 2.2rem;
     43        line-height: 1.45455;
     44        letter-spacing: 0.016em;
     45        font-weight: 300;
     46        text-align: center;
     47        margin-top: 1.65rem;
    2848    }
    2949
    3050    .hero a {
    31         text-decoration: none;
    32         z-index: 5;
     51        color: #0af;
    3352    }
    3453
    35     .hero {
    36         height: 800px;
    37         margin-bottom: 3rem;
    38         overflow: hidden;
    39         background: none;
    40         box-sizing: border-box;
    41 
    42         position: fixed;
    43         top: 0;
    44         left: 0;
    45         width: 100vw;
    46 
    47         background-image: radial-gradient(65vw at 50% 40%, white 50%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, rgb(255, 255, 255) 10%, rgb(232, 232, 232) 32%);
    48         background-position: 0% 0%;
     54    #fade {
     55        position: absolute;
     56        width: 100%;
     57        height: 1261px;
     58        background-image: radial-gradient(ellipse closest-corner at center center,hsl(198, 100%, 20%) 0%,hsla(204, 100%, 20%,0) 100%);
     59        z-index: 4;
     60        transform: translateY(-45rem);
     61    }
     62   
     63    #template {
     64        opacity: 0.1;
     65        position: absolute;
     66        top: 0px;
     67        width: 100%;
     68        height: 195.5rem;
     69        background-repeat: no-repeat;
     70        background-position: 50% 49.5%;
     71        background-size: 101.5%;
     72        z-index: 3;
     73        transform: translateY(-40rem);    }
     74   
     75    #compass {
     76        position: absolute;
     77        top: 0px;
     78        width: 100%;
     79        height: 1950px;
     80        background-repeat: no-repeat;
     81        background-position: 50% 50%;
     82        background-size: 98%;
     83        opacity: 0.3;
     84        -webkit-animation: bgspin 360s ease-out;
     85        animation: bgspin 360s ease-out;
     86        z-index: 2;
     87        will-change: transform;
    4988    }
    5089
    51     .admin-bar .hero.spacing {
    52         margin-top: -32px;
    53     }
    54 
    55     .hero.spacing {
    56         position: relative;
    57         height: auto;
    58         visibility: hidden;
    59     }
    60 
    61     .hero .logo {
    62         text-align: left;
    63         margin: 3rem auto 0;
    64         padding-left: 12rem;
    65         padding-bottom: 3px;
    66         box-sizing: border-box;
    67 
    68         line-height: 10rem;
    69         font-size: 6rem;
    70         font-weight: 200;
    71         color: #444;
    72 
    73         background-repeat: no-repeat;
    74         background-size: 10rem;
    75         background-position: left 1rem;
    76     }
    77 
    78     .admin-bar .hero .logo {
    79         margin-top: 5rem;
    80     }
    81 
    82     .hero .tagline {
    83         text-align: left;
    84         display: block;
    85         font-size: 3rem;
    86         font-weight: 200;
    87         line-height: 1.125;
    88         margin-top: -2.5rem;
    89         margin-bottom: 2rem;
    90         color: #555;
    91     }
    92 
    93     .intro .column {
    94         position: relative;
    95         font-size: 2.4rem;
    96         line-height: 1.35417;
    97         font-weight: 200;
    98         box-sizing: border-box;
    99         width: 42.24561404%;
    100         display: inline-block;
    101         vertical-align: text-top;
    102     }
    103 
    104     .intro .column h2 {
    105         font-size: 3.2rem;
    106         line-height: 1.125;
    107         font-weight: 200;
    108         letter-spacing: 0em;
    109         display: block;
    110         margin-top: 3rem;
    111         margin-bottom: 1.8rem;
    112     }
    113 
    114     .intro .column:first-child {
    115         margin-right: 14.63157894%;
    116     }
    117 
    118 
    119     .home .floating {
    120         border-bottom: 1px solid #e7e7e7;
    121         background: rgba(255,255,255,0.9);
    122     }
    123 
    124     @supports ( -webkit-backdrop-filter: blur(10px) ) {
    125         .home .floating {
    126             backdrop-filter: blur(10px);
    127             -webkit-backdrop-filter: blur(10px);
    128             background: rgba(255,255,255,0.8);
     90    @keyframes bgspin {
     91        from {
     92            transform: translateY(-400px) rotate(0);
     93            -webkit-transform: translateY(-400px) rotate(0deg);
     94        }
     95        to {
     96            transform: translateY(-400px) rotate(360);
     97            -webkit-transform: translateY(-400px) rotate(360deg);
    12998        }
    13099    }
    131100
    132     .home .site-logo.fade {
    133         opacity: 1;
    134     }
     101    @-webkit-keyframes bgspin {
     102        from {
     103            transform: translateY(-400px) rotate(0);
     104            -webkit-transform: translateY(-400px) rotate(0deg);
     105        }
    135106
    136     .particles {
    137         position: relative;
    138         top: 0;
    139         left: 0;
    140         width: 100%;
    141         height: 100%;
    142         -webkit-transform-origin: center center;
    143           -ms-transform-origin: center center;
    144               transform-origin: center center;
    145     }
    146 
    147     .particle {
    148         position: absolute;
    149         background: white;
    150         opacity: .7;
    151         border-radius: 50%;
    152         z-index: -2;
     107        to {
     108            transform: translateY(-400px) rotate(360);
     109            -webkit-transform: translateY(-400px) rotate(360deg);
     110        }
    153111    }
    154112   
    155     @media only screen and (max-width: 782px) {
    156        
    157         .admin-bar header {
    158             top: 46px;
     113    .hero .content {
     114        position: relative;
     115        max-width: 800px;
     116        padding: 0 3rem;
     117        margin: 0 auto;
     118        z-index: 10;
     119    }
     120   
     121    main {
     122        position: relative;
     123        z-index: 10;
     124    }
     125   
     126    @media only screen and (max-width: 920px) {
     127        .hero {
     128            padding-top: 40rem;
     129            padding-bottom: 3rem;
    159130        }
     131    }
    160132   
    161         .admin-bar .hero.spacing {
    162             margin-top: -46px;
    163         }
    164    
    165         .hero {
    166             position: absolute;
     133    @media only screen and (max-width: 690px) {
     134        .hero h1 {
     135            font-size: 4rem;
     136            line-height: 1.1;
    167137        }
    168138       
    169         .intro .column {
    170             width: 100%;
     139        .hero p {
     140            font-size: 2rem;
     141            line-height: 1.4;
     142            letter-spacing: -0.016rem;
    171143        }
    172        
     144
     145        #compass {
     146            background-size: 150%;
     147        }
    173148    }
    174149   
    175     @media only screen and (max-width: 600px) {
    176    
    177         .hero .logo,
    178         .hero .tagline,
    179         .hero .particle {
    180             display: none;
    181         }
    182    
    183         .hero {
    184            padding-top: 8rem;
    185         }
    186        
    187         .admin-bar .hero {
    188             padding-top: 13rem;
    189         }
    190        
    191 /*        .admin-bar .hero.spacing {
    192             margin-top: calc(13rem - 46px);
    193         }*/
    194    
    195         .home header {
    196             padding-top: 1rem;
    197             position: absolute;
    198         }
    199 
    200         .home .site-logo {
    201             opacity: 1;
    202             margin-top: 0;
    203         }
    204 
    205         .home header {
    206             border-bottom: 1px solid #e7e7e7;
    207             background: rgba(255,255,255,0.9);
    208         }
    209 
    210         @supports ( -webkit-backdrop-filter: blur(10px) ) {
    211             .home header {
    212                 backdrop-filter: blur(10px);
    213                 -webkit-backdrop-filter: blur(10px);
    214                 background: rgba(255,255,255,0.8);
    215             }
    216         }
    217    
    218         .home .pagination .next-button {
    219             width: 100%;
    220         }
    221    
    222     }
    223    
    224     @media only screen and (max-height: 415px) {
    225         .hero .logo,
    226         .hero .tagline,
    227         .hero .particle {
    228             display: none;
    229         }
    230    
    231         .home .site-logo {
    232             opacity: 1;
    233             margin-top: 0;
    234         }
    235         .home .hero {
    236             margin: 7rem 0 0;
    237         }
    238    
    239         .home.admin-bar .hero {
    240             margin-top: 12rem;
    241         }
    242    
    243         header,
    244         .home header {
    245             padding-top: 1rem;
    246             position: absolute;
    247         }
    248         .home header {
    249             border-bottom: 1px solid #e7e7e7;
    250             background: rgba(255,255,255,0.9);
    251         }
    252 
    253         @supports ( -webkit-backdrop-filter: blur(10px) ) {
    254             .home header {
    255                 backdrop-filter: blur(10px);
    256                 -webkit-backdrop-filter: blur(10px);
    257                 background: rgba(255,255,255,0.8);
    258             }
     150    @media only screen and (max-width: 320px) {
     151        .hero h1 {
     152            font-size: 2.5rem;
     153            letter-spacing: -0.016rem;
    259154        }
    260155    }
    261        
    262     <?php
    263        
    264         function rand_outside_circle() {
    265             srand();
    266             $circle_x = 50;
    267             $circle_y = 40;
    268             $circle_r = 32;
    269             $x = rand(0, 100);
    270             $y = rand(0, 100);
    271            
    272             // Avoid starting or ending inside the white fill gradient
    273             if ( pow(($x - $circle_x), 2) + pow(($y - $circle_y), 2) <= pow($circle_r, 2) )
    274                 return rand_outside_circle();
    275            
    276             return array($x . "vw", $y . "vh");
    277         }
    278        
    279         for ($i = 1; $i < 101; $i++):
    280             $size = rand(5, 80) . "px";
    281             list($Xorigin, $Yorigin) = rand_outside_circle();
    282             list($Xend, $Yend) = rand_outside_circle();
    283             $from_opacity = rand(3, 8) / 10;
    284             $to_opacity = rand(3, 8) / 10;
    285         ?>
    286         .particle:nth-child(<?php echo $i; ?>){
    287             height: <?php echo $size; ?>; width: <?php echo $size; ?>;
    288             transform: translate(<?php echo $Xorigin; ?>,  <?php echo $Yorigin; ?>);
    289             opacity: <?php echo $from_opacity; ?>;
    290             animation: move-<?php echo $i; ?> 60s ease-out;
    291             animation-direction: alternate;
    292             animation-fill-mode: forwards;
    293             -webkit-animation-fill-mode: forwards;
    294         }
     156    </style>
    295157
    296         @keyframes move-<?php echo $i; ?> {
    297             100% {
    298                 transform: translate(<?php echo $Xend; ?>, <?php echo $Yend; ?>);
    299                 opacity: <?php echo $to_opacity; ?>;
    300             }
    301         }
    302     <?php endfor; ?>
    303     </style>
    304     <div id="hero" class="hero">
    305         <?php for ($i = 0; $i < 101; $i++)
    306             echo "<div class=\"particle\"></div>"; ?>
    307         <div class="intro page-width">
    308         <a href="/"><h1 class="logo">WebKit <span class="tagline">Open Source Web Browser Engine</span></h1></a>
    309        
    310         <?php if ( is_front_page() && have_posts()): the_post(); ?><div class="intro-copy"><?php
    311             $content = get_the_content();
    312             $columns = explode('<br />', $content);
    313             foreach ( $columns as $column )
    314                 echo "<div class=\"column\">$column</div>";
    315         ?></div><?php endif; ?>
     158    <?php if ( is_front_page() && have_posts()): the_post(); ?>
     159    <div class="hero">
     160        <div id="template"></div>
     161        <div id="compass"></div>
     162        <div id="fade"></div>
     163        <div class="content">
     164            <?php the_content(); ?>
    316165        </div>
    317166    </div>
    318     <div class="hero spacing">
    319         <div class="intro page-width">
    320         <a href="/"><h1 class="logo">WebKit <span class="tagline">Open Source Web Browser Engine</span></h1></a>
    321        
    322         <?php if ( ! empty($columns) ): ?><div class="intro-copy"><?php
    323             foreach ( $columns as $column )
    324                 echo "<div class=\"column\">$column</div>";
    325         ?></div><?php endif; ?>
    326         </div>
    327     </div>
    328     <script>
    329     var latestScrollY = NaN, scrollV = 0, updating = false, layer = false,
    330         header = document.getElementById("header"),
    331         hero = document.getElementById("hero"),
    332         scrollBoundary = 353;
    333        
    334     header.animating = false;
    335     logo.animating = false;
    336    
    337     function onScroll() {
    338         if (isNaN(latestScrollY))
    339             latestScrollY = window.scrollY;
    340        
    341         if (!updating)
    342                 requestAnimationFrame(update);
    343         updating = true;
    344     }
    345 
    346     function update() {
    347         updating = false;
    348        
    349         if (document.body.offsetWidth <= 508) return;
    350        
    351         if (latestScrollY != window.scrollY) {
    352             scrollV = window.scrollY - latestScrollY;
    353             latestScrollY = window.scrollY;
    354            
    355             if (!layer) {
    356                 layer = document.getElementsByClassName("page-layer").item(0);
    357             }
    358            
    359             scrollBoundary = layer.offsetTop - header.offsetHeight;
    360         }
    361                
    362         if (latestScrollY >= scrollBoundary) {
    363             addAnimationClass(header, "floating");
    364             if (!logo.classList.contains('fade'))
    365                 setAnimateSpeed(logo, scrollV);
    366             addAnimationClass(logo, "fade");
    367         } else if (latestScrollY < scrollBoundary) {
    368             removeAnimationClass(header, "floating");
    369             if (logo.classList.contains('fade'))
    370                 setAnimateSpeed(logo, 10);
    371             removeAnimationClass(logo, "fade");
    372         }
    373        
    374     }
    375 
    376     function setAnimateSpeed(element, velocity) {
    377         if (element.animating) return;
    378         var duration = Math.abs(3 / (velocity * 1.618));
    379         element.style["-webkit-transition-duration"] = duration + "s";
    380     }
    381    
    382     function addAnimationClass(element, classname) {
    383         if (element.classList.contains(classname)) return;
    384         if (element.animating) return;
    385        
    386         element.classList.add(classname.trim());
    387         animatingElement(element);
    388     }
    389    
    390     function animatingElement(element) {
    391         element.animating = true;
    392         element.addEventListener("transitionend", function () {
    393             element.animating = false;
    394         });           
    395     }
    396    
    397     function removeAnimationClass(element, classname) {
    398         if (!element.classList.contains(classname)) return;
    399         if (element.animating) return;
    400 
    401         element.classList.remove(classname.trim());
    402         animatingElement(element);
    403     }
    404 
    405     window.addEventListener("scroll", onScroll, false);
    406     window.addEventListener("resize", onScroll, false);
    407     </script>
     167    <?php endif; ?>
    408168       
    409169<div class="page-layer">

  • trunk/Websites/webkit.org/wp-content/themes/webkit/functions.php

    r217885 r224757  
    102102add_filter('the_title', function( $title ) {
    103103    if ( is_admin() ) return $title;
     104    if ( is_feed() ) return $title;
     105   
    104106    $title = str_replace(": ", ": <br>", $title);
     107
     108    $nowrap_strings = array();
     109    if ($nowrap_setting = get_option("webkit_org_nowrap_strings")) {
     110        $nowrap_strings = explode("\n", $nowrap_setting);
     111    } else add_option("webkit_org_nowrap_strings", "\n");
     112
     113    foreach ($nowrap_strings as $token) {
     114        $nobreak = str_replace(" ", " ", trim($token));
     115        $title = str_replace(trim($token), $nobreak, $title);
     116    }
     117   
    105118    return $title;
    106119});

  • trunk/Websites/webkit.org/wp-content/themes/webkit/header.php

    r193642 r224757  
    55    <meta name="robots" content="noodp">
    66
    7     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     7    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover">
    88   
    99    <title><?php if ( is_front_page() ) echo "WebKit";
    … …  
    1212    <meta name="application-name" content="WebKit">
    1313
    14     <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" media="all">
    15     <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Myriad+Set+Pro&v=1" type="text/css" />
     14    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>?20171013" media="all">
     15    <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Pro,v1" type="text/css">
    1616
    1717    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>">
    … …  
    2929    <header aria-label="WebKit.org Header" id="header">
    3030        <div class="page-width">
    31         <a href="/"><div id="logo" class="site-logo">WebKit <span class="tagline">Open Source Web Browser Engine</span></div></a>
     31        <a href="/"><div id="logo" class="site-logo">WebKit</div></a>
    3232        <nav id="site-nav" aria-label="Site Menu">
    3333<?php wp_nav_menu( array(
    … …  
    4343    include('front-header.php');
    4444?>
    45 <main id="content" class="page-width">
     45<main id="content">
     46    <div class="page-width">

  • trunk/Websites/webkit.org/wp-content/themes/webkit/loop.php

    r216855 r224757  
    2121            <h1><?php the_title(); ?></h1>
    2222            <div class="summary"><?php the_excerpt(); ?></div>
    23             <p><a href="<?php the_permalink(); ?>">Read more &rsaquo;</a></p>
     23            <p><a href="<?php the_permalink(); ?>" class="readmore">Read more</a></p>
    2424        </div>       
    2525    </div>

  • trunk/Websites/webkit.org/wp-content/themes/webkit/nightly-start.php

    r211739 r224757  
    2727<style>
    2828body {
    29     background: #333333;
     29    background-color: #333333;
     30}
     31
     32main {
     33    background: none;
    3034}
    3135
    3236header {
    33     border-bottom-color: transparent;
     37    background-color: rgba(0,0,0,0.1);
    3438}
    3539
    … …  
    8589    min-height: 100px;
    8690    overflow: hidden;
    87     width: -webkit-calc(33.33% - 10px);
    88     width: -moz-calc(33.33% - 10px);
    8991    width: calc(33.33% - 10px);
    9092    border-radius: 0.3rem;
    … …  
    221223@media only screen and (max-width: 690px) {
    222224    #nightly li {
    223         width: -webkit-calc(100% - 1px);
    224         width: -moz-calc(100% - 1px);
    225225        width: calc(100% - 1px);
    226226    }

  • trunk/Websites/webkit.org/wp-content/themes/webkit/nightly-survey.php

    r211739 r224757  
    1313            background: #333333;
    1414        }
    15 
     15       
     16        main {
     17            background: none;
     18        }
     19       
    1620        header {
    17             border-bottom-color: transparent;
     21            background-color: rgba(0,0,0,0.1);
    1822        }
    19 
     23       
    2024        #nightly {
    2125            margin: 6rem auto;

  • trunk/Websites/webkit.org/wp-content/themes/webkit/nightly.php

    r198825 r224757  
    2222body {
    2323    background: #333333;
     24}
     25
     26main {
     27    background: none;
     28}
     29
     30header {
     31    background-color: rgba(0,0,0,0.1);
    2432}
    2533

  • trunk/Websites/webkit.org/wp-content/themes/webkit/page.php

    r192832 r224757  
    2222        include('444.php');
    2323        endif; ?>
    24 
    25 
     24   
    2625<?php get_footer(); ?>

  • trunk/Websites/webkit.org/wp-content/themes/webkit/single.php

    r198836 r224757  
    2020        </article>
    2121       
    22         <nav class="navigation pagination" aria-label="Next/Last posts">
    23             <?php previous_post_link('%link', 'Older Post <span>%title</span>'); ?>
    24             <?php next_post_link('%link', 'Newer Post <span>%title</span>'); ?>
    25         </nav>
     22        <aside class="nextrouter" aria-label="Next/Previous posts">
     23            <div class="bodycopy">
     24            <?php //previous_post_link('%link', 'Older Post <span>%title</span>'); ?>
     25            <?php next_post_link('%link', '<div class="nextrouter-copy"><span class="label">Next</span><span class="title">%title</span><span class="link">Learn more</span></div>'); ?>
     26            </div>
     27        </aside>
     28        <aside class="nextrouter previous" aria-label="Next/Previous posts">
     29            <div class="bodycopy">
     30            <?php previous_post_link('%link', '<div class="nextrouter-copy"><span class="label">Previously</span><span class="title">%title</span><span class="link">Learn more</span></div>'); ?>
     31            </div>
     32        </aside>
    2633
    2734    <?php //comments_template(); // No comments ?>

  • trunk/Websites/webkit.org/wp-content/themes/webkit/status.php

    r220280 r224757  
    3838.page h1 {
    3939    font-size: 4.2rem;
    40     font-weight: 200;
     40    font-weight: 500;
    4141    line-height: 6rem;
    42     color: black;
    4342    margin: 3rem auto;
    4443    width: 100%;
    4544    text-align: center;
     45    color: #333333;
    4646}
    4747
    4848.page h1 a {
    49     color: #444444;
    50 }   
     49    color: inherit;
     50}
    5151
    5252.feature-filters {
    … …  
    219219    padding: 0.5rem;
    220220    line-height: 1.618;
    221     -webkit-transition: background-color 0.3s ease-out;
    222221    transition: background-color 0.3s ease-out;
    223222}
    … …  
    274273    top: 0.5rem;
    275274    margin-left: 1rem;
    276     -webkit-transition: transform 0.3s ease-out;
    277     -moz-transition: transform 0.3s ease-out;
    278275    transition: transform 0.3s ease-out;
    279276}

  • trunk/Websites/webkit.org/wp-content/themes/webkit/style.css

    r220360 r224757  
    3333}
    3434html {
    35     font-family: "Myriad Set Pro","Helvetica Neue",sans-serif;
     35    font-family: "SF Hello", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    3636    font-size: 62.5%;
    3737    font-synthesis: none;
    3838}
    3939body {
    40     background-color: #f7f7f7;
    41     font-size: 1.6rem;
     40    background-color: #00253D;
     41    font-size: 1.7rem;
    4242    font-weight: 400;
    43     line-height: 1.4;
     43    line-height: 1.52947;
     44    letter-spacing: -0.021rem;
     45    color: #333333;
    4446}
    4547ol, ul {
    … …  
    9092}
    9193strong {
    92     font-weight: 700;
     94    font-weight: 600;
    9395}
    9496em {
    95     font-weight: 200;
     97    font-style: italic;
     98    font-weight: 300;
    9699}
    97100sup {
    … …  
    101104}
    102105code {
    103     font-family: Menlo, monospace;
     106    font-family: "SF Mono", "Menlo", monospace;
    104107    background: #f2f2f2;
    105108    border-radius: 2px;
    … …  
    108111    font-size: 80%;
    109112    color: #444;
     113}
     114
     115main {
     116    background-color: #f7f7f7;
    110117}
    111118
    … …  
    130137    color: #08c;
    131138    text-decoration: none;
     139}
     140
     141h1,
     142h2,
     143h3,
     144h4,
     145h5,
     146h6 {
     147    text-rendering: optimizeLegibility;
    132148}
    133149
    … …  
    157173    background: white;
    158174    background-clip: padding-box;
    159     font-family: "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
     175    font-family: "SF Hello", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    160176    line-height: 1.33333;
    161177    font-weight: 400;
    … …  
    166182input[type=submit] {
    167183    background-color: #1d9bd9;
    168     background: -webkit-linear-gradient(#3baee7, #0088cc);
    169184    background: linear-gradient(#3baee7, #0088cc);
    170185    border-radius: 4px;
    … …  
    221236/** Header **/
    222237header {
    223     background: #f9f9f9;
    224     border-bottom: 1px solid #e7e7e7;
    225238    overflow: visible;
    226239    width: 100vw;
    227240    max-width: 100%;
    228     padding-top: 2rem;
     241    padding-top: 1.5rem;
    229242    margin: 0;
    230243    position: relative;
    … …  
    232245}
    233246
     247.home header {
     248    background-color: transparent;
     249    transition: background 500ms ease-out, border 250ms ease-out;
     250}
     251
    234252@supports ( -webkit-backdrop-filter: blur(10px) ) {
    235     header {
     253   
     254    .home header {
     255        background-color: transparent;
     256        backdrop-filter: blur(0px);
     257        -webkit-backdrop-filter: blur(0px);
     258    }
     259   
     260    .sub-menu-layer {
    236261        backdrop-filter: blur(10px);
    237262        -webkit-backdrop-filter: blur(10px);
    238         background: rgba(255,255,255,0.8);
    239     }
     263    }
     264}
     265
     266.nextrouter .link,
     267a.readmore {
     268    background: url('images/chevron.svg') right no-repeat;
     269    background-position-y: 0.6rem;
     270    background-size: 0.5rem;
     271    padding-right: 1rem;
    240272}
    241273
    … …  
    248280.pagination {
    249281    text-align: center;
    250     margin: 3rem auto;
    251     font-weight: bold;
     282    margin: 3rem auto 0;
     283}
     284
     285.pagination::after {
     286    content: ' ';
     287    display: table;
     288    padding-bottom: 3rem;
    252289}
    253290
    254291.pagination .page-numbers {
    255292    display: inline-block;
    256     padding: 0.5rem 1rem 0.3rem;
     293    padding: 0.3rem 1rem 0.5rem;
    257294    background: white;
    258     border-radius: 3px;
     295    border-radius: 4px;
     296    box-shadow: inset rgba(0, 0, 0, 0.07) 0 0 0 1px;
     297    height: 2rem;
     298    font-size: 1.7rem;
     299    line-height: 1.29412;
     300    font-weight: 400;
     301    letter-spacing: -0.021em;
    259302}
    260303
    … …  
    268311.pagination .page-numbers.current {
    269312    background: none;
     313    box-shadow: none;
    270314}
    271315
    … …  
    293337.pagination .next-button {
    294338    display: inline-block;
    295     line-height: 3rem;
    296     box-sizing: border-box;
    297     width: -webkit-calc(33.33% - 10px);
    298     width: -moz-calc(33.33% - 10px);
    299     width: calc(33.33% - 10px);
     339    min-width: calc(33.33% - 3rem);
     340    padding: 0.5rem 1rem 0.7rem;
     341}
     342
     343.nextrouter {
     344    position: relative;
     345    background-color: #fafafa;
     346    padding: 0;
     347    width: 100vw;
     348    left: 50%;
     349    transform: translateX(-50%);
     350}
     351
     352.nextrouter:hover {
     353    background-color: #ffffff;
     354    transition: background-color 300ms ease-out;
     355}
     356
     357.nextrouter.previous {
     358    text-align: right;
     359    background-color: #f4f4f4;
     360}
     361
     362.nextrouter.previous:hover {
     363    background-color: #ffffff;
     364}
     365
     366.nextrouter .bodycopy {
     367    max-width: 1140px;
     368    margin: 0 auto;
     369}
     370
     371.nextrouter a {
     372    display: block;
     373    cursor: pointer;
     374    color: #444444;
     375    width: 66%;
     376    margin: 0 auto;
     377}
     378
     379.nextrouter a:hover {
     380    text-decoration: none;
     381}
     382
     383.nextrouter-copy {
     384    padding: 10rem 0 9.5rem 0;
     385    font-size: 3.2rem;
     386    line-height: 1.09375;
     387    font-weight: 500;
     388    letter-spacing: 0.011rem;
     389}
     390
     391.nextrouter .label {
     392    font-size: 2.2rem;
     393    line-height: 1;
     394    font-weight: 300;
     395    letter-spacing: 0.016rem;
     396    color: #666666;
     397    display: block;
     398    margin-bottom: 1.8rem;
     399}
     400
     401.nextrouter .title {
     402    display: block;
     403}
     404
     405.nextrouter .link {
     406    clear: left;
     407    display: inline-block;
     408    font-size: 1.7rem;
     409    font-weight: 400;
     410    line-height: 1.52947;
     411    letter-spacing: -0.021rem;
     412    color: #08c;
     413    background-position-y: 1rem;
     414}
     415
     416.nextrouter a:hover .link {
     417    text-decoration: underline;
    300418}
    301419
    … …  
    306424    clear: both;
    307425    width: 100%;
    308     padding-bottom: 3rem;
    309     box-sizing: border-box;
     426    padding-bottom: 1.65rem;
     427    box-sizing: border-box;   
    310428}
    311429
    … …  
    325443    box-sizing: border-box;
    326444    width: 100%;
    327     margin-top: 3rem;
    328445}
    329446
    330447.tile {
    331     background: white;
    332     display: inline-block;
     448    background: #ffffff;
     449    display: block;
    333450    margin: 0 0 15px;
    334451    position: relative;
    335452    vertical-align: top;
    336453    box-sizing: border-box;
    337     min-height: 450px;
    338454    overflow: hidden;
    339455    box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 1px;
    … …  
    359475
    360476.third-tile {
    361     width: -webkit-calc(33.33% - 10px);
    362     width: -moz-calc(33.33% - 10px);
    363477    width: calc(33.33% - 10px);
    364478}
    365479
    366480.two-thirds-tile {
    367     width: -webkit-calc(66.66% - 5px);
    368     width: -moz-calc(66.66% - 5px);
    369481    width: calc(66.66% - 5px);
    370482}
    … …  
    383495    background-size: cover;
    384496    background-position: 50% 1%;
    385     background-color: #8E8E93;
     497    background-color: #636a74;
    386498    background-repeat: no-repeat;
    387499    background-image: url('images/icons.svg');
    … …  
    389501
    390502.tile .background-image.has-featured-image {
    391     -webkit-transition: -webkit-filter 10s ease-in;
    392503    transition: filter 1s ease-in;
    393504    -webkit-filter: saturate(0);
    … …  
    492603
    493604    opacity: 0;
    494     -webkit-transition: opacity 0.4s ease-in;
    495     -moz-transition: opacity 0.4s ease-in;
    496605    transition: opacity 0.4s ease-in;
    497606}
    498607
    499 .tile .featured-image,
    500608.tile:not(.has-post-thumbnail) .background-image,
    501 .tile .loaded .featured-image {
     609.tile .background-vignette {
    502610    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0 1px;
    503611}
    … …  
    583691
    584692.tile h1 {
    585     font-size: 3rem;
    586     line-height: 4rem;
     693    font-size: 2.4rem;
     694    line-height: 1.20849;
     695    font-weight: 500;
     696    letter-spacing: 0.015rem;
     697    text-align: left;
     698    white-space: no-wrap;
     699}
     700
     701.tile h2 {
     702    font-size: 2.4rem;
     703    line-height: 1.20849;
    587704    font-weight: 200;
    588     text-align: left;
    589 }
    590 .tile h2 {
    591     font-size: 3rem;
    592     line-height: 4rem;
    593     font-weight: 400;
    594705    text-align: inherit;
     706}
     707
     708.tile .summary,
     709.tile p {
     710    margin-top: 1.65rem;
    595711}
    596712
    … …  
    773889    background: #f2f2f2;
    774890    border: 1px solid #E6E6E6;
    775     border-radius: 3px;
     891    border-radius: 2px;
    776892
    777893    box-sizing: border-box;
    … …  
    839955
    840956/** Post Typography **/
     957
     958main {
     959    width: 100vw;
     960    max-width: 100%;
     961    overflow-x: hidden;
     962    box-sizing: border-box;
     963    padding: 3rem 0 0;
     964}
     965
     966article {
     967    padding-bottom: 3rem;
     968}
     969
     970article::after {
     971    clear: both;
     972    content: ' ';
     973    display: table;
     974}
     975
    841976article h1 {
    842     font-size: 5.2rem;
    843     line-height: 1.0625;
    844     font-weight: 200;
    845     letter-spacing: -0.02em;
     977    font-size: 5.6rem;
     978    line-height: 1.10746;
     979    font-weight: 500;
     980    letter-spacing: 0.004rem;
    846981    text-align: center;
    847982    color: #037DFD;
    848     margin: 5rem auto 3rem;
     983    margin: 0 auto 3rem;
    849984}
    850985
    … …  
    855990
    856991article h2 {
    857     font-size: 4.2rem;
    858     line-height: 1.08654;
    859     font-weight: 200;
    860     letter-spacing: -0.014em;
     992    font-size: 3.2rem;
     993    line-height: 1.09375;
     994    font-weight: 500;
     995    letter-spacing: -0.011rem;
    861996    margin: 4rem 0 1rem;
    862997}
    863998
    864999article h3 {
    865     font-size: 3.2rem;
    866     line-height: 1.14286;
    867     font-weight: 200;
    868     letter-spacing: -0.01em;
     1000    font-size: 2.4rem;
     1001    line-height: 1.09375;
     1002    font-weight: 500;
     1003    letter-spacing: -0.011rem;
    8691004}
    8701005
    8711006article h4 {
    8721007    font-size: 2.2rem;
    873     line-height: 1.125;
    874     font-weight: 600;
     1008    line-height: 1.09375;
     1009    font-weight: 500;
    8751010}
    8761011
    8771012article h5 {
    8781013    font-size: 2rem;
    879     line-height: 1.5;
    880     font-weight: 600;
     1014    line-height: 1.09375;
     1015    font-weight: 500;
    8811016}
    8821017
    8831018article h6 {
    884     font-size: 2rem;
    885     line-height: 1.5;
    886     font-weight: 600;
    887     font-size: 2rem;
     1019    font-size: 1.7rem;
     1020    line-height: 1.09375;
     1021    font-weight: 500;
    8881022}
    8891023
    … …  
    8991033article h4 + h5,
    9001034article h5 + h6 {
    901     margin-top: 3rem;
     1035    margin-top: 0;
    9021036}
    9031037
    … …  
    9231057    white-space: nowrap;
    9241058
    925 }
    926 
    927 article .bodycopy {
    928     font-size: 2rem;
    929     line-height: 3rem;
    9301059}
    9311060
    … …  
    12221351    text-align: left;
    12231352    margin-top: 1.5rem;
     1353    line-height: 1.5;
    12241354    max-width: 970px;
    12251355    padding-left: 1.5rem;
    12261356    box-sizing: border-box;
    1227     font-size: 1.5rem;
    1228     font-style: italic;
    1229     color: #8E8E93;
     1357    font-size: 1.3rem;
     1358    font-weight: 400;
     1359    color: #666666;
    12301360    position: relative;
    12311361}
    … …  
    12331363article figcaption::before {
    12341364    left: 1.5rem;
    1235     width: 10%;
     1365    width: 15%;
    12361366    height: 100%;
    1237     bottom: 1rem;
     1367    bottom: 2.5rem;
    12381368    border-top: 1px solid #cccccc;
    12391369    content: '';
    … …  
    13401470    float: right;
    13411471    box-sizing: border-box;
    1342     padding: 3rem;
    1343     margin: 0 0 3rem 3rem;
    1344 
    1345     width: 252px;
    1346     background: #ffffff;
     1472    padding: 2.5rem 0 0 0;
     1473    margin: 0 0 2.5rem 3rem;
     1474
     1475    max-width: 33%;
    13471476    z-index: 5;
    1348 
     1477    font-size: 1.4rem;
     1478    line-height: 1.20849;
     1479    border-top: 1px solid #d6d6d6;
     1480
     1481}
     1482
     1483article .table-of-contents label {
     1484    font-size: 1.7rem;
     1485    font-weight: 500;
     1486    margin-bottom: 1.65rem;
    13491487}
    13501488
    … …  
    13521490    margin: 0;
    13531491    list-style: none;
    1354     font-size: 1.6rem;
    1355     line-height: 2rem;
    1356     padding-left: 2rem;
    1357     padding-right: 0;
     1492    margin-top: 1.65rem;
    13581493}
    13591494
    … …  
    13631498
    13641499.table-of-contents ul li {
    1365     margin-bottom: 1rem;
     1500    margin-bottom: 1.65rem;
    13661501}
    13671502
    … …  
    13711506
    13721507.table-of-contents ul li > ul {
    1373     margin-top: 1rem;
     1508    margin-top: 1.65rem;
    13741509}
    13751510
    … …  
    13831518.site-logo {
    13841519    float: left;
    1385     font-size: 4.2rem;
    1386     line-height: 4.2rem;
    1387     font-weight: 200;
     1520    font-size: 3rem;
     1521    line-height: 1.04167;
     1522    letter-spacing: 0.015rem;
     1523    font-weight: 500;
     1524    text-rendering: optimizeLegibility;
    13881525    display: inline-block;
    13891526    background: url('images/webkit.svg') no-repeat;
    1390     padding-left: 7rem;
    1391     color: #333;
    1392 }
    1393 
    1394 .site-logo .tagline {
    1395     display: block;
    1396     font-size: 1.8rem;
    1397     line-height: 2rem;
    1398     letter-spacing: -0.05rem;
    1399     color: #666;
     1527    padding: 1rem 0 1rem 5.5rem;
     1528    color: #ffffff;
    14001529}
    14011530
    … …  
    14381567}
    14391568
     1569footer {
     1570   
     1571}
     1572
    14401573footer nav {
    1441     padding: 3rem 0;
     1574    padding: 1.65rem 0 0;
    14421575}
    14431576
    14441577header nav li {
    14451578    display: inline-block;
    1446     padding: 2.5rem 0 1.5rem 3rem;
     1579    padding: 1.5rem 0 1.5rem 3rem;
    14471580}
    14481581
    … …  
    14581591
    14591592header nav a,
     1593.sub-menu a,
    14601594footer nav a {
    14611595    position: relative;
    14621596    display: inline-block;
    14631597    text-decoration: none;
    1464     color: #333;
     1598    font-size: 1.4rem;
     1599    line-height: 1.5455;
     1600    letter-spacing: -0.015rem;
     1601    letter-spacing: 0;
    14651602    cursor: pointer;
     1603    font-weight: 500;
     1604    color: #333333;
     1605}
     1606
     1607header nav a,
     1608footer nav a {
     1609    color: #ffffff;
    14661610}
    14671611
    … …  
    14811625    margin-top: -0.1rem;
    14821626    content: '';
    1483 
    1484     -webkit-transition: transform 0.3s ease-out;
    1485     -moz-transition: transform 0.3s ease-out;
     1627   
     1628    -webkit-filter: invert(100%);
     1629    filter: invert(100%);
     1630    perspective: 600;       
     1631   
    14861632    transition: transform 0.3s ease-out;
    14871633}
    14881634
    14891635header .menu-item { /* add bottom dimension to main menu items */
    1490     padding-bottom: 3rem;
     1636    padding-bottom: 2.5rem;
    14911637}
    14921638
    … …  
    15011647
    15021648    position: absolute;
    1503     top: 8rem;
     1649    top: 7rem;
    15041650    transform: translateY(-1rem);
    15051651
    … …  
    15091655    border-radius: 5px;
    15101656
    1511     -webkit-transition: opacity 0.6s, transform 0.6s;
    1512     -moz-transition: opacity 0.6s, transform 0.6s;
    1513     transition: opacity 0.6s, transform 0.6s;
     1657    transition: opacity 0.6s;
    15141658    opacity: 0;
    1515 
    15161659}
    15171660
    … …  
    15611704}
    15621705
    1563 /** Timeline blog content **/
    1564 
    1565 .timeline {
    1566     position: relative;
    1567     padding: 0 5rem;
    1568     margin: 0;
    1569 }
    1570 
    1571 .timeline:after {
    1572     content: "";
    1573     display: table;
    1574     clear: both;
    1575 }
    1576 
    1577 .timeline * {
    1578     box-sizing: border-box;
    1579 }
    1580 
    1581 .timeline:before {
    1582     content: "";
    1583     position: absolute;
    1584     height: 100%;
    1585     width: 0.5rem;
    1586     background: #e9eeef;
    1587     left: -moz-calc(50% - 0.25rem);
    1588     left: -o-calc(50% - 0.25rem);
    1589     left: -webkit-calc(50% - 0.25rem);
    1590     left: calc(50% - 0.25rem);
    1591 }
    1592 
    1593 .timeline > li {
    1594     list-style-type: none;
    1595     text-align: right;
    1596 }
    1597 
    1598 .timeline > li:before {
    1599     position: absolute;
    1600 
    1601     display: block;
    1602     content: "";
    1603     width: 3rem;
    1604     height: 3rem;
    1605 
    1606     right: -moz-calc(50% - 1.5rem);
    1607     right: -o-calc(50% - 1.5rem);
    1608     right: -webkit-calc(50% - 1.5rem);
    1609     right: calc(50% - 1.5rem);
    1610 
    1611     border-radius: 3em;
    1612 
    1613     background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 51, color-stop(50%, white), color-stop(51%, #e9eeef));
    1614     background-image: -webkit-radial-gradient(white 50%, #e9eeef 51%);
    1615     background-image: -moz-radial-gradient(white 50%, #e9eeef 51%);
    1616     background-image: -o-radial-gradient(white 50%, #e9eeef 51%);
    1617     background-image: radial-gradient(white 50%, #e9eeef 51%);
    1618 }
    1619 
    1620 .timeline .content {
    1621     position: relative;
    1622     color: #323232;
    1623     background: white;
    1624     border: 1px solid #e9eeef;
    1625     border-radius: 3px;
    1626     margin-bottom: 6rem;
    1627     padding: 0 3rem;
    1628     text-align: center;
    1629 }
    1630 
    1631 .timeline figure {
    1632     text-align: center;
    1633     margin-bottom: 1rem;
    1634 }
    1635 
    1636 .timeline .time {
    1637     color: white;
    1638     background: #08c;
    1639     display: inline-block;
    1640     position: relative;
    1641     font-weight: bold;
    1642     top: -0.5rem;
    1643     padding-top: 0.5rem;
    1644     padding-bottom: 0.5rem;
    1645     padding-left: 10rem;
    1646     padding-right: 0.5rem;
    1647     left: -moz-calc(-50% - 4.25rem);
    1648     left: -o-calc(-50% - 4.25rem);
    1649     left: -webkit-calc(-50% - 4.25rem);
    1650     left: calc(-50% - 4.25rem);
    1651     border-right: 1px solid #08c;
    1652     border-left: 1px solid #08c;
    1653     border-radius: 2px;
    1654     white-space: nowrap;
    1655     min-width: 300px;
    1656 }
    1657 
    1658 .timeline h2, .timeline h3 {
    1659     text-align: center;
    1660 }
    1661 
    1662 .timeline .time::before {
    1663     content: "";
    1664     width: 0;
    1665     height: 0;
    1666     border-width: 1em;
    1667     border-color: transparent;
    1668     border-style: solid;
    1669     border-left-color: #08c;
    1670     position: absolute;
    1671     right: -2em;
    1672     top: 0;
    1673 }
    1674 
    1675 .timeline img {
    1676     max-width: 90%;
    1677 }
    1678 
    1679 @media (min-width: 900px) {
    1680     .timeline > li {
    1681         width: 45%;
    1682     }
    1683 
    1684     .timeline > li.force-clear {
    1685         clear: both !important;
    1686     }
    1687 
    1688     .timeline > li:nth-child(odd) {
    1689         float: left;
    1690         clear: left;
    1691         text-align: right;
    1692     }
    1693 
    1694     .timeline > li:nth-child(even) {
    1695         float: right;
    1696         clear: right;
    1697         text-align: left;
    1698     }
    1699 
    1700     .timeline > li:nth-child(2),
    1701     .timeline > li.force-clear + li {
    1702         margin-top: 10rem;
    1703     }
    1704 
    1705     .timeline li .time {
    1706         left: auto;
    1707     }
    1708 
    1709     .timeline li:nth-child(odd) .time {
    1710         padding-right: 0.5rem;
    1711         padding-left: 10rem;
    1712     }
    1713 
    1714     .timeline li:nth-child(even) .time {
    1715         padding-left: 0.5rem;
    1716         padding-right: 10rem;
    1717     }
    1718 
    1719     .timeline li:nth-child(even) .time::before {
    1720         border-left-color: transparent;
    1721         border-right-color: #08c;
    1722         right: auto;
    1723         left: -2em;
    1724     }
    1725 
    1726     .timeline > li:nth-child(even):before {
    1727         right: auto;
    1728         left: -moz-calc(50% - 1.5rem);
    1729         left: -o-calc(50% - 1.5rem);
    1730         left: -webkit-calc(50% - 1.5rem);
    1731         left: calc(50% - 1.5rem);
    1732     }
    1733 }
    1734 
    1735 @media (max-width: 900px) {
    1736     .timeline {
    1737         padding: 0 3rem;
    1738     }
    1739 
    1740     .timeline:before {
    1741         left: -moz-calc(15% - 0.25rem);
    1742         left: -o-calc(15% - 0.25rem);
    1743         left: -webkit-calc(15% - 0.25rem);
    1744         left: calc(15% - 0.25rem);
    1745     }
    1746 
    1747     .timeline > li {
    1748         text-align: left;
    1749     }
    1750 
    1751     .timeline > li:before {
    1752         right: -moz-calc(85% - 1.5rem);
    1753         right: -o-calc(85% - 1.5rem);
    1754         right: -webkit-calc(85% - 1.5rem);
    1755         right: calc(85% - 1.5rem);
    1756     }
    1757 
    1758     .timeline .content {
    1759         padding: 0 2rem;
    1760     }
    1761 
    1762     .timeline .time {
    1763         left: -moz-calc(15% + 2.25rem);
    1764         left: -o-calc(15% + 2.25rem);
    1765         left: -webkit-calc(15% + 2.25rem);
    1766         left: calc(15% + 2.25rem);
    1767 
    1768         text-align: left;
    1769 
    1770         padding-left: 0.5rem;
    1771         padding-right: 0.5rem;
    1772 
    1773         min-width: 200px;
    1774     }
    1775 
    1776     .timeline li .time::before {
    1777         border-left-color: transparent;
    1778         border-right-color: #08c;
    1779 
    1780         right: auto;
    1781         left: -2em;
    1782     }
    1783 }
    1784 
    17851706/** Screen Breakpoints **/
    17861707
    … …  
    17981719        text-align: center;
    17991720        margin-bottom: 3rem;
     1721        padding-right: 0;
    18001722    }
    18011723
    … …  
    18371759        cursor: pointer;
    18381760
    1839         -webkit-transition: transform 0.3s ease-out;
    1840         -moz-transition: transform 0.3s ease-out;
    18411761        transition: transform 0.3s ease-out;
     1762       
     1763        -webkit-filter: invert(100%);
     1764        filter: invert(100%);
     1765        perspective: 600;
     1766        transform: translateZ(10rem);
    18421767    }
    18431768
    … …  
    18601785        overflow: hidden;
    18611786        box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
    1862         backdrop-filter: blur(10px);
     1787       
     1788        backdrop-filter: blur(20px);
    18631789        -webkit-backdrop-filter: blur(10px);
    1864         background: rgba(255,255,255,0.8);
     1790        background-color: rgba(255,255,255,0.8);
     1791    }
     1792   
     1793    header nav a {
     1794        color: #333333;
    18651795    }
    18661796
    … …  
    18681798        display: block;
    18691799        opacity: 1;
     1800    }
     1801
     1802    header .menu-item-has-children .label-toggle::after {
     1803        -webkit-filter: invert(0%);
     1804        filter: invert(0%);
    18701805    }
    18711806
    … …  
    18751810        padding: 0 3rem 3rem;
    18761811        box-sizing: border-box;
    1877         -webkit-transition: opacity 0.6s;
    1878         -moz-transition: opacity 0.6s;
    18791812        transition: opacity 0.6s;
    18801813    }
    … …  
    18991832        opacity: 0;
    19001833        transform: translateY(0);
    1901         -webkit-transition: opacity 0.6s;
    1902         -moz-transition: opacity 0.6s;
    19031834        transition: opacity 0.6s;
    19041835    }
    … …  
    19381869
    19391870@media only screen and (max-width: 690px) {
     1871    article h1 {
     1872        font-size: 3.4rem;
     1873    }
     1874   
    19401875    .featured-tile {
    19411876        padding: 0;
    … …  
    19571892
    19581893    .tile {
    1959         min-height: 320px;
     1894        min-height: 375px;
    19601895    }
    19611896
    19621897    .third-tile,
    19631898    .two-thirds-tile {
    1964         width: -webkit-calc(100% - 1px);
    1965         width: -moz-calc(100% - 1px);
    19661899        width: calc(100% - 1px);
    19671900    }
    … …  
    19991932    }
    20001933
     1934    .nextrouter-copy {
     1935        font-size: 2.2rem;
     1936    }
     1937   
    20011938    article .scrollable {
    20021939        overflow: auto;
    … …  
    20301967    .site-logo {
    20311968        font-size: 4rem;
    2032         padding-left: 6rem;
    2033     }
    2034 
    2035     .site-logo .tagline {
    2036         font-size: 1.6rem;
    2037         line-height: 1;
     1969        padding-left: 6.4rem;
    20381970    }
    20391971
    … …  
    20712003        right: 3rem;
    20722004        top: 3.5rem;
    2073         -webkit-transition: transform 0.3s ease-out;
    2074         -moz-transition: transform 0.3s ease-out;
    20752005        transition: transform 0.3s ease-out;
    20762006        perspective: 600;
    … …  
    21062036}
    21072037
    2108 @media only screen and (max-width: 415px) {
     2038@media only screen and (max-width: 415px) {   
    21092039    .table-of-contents {
    21102040        /* Go one-column */
    … …  
    21162046        margin: 0 0 3rem 0;
    21172047    }
     2048   
     2049    .nextrouter-copy {
     2050        font-size: 1.7rem;
     2051        letter-spacing: -0.016rem;
     2052    }
    21182053}
    21192054
    21202055@media only screen and (max-height: 415px) {
    2121     .hero .logo,
    2122     .hero .tagline,
    2123     .hero .particle {
    2124         display: none;
    2125     }
    2126 
     2056   
    21272057    .home .site-logo {
    21282058        opacity: 1;
    … …  
    21302060    }
    21312061
    2132     .home .hero {
    2133         margin: 7rem 0 0;
    2134     }
    2135 
    2136     .home.admin-bar .hero {
    2137         margin-top: 12rem;
    2138     }
    2139 
    21402062    header,
    21412063    .home header {
    21422064        padding-top: 1rem;
    21432065    }
    2144 
    2145     .home header {
    2146         border-bottom: 1px solid #e7e7e7;
    2147         background: rgba(255,255,255,0.9);
    2148     }
    2149 
    2150     @supports ( -webkit-backdrop-filter: blur(10px) ) {
    2151         .home header {
    2152             backdrop-filter: blur(10px);
    2153             -webkit-backdrop-filter: blur(10px);
    2154             background: rgba(255,255,255,0.8);
     2066   
     2067    @supports(padding:max(0px)) {
     2068        header,
     2069        header .menu,
     2070        .home header,
     2071        .home .hero .content,
     2072        .feature-filters,
     2073        #content,
     2074        #nightly,
     2075        footer {
     2076            box-sizing: border-box;
     2077            padding-left: constant(safe-area-inset-left);
     2078            padding-right: constant(safe-area-inset-right);
    21552079        }
     2080       
     2081        header .menu .menu-item > .sub-menu {
     2082            border: none;
     2083            background: none;
     2084        }
     2085       
     2086        .sub-menu-layer {
     2087            padding: 0 3rem;
     2088        }
     2089       
     2090        .sub-menu-layer .menu-item:first-child,
     2091        .sub-menu-layer .menu-item {
     2092            padding: 0 0 1.5rem 1.5rem;
     2093        }
     2094       
    21562095    }
    21572096
    21582097    .tile {
    2159         min-height: 200px;
    2160         max-height: 400px;
    21612098        overflow: hidden;
    21622099    }
    … …  
    21982135        right: 3rem;
    21992136        top: 3.5rem;
    2200         -webkit-transition: transform 0.3s ease-out;
    2201         -moz-transition: transform 0.3s ease-out;
    22022137        transition: transform 0.3s ease-out;
    22032138        perspective: 600;
    … …  
    22202155}
    22212156
    2222 @media only screen and (max-width: 320px) {
    2223     .home .hero {
    2224         position: absolute;
    2225     }
    2226 }
     2157#template {
     2158    background-image: url('images/template.svg');
     2159}
     2160
     2161#compass {
     2162    background-image: url('images/compass.svg');
     2163}

  • trunk/Websites/webkit.org/wp-content/themes/webkit/widgets/post.php

    r217614 r224757  
    7474                    <h1><?php echo $title; ?></h1>
    7575                    <div class="summary"><?php echo $summary; ?></div>
    76                     <p><a href="<?php the_permalink(); ?>"><?php echo $link; ?>&nbsp;&rsaquo;</a></p>
     76                    <p><a href="<?php the_permalink(); ?>" class="readmore"><?php echo $link; ?></a></p>
    7777                </div>       
    7878            </div>
Note: See TracChangeset for help on using the changeset viewer.