Add a new landing page design and site-wide design detail updates for webkit.org
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 13 Nov 2017 17:40:31 +0000 (17:40 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 13 Nov 2017 17:40:31 +0000 (17:40 +0000)
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.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@224757 268f45cc-cd09-0410-ab3c-d52691b4dbfc

22 files changed:
Websites/webkit.org/ChangeLog
Websites/webkit.org/wp-content/themes/webkit/404.php
Websites/webkit.org/wp-content/themes/webkit/444.php
Websites/webkit.org/wp-content/themes/webkit/css-status.php
Websites/webkit.org/wp-content/themes/webkit/footer.php
Websites/webkit.org/wp-content/themes/webkit/front-header.php
Websites/webkit.org/wp-content/themes/webkit/functions.php
Websites/webkit.org/wp-content/themes/webkit/header.php
Websites/webkit.org/wp-content/themes/webkit/images/chevron.svg [new file with mode: 0644]
Websites/webkit.org/wp-content/themes/webkit/images/circular.svg [new file with mode: 0644]
Websites/webkit.org/wp-content/themes/webkit/images/compass.svg [new file with mode: 0644]
Websites/webkit.org/wp-content/themes/webkit/images/download-white.svg [new file with mode: 0644]
Websites/webkit.org/wp-content/themes/webkit/images/template.svg [new file with mode: 0644]
Websites/webkit.org/wp-content/themes/webkit/loop.php
Websites/webkit.org/wp-content/themes/webkit/nightly-start.php
Websites/webkit.org/wp-content/themes/webkit/nightly-survey.php
Websites/webkit.org/wp-content/themes/webkit/nightly.php
Websites/webkit.org/wp-content/themes/webkit/page.php
Websites/webkit.org/wp-content/themes/webkit/single.php
Websites/webkit.org/wp-content/themes/webkit/status.php
Websites/webkit.org/wp-content/themes/webkit/style.css
Websites/webkit.org/wp-content/themes/webkit/widgets/post.php

index ea8497e..55dae6e 100644 (file)
@@ -1,3 +1,147 @@
+2017-11-13  Jon Davis  <jond@apple.com>
+
+        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.
+
 2017-10-30  Tim Horton  <timothy_horton@apple.com>
 
         Update safe area inset demo pages to use env()
index ffc7cd8..a24aa57 100644 (file)
@@ -40,7 +40,6 @@ input {
 
 input[type=submit] {
     background-color: #1d9bd9;
-    background: -webkit-linear-gradient(#3baee7, #0088cc);
     background: linear-gradient(#3baee7, #0088cc);
     border-radius: 4px;
     color: white;
index 788b916..89a29ca 100644 (file)
@@ -39,7 +39,6 @@ input {
 
 input[type=submit] {
     background-color: #1d9bd9;
-    background: -webkit-linear-gradient(#3baee7, #0088cc);
     background: linear-gradient(#3baee7, #0088cc);
     border-radius: 4px;
     color: white;
index 9b74b8a..f9d0c93 100644 (file)
@@ -133,8 +133,6 @@ ul.properties {
     min-height: 3rem;
     overflow-y: hidden;
     cursor: pointer;
-    -webkit-transition: background-color 0.3s ease-in;
-    -moz-transition: background-color 0.3s ease-in;
     transition: background-color 0.3s ease-in;
 }
 
@@ -218,8 +216,6 @@ ul.values {
     position: absolute;
     right: 0;
     top: 0.5rem;
-    -webkit-transition: transform 0.3s ease-out;
-    -moz-transition: transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
 }
 
index 820aa87..138df3f 100644 (file)
@@ -1,9 +1,11 @@
-    </main><!-- #content -->
+    </div><!--.page-width-->
+</main><!-- #content -->
         
-    <footer class="page-width">
-    <hr>
-    <nav id="footer-nav" aria-label="Footer menu"><?php wp_nav_menu( array('theme_location'  => 'footer-nav') ); ?></nav>
-    </footer>
+<footer>
+    <div class="page-width">
+        <nav id="footer-nav" aria-label="Footer menu"><?php wp_nav_menu( array('theme_location'  => 'footer-nav') ); ?></nav>
+    </div>
+</footer>
 
 <?php if ( is_front_page() ): ?></div> <!-- .page-layer --><?php endif; ?>
 
index 08e3dc2..7ad0526 100644 (file)
     <style>
-    body.home {
-        background-color: white;
+    header {
+        position: absolute;
     }
-
+    
     .home .site-logo {
-        opacity: 0;
-        transition: opacity 0.5s ease-out;
-    }
-
-    .home .page-layer {
-        background-color: #f7f7f7;
-        border-top: 1px solid #e7e7e7;
-        position: relative;
-        z-index: 1;
-    }
-
-    .admin-bar header {
-        top: 32px;
-    }
-
-    .home header {
-        -webkit-backdrop-filter: none;
-        border: none;
-        background: none;
-        position: fixed;
-
+        color: #ffffff;
     }
-
-    .hero a {
-        text-decoration: none;
-        z-index: 5;
+    
+    .content-scroll #menu-main-menu > li > a:not(:hover),
+    .content-scroll .site-logo {
+        color: #333333;
     }
-
-    .hero {
-        height: 800px;
-        margin-bottom: 3rem;
+    
+    .page-layer {
         overflow: hidden;
-        background: none;
-        box-sizing: border-box;
-
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-
-        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%);
-        background-position: 0% 0%;
-    }
-
-    .admin-bar .hero.spacing {
-        margin-top: -32px;
     }
-
-    .hero.spacing {
+    
+    .hero {
         position: relative;
-        height: auto;
-        visibility: hidden;
-    }
-
-    .hero .logo {
-        text-align: left;
-        margin: 3rem auto 0;
-        padding-left: 12rem;
-        padding-bottom: 3px;
+        overflow: hidden;
+        max-width: 100vw;
         box-sizing: border-box;
-
-        line-height: 10rem;
-        font-size: 6rem;
-        font-weight: 200;
-        color: #444;
-
-        background-repeat: no-repeat;
-        background-size: 10rem;
-        background-position: left 1rem;
+        padding: 0 0 6rem;
+        color: #ffffff;
+        background-color: #00253D;
+        z-index: 1;
+        top: -30rem;
+        padding-top: 45rem;
+        margin-bottom: -30rem;
     }
-
-    .admin-bar .hero .logo {
-        margin-top: 5rem;
+    
+    .hero h1 {
+        font-size: 4.8rem;
+        font-weight: 500;
+        letter-spacing: 0.006rem;
+        text-align: center;
+        line-height: 1.04167;
     }
-
-    .hero .tagline {
-        text-align: left;
-        display: block;
-        font-size: 3rem;
-        font-weight: 200;
-        line-height: 1.125;
-        margin-top: -2.5rem;
-        margin-bottom: 2rem;
-        color: #555;
+    
+    .hero p {
+        font-size: 2.2rem;
+        line-height: 1.45455;
+        letter-spacing: 0.016em;
+        font-weight: 300;
+        text-align: center;
+        margin-top: 1.65rem;
     }
 
-    .intro .column {
-        position: relative;
-        font-size: 2.4rem;
-        line-height: 1.35417;
-        font-weight: 200;
-        box-sizing: border-box;
-        width: 42.24561404%;
-        display: inline-block;
-        vertical-align: text-top;
+    .hero a {
+        color: #0af;
     }
 
-    .intro .column h2 {
-        font-size: 3.2rem;
-        line-height: 1.125;
-        font-weight: 200;
-        letter-spacing: 0em;
-        display: block;
-        margin-top: 3rem;
-        margin-bottom: 1.8rem;
+    #fade {
+        position: absolute;
+        width: 100%;
+        height: 1261px;
+        background-image: radial-gradient(ellipse closest-corner at center center,hsl(198, 100%, 20%) 0%,hsla(204, 100%, 20%,0) 100%);
+        z-index: 4;
+        transform: translateY(-45rem);
     }
-
-    .intro .column:first-child {
-        margin-right: 14.63157894%;
+    
+    #template {
+        opacity: 0.1;
+        position: absolute;
+        top: 0px;
+        width: 100%;
+        height: 195.5rem;
+        background-repeat: no-repeat;
+        background-position: 50% 49.5%;
+        background-size: 101.5%;
+        z-index: 3;
+        transform: translateY(-40rem);    }
+    
+    #compass {
+        position: absolute;
+        top: 0px;
+        width: 100%;
+        height: 1950px;
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
+        background-size: 98%;
+        opacity: 0.3;
+        -webkit-animation: bgspin 360s ease-out;
+        animation: bgspin 360s ease-out;
+        z-index: 2;
+        will-change: transform;
     }
 
-
-    .home .floating {
-        border-bottom: 1px solid #e7e7e7;
-        background: rgba(255,255,255,0.9);
+    @keyframes bgspin {
+        from {
+            transform: translateY(-400px) rotate(0);
+            -webkit-transform: translateY(-400px) rotate(0deg);
+        }
+        to {
+            transform: translateY(-400px) rotate(360);
+            -webkit-transform: translateY(-400px) rotate(360deg);
+        }
     }
 
-    @supports ( -webkit-backdrop-filter: blur(10px) ) {
-        .home .floating {
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            background: rgba(255,255,255,0.8);
+    @-webkit-keyframes bgspin {
+        from {
+            transform: translateY(-400px) rotate(0);
+            -webkit-transform: translateY(-400px) rotate(0deg);
         }
-    }
 
-    .home .site-logo.fade {
-        opacity: 1;
+        to {
+            transform: translateY(-400px) rotate(360);
+            -webkit-transform: translateY(-400px) rotate(360deg);
+        }
     }
-
-    .particles {
+    
+    .hero .content {
         position: relative;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        -webkit-transform-origin: center center;
-          -ms-transform-origin: center center;
-              transform-origin: center center;
-    }
-
-    .particle {
-        position: absolute;
-        background: white;
-        opacity: .7;
-        border-radius: 50%;
-        z-index: -2;
+        max-width: 800px;
+        padding: 0 3rem;
+        margin: 0 auto;
+        z-index: 10;
     }
     
-    @media only screen and (max-width: 782px) {
-        
-        .admin-bar header {
-            top: 46px;
-        }
-    
-        .admin-bar .hero.spacing {
-            margin-top: -46px;
-        }
+    main {
+        position: relative;
+        z-index: 10;
+    }
     
+    @media only screen and (max-width: 920px) {
         .hero {
-            position: absolute;
+            padding-top: 40rem;
+            padding-bottom: 3rem;
         }
-        
-        .intro .column {
-            width: 100%;
-        }
-        
     }
     
-    @media only screen and (max-width: 600px) {
-    
-        .hero .logo,
-        .hero .tagline,
-        .hero .particle {
-            display: none;
-        }
-    
-        .hero {
-           padding-top: 8rem;
-        }
-        
-        .admin-bar .hero {
-            padding-top: 13rem;
+    @media only screen and (max-width: 690px) {
+        .hero h1 {
+            font-size: 4rem;
+            line-height: 1.1;
         }
         
-/*        .admin-bar .hero.spacing {
-            margin-top: calc(13rem - 46px);
-        }*/
-    
-        .home header {
-            padding-top: 1rem;
-            position: absolute;
-        }
-
-        .home .site-logo {
-            opacity: 1;
-            margin-top: 0;
+        .hero p {
+            font-size: 2rem;
+            line-height: 1.4;
+            letter-spacing: -0.016rem;
         }
 
-        .home header {
-            border-bottom: 1px solid #e7e7e7;
-            background: rgba(255,255,255,0.9);
+        #compass {
+            background-size: 150%;
         }
-
-        @supports ( -webkit-backdrop-filter: blur(10px) ) {
-            .home header {
-                backdrop-filter: blur(10px);
-                -webkit-backdrop-filter: blur(10px);
-                background: rgba(255,255,255,0.8);
-            }
-        }
-    
-        .home .pagination .next-button {
-            width: 100%;
-        }
-    
     }
     
-    @media only screen and (max-height: 415px) {
-        .hero .logo,
-        .hero .tagline,
-        .hero .particle {
-            display: none;
-        }
-    
-        .home .site-logo {
-            opacity: 1;
-            margin-top: 0;
-        }
-        .home .hero {
-            margin: 7rem 0 0;
-        }
-    
-        .home.admin-bar .hero {
-            margin-top: 12rem;
-        }
-    
-        header,
-        .home header {
-            padding-top: 1rem;
-            position: absolute;
-        }
-        .home header {
-            border-bottom: 1px solid #e7e7e7;
-            background: rgba(255,255,255,0.9);
-        }
-
-        @supports ( -webkit-backdrop-filter: blur(10px) ) {
-            .home header {
-                backdrop-filter: blur(10px);
-                -webkit-backdrop-filter: blur(10px);
-                background: rgba(255,255,255,0.8);
-            }
+    @media only screen and (max-width: 320px) {
+        .hero h1 {
+            font-size: 2.5rem;
+            letter-spacing: -0.016rem;
         }
     }
-        
-    <?php 
-        
-        function rand_outside_circle() {
-            srand();
-            $circle_x = 50;
-            $circle_y = 40;
-            $circle_r = 32;
-            $x = rand(0, 100); 
-            $y = rand(0, 100);
-            
-            // Avoid starting or ending inside the white fill gradient
-            if ( pow(($x - $circle_x), 2) + pow(($y - $circle_y), 2) <= pow($circle_r, 2) )
-                return rand_outside_circle();
-            
-            return array($x . "vw", $y . "vh");
-        }
-        
-        for ($i = 1; $i < 101; $i++): 
-            $size = rand(5, 80) . "px";
-            list($Xorigin, $Yorigin) = rand_outside_circle();
-            list($Xend, $Yend) = rand_outside_circle();
-            $from_opacity = rand(3, 8) / 10;
-            $to_opacity = rand(3, 8) / 10;
-        ?>
-        .particle:nth-child(<?php echo $i; ?>){
-            height: <?php echo $size; ?>; width: <?php echo $size; ?>;
-            transform: translate(<?php echo $Xorigin; ?>,  <?php echo $Yorigin; ?>);
-            opacity: <?php echo $from_opacity; ?>;
-            animation: move-<?php echo $i; ?> 60s ease-out;
-            animation-direction: alternate;
-            animation-fill-mode: forwards;
-            -webkit-animation-fill-mode: forwards;
-        }
-
-        @keyframes move-<?php echo $i; ?> {
-            100% {
-                transform: translate(<?php echo $Xend; ?>, <?php echo $Yend; ?>);
-                opacity: <?php echo $to_opacity; ?>;
-            }
-        }
-    <?php endfor; ?>
     </style>
-    <div id="hero" class="hero">
-        <?php for ($i = 0; $i < 101; $i++)
-            echo "<div class=\"particle\"></div>"; ?>
-        <div class="intro page-width">
-        <a href="/"><h1 class="logo">WebKit <span class="tagline">Open Source Web Browser Engine</span></h1></a>
-       
-        <?php if ( is_front_page() && have_posts()): the_post(); ?><div class="intro-copy"><?php 
-            $content = get_the_content();
-            $columns = explode('<br />', $content);
-            foreach ( $columns as $column )
-                echo "<div class=\"column\">$column</div>";
-        ?></div><?php endif; ?>
-        </div>
-    </div>
-    <div class="hero spacing">
-        <div class="intro page-width">
-        <a href="/"><h1 class="logo">WebKit <span class="tagline">Open Source Web Browser Engine</span></h1></a>
-       
-        <?php if ( ! empty($columns) ): ?><div class="intro-copy"><?php 
-            foreach ( $columns as $column )
-                echo "<div class=\"column\">$column</div>";
-        ?></div><?php endif; ?>
+
+    <?php if ( is_front_page() && have_posts()): the_post(); ?>
+    <div class="hero">
+        <div id="template"></div>
+        <div id="compass"></div>
+        <div id="fade"></div>
+        <div class="content">
+            <?php the_content(); ?>
         </div>
     </div>
-    <script>
-    var latestScrollY = NaN, scrollV = 0, updating = false, layer = false,
-        header = document.getElementById("header"),
-        hero = document.getElementById("hero"),
-        scrollBoundary = 353;
-        
-    header.animating = false;
-    logo.animating = false;
-    
-    function onScroll() {
-        if (isNaN(latestScrollY)) 
-            latestScrollY = window.scrollY;
-        
-       if (!updating)
-               requestAnimationFrame(update);
-       updating = true;
-    }
-
-    function update() {
-        updating = false;
-        
-        if (document.body.offsetWidth <= 508) return;
-        
-        if (latestScrollY != window.scrollY) {
-            scrollV = window.scrollY - latestScrollY;
-            latestScrollY = window.scrollY;
-            
-            if (!layer) {
-                layer = document.getElementsByClassName("page-layer").item(0);
-            }
-            
-            scrollBoundary = layer.offsetTop - header.offsetHeight;
-        }
-                
-        if (latestScrollY >= scrollBoundary) {
-            addAnimationClass(header, "floating");
-            if (!logo.classList.contains('fade'))
-                setAnimateSpeed(logo, scrollV);
-            addAnimationClass(logo, "fade");
-        } else if (latestScrollY < scrollBoundary) {
-            removeAnimationClass(header, "floating");
-            if (logo.classList.contains('fade'))
-                setAnimateSpeed(logo, 10);
-            removeAnimationClass(logo, "fade");
-        }
-        
-    }
-
-    function setAnimateSpeed(element, velocity) {
-        if (element.animating) return;
-        var duration = Math.abs(3 / (velocity * 1.618));
-        element.style["-webkit-transition-duration"] = duration + "s";
-    }
-    
-    function addAnimationClass(element, classname) {
-        if (element.classList.contains(classname)) return;
-        if (element.animating) return;
-        
-        element.classList.add(classname.trim());
-        animatingElement(element);
-    }
-    
-    function animatingElement(element) {
-        element.animating = true;
-        element.addEventListener("transitionend", function () {
-            element.animating = false;
-        });            
-    }
-    
-    function removeAnimationClass(element, classname) {
-        if (!element.classList.contains(classname)) return;
-        if (element.animating) return;
-
-        element.classList.remove(classname.trim());
-        animatingElement(element);
-    }
-
-    window.addEventListener("scroll", onScroll, false);
-    window.addEventListener("resize", onScroll, false);
-    </script>
+    <?php endif; ?>
         
 <div class="page-layer">
\ No newline at end of file
index a7b221e..8c7ea5c 100644 (file)
@@ -101,7 +101,20 @@ add_filter('query_vars', function( $query_vars ) {
 
 add_filter('the_title', function( $title ) {
     if ( is_admin() ) return $title;
+    if ( is_feed() ) return $title;
+    
     $title = str_replace(": ", ": <br>", $title);
+
+    $nowrap_strings = array();
+    if ($nowrap_setting = get_option("webkit_org_nowrap_strings")) {
+        $nowrap_strings = explode("\n", $nowrap_setting);
+    } else add_option("webkit_org_nowrap_strings", "\n");
+
+    foreach ($nowrap_strings as $token) {
+        $nobreak = str_replace(" ", " ", trim($token));
+        $title = str_replace(trim($token), $nobreak, $title);
+    }
+    
     return $title;
 });
 
index e8220a6..cf98c13 100644 (file)
@@ -4,15 +4,15 @@
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <meta name="robots" content="noodp">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover">
     
     <title><?php if ( is_front_page() ) echo "WebKit"; 
         else { wp_title(''); echo ' | WebKit'; } ?></title>
 
     <meta name="application-name" content="WebKit">
 
-    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" media="all">
-    <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Myriad+Set+Pro&v=1" type="text/css" />
+    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>?20171013" media="all">
+    <link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Pro,v1" type="text/css">
 
     <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>">
     <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>">
@@ -28,7 +28,7 @@
 
     <header aria-label="WebKit.org Header" id="header">
         <div class="page-width">
-        <a href="/"><div id="logo" class="site-logo">WebKit <span class="tagline">Open Source Web Browser Engine</span></div></a>
+        <a href="/"><div id="logo" class="site-logo">WebKit</div></a>
         <nav id="site-nav" aria-label="Site Menu">
 <?php wp_nav_menu( array(
 'walker'          => new Responsive_Toggle_Walker_Nav_Menu(),
@@ -42,4 +42,5 @@
 if ( is_front_page() )
     include('front-header.php');
 ?>
-<main id="content" class="page-width">
\ No newline at end of file
+<main id="content">
+    <div class="page-width">
\ No newline at end of file
diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/chevron.svg b/Websites/webkit.org/wp-content/themes/webkit/images/chevron.svg
new file mode 100644 (file)
index 0000000..3665dca
--- /dev/null
@@ -0,0 +1,4 @@
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="32" viewBox="0 0 18 32">
+  <polygon fill="#0070C9" fill-rule="evenodd" points="17.177 16.198 3.084 0 0 2.649 11.296 16.198 0 29.226 3.084 32"/>
+</svg>
\ No newline at end of file
diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/circular.svg b/Websites/webkit.org/wp-content/themes/webkit/images/circular.svg
new file mode 100644 (file)
index 0000000..bad2d31
--- /dev/null
@@ -0,0 +1,17 @@
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="2002" height="2002" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <path id="a" d="M1001,2001.11124 C1553.34618,2001.11124 2001.11124,1553.34618 2001.11124,1001 C2001.11124,448.653815 1553.34618,0.888762275 1001,0.888762275 C448.653815,0.888762275 0.888762275,448.653815 0.888762275,1001 C0.888762275,1553.34618 448.653815,2001.11124 1001,2001.11124 Z M1001,1420.1898 C1232.51213,1420.1898 1420.1898,1232.51213 1420.1898,1001 C1420.1898,769.487869 1232.51213,581.810204 1001,581.810204 C769.487869,581.810204 581.810204,769.487869 581.810204,1001 C581.810204,1232.51213 769.487869,1420.1898 1001,1420.1898 Z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="b" fill="white">
+      <use xlink:href="#a"/>
+    </mask>
+    <use stroke="#979797" xlink:href="#a"/>
+    <ellipse cx="1001" cy="1001" stroke="#979797" mask="url(#b)" rx="715.551" ry="715.551"/>
+    <ellipse cx="1001" cy="1001" stroke="#979797" mask="url(#b)" rx="715.551" ry="715.551"/>
+    <path stroke="#979797" d="M46.9325334 996.5L1955.06747 996.5M996.5 46.9325334L996.5 1955.06747M996.5 46.9325334L996.5 1955.06747M1247.93083 79.441594L754.069169 1922.55841M1478.03373 174.753337L523.966267 1827.24666M1675.62758 326.372425L326.372425 1675.62758M1827.24666 523.966267L174.753337 1478.03373M1922.55841 754.069169L79.441594 1247.93083M754.069169 79.441594L1247.93083 1922.55841M523.966267 174.753337L1478.03373 1827.24666M326.372425 326.372425L1675.62758 1675.62758M174.753337 523.966267L1827.24666 1478.03373M79.441594 754.069169L1922.55841 1247.93083" stroke-linecap="square" mask="url(#b)"/>
+    <ellipse cx="1001" cy="1001" stroke="#979797" mask="url(#b)" rx="569.207" ry="569.207"/>
+    <ellipse cx="1001" cy="1001" stroke="#979797" mask="url(#b)" rx="976.838" ry="976.838"/>
+  </g>
+</svg>
diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/compass.svg b/Websites/webkit.org/wp-content/themes/webkit/images/compass.svg
new file mode 100644 (file)
index 0000000..54ba32b
--- /dev/null
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2017 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1450 1450">
+    <path d="M 725.000002 1447.03875 L 725.000002 1447.03875 C 1123.60498 1447.03875 1446.73816 1123.77099 1446.73816 725.000001 C 1446.73816 326.229011 1123.60498 2.96125272 725.000002 2.96125272 C 326.395019 2.96125272 3.26183556 326.229011 3.26183556 725.000001 C 3.26183556 1123.77099 326.395019 1447.03875 725.000002 1447.03875 L 725.000002 1447.03875 L 725.000002 1447.03875 Z" stroke="white" fill-rule="evenodd" fill="none"/>
+    <path d="M 562.84813 953.349909 C 591.496191 973.66411 624.145787 988.769366 659.394813 997.273047 L 725.961517 1208.84553 L 792.526922 997.27345 C 894.269986 972.728938 974.355877 893.184104 999.067337 792.12841 L 1212.07851 726.012715 L 1011.32358 663.700093 L 933.715581 733.260552 C 930.013119 843.927177 837.732412 932.850162 726.199411 932.457112 C 697.365092 932.72906 670.753732 926.587741 646.277521 916.690383 L 562.84813 953.349909 L 562.84813 953.349909 Z M 889.619426 498.977454 C 842.353604 465.376331 792.401124 454.619626 792.401124 454.619626 L 725.958556 243.17696 L 659.39315 454.749041 C 557.650085 479.293552 477.564195 558.838386 452.852735 659.894081 L 239.841563 726.009774 C 239.841563 726.009774 377.336053 768.686895 446.083297 790.025455 L 518.105575 724.21539 C 518.88254 610.97766 611.15129 520.230613 725.878523 519.678486 C 754.311916 517.820405 800.376259 531.70741 805.735165 535.334966 C 805.735159 535.334967 889.619426 498.977454 889.619426 498.977454 L 889.619426 498.977454 Z M 671.674231 642.356546 L 251.789169 1022.45099 L 774.594196 802.423012 L 1196.69162 426.027748 L 671.674231 642.356546 L 671.674231 642.356546 Z M 345.571131 962.390058 L 764.145471 786.333744 L 681.887232 657.993607 L 345.571131 962.390058 L 345.571131 962.390058 Z" stroke="white" fill-rule="evenodd" fill="none"/>
+    <path d="M 725.493385 86.2657049L 725.493385 22.8266657M 725.480154 1366.46552L 725.480154 1429.90456M 1368.62174 725L 1431.15002 725M 86.6488 725L 23.1218951 725M 1365.5407 663.680439L 1428.76225 657.467835 1365.5407 663.680439zM 89.6676327 788.419442L 26.446084 794.632045 89.6676327 788.419442zM 1356.30537 601.488314L 1418.61162 589.111972 1356.30537 601.488314zM 98.8412405 850.620707L 36.5349872 862.997049 98.8412405 850.620707zM 1341.00484 540.500963L 1401.79469 522.080284 1341.00484 540.500963zM 114.08124 911.623201L 53.291392 930.04388 114.08124 911.623201zM 1319.82955 481.409982L 1378.52076 457.132913 1319.82955 481.409982zM 135.197883 970.73514L 76.5066757 995.012209 135.197883 970.73514zM 1292.96124 424.673869L 1348.98958 394.773795 1292.96124 424.673869zM 162.009891 1027.49784L 105.98155 1057.39792 162.009891 1027.49784zM 1260.59604 370.745157L 1313.41673 335.500315 1260.59604 370.745157zM 194.321562 1081.45859L 141.500871 1116.70343 194.321562 1081.45859zM 1223.08903 320.247351L 1272.19247 279.997771M 231.778463 1131.99352L 182.675018 1172.2431M 1180.88115 273.746627L 1225.80146 228.888452 1180.88115 273.746627zM 273.940188 1178.53601L 229.019882 1223.39419 273.940188 1178.53601zM 1134.31602 231.597131L 1174.62135 182.561603 1134.31602 231.597131zM 320.463486 1220.73159L 280.158159 1269.76712 320.463486 1220.73159zM 1083.74827 194.14199L 1119.04193 141.394357 1083.74827 194.14199zM 370.994061 1258.23678L 335.700404 1310.98442 370.994061 1258.23678zM 790.407264 89.3424882L 796.628473 26.2083829 790.407264 89.3424882zM 664.231062 1363.32661L 658.009854 1426.46071 664.231062 1363.32661zM 1029.74487 161.821563L 1059.68636 105.870716 1029.74487 161.821563zM 424.96539 1290.61066L 395.023903 1346.56151 424.96539 1290.61066zM 972.930174 134.990409L 997.240868 76.3803791 972.930174 134.990409zM 481.753456 1317.49804L 457.442762 1376.10807 481.753456 1317.49804zM 913.650293 113.811979L 932.085875 53.1029969M 541.012318 1338.73514L 522.576736 1399.44412M 852.685528 98.5650451L 865.079012 36.3449692 852.685528 98.5650451zM 601.961951 1354.04241L 589.568467 1416.26249 601.961951 1354.04241zM 790.407264 1363.38873L 796.628473 1426.52284M 665.495493 89.2803621L 659.274285 26.1462568M 852.685528 1354.16618L 865.079012 1416.38625M 603.208076 98.4412817L 590.814592 36.2212058M 913.757349 1338.88681L 932.203541 1399.59258M 542.121091 113.660203L 523.674899 52.9544344M 972.930174 1317.74081L 997.240868 1376.35084M 482.92728 134.747638L 458.616586 76.1376084M 1029.74487 1290.90966L 1059.68636 1346.86051M 426.085956 161.522562L 396.14447 105.571715M 1083.74827 1258.58923L 1119.04193 1311.33686M 372.050475 193.789542L 336.756817 141.041908M 1134.31602 1221.13409L 1174.62135 1270.16962M 321.445555 231.194635L 281.140228 182.159107M 1180.88115 1178.9846L 1225.80146 1223.84277M 274.838594 273.298045L 229.918288 228.43987M 1223.08903 1132.48387L 1272.19247 1172.73345M 232.584569 319.756996L 183.481125 279.507416M 1260.59604 1081.98606L 1313.41673 1117.23091M 195.027435 370.217681L 142.206744 334.972839M 1365.5407 789.050783L 1428.76225 795.263386M 89.7920568 663.049098L 26.5705082 656.836494M 1292.96124 1028.05735L 1348.98958 1057.95743M 162.608721 424.11436L 106.580379 394.214287M 1319.82955 971.32124L 1378.52076 995.598309M 135.684097 480.823882L 76.9928895 456.546812M 1341.03731 912.123351L 1401.83038 930.533434M 114.417583 540.000781L 53.6245161 521.590698M 1356.30537 851.242908L 1418.61162 863.61925M 99.0891102 600.866113L 36.7828569 588.489771" stroke="white" fill-rule="evenodd" fill="none"/>
+</svg>
diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/download-white.svg b/Websites/webkit.org/wp-content/themes/webkit/images/download-white.svg
new file mode 100644 (file)
index 0000000..f5ed2ff
--- /dev/null
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 47 47" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" >
+        <circle id="Oval-1" stroke="white" stroke-width="3" cx="23.5" cy="23.5" r="21.5"/>
+        <path d="M 21.9000244 31.9295486 L 11.9704758 22 L 10 23.9687873 L 23.3982222 37.368698 L 36.7930675 23.9687873 L 34.8225917 22 L 24.9000244 31.9255003 L 24.9000244 11.5 L 24.9000244 10 L 21.9000244 10 L 21.9000244 11.5 L 21.9000244 31.9295486 L 21.9000244 31.9295486 Z" fill="white"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Websites/webkit.org/wp-content/themes/webkit/images/template.svg b/Websites/webkit.org/wp-content/themes/webkit/images/template.svg
new file mode 100644 (file)
index 0000000..4ea48c8
--- /dev/null
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1450" height="1451" viewBox="0 0 1450 1451">
+  <g fill="none" fill-rule="evenodd">
+    <path stroke="#FFFFFF" d="M98.6024246 3.12108458L98.6024246 1447.38377M1447.35194 1351.87414L3.1246209 1351.87414M1447.35194 97.1878967L3.1246209 97.1878967M1449.47656 725.238281L1 725.238281M1447.35194 1447.38306L3.1246209 3.12037731M1447.35194 3.12108458L3.1246209 1447.38377M1449.47656 995.413109L1 995.413109M1449.47656 453.648926L1 453.648926M1350.45961 1447.38306L1350.45961 3.12037731M725.238281 1449.50358L725.238281 1.02701748M993.998581 1449.50358L993.998581 1.02701748M455.063454 1449.50358L455.063454 1.02701748M994.965552 725.261055C994.965552 874.520624 874.207306 995.536314 725.237715 995.536314 576.269539 995.536314 455.511293 874.520624 455.511293 725.261055 455.511293 575.983098 576.269539 454.995698 725.237715 454.995698 874.207306 454.995698 994.965552 575.983098 994.965552 725.261055L994.965552 725.261055z"/>
+    <path stroke="#FFFFFF" d="M1107.53934,725.261055 C1107.53934,935.162849 936.370149,1105.32631 725.237715,1105.32631 C514.106697,1105.32631 342.937505,935.162849 342.937505,725.261055 C342.937505,515.350774 514.106697,345.188727 725.237715,345.188727 C936.370149,345.188727 1107.53934,515.350774 1107.53934,725.261055 L1107.53934,725.261055 Z"/>
+    <path stroke="#FFFFFF" d="M1351.77611,725.261055 C1351.77611,1071.60821 1071.26674,1352.37361 725.237857,1352.37361 C379.208971,1352.37361 98.7010172,1071.60821 98.7010172,725.261055 C98.7010172,378.896926 379.208971,98.1584043 725.237857,98.1584043 C1071.26674,98.1584043 1351.77611,378.896926 1351.77611,725.261055 L1351.77611,725.261055 Z"/>
+    <path stroke="#FFFFFF" d="M3.1246209,1122.37463 C3.1246209,1301.87539 149.494309,1447.38363 330.047478,1447.38363 L1120.42908,1447.24359 C1300.97377,1447.24359 1447.35194,1301.70847 1447.35194,1122.23459 L1447.35194,328.156821 C1447.35194,148.65606 1300.98367,3.12094312 1120.42908,3.12094312 L330.047478,3.27937025 C149.502796,3.27937025 3.1246209,148.796098 3.1246209,328.305346 L3.1246209,1122.37463 L3.1246209,1122.37463 Z"/>
+  </g>
+</svg>
index a5514e6..f7326ed 100644 (file)
@@ -20,6 +20,6 @@ $classes[] = 'third-tile';
         <div class="tile-content">
             <h1><?php the_title(); ?></h1>
             <div class="summary"><?php the_excerpt(); ?></div>
-            <p><a href="<?php the_permalink(); ?>">Read more &rsaquo;</a></p>
+            <p><a href="<?php the_permalink(); ?>" class="readmore">Read more</a></p>
         </div>        
     </div>
\ No newline at end of file
index 25cb7ea..654d2a9 100644 (file)
@@ -26,11 +26,15 @@ add_filter('the_content', function ($content) {
 ?>
 <style>
 body {
-    background: #333333;
+    background-color: #333333;
+}
+
+main {
+    background: none;
 }
 
 header {
-    border-bottom-color: transparent;
+    background-color: rgba(0,0,0,0.1);
 }
 
 #nightly {
@@ -84,8 +88,6 @@ header {
     box-sizing: border-box;
     min-height: 100px;
     overflow: hidden;
-    width: -webkit-calc(33.33% - 10px);
-    width: -moz-calc(33.33% - 10px);
     width: calc(33.33% - 10px);
     border-radius: 0.3rem;
     padding: 1rem;
@@ -220,8 +222,6 @@ hr {
 
 @media only screen and (max-width: 690px) {
     #nightly li {
-        width: -webkit-calc(100% - 1px);
-        width: -moz-calc(100% - 1px);
         width: calc(100% - 1px);
     }
 }
index 2eb03a5..1e814dd 100644 (file)
@@ -12,11 +12,15 @@ get_header();
         body {
             background: #333333;
         }
-
+        
+        main {
+            background: none;
+        }
+        
         header {
-            border-bottom-color: transparent;
+            background-color: rgba(0,0,0,0.1);
         }
-
+        
         #nightly {
             margin: 6rem auto;
             color: #ffffff;
index 56a616f..b1822d2 100644 (file)
@@ -23,6 +23,14 @@ body {
     background: #333333;
 }
 
+main {
+    background: none;
+}
+
+header {
+    background-color: rgba(0,0,0,0.1);
+}
+
 .page-color {
     /*background: #333333;*/
     background: linear-gradient(black, #333333 66%);
index e6da1b3..c64efe7 100644 (file)
@@ -21,6 +21,5 @@
        <?php endwhile; else:
         include('444.php');
        endif; ?>
-
-
+    
 <?php get_footer(); ?>
\ No newline at end of file
index 57e28c1..c4e203c 100644 (file)
             </div>
         </article>
         
-        <nav class="navigation pagination" aria-label="Next/Last posts">
-            <?php previous_post_link('%link', 'Older Post <span>%title</span>'); ?>
-            <?php next_post_link('%link', 'Newer Post <span>%title</span>'); ?>
-        </nav>
+        <aside class="nextrouter" aria-label="Next/Previous posts">
+            <div class="bodycopy">
+            <?php //previous_post_link('%link', 'Older Post <span>%title</span>'); ?>
+            <?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>'); ?>
+            </div>
+        </aside>
+        <aside class="nextrouter previous" aria-label="Next/Previous posts">
+            <div class="bodycopy">
+            <?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>'); ?>
+            </div>
+        </aside>
 
     <?php //comments_template(); // No comments ?>
 
index 2544c38..a5edd42 100644 (file)
@@ -37,17 +37,17 @@ var loadWebCoreFeatures = xhrPromise(new URL("/repository/webkit/trunk/Source/We
 
 .page h1 {
     font-size: 4.2rem;
-    font-weight: 200;
+    font-weight: 500;
     line-height: 6rem;
-    color: black;
     margin: 3rem auto;
     width: 100%;
     text-align: center;
+    color: #333333;
 }
 
 .page h1 a {
-    color: #444444;
-}    
+    color: inherit;
+}
 
 .feature-filters {
     background-color: #ffffff;
@@ -218,7 +218,6 @@ input[type=text].search-input {
     border-top-color: #e4e4e4;
     padding: 0.5rem;
     line-height: 1.618;
-    -webkit-transition: background-color 0.3s ease-out;
     transition: background-color 0.3s ease-out;
 }
 
@@ -273,8 +272,6 @@ input[type=text].search-input {
     right: 0;
     top: 0.5rem;
     margin-left: 1rem;
-    -webkit-transition: transform 0.3s ease-out;
-    -moz-transition: transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
 }
 
index 5f3389c..81dc3df 100644 (file)
@@ -32,15 +32,17 @@ footer, header, hgroup, menu, nav, section {
     display: block;
 }
 html {
-    font-family: "Myriad Set Pro","Helvetica Neue",sans-serif;
+    font-family: "SF Hello", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
     font-size: 62.5%;
     font-synthesis: none;
 }
 body {
-    background-color: #f7f7f7;
-    font-size: 1.6rem;
+    background-color: #00253D;
+    font-size: 1.7rem;
     font-weight: 400;
-    line-height: 1.4;
+    line-height: 1.52947;
+    letter-spacing: -0.021rem;
+    color: #333333;
 }
 ol, ul {
     list-style: none;
@@ -89,10 +91,11 @@ hr {
     border-bottom: 1px solid #ddd;
 }
 strong {
-    font-weight: 700;
+    font-weight: 600;
 }
 em {
-    font-weight: 200;
+    font-style: italic;
+    font-weight: 300;
 }
 sup {
     vertical-align: super;
@@ -100,7 +103,7 @@ sup {
     line-height: 1;
 }
 code {
-    font-family: Menlo, monospace;
+    font-family: "SF Mono", "Menlo", monospace;
     background: #f2f2f2;
     border-radius: 2px;
     border: 1px solid #e7e7e7;
@@ -109,6 +112,10 @@ code {
     color: #444;
 }
 
+main {
+    background-color: #f7f7f7;
+}
+
 /** Accessibility Helpers **/
 a[name] {
     display: inline-block;
@@ -131,6 +138,15 @@ a[name]:hover {
     text-decoration: none;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-rendering: optimizeLegibility;
+}
+
 h1 a[name],
 h2 a[name],
 h3 a[name],
@@ -156,7 +172,7 @@ input[type=text] {
     border-radius: 4px;
     background: white;
     background-clip: padding-box;
-    font-family: "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    font-family: "SF Hello", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
     line-height: 1.33333;
     font-weight: 400;
     letter-spacing: normal;
@@ -165,7 +181,6 @@ input[type=text] {
 
 input[type=submit] {
     background-color: #1d9bd9;
-    background: -webkit-linear-gradient(#3baee7, #0088cc);
     background: linear-gradient(#3baee7, #0088cc);
     border-radius: 4px;
     color: white;
@@ -220,25 +235,42 @@ input[type=submit] {
 
 /** Header **/
 header {
-    background: #f9f9f9;
-    border-bottom: 1px solid #e7e7e7;
     overflow: visible;
     width: 100vw;
     max-width: 100%;
-    padding-top: 2rem;
+    padding-top: 1.5rem;
     margin: 0;
     position: relative;
     z-index: 500;
 }
 
+.home header {
+    background-color: transparent;
+    transition: background 500ms ease-out, border 250ms ease-out;
+}
+
 @supports ( -webkit-backdrop-filter: blur(10px) ) {
-    header {
+    
+    .home header {
+        background-color: transparent;
+        backdrop-filter: blur(0px);
+        -webkit-backdrop-filter: blur(0px);
+    }
+    
+    .sub-menu-layer {
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
-        background: rgba(255,255,255,0.8);
     }
 }
 
+.nextrouter .link,
+a.readmore {
+    background: url('images/chevron.svg') right no-repeat;
+    background-position-y: 0.6rem;
+    background-size: 0.5rem;
+    padding-right: 1rem;
+}
+
 a.download {
     background: url('images/download.svg') right no-repeat;
     padding-right: 4rem;
@@ -247,15 +279,26 @@ a.download {
 /** Pagination **/
 .pagination {
     text-align: center;
-    margin: 3rem auto;
-    font-weight: bold;
+    margin: 3rem auto 0;
+}
+
+.pagination::after {
+    content: ' ';
+    display: table;
+    padding-bottom: 3rem;
 }
 
 .pagination .page-numbers {
     display: inline-block;
-    padding: 0.5rem 1rem 0.3rem;
+    padding: 0.3rem 1rem 0.5rem;
     background: white;
-    border-radius: 3px;
+    border-radius: 4px;
+    box-shadow: inset rgba(0, 0, 0, 0.07) 0 0 0 1px;
+    height: 2rem;
+    font-size: 1.7rem;
+    line-height: 1.29412;
+    font-weight: 400;
+    letter-spacing: -0.021em;
 }
 
 .pagination .page-numbers:not(.current, .dots):hover {
@@ -267,6 +310,7 @@ a.download {
 .pagination .dots,
 .pagination .page-numbers.current {
     background: none;
+    box-shadow: none;
 }
 
 .pagination .prev-post,
@@ -292,11 +336,85 @@ a.download {
 /* Front page next button */
 .pagination .next-button {
     display: inline-block;
-    line-height: 3rem;
-    box-sizing: border-box;
-    width: -webkit-calc(33.33% - 10px);
-    width: -moz-calc(33.33% - 10px);
-    width: calc(33.33% - 10px);
+    min-width: calc(33.33% - 3rem);
+    padding: 0.5rem 1rem 0.7rem;
+}
+
+.nextrouter {
+    position: relative;
+    background-color: #fafafa;
+    padding: 0;
+    width: 100vw;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.nextrouter:hover {
+    background-color: #ffffff;
+    transition: background-color 300ms ease-out;
+}
+
+.nextrouter.previous {
+    text-align: right;
+    background-color: #f4f4f4;
+}
+
+.nextrouter.previous:hover {
+    background-color: #ffffff;
+}
+
+.nextrouter .bodycopy {
+    max-width: 1140px;
+    margin: 0 auto;
+}
+
+.nextrouter a {
+    display: block;
+    cursor: pointer;
+    color: #444444;
+    width: 66%;
+    margin: 0 auto;
+}
+
+.nextrouter a:hover {
+    text-decoration: none;
+}
+
+.nextrouter-copy {
+    padding: 10rem 0 9.5rem 0;
+    font-size: 3.2rem;
+    line-height: 1.09375;
+    font-weight: 500;
+    letter-spacing: 0.011rem;
+}
+
+.nextrouter .label {
+    font-size: 2.2rem;
+    line-height: 1;
+    font-weight: 300;
+    letter-spacing: 0.016rem;
+    color: #666666;
+    display: block;
+    margin-bottom: 1.8rem;
+}
+
+.nextrouter .title {
+    display: block;
+}
+
+.nextrouter .link {
+    clear: left;
+    display: inline-block;
+    font-size: 1.7rem;
+    font-weight: 400;
+    line-height: 1.52947;
+    letter-spacing: -0.021rem;
+    color: #08c;
+    background-position-y: 1rem;
+}
+
+.nextrouter a:hover .link {
+    text-decoration: underline;
 }
 
 /** Footer **/
@@ -305,8 +423,8 @@ footer {
     display: table;
     clear: both;
     width: 100%;
-    padding-bottom: 3rem;
-    box-sizing: border-box;
+    padding-bottom: 1.65rem;
+    box-sizing: border-box;    
 }
 
 footer .menu {
@@ -324,17 +442,15 @@ footer .menu {
     justify-content: space-between;
     box-sizing: border-box;
     width: 100%;
-    margin-top: 3rem;
 }
 
 .tile {
-    background: white;
-    display: inline-block;
+    background: #ffffff;
+    display: block;
     margin: 0 0 15px;
     position: relative;
     vertical-align: top;
     box-sizing: border-box;
-    min-height: 450px;
     overflow: hidden;
     box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 1px;
 }
@@ -358,14 +474,10 @@ footer .menu {
 }
 
 .third-tile {
-    width: -webkit-calc(33.33% - 10px);
-    width: -moz-calc(33.33% - 10px);
     width: calc(33.33% - 10px);
 }
 
 .two-thirds-tile {
-    width: -webkit-calc(66.66% - 5px);
-    width: -moz-calc(66.66% - 5px);
     width: calc(66.66% - 5px);
 }
 
@@ -382,13 +494,12 @@ footer .menu {
 
     background-size: cover;
     background-position: 50% 1%;
-    background-color: #8E8E93;
+    background-color: #636a74;
     background-repeat: no-repeat;
     background-image: url('images/icons.svg');
 }
 
 .tile .background-image.has-featured-image {
-    -webkit-transition: -webkit-filter 10s ease-in;
     transition: filter 1s ease-in;
     -webkit-filter: saturate(0);
             filter: saturate(0);
@@ -491,14 +602,11 @@ footer .menu {
     background-repeat: no-repeat;
 
     opacity: 0;
-    -webkit-transition: opacity 0.4s ease-in;
-    -moz-transition: opacity 0.4s ease-in;
     transition: opacity 0.4s ease-in;
 }
 
-.tile .featured-image,
 .tile:not(.has-post-thumbnail) .background-image,
-.tile .loaded .featured-image {
+.tile .background-vignette {
     box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0 1px;
 }
 
@@ -582,18 +690,26 @@ footer .menu {
 }
 
 .tile h1 {
-    font-size: 3rem;
-    line-height: 4rem;
-    font-weight: 200;
+    font-size: 2.4rem;
+    line-height: 1.20849;
+    font-weight: 500;
+    letter-spacing: 0.015rem;
     text-align: left;
+    white-space: no-wrap;
 }
+
 .tile h2 {
-    font-size: 3rem;
-    line-height: 4rem;
-    font-weight: 400;
+    font-size: 2.4rem;
+    line-height: 1.20849;
+    font-weight: 200;
     text-align: inherit;
 }
 
+.tile .summary,
+.tile p {
+    margin-top: 1.65rem;
+}
+
 .icon-tile {
     text-align: center;
     font-size: 2rem;
@@ -772,7 +888,7 @@ pre {
     -webkit-overflow-scrolling: touch;
     background: #f2f2f2;
     border: 1px solid #E6E6E6;
-    border-radius: 3px;
+    border-radius: 2px;
 
     box-sizing: border-box;
     padding: 3rem;
@@ -838,14 +954,33 @@ code.css .keyword { color: black; }
 code.css .number { color: rgb(28, 0, 207); }
 
 /** Post Typography **/
+
+main {
+    width: 100vw;
+    max-width: 100%;
+    overflow-x: hidden;
+    box-sizing: border-box;
+    padding: 3rem 0 0;
+}
+
+article {
+    padding-bottom: 3rem;
+}
+
+article::after {
+    clear: both;
+    content: ' ';
+    display: table;
+}
+
 article h1 {
-    font-size: 5.2rem;
-    line-height: 1.0625;
-    font-weight: 200;
-    letter-spacing: -0.02em;
+    font-size: 5.6rem;
+    line-height: 1.10746;
+    font-weight: 500;
+    letter-spacing: 0.004rem;
     text-align: center;
     color: #037DFD;
-    margin: 5rem auto 3rem;
+    margin: 0 auto 3rem;
 }
 
 article h1 a {
@@ -854,37 +989,36 @@ article h1 a {
 }
 
 article h2 {
-    font-size: 4.2rem;
-    line-height: 1.08654;
-    font-weight: 200;
-    letter-spacing: -0.014em;
+    font-size: 3.2rem;
+    line-height: 1.09375;
+    font-weight: 500;
+    letter-spacing: -0.011rem;
     margin: 4rem 0 1rem;
 }
 
 article h3 {
-    font-size: 3.2rem;
-    line-height: 1.14286;
-    font-weight: 200;
-    letter-spacing: -0.01em;
+    font-size: 2.4rem;
+    line-height: 1.09375;
+    font-weight: 500;
+    letter-spacing: -0.011rem;
 }
 
 article h4 {
     font-size: 2.2rem;
-    line-height: 1.125;
-    font-weight: 600;
+    line-height: 1.09375;
+    font-weight: 500;
 }
 
 article h5 {
     font-size: 2rem;
-    line-height: 1.5;
-    font-weight: 600;
+    line-height: 1.09375;
+    font-weight: 500;
 }
 
 article h6 {
-    font-size: 2rem;
-    line-height: 1.5;
-    font-weight: 600;
-    font-size: 2rem;
+    font-size: 1.7rem;
+    line-height: 1.09375;
+    font-weight: 500;
 }
 
 article h3,
@@ -898,7 +1032,7 @@ article h2 + h3,
 article h3 + h4,
 article h4 + h5,
 article h5 + h6 {
-    margin-top: 3rem;
+    margin-top: 0;
 }
 
 article p,
@@ -924,11 +1058,6 @@ article .byline .author {
 
 }
 
-article .bodycopy {
-    font-size: 2rem;
-    line-height: 3rem;
-}
-
 article table {
     font-size: 1.6rem;
     border-collapse: collapse;
@@ -1221,20 +1350,21 @@ article .alignright:first-child {
 article figcaption {
     text-align: left;
     margin-top: 1.5rem;
+    line-height: 1.5;
     max-width: 970px;
     padding-left: 1.5rem;
     box-sizing: border-box;
-    font-size: 1.5rem;
-    font-style: italic;
-    color: #8E8E93;
+    font-size: 1.3rem;
+    font-weight: 400;
+    color: #666666;
     position: relative;
 }
 
 article figcaption::before {
     left: 1.5rem;
-    width: 10%;
+    width: 15%;
     height: 100%;
-    bottom: 1rem;
+    bottom: 2.5rem;
     border-top: 1px solid #cccccc;
     content: '';
     opacity: 1;
@@ -1339,22 +1469,27 @@ article,
 .table-of-contents {
     float: right;
     box-sizing: border-box;
-    padding: 3rem;
-    margin: 0 0 3rem 3rem;
+    padding: 2.5rem 0 0 0;
+    margin: 0 0 2.5rem 3rem;
 
-    width: 252px;
-    background: #ffffff;
+    max-width: 33%;
     z-index: 5;
+    font-size: 1.4rem;
+    line-height: 1.20849;
+    border-top: 1px solid #d6d6d6;
 
 }
 
+article .table-of-contents label {
+    font-size: 1.7rem;
+    font-weight: 500;
+    margin-bottom: 1.65rem;
+}
+
 .table-of-contents ul {
     margin: 0;
     list-style: none;
-    font-size: 1.6rem;
-    line-height: 2rem;
-    padding-left: 2rem;
-    padding-right: 0;
+    margin-top: 1.65rem;
 }
 
 .table-of-contents .list > ul {
@@ -1362,7 +1497,7 @@ article,
 }
 
 .table-of-contents ul li {
-    margin-bottom: 1rem;
+    margin-bottom: 1.65rem;
 }
 
 .table-of-contents ul li:last-child {
@@ -1370,7 +1505,7 @@ article,
 }
 
 .table-of-contents ul li > ul {
-    margin-top: 1rem;
+    margin-top: 1.65rem;
 }
 
 .with-toc pre:nth-child(-n+6),
@@ -1382,21 +1517,15 @@ article,
 /** Logo **/
 .site-logo {
     float: left;
-    font-size: 4.2rem;
-    line-height: 4.2rem;
-    font-weight: 200;
+    font-size: 3rem;
+    line-height: 1.04167;
+    letter-spacing: 0.015rem;
+    font-weight: 500;
+    text-rendering: optimizeLegibility;
     display: inline-block;
     background: url('images/webkit.svg') no-repeat;
-    padding-left: 7rem;
-    color: #333;
-}
-
-.site-logo .tagline {
-    display: block;
-    font-size: 1.8rem;
-    line-height: 2rem;
-    letter-spacing: -0.05rem;
-    color: #666;
+    padding: 1rem 0 1rem 5.5rem;
+    color: #ffffff;
 }
 
 .hero .logo {
@@ -1437,13 +1566,17 @@ input.menu-toggle {
     left: 0;
 }
 
+footer {
+    
+}
+
 footer nav {
-    padding: 3rem 0;
+    padding: 1.65rem 0 0;
 }
 
 header nav li {
     display: inline-block;
-    padding: 2.5rem 0 1.5rem 3rem;
+    padding: 1.5rem 0 1.5rem 3rem;
 }
 
 footer nav li {
@@ -1457,12 +1590,23 @@ footer nav li:first-child {
 }
 
 header nav a,
+.sub-menu a,
 footer nav a {
     position: relative;
     display: inline-block;
     text-decoration: none;
-    color: #333;
+    font-size: 1.4rem;
+    line-height: 1.5455;
+    letter-spacing: -0.015rem;
+    letter-spacing: 0;
     cursor: pointer;
+    font-weight: 500;
+    color: #333333;
+}
+
+header nav a,
+footer nav a {
+    color: #ffffff;
 }
 
 header nav a:hover,
@@ -1480,14 +1624,16 @@ header .menu-item-has-children .label-toggle::after {
     margin-left: 0.5rem;
     margin-top: -0.1rem;
     content: '';
-
-    -webkit-transition: transform 0.3s ease-out;
-    -moz-transition: transform 0.3s ease-out;
+    
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+    perspective: 600;        
+    
     transition: transform 0.3s ease-out;
 }
 
 header .menu-item { /* add bottom dimension to main menu items */
-    padding-bottom: 3rem;
+    padding-bottom: 2.5rem;
 }
 
 .sub-menu-layer {
@@ -1500,7 +1646,7 @@ header .menu-item { /* add bottom dimension to main menu items */
     margin-top: -99rem;
 
     position: absolute;
-    top: 8rem;
+    top: 7rem;
     transform: translateY(-1rem);
 
     background: rgba(255,255,255,0.95);
@@ -1508,11 +1654,8 @@ header .menu-item { /* add bottom dimension to main menu items */
     border: 1px solid #e7e7e7;
     border-radius: 5px;
 
-    -webkit-transition: opacity 0.6s, transform 0.6s;
-    -moz-transition: opacity 0.6s, transform 0.6s;
-    transition: opacity 0.6s, transform 0.6s;
+    transition: opacity 0.6s;
     opacity: 0;
-
 }
 
 .sub-menu-layer:after, .sub-menu-layer:before {
@@ -1560,228 +1703,6 @@ header .menu-item { /* add bottom dimension to main menu items */
     margin-top: 0;
 }
 
-/** Timeline blog content **/
-
-.timeline {
-    position: relative;
-    padding: 0 5rem;
-    margin: 0;
-}
-
-.timeline:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-.timeline * {
-    box-sizing: border-box;
-}
-
-.timeline:before {
-    content: "";
-    position: absolute;
-    height: 100%;
-    width: 0.5rem;
-    background: #e9eeef;
-    left: -moz-calc(50% - 0.25rem);
-    left: -o-calc(50% - 0.25rem);
-    left: -webkit-calc(50% - 0.25rem);
-    left: calc(50% - 0.25rem);
-}
-
-.timeline > li {
-    list-style-type: none;
-    text-align: right;
-}
-
-.timeline > li:before {
-    position: absolute;
-
-    display: block;
-    content: "";
-    width: 3rem;
-    height: 3rem;
-
-    right: -moz-calc(50% - 1.5rem);
-    right: -o-calc(50% - 1.5rem);
-    right: -webkit-calc(50% - 1.5rem);
-    right: calc(50% - 1.5rem);
-
-    border-radius: 3em;
-
-    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 51, color-stop(50%, white), color-stop(51%, #e9eeef));
-    background-image: -webkit-radial-gradient(white 50%, #e9eeef 51%);
-    background-image: -moz-radial-gradient(white 50%, #e9eeef 51%);
-    background-image: -o-radial-gradient(white 50%, #e9eeef 51%);
-    background-image: radial-gradient(white 50%, #e9eeef 51%);
-}
-
-.timeline .content {
-    position: relative;
-    color: #323232;
-    background: white;
-    border: 1px solid #e9eeef;
-    border-radius: 3px;
-    margin-bottom: 6rem;
-    padding: 0 3rem;
-    text-align: center;
-}
-
-.timeline figure {
-    text-align: center;
-    margin-bottom: 1rem;
-}
-
-.timeline .time {
-    color: white;
-    background: #08c;
-    display: inline-block;
-    position: relative;
-    font-weight: bold;
-    top: -0.5rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    padding-left: 10rem;
-    padding-right: 0.5rem;
-    left: -moz-calc(-50% - 4.25rem);
-    left: -o-calc(-50% - 4.25rem);
-    left: -webkit-calc(-50% - 4.25rem);
-    left: calc(-50% - 4.25rem);
-    border-right: 1px solid #08c;
-    border-left: 1px solid #08c;
-    border-radius: 2px;
-    white-space: nowrap;
-    min-width: 300px;
-}
-
-.timeline h2, .timeline h3 {
-    text-align: center;
-}
-
-.timeline .time::before {
-    content: "";
-    width: 0;
-    height: 0;
-    border-width: 1em;
-    border-color: transparent;
-    border-style: solid;
-    border-left-color: #08c;
-    position: absolute;
-    right: -2em;
-    top: 0;
-}
-
-.timeline img {
-    max-width: 90%;
-}
-
-@media (min-width: 900px) {
-    .timeline > li {
-        width: 45%;
-    }
-
-    .timeline > li.force-clear {
-        clear: both !important;
-    }
-
-    .timeline > li:nth-child(odd) {
-        float: left;
-        clear: left;
-        text-align: right;
-    }
-
-    .timeline > li:nth-child(even) {
-        float: right;
-        clear: right;
-        text-align: left;
-    }
-
-    .timeline > li:nth-child(2),
-    .timeline > li.force-clear + li {
-        margin-top: 10rem;
-    }
-
-    .timeline li .time {
-        left: auto;
-    }
-
-    .timeline li:nth-child(odd) .time {
-        padding-right: 0.5rem;
-        padding-left: 10rem;
-    }
-
-    .timeline li:nth-child(even) .time {
-        padding-left: 0.5rem;
-        padding-right: 10rem;
-    }
-
-    .timeline li:nth-child(even) .time::before {
-        border-left-color: transparent;
-        border-right-color: #08c;
-        right: auto;
-        left: -2em;
-    }
-
-    .timeline > li:nth-child(even):before {
-        right: auto;
-        left: -moz-calc(50% - 1.5rem);
-        left: -o-calc(50% - 1.5rem);
-        left: -webkit-calc(50% - 1.5rem);
-        left: calc(50% - 1.5rem);
-    }
-}
-
-@media (max-width: 900px) {
-    .timeline {
-        padding: 0 3rem;
-    }
-
-    .timeline:before {
-        left: -moz-calc(15% - 0.25rem);
-        left: -o-calc(15% - 0.25rem);
-        left: -webkit-calc(15% - 0.25rem);
-        left: calc(15% - 0.25rem);
-    }
-
-    .timeline > li {
-        text-align: left;
-    }
-
-    .timeline > li:before {
-        right: -moz-calc(85% - 1.5rem);
-        right: -o-calc(85% - 1.5rem);
-        right: -webkit-calc(85% - 1.5rem);
-        right: calc(85% - 1.5rem);
-    }
-
-    .timeline .content {
-        padding: 0 2rem;
-    }
-
-    .timeline .time {
-        left: -moz-calc(15% + 2.25rem);
-        left: -o-calc(15% + 2.25rem);
-        left: -webkit-calc(15% + 2.25rem);
-        left: calc(15% + 2.25rem);
-
-        text-align: left;
-
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-
-        min-width: 200px;
-    }
-
-    .timeline li .time::before {
-        border-left-color: transparent;
-        border-right-color: #08c;
-
-        right: auto;
-        left: -2em;
-    }
-}
-
 /** Screen Breakpoints **/
 
 @media only screen and (max-width: 1180px) {
@@ -1797,6 +1718,7 @@ header .menu-item { /* add bottom dimension to main menu items */
         float: none;
         text-align: center;
         margin-bottom: 3rem;
+        padding-right: 0;
     }
 
     article .byline p {
@@ -1836,9 +1758,12 @@ header .menu-item { /* add bottom dimension to main menu items */
         background: url('images/menu-down.svg') no-repeat 50%;
         cursor: pointer;
 
-        -webkit-transition: transform 0.3s ease-out;
-        -moz-transition: transform 0.3s ease-out;
         transition: transform 0.3s ease-out;
+        
+        -webkit-filter: invert(100%);
+        filter: invert(100%);
+        perspective: 600;
+        transform: translateZ(10rem);
     }
 
     .menu-toggle:checked + .main-menu.label-toggle,
@@ -1859,9 +1784,14 @@ header .menu-item { /* add bottom dimension to main menu items */
         width: 100vw;
         overflow: hidden;
         box-shadow: 0px 5px 5px rgba(0,0,0,0.10);
-        backdrop-filter: blur(10px);
+        
+        backdrop-filter: blur(20px);
         -webkit-backdrop-filter: blur(10px);
-        background: rgba(255,255,255,0.8);
+        background-color: rgba(255,255,255,0.8);
+    }
+    
+    header nav a {
+        color: #333333;
     }
 
     header .menu-toggle:checked ~ ul {
@@ -1869,13 +1799,16 @@ header .menu-item { /* add bottom dimension to main menu items */
         opacity: 1;
     }
 
+    header .menu-item-has-children .label-toggle::after {
+        -webkit-filter: invert(0%);
+        filter: invert(0%);
+    }
+
     header .menu-main-menu-container >  ul > li {
         width: 100vw;
         position: relative;
         padding: 0 3rem 3rem;
         box-sizing: border-box;
-        -webkit-transition: opacity 0.6s;
-        -moz-transition: opacity 0.6s;
         transition: opacity 0.6s;
     }
 
@@ -1898,8 +1831,6 @@ header .menu-item { /* add bottom dimension to main menu items */
         border-right: none;
         opacity: 0;
         transform: translateY(0);
-        -webkit-transition: opacity 0.6s;
-        -moz-transition: opacity 0.6s;
         transition: opacity 0.6s;
     }
 
@@ -1937,6 +1868,10 @@ header .menu-item { /* add bottom dimension to main menu items */
 }
 
 @media only screen and (max-width: 690px) {
+    article h1 {
+        font-size: 3.4rem;
+    }
+    
     .featured-tile {
         padding: 0;
     }
@@ -1956,13 +1891,11 @@ header .menu-item { /* add bottom dimension to main menu items */
     }
 
     .tile {
-        min-height: 320px;
+        min-height: 375px;
     }
 
     .third-tile,
     .two-thirds-tile {
-        width: -webkit-calc(100% - 1px);
-        width: -moz-calc(100% - 1px);
         width: calc(100% - 1px);
     }
 
@@ -1998,6 +1931,10 @@ header .menu-item { /* add bottom dimension to main menu items */
         text-align: left;
     }
 
+    .nextrouter-copy {
+        font-size: 2.2rem;
+    }
+    
     article .scrollable {
         overflow: auto;
         -webkit-overflow-scrolling: touch;
@@ -2029,12 +1966,7 @@ header .menu-item { /* add bottom dimension to main menu items */
 
     .site-logo {
         font-size: 4rem;
-        padding-left: 6rem;
-    }
-
-    .site-logo .tagline {
-        font-size: 1.6rem;
-        line-height: 1;
+        padding-left: 6.4rem;
     }
 
     header nav .main-menu.label-toggle {
@@ -2070,8 +2002,6 @@ header .menu-item { /* add bottom dimension to main menu items */
         position: absolute;
         right: 3rem;
         top: 3.5rem;
-        -webkit-transition: transform 0.3s ease-out;
-        -moz-transition: transform 0.3s ease-out;
         transition: transform 0.3s ease-out;
         perspective: 600;
     }
@@ -2105,7 +2035,7 @@ header .menu-item { /* add bottom dimension to main menu items */
 
 }
 
-@media only screen and (max-width: 415px) {
+@media only screen and (max-width: 415px) {    
     .table-of-contents {
         /* Go one-column */
         width: 100vw;
@@ -2115,49 +2045,56 @@ header .menu-item { /* add bottom dimension to main menu items */
         float: none;
         margin: 0 0 3rem 0;
     }
+    
+    .nextrouter-copy {
+        font-size: 1.7rem;
+        letter-spacing: -0.016rem;
+    }
 }
 
 @media only screen and (max-height: 415px) {
-    .hero .logo,
-    .hero .tagline,
-    .hero .particle {
-        display: none;
-    }
-
+    
     .home .site-logo {
         opacity: 1;
         margin-top: 0;
     }
 
-    .home .hero {
-        margin: 7rem 0 0;
-    }
-
-    .home.admin-bar .hero {
-        margin-top: 12rem;
-    }
-
     header,
     .home header {
         padding-top: 1rem;
     }
-
-    .home header {
-        border-bottom: 1px solid #e7e7e7;
-        background: rgba(255,255,255,0.9);
-    }
-
-    @supports ( -webkit-backdrop-filter: blur(10px) ) {
-        .home header {
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            background: rgba(255,255,255,0.8);
+    
+    @supports(padding:max(0px)) {
+        header,
+        header .menu,
+        .home header,
+        .home .hero .content,
+        .feature-filters,
+        #content,
+        #nightly,
+        footer {
+            box-sizing: border-box;
+            padding-left: constant(safe-area-inset-left);
+            padding-right: constant(safe-area-inset-right);
+        }
+        
+        header .menu .menu-item > .sub-menu {
+            border: none;
+            background: none;
+        }
+        
+        .sub-menu-layer {
+            padding: 0 3rem;
         }
+        
+        .sub-menu-layer .menu-item:first-child,
+        .sub-menu-layer .menu-item {
+            padding: 0 0 1.5rem 1.5rem;
+        }
+        
     }
 
     .tile {
-        min-height: 200px;
-        max-height: 400px;
         overflow: hidden;
     }
 
@@ -2197,8 +2134,6 @@ header .menu-item { /* add bottom dimension to main menu items */
         position: absolute;
         right: 3rem;
         top: 3.5rem;
-        -webkit-transition: transform 0.3s ease-out;
-        -moz-transition: transform 0.3s ease-out;
         transition: transform 0.3s ease-out;
         perspective: 600;
     }
@@ -2219,8 +2154,10 @@ header .menu-item { /* add bottom dimension to main menu items */
     }
 }
 
-@media only screen and (max-width: 320px) {
-    .home .hero {
-        position: absolute;
-    }
+#template {
+    background-image: url('images/template.svg');
+}
+
+#compass {
+    background-image: url('images/compass.svg');
 }
index e66f078..66f0eaa 100644 (file)
@@ -73,7 +73,7 @@ class WebKitPostTileWidget extends WP_Widget {
                 <div class="tile-content">
                     <h1><?php echo $title; ?></h1>
                     <div class="summary"><?php echo $summary; ?></div>
-                    <p><a href="<?php the_permalink(); ?>"><?php echo $link; ?>&nbsp;&rsaquo;</a></p>
+                    <p><a href="<?php the_permalink(); ?>" class="readmore"><?php echo $link; ?></a></p>
                 </div>        
             </div>
         <?php