Title: [195176] trunk/Websites/webkit.org
- Revision
- 195176
- Author
- [email protected]
- Date
- 2016-01-16 13:05:56 -0800 (Sat, 16 Jan 2016)
Log Message
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):
Modified Paths
Diff
Modified: trunk/Websites/webkit.org/ChangeLog (195175 => 195176)
--- trunk/Websites/webkit.org/ChangeLog 2016-01-16 20:53:55 UTC (rev 195175)
+++ trunk/Websites/webkit.org/ChangeLog 2016-01-16 21:05:56 UTC (rev 195176)
@@ -1,3 +1,16 @@
+2016-01-16 Timothy Hatcher <[email protected]>
+
+ 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 <[email protected]>
Eliminate the margin on timeline elements so multiple timelines can touch.
Modified: trunk/Websites/webkit.org/wp-content/themes/webkit/style.css (195175 => 195176)
--- trunk/Websites/webkit.org/wp-content/themes/webkit/style.css 2016-01-16 20:53:55 UTC (rev 195175)
+++ trunk/Websites/webkit.org/wp-content/themes/webkit/style.css 2016-01-16 21:05:56 UTC (rev 195176)
@@ -1537,6 +1537,8 @@
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 @@
}
}
+@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) {
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
