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 198520c..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;
 }
@@ -1065,6 +1074,10 @@ article .mattewhite {
     padding-bottom: 3rem;
 }
 
+article .mattewhite.tightwad {
+    padding: 0;
+}
+
 /** Article Figures **/
 
 article figure {
@@ -1451,6 +1464,7 @@ header .menu-item { /* add bottom dimension to main menu items */
 .timeline {
     position: relative;
     padding: 0 5rem;
+    margin: 0;
 }
 
 .timeline:after {
@@ -1507,8 +1521,8 @@ header .menu-item { /* add bottom dimension to main menu items */
     color: #323232;
     background: white;
     border: 1px solid #e9eeef;
-    width: 100%;
-    margin-bottom: 4em;
+    border-radius: 3px;
+    margin-bottom: 6rem;
     padding: 0 3rem;
     text-align: center;
 }
@@ -1533,6 +1547,11 @@ header .menu-item { /* add bottom dimension to main menu items */
     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 {
@@ -1612,6 +1631,56 @@ header .menu-item { /* add bottom dimension to main menu items */
     }
 }
 
+@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) {