Fix some responsive issues on smaller screens.

* wp-content/themes/webkit/style.css:
(.timeline .time):
(@media (max-width: 900px)):
(.timeline:before):
(.timeline > li):
(.timeline > li:before):
(.timeline .content):
(.timeline li .time::before):

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

diff --git a/Websites/webkit.org/ChangeLog b/Websites/webkit.org/ChangeLog
index 4b50226..3aaaf9f 100644 (file)
--- a/Websites/webkit.org/ChangeLog
+++ b/Websites/webkit.org/ChangeLog
@@ -1,3 +1,16 @@
+2016-01-16  Timothy Hatcher  <timothy@apple.com>
+
+        Fix some responsive issues on smaller screens.
+
+        * wp-content/themes/webkit/style.css:
+        (.timeline .time):
+        (@media (max-width: 900px)):
+        (.timeline:before):
+        (.timeline > li):
+        (.timeline > li:before):
+        (.timeline .content):
+        (.timeline li .time::before):
+
 2016-01-14  Timothy Hatcher  <timothy@apple.com>
 
         Eliminate the margin on timeline elements so multiple timelines can touch.

diff --git a/Websites/webkit.org/wp-content/themes/webkit/style.css b/Websites/webkit.org/wp-content/themes/webkit/style.css
index 282bbff..d4c5b87 100644 (file)
--- a/Websites/webkit.org/wp-content/themes/webkit/style.css
+++ b/Websites/webkit.org/wp-content/themes/webkit/style.css
@@ -1537,6 +1537,8 @@ header .menu-item { /* add bottom dimension to main menu items */
     border-right: 1px solid #08c;
     border-left: 1px solid #08c;
     border-radius: 2px;
+    white-space: nowrap;
+    min-width: 300px;
 }
 
 .timeline h2, .timeline h3 {
@@ -1616,6 +1618,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) {