Optimise for various screen sizes, defaulting to mobile view
This stops the example from jumping underneath the code
Change-Id: I3b163568f4626f411c88ab4c1133b2ed1bed9cf2
+
+.container {
+ width: 100%;
+}
+
+nav {
+ display: none;
+}
+
+article {
+ .example {
+ blockquote {
+ margin-top: 20px;
+ }
+ }
+}
+
body {
margin: 0;
padding: 0;
}
.container {
- width: 960px;
margin: 0 auto;
display: -webkit-flex;
display: flex;
article {
-webkit-flex: 1;
flex: 1;
- margin-left: 30px;
h1, h2, h3, h4, h5, h6, p {
margin-left: 20px;
background: #f8f8f8;
padding: 20px;
color: #999;
- width: 338px;
word-wrap: break-word;
// word-wrap in pre not affecting Firefox, so add white-space.
white-space: pre-wrap;
display: block;
margin: 0;
margin-left: 20px;
- min-width: 360px;
}
}
}
-@media (max-width: 960px) {
- .container {
- width: 100%;
+@media (min-width: 768px) {
+ nav {
+ display: block;
+ width: 100px;
}
+ @columnWidth: (768px - 100px ) / 2;
+ .example {
+ pre,
+ blockquote {
+ width: @columnWidth;
+ }
+ }
+}
+
+@media (min-width: 980px) {
nav {
- display: none;
+ width: auto;
}
article {
- .example {
- blockquote {
- margin-top: 20px;
- }
+ margin-left: 30px;
+ }
+
+ .container {
+ width: 980px;
+ }
+
+ .example {
+ pre {
+ width: 338px;
+ }
+ blockquote {
+ width: auto;
}
}
}