Skip to content

Commit e5eb3c0

Browse files
author
Lachlan Campbell
committed
More examples and better whitespace
1 parent f91e84d commit e5eb3c0

File tree

2 files changed

+104
-28
lines changed

2 files changed

+104
-28
lines changed

‎docs/layout/max-widths/index.html

+52-14
Original file line numberDiff line numberDiff line change
@@ -108,50 +108,88 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
108108
<table border="0" cellspacing="5" cellpadding="5">
109109
<tr>
110110
<td>
111-
<code class="code">.mw1</code>
111+
<code class="code mr2">.mw1</code>
112112
</td>
113113
<td>
114-
<div class="mw1 bg-black-10 pv2 oh">
114+
<div class="mw1 bg-black-10 pa2 mv1">
115115
Lorem
116116
</div>
117117
</td>
118118
</tr>
119119
<tr>
120120
<td>
121-
<code class="code">.mw2</code>
121+
<code class="code mr2">.mw2</code>
122122
</td>
123123
<td>
124-
<div class="mw2 bg-black-10 pv2 oh">
124+
<div class="mw2 bg-black-10 pa2 mv1">
125125
Lorem
126126
</div>
127127
</td>
128128
</tr>
129129
<tr>
130130
<td>
131-
<code class="code">.mw3</code>
131+
<code class="code mr2">.mw3</code>
132132
</td>
133133
<td>
134-
<div class="mw3 bg-black-10 pv2 oh">
134+
<div class="mw3 bg-black-10 pa2 mv1">
135135
Lorem ipsum dolor sit amet, consetetur sadipscing
136136
</div>
137137
</td>
138138
</tr>
139139
<tr>
140140
<td>
141-
<code class="code">.mw4</code>
141+
<code class="code mr2">.mw4</code>
142142
</td>
143143
<td>
144-
<div class="mw4 bg-black-10 pv2 oh">
144+
<div class="mw4 bg-black-10 pa2 mv1">
145145
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
146146
</div>
147147
</td>
148148
</tr>
149149
<tr>
150150
<td>
151-
<code class="code">.mw5</code>
151+
<code class="code mr2">.mw5</code>
152152
</td>
153153
<td>
154-
<div class="mw5 bg-black-10 pv2 oh">
154+
<div class="mw5 bg-black-10 pa2 mv1">
155+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
156+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
157+
vero eos et accusam et justo duo dolores et ea rebum.
158+
</div>
159+
</td>
160+
</tr>
161+
<tr>
162+
<td>
163+
<code class="code mr2">.mw6</code>
164+
</td>
165+
<td>
166+
<div class="mw6 bg-black-10 pa2 mv1">
167+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
168+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
169+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
170+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
171+
</div>
172+
</td>
173+
</tr>
174+
<tr>
175+
<td>
176+
<code class="code mr2">.mw7</code>
177+
</td>
178+
<td>
179+
<div class="mw7 bg-black-10 pa2 mv1">
180+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
181+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
182+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
183+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
184+
</div>
185+
</td>
186+
</tr>
187+
<tr>
188+
<td>
189+
<code class="code mr2">.mw8</code>
190+
</td>
191+
<td>
192+
<div class="mw8 bg-black-10 pa2 mv1">
155193
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
156194
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
157195
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -161,10 +199,10 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
161199
</tr>
162200
<tr>
163201
<td>
164-
<code class="code">.mw6</code>
202+
<code class="code mr2">.mw9</code>
165203
</td>
166204
<td>
167-
<div class="mw6 bg-black-10 pv2 oh">
205+
<div class="mw9 bg-black-10 pa2 mv1">
168206
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
169207
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
170208
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -175,8 +213,8 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
175213
</table>
176214
<h3 class="f5 book pt4 caps">Max Width Percentages</h3>
177215
<div class="bg-black-10 w-100">
178-
<div class="mw-100 bg-black-10 mb3">
179-
<code class="code">mw-100</code>
216+
<div class="mw-100 bg-black-10">
217+
<code class="code db pa2">mw-100</code>
180218
</div>
181219
</div>
182220
<div class="mt5 cf">

‎src/templates/docs/max-widths/index.html

+52-14
Original file line numberDiff line numberDiff line change
@@ -72,50 +72,88 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
7272
<table border="0" cellspacing="5" cellpadding="5">
7373
<tr>
7474
<td>
75-
<code class="code">.mw1</code>
75+
<code class="code mr2">.mw1</code>
7676
</td>
7777
<td>
78-
<div class="mw1 bg-black-10 pv2 oh">
78+
<div class="mw1 bg-black-10 pa2 mv1">
7979
Lorem
8080
</div>
8181
</td>
8282
</tr>
8383
<tr>
8484
<td>
85-
<code class="code">.mw2</code>
85+
<code class="code mr2">.mw2</code>
8686
</td>
8787
<td>
88-
<div class="mw2 bg-black-10 pv2 oh">
88+
<div class="mw2 bg-black-10 pa2 mv1">
8989
Lorem
9090
</div>
9191
</td>
9292
</tr>
9393
<tr>
9494
<td>
95-
<code class="code">.mw3</code>
95+
<code class="code mr2">.mw3</code>
9696
</td>
9797
<td>
98-
<div class="mw3 bg-black-10 pv2 oh">
98+
<div class="mw3 bg-black-10 pa2 mv1">
9999
Lorem ipsum dolor sit amet, consetetur sadipscing
100100
</div>
101101
</td>
102102
</tr>
103103
<tr>
104104
<td>
105-
<code class="code">.mw4</code>
105+
<code class="code mr2">.mw4</code>
106106
</td>
107107
<td>
108-
<div class="mw4 bg-black-10 pv2 oh">
108+
<div class="mw4 bg-black-10 pa2 mv1">
109109
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
110110
</div>
111111
</td>
112112
</tr>
113113
<tr>
114114
<td>
115-
<code class="code">.mw5</code>
115+
<code class="code mr2">.mw5</code>
116116
</td>
117117
<td>
118-
<div class="mw5 bg-black-10 pv2 oh">
118+
<div class="mw5 bg-black-10 pa2 mv1">
119+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
120+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
121+
vero eos et accusam et justo duo dolores et ea rebum.
122+
</div>
123+
</td>
124+
</tr>
125+
<tr>
126+
<td>
127+
<code class="code mr2">.mw6</code>
128+
</td>
129+
<td>
130+
<div class="mw6 bg-black-10 pa2 mv1">
131+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
132+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
133+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
134+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
135+
</div>
136+
</td>
137+
</tr>
138+
<tr>
139+
<td>
140+
<code class="code mr2">.mw7</code>
141+
</td>
142+
<td>
143+
<div class="mw7 bg-black-10 pa2 mv1">
144+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
145+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
146+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
147+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
148+
</div>
149+
</td>
150+
</tr>
151+
<tr>
152+
<td>
153+
<code class="code mr2">.mw8</code>
154+
</td>
155+
<td>
156+
<div class="mw8 bg-black-10 pa2 mv1">
119157
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
120158
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
121159
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -125,10 +163,10 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
125163
</tr>
126164
<tr>
127165
<td>
128-
<code class="code">.mw6</code>
166+
<code class="code mr2">.mw9</code>
129167
</td>
130168
<td>
131-
<div class="mw6 bg-black-10 pv2 oh">
169+
<div class="mw9 bg-black-10 pa2 mv1">
132170
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
133171
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
134172
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -139,8 +177,8 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
139177
</table>
140178
<h3 class="f5 book pt4 caps">Max Width Percentages</h3>
141179
<div class="bg-black-10 w-100">
142-
<div class="mw-100 bg-black-10 mb3">
143-
<code class="code">mw-100</code>
180+
<div class="mw-100 bg-black-10">
181+
<code class="code db pa2">mw-100</code>
144182
</div>
145183
</div>
146184
<div class="mt5 cf">

0 commit comments

Comments
 (0)