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

diff --git a/Websites/webkit.org/wp-content/themes/webkit/style.css b/Websites/webkit.org/wp-content/themes/webkit/style.css
index c498e44..a31aa59 100644 (file)
--- a/Websites/webkit.org/wp-content/themes/webkit/style.css
+++ b/Websites/webkit.org/wp-content/themes/webkit/style.css
@@ -45,6 +45,15 @@ body {
 ol, ul {
     list-style: none;
 }
+dl {
+    margin: 2rem 0;
+}
+dt {
+    font-weight: bold;
+}
+dd {
+    margin: 0 3rem;
+}
 blockquote, q {
     quotes: none;
 }
@@ -793,7 +802,7 @@ article h3 {
 article h4 {
     font-size: 2.2rem;
     line-height: 1.125;
-    font-weight: 200;
+    font-weight: 600;
 }
 
 article h5 {
@@ -1065,6 +1074,10 @@ article .mattewhite {
     padding-bottom: 3rem;
 }
 
+article .mattewhite.tightwad {
+    padding: 0;
+}
+
 /** Article Figures **/
 
 article figure {
@@ -1446,6 +1459,228 @@ 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) {
@@ -1666,6 +1901,24 @@ header .menu-item { /* add bottom dimension to main menu items */
         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;
+    }
 
 }