Add a CSS class to remove padding when using mattewhite class for figures
[WebKit-https.git] / Websites / webkit.org / wp-content / themes / webkit / style.css
index 9460c11..a31aa59 100644 (file)
@@ -20,16 +20,16 @@ article, aside, canvas, details,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, section, summary,
 time, mark, audio, video {
-       margin: 0;
-       padding: 0;
-       border: 0;
-       font: inherit;
-       vertical-align: baseline;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-       display: block;
+    display: block;
 }
 html {
     font-family: "Myriad Set Pro","Helvetica Neue",sans-serif;
@@ -40,22 +40,31 @@ body {
     background-color: #f7f7f7;
     font-size: 1.6rem;
     font-weight: 400;
-       line-height: 1.4;
+    line-height: 1.4;
 }
 ol, ul {
-       list-style: none;
+    list-style: none;
+}
+dl {
+    margin: 2rem 0;
+}
+dt {
+    font-weight: bold;
+}
+dd {
+    margin: 0 3rem;
 }
 blockquote, q {
-       quotes: none;
+    quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
-       content: '';
-       content: none;
+    content: '';
+    content: none;
 }
 table {
-       border-collapse: collapse;
-       border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 p:empty {
     display: none;
@@ -95,20 +104,35 @@ code {
     color: #444;
 }
 
-/** Form Elements **/
-body, input, textarea, select, button {
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -moz-font-feature-settings: 'liga', 'kern';
-}
-
 /** Accessibility Helpers **/
 a[name] {
-    display: block;
+    display: inline-block;
     position: relative;
     top: -3rem;
+    color: #ddd;
+    width: 0;
+}
+
+p > a[name]::before {
+    content: "#";
+    margin-left: -1.7rem;
+    position: relative;
+    top: 3rem;
+    
+}
+
+a[name]:hover {
+    color: #08c;
+    text-decoration: none;
+}
+
+h1 a[name],
+h2 a[name],
+h3 a[name],
+h4 a[name],
+h5 a[name],
+h6 a[name] {
+    display: block;
     visibility: hidden;
 }
 
@@ -116,35 +140,38 @@ a[name] {
     top: calc(-32px - 3rem);
 }
 
+.admin-bar p > a[name]::before {
+    top: calc(32px + 3rem);
+}
+
 .screen-reader-text {
-       clip: rect(1px, 1px, 1px, 1px);
-       position: absolute !important;
-       height: 1px;
-       width: 1px;
-       overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
 }
 
 .screen-reader-text:focus {
-       background-color: #f1f1f1;
-       border-radius: 3px;
-       box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-       clip: auto !important;
-       color: #21759b;
-       display: block;
-       font-size: 14px;
-       font-size: 0.875rem;
-       font-weight: bold;
-       height: auto;
-       left: 5px;
-       line-height: normal;
-       padding: 15px 23px 14px;
-       text-decoration: none;
-       top: 5px;
-       width: auto;
-       z-index: 100000; /* Above WP toolbar. */
+    background-color: #f1f1f1;
+    border-radius: 3px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    clip: auto !important;
+    color: #21759b;
+    display: block;
+    font-size: 14px;
+    font-size: 0.875rem;
+    font-weight: bold;
+    height: auto;
+    left: 5px;
+    line-height: normal;
+    padding: 15px 23px 14px;
+    text-decoration: none;
+    top: 5px;
+    width: auto;
+    z-index: 100000; /* Above WP toolbar. */
 }
 
-
 /** Page Layout **/
 .page-width {
     max-width: 1140px;
@@ -333,42 +360,42 @@ footer .menu {
 
 .tile.category-web-inspector .background-image {
     background-color: #08c;
-    background-position-y: 10.75%;
+    background-position: 50% 10.75%; /* Must use this notation for Firefox */
 }
 
 .tile.category-performance .background-image {
     background-color: rgb(152, 188, 77);
-    background-position-y: 20.5%;
+    background-position: 50% 20.5%;
 }
 
 .tile.category-javascript .background-image {
     background-color: #997FA6;
-    background-position-y: 30.5%;
+    background-position: 50% 30.5%;
 }
 
 .tile.category-css .background-image {
     background-color: #bf6d71;
-    background-position-y: 40.4%;
+    background-position: 50% 40.4%;
 }
 
 .tile.category-standards .background-image {
     background-color: #BF7600;
-    background-position-y: 50.4%;
+    background-position: 50% 50.4%;
 }
 
 .tile.category-contributing .background-image {
     background-color: #CBAA44;
-    background-position-y: 59.8%;
+    background-position: 50% 59.8%;
 }
 
 .tile.category-storage .background-image {
     background-color: #997FA6;
-    background-position-y: 69.6%;
+    background-position: 50% 69.6%;
 }
 
 .tile.category-layout .background-image {
     background-color: #bf6d71;
-    background-position-y: 79.45%;
+    background-position: 50% 79.45%;
 }
 
 .tile.tag-console .background-image,
@@ -379,19 +406,19 @@ footer .menu {
 }
 
 .tile.tag-console .background-image {
-    background-position-y: 3%;
+    background-position: 50% 3%;
 }
 
 .tile.tag-debugger .background-image {
-    background-position-y: 34%;
+    background-position: 50% 34%;
 }
 
 .tile.tag-shortcuts .background-image {
-    background-position-y: 66%;
+    background-position: 50% 66%;
 }
 
 .tile.tag-timeline .background-image {
-    background-position-y: 97%;
+    background-position: 50% 97%;
 }
 
 .tile .background-image.loaded {
@@ -672,11 +699,11 @@ footer .menu {
 /** Code Syntax Highlighting **/
 pre {
     width: calc(100% + 6rem);
-       overflow: auto;
+    overflow: auto;
     -webkit-overflow-scrolling: touch;
     background: #f2f2f2;
-       border: 1px solid #E6E6E6;
-       border-radius: 3px;
+    border: 1px solid #E6E6E6;
+    border-radius: 3px;
 
     box-sizing: border-box;
     padding: 3rem;
@@ -685,7 +712,7 @@ pre {
 
 code {
     color: #555555;
-       font-size: 1.6rem;
+    font-size: 1.6rem;
     line-height: 2.5rem;
 }
 
@@ -775,7 +802,7 @@ article h3 {
 article h4 {
     font-size: 2.2rem;
     line-height: 1.125;
-    font-weight: 200;
+    font-weight: 600;
 }
 
 article h5 {
@@ -1047,6 +1074,10 @@ article .mattewhite {
     padding-bottom: 3rem;
 }
 
+article .mattewhite.tightwad {
+    padding: 0;
+}
+
 /** Article Figures **/
 
 article figure {
@@ -1226,7 +1257,7 @@ article,
 }
 
 .with-toc pre:nth-child(-n+6),
-#post-4132 pre:nth-child(-n+8) {
+#post-4132 pre:nth-child(-n+10) {
     width: 55%;
     z-index: -1;
 }
@@ -1273,9 +1304,9 @@ article,
 }
 
 .feature.opened .feature-header:after {
-       -webkit-transform: rotateX(-180deg);
-       -moz-transform: rotateX(-180deg);
-       transform: rotateX(-180deg);
+    -webkit-transform: rotateX(-180deg);
+    -moz-transform: rotateX(-180deg);
+    transform: rotateX(-180deg);
     perspective: 600;
 }
 
@@ -1331,19 +1362,27 @@ footer nav a:hover {
     text-decoration: none;
 }
 
-header nav .menu-item-has-children .label-toggle {
-    background: url('images/menu-down.svg') right 0.7rem no-repeat;
-    background-size: 1rem;
+header .menu-item-has-children .label-toggle::after {
+    background: url('images/menu-down.svg') no-repeat;
+    background-size: 1.2rem;
     display: inline-block;
-    padding-right: 1.5rem;
+    padding-right: 1.2rem;
+    padding-top: 0.8rem;
+    margin-left: 0.5rem;
+    margin-top: -0.1rem;
+    content: '';
+    
+    -webkit-transition: transform 0.3s ease-out;
+    -moz-transition: transform 0.3s ease-out;
+    transition: transform 0.3s ease-out;
 }
 
-header nav .menu-item { /* add bottom dimension to main menu items */
+header .menu-item { /* add bottom dimension to main menu items */
     padding-bottom: 3rem;
 }
 
 /* Improves mouse accessibility of menus */
-header .menu > .menu-item-has-children:hover > a::before {
+/*header .menu > .menu-item-has-children:hover > a::before {
     position: absolute;
     content: '';
     width: 100%;
@@ -1352,14 +1391,15 @@ header .menu > .menu-item-has-children:hover > a::before {
     top: 2rem;
     right: -3rem;
 }
-
+*/
 .sub-menu-layer {
     text-align: center;
     padding: 3rem;
     box-sizing: border-box;
 
-    width: 210px;
-    margin-left: -110px;
+    width: 21rem;
+    margin-left: -11rem;
+    margin-top: -99rem;
     
     position: absolute;
     top: 7rem;    
@@ -1408,14 +1448,237 @@ header .menu > .menu-item-has-children:hover > a::before {
 }
 
 .menu > .menu-item > a:focus ~ .sub-menu,
-.menu > .menu-item.open-menu> .sub-menu,
+.menu > .menu-item.open-menu > .sub-menu,
 .menu > .menu-item:hover > .sub-menu,
-.menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
+.menu > .menu-item > .menu-toggle:checked + .sub-menu {
     display: block;
     box-sizing: border-box;
     z-index: 1;
     opacity: 1;
     top: 8rem;    
+    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 **/
@@ -1469,13 +1732,25 @@ header .menu > .menu-item-has-children:hover > a::before {
 
 @media only screen and (max-width: 920px) {
     
-    header nav .main-menu.label-toggle {
+    .main-menu.label-toggle {
         display: inline-block;
         margin: 1.5rem 0 2.5rem;
         height: 3rem;
         width: 3rem;
         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;
+    }
+    
+    .menu-toggle:checked + .main-menu.label-toggle,
+    header .menu-item > .menu-toggle:checked + a > .label-toggle::after {
+        -webkit-transform: rotateX(-180deg);
+        -moz-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
+        perspective: 600;
     }
 
     header .menu {
@@ -1493,7 +1768,7 @@ header .menu > .menu-item-has-children:hover > a::before {
         background: rgba(255,255,255,0.8);
     }
 
-    header nav .menu-toggle:checked ~ ul {
+    header .menu-toggle:checked ~ ul {
         display: block;
         opacity: 1;
     }
@@ -1552,23 +1827,19 @@ header .menu > .menu-item-has-children:hover > a::before {
         margin-left: -11px;
     }
     
-    header .menu-toggle:checked ~ .sub-menu {
-        text-align: left;
-    }
-
-    header .menu > .menu-item:hover > .sub-menu,
     header .menu > .menu-item > .menu-toggle:checked ~ .sub-menu {
         position: relative;
         top: 1.5rem;
+        margin-top: 0;
     }
-    
+        
     footer nav li {
         padding: 0 3rem 3rem 0;
     }
 
 }
 
-@media only screen and (max-width: 782px) {
+@media only screen and (max-width: 690px) {
     
     .featured-tile {
         padding: 0;
@@ -1630,6 +1901,24 @@ header .menu > .menu-item-has-children:hover > a::before {
         margin-bottom: 1rem;
         text-align: left;
     }
+    
+    article .scrollable {
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        position: relative;
+        width: 100vw;
+        left: 50%;
+        transform: translate(-50%);
+        margin: 3rem 0;
+        border: 1px solid #cccccc;
+        border-left: none;
+        border-right: none;
+    }
+
+    .scrollable .scrollable-padding {
+        display: inline-block;
+        padding: 0 3rem;
+    }
 
 }
 
@@ -1680,9 +1969,9 @@ header .menu > .menu-item-has-children:hover > a::before {
     }
 
     .feature-filters.opened:after {
-       -webkit-transform: rotateX(-180deg);
-       -moz-transform: rotateX(-180deg);
-       transform: rotateX(-180deg);
+        -webkit-transform: rotateX(-180deg);
+        -moz-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
     }
     
     #wpadminbar {
@@ -1720,9 +2009,9 @@ header .menu > .menu-item-has-children:hover > a::before {
     }
     
     .menu-toggle:checked ~ .table-of-contents label:after {
-       -webkit-transform: rotateX(-180deg);
-       -moz-transform: rotateX(-180deg);
-       transform: rotateX(-180deg);
+        -webkit-transform: rotateX(-180deg);
+        -moz-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
     }
     
     .table-of-contents h6 {
@@ -1838,9 +2127,9 @@ header .menu > .menu-item-has-children:hover > a::before {
     }
     
     .menu-toggle:checked ~ .table-of-contents label:after {
-       -webkit-transform: rotateX(-180deg);
-       -moz-transform: rotateX(-180deg);
-       transform: rotateX(-180deg);
+        -webkit-transform: rotateX(-180deg);
+        -moz-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
     }
     
     .table-of-contents h6 {