Skip to content

Commit 179d93b

Browse files
MattMcAdamsMattMcAdams
committed
Overhaul the html test page and form styles
1 parent 74365dc commit 179d93b

File tree

9 files changed

+1095
-926
lines changed

9 files changed

+1095
-926
lines changed

‎index.html‎

Lines changed: 674 additions & 327 deletions
Large diffs are not rendered by default.

‎layout.html‎

Lines changed: 68 additions & 211 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@
2626
text-align: center;
2727
}
2828

29+
.local_hero {
30+
background-color: var(--color_text--subtle);
31+
color: white;
32+
}
33+
2934
.local_element {
3035
background-color: var(--color_background--element);
3136
}
@@ -48,299 +53,151 @@
4853
</style>
4954

5055
<body>
51-
<div id="app">
52-
53-
<header class="local_top-header">
54-
<p>This is the top header</p>
55-
</header>
56-
56+
<div>
5757
<div class="layout--flow">
58-
<h2>Standard page with Layout and Widths</h2>
59-
<main id="main" class="page local_section">
60-
<header class="page_header layout--wide local_element">
61-
<p>This is a hero for a page using layout and widths (layout wide)</p>
62-
</header>
63-
<div class="page_content">
64-
<div class="layout--standard">
65-
<p>Layout standard</p>
66-
<div class="layout--standard">
67-
<p>Layout standard > Layout standard</p>
68-
</div>
69-
<div class="layout--wide">
70-
<p>Layout standard > Layout wide</p>
71-
</div>
72-
<div class="width--wide">
73-
<p>Layout standard > Width wide</p>
74-
</div>
75-
<div class="layout--standard width--wide">
76-
<p>Layout standard > Width wide -- Layout standard</p>
77-
</div>
78-
<div class="layout--wide width--wide">
79-
<p>Layout standard > Width wide -- Layout wide</p>
80-
</div>
81-
<div class="width--full">
82-
<p>Layout standard > Width full</p>
83-
</div>
84-
<div class="layout--standard width--full">
85-
<p>Layout standard > Width full -- Layout standard</p>
86-
</div>
87-
<div class="layout--wide width--full">
88-
<p>Layout standard > Width full -- Layout wide</p>
89-
</div>
90-
</div>
91-
<div class="layout--wide">
92-
<p>Layout Wide</p>
93-
<div class="layout--standard">
94-
<p>Layout wide > Layout standard</p>
95-
</div>
96-
<div class="layout--wide">
97-
<p>Layout wide > Layout wide</p>
98-
</div>
99-
<div class="width--wide">
100-
<p>Layout wide > Width wide</p>
101-
</div>
102-
<div class="width--standard layout--standard">
103-
<p>Layout wide > Width standard -- Layout standard</p>
104-
</div>
105-
<div class="layout--standard width--wide">
106-
<p>Layout wide > Width wide -- Layout standard</p>
107-
</div>
108-
<div class="layout--wide width--wide">
109-
<p>Layout wide > Width wide -- Layout wide</p>
110-
</div>
111-
<div class="width--full">
112-
<p>Layout wide > Width full</p>
113-
</div>
114-
<div class="layout--standard width--full">
115-
<p>Layout wide > Width full -- Layout standard</p>
116-
</div>
117-
<div class="layout--wide width--full">
118-
<p>Layout wide > Width full -- Layout wide</p>
119-
</div>
120-
</div>
121-
</div>
122-
<aside class="page_sidebar layout--standard local_element">
123-
<p>This is the sidebar</p>
124-
</aside>
125-
</main>
126-
127-
<hr class="local_divider">
128-
129-
<h2>Standard page with Containers</h2>
130-
131-
<main id="main" class="page local_section">
132-
<header class="page_header">
133-
<div class="container--wide local_element">
134-
<p>This is a hero for a page using containers (container wide)</p>
58+
<div class="page local_section">
59+
<header class="page__header">
60+
<div class="container--wide local_hero">
61+
<h2>Sidebar page with Containers</h2>
13562
</div>
13663
</header>
137-
<div class="page_content">
64+
<div class="page__content layout--flow">
13865
<div class="container local_element">
13966
<p>Container</p>
140-
<div class="container local_accent">
67+
<div class="container local_chip">
14168
<p>Container > Container</p>
14269
</div>
143-
<div class="container--wide local_chip">
70+
<div class="container--wide local_accent">
14471
<p>Container > Container wide</p>
14572
</div>
14673
<div class="container--full local_accent-alt">
14774
Container > Container full
14875
</div>
14976
</div>
150-
<div class="container--wide local_chip">
77+
<div class="container--wide local_element">
15178
<p>Container Wide</p>
152-
<div class="container">
79+
<div class="container local_chip">
15380
<p>Container wide > container</p>
15481
</div>
155-
<div class="container--wide">
82+
<div class="container--wide local_accent">
15683
<p>Container wide > container wide</p>
15784
</div>
158-
<div class="container--full">
85+
<div class="container--full local_accent-alt">
15986
<p>Container wide > container full</p>
16087
</div>
16188
</div>
162-
<div class="container--full local_accent">
89+
<div class="container--full local_element">
16390
<p>Container full</p>
164-
<div class="container">
91+
<div class="container local_chip">
16592
<p>Container full > container</p>
16693
</div>
167-
<div class="container--wide">
94+
<div class="container--wide local_accent">
16895
<p>Container full > container wide</p>
16996
</div>
170-
<div class="container--full">
97+
<div class="container--full local_accent-alt">
17198
<p>Container full > container full</p>
17299
</div>
173100
</div>
174101
</div>
175-
<aside class="page_sidebar local_element">
102+
<aside class="page__sidebar local_element">
176103
<div class="container local_chip">
177104
<p>This is the sidebar</p>
178105
</div>
179106
</aside>
180-
</main>
181-
182-
<hr class="local_divider">
183-
184-
<h2>No Sidebar Page with Layouts and Widths</h2>
185-
186-
<main id="main" class="page local_section">
187-
<header class="page_header layout--wide local_element">
188-
<p>This is a hero for a page using layout and widths (layout wide)</p>
189-
</header>
190-
<div class="page_content">
191-
<div class="layout--standard">
192-
<p>Layout standard</p>
193-
<div class="layout--standard">
194-
<p>Layout standard > Layout standard</p>
195-
</div>
196-
<div class="layout--wide">
197-
<p>Layout standard > Layout wide</p>
198-
</div>
199-
<div class="width--wide">
200-
<p>Layout standard > Width wide</p>
201-
</div>
202-
<div class="layout--standard width--wide">
203-
<p>Layout standard > Width wide -- Layout standard</p>
204-
</div>
205-
<div class="layout--wide width--wide">
206-
<p>Layout standard > Width wide -- Layout wide</p>
207-
</div>
208-
<div class="width--full">
209-
<p>Layout standard > Width full</p>
210-
</div>
211-
<div class="layout--standard width--full">
212-
<p>Layout standard > Width full -- Layout standard</p>
213-
</div>
214-
<div class="layout--wide width--full">
215-
<p>Layout standard > Width full -- Layout wide</p>
216-
</div>
217-
</div>
218-
<div class="layout--wide">
219-
<p>Layout Wide</p>
220-
<div class="layout--standard">
221-
<p>Layout wide > Layout standard</p>
222-
</div>
223-
<div class="layout--wide">
224-
<p>Layout wide > Layout wide</p>
225-
</div>
226-
<div class="width--wide">
227-
<p>Layout wide > Width wide</p>
228-
</div>
229-
<div class="width--standard layout--standard">
230-
<p>Layout wide > Width standard -- Layout standard</p>
231-
</div>
232-
<div class="layout--standard width--wide">
233-
<p>Layout wide > Width wide -- Layout standard</p>
234-
</div>
235-
<div class="layout--wide width--wide">
236-
<p>Layout wide > Width wide -- Layout wide</p>
237-
</div>
238-
<div class="width--full">
239-
<p>Layout wide > Width full</p>
240-
</div>
241-
<div class="layout--standard width--full">
242-
<p>Layout wide > Width full -- Layout standard</p>
243-
</div>
244-
<div class="layout--wide width--full">
245-
<p>Layout wide > Width full -- Layout wide</p>
246-
</div>
247-
</div>
248-
</div>
249-
</main>
107+
</div>
250108

251109
<hr class="local_divider">
252110

253-
<h2>No Sidebar Page with Containers</h2>
254-
255-
<main id="main" class="page local_section">
256-
<header class="page_header">
257-
<div class="container--wide local_element">
258-
<p>This is a hero for a page using containers (container wide)</p>
111+
<div class="page local_section section">
112+
<header class="page__header local_hero">
113+
<div class="container--wide">
114+
<h2>Standard page with containers</h2>
259115
</div>
260116
</header>
261-
<div class="page_content">
117+
<div class="page__content layout--flow">
262118
<div class="container local_element">
263119
<p>Container</p>
264-
<div class="container local_accent">
120+
<div class="container local_chip">
265121
<p>Container > Container</p>
266122
</div>
267-
<div class="container--wide local_chip">
123+
<div class="container--wide local_accent">
268124
<p>Container > Container wide</p>
269125
</div>
270126
<div class="container--full local_accent-alt">
271127
Container > Container full
272128
</div>
273129
</div>
274-
<div class="container--wide local_chip">
130+
<div class="container--wide local_element">
275131
<p>Container Wide</p>
276-
<div class="container">
132+
<div class="container local_chip">
277133
<p>Container wide > container</p>
278134
</div>
279-
<div class="container--wide">
135+
<div class="container--wide local_accent">
280136
<p>Container wide > container wide</p>
281137
</div>
282-
<div class="container--full">
138+
<div class="container--full local_accent-alt">
283139
<p>Container wide > container full</p>
284140
</div>
285141
</div>
286-
<div class="container--full local_accent">
142+
<div class="container--full local_element">
287143
<p>Container full</p>
288-
<div class="container">
144+
<div class="container local_chip">
289145
<p>Container full > container</p>
290146
</div>
291-
<div class="container--wide">
147+
<div class="container--wide local_accent">
292148
<p>Container full > container wide</p>
293149
</div>
294-
<div class="container--full">
150+
<div class="container--full local_accent-alt">
295151
<p>Container full > container full</p>
296152
</div>
297153
</div>
298154
</div>
299-
</main>
300-
301-
<hr class="local_divider">
302-
303-
<h2>Layouts</h2>
304-
305-
<div class="layout--wide local_element">
306-
<p>Layout wide</p>
307-
<div class="layout--standard width--wide local_chip">
308-
<p>Layout standard -- width wide</p>
309-
</div>
310-
<div class="layout--wide width--full local_accent">
311-
<p>Layout wide > Layout wide -- Width full</p>
312-
</div>
313-
<div class="layout--standard local_chip">
314-
<p>Layout wide > Layout standard</p>
315-
</div>
316155
</div>
317156

318157
<hr class="local_divider">
319158

320-
<h2>Containers</h2>
159+
<div class="container--wide local_hero section">
160+
<h2>Containers</h2>
161+
</div>
321162

322163
<div class="container local_element">
323164
<p>Container</p>
165+
<div class="container local_chip">
166+
<p>Container > Container</p>
167+
</div>
324168
<div class="container--wide local_accent">
325169
<p>Container > Container wide</p>
326170
</div>
327171
<div class="container--full local_accent-alt">
328172
Container > Container full
329173
</div>
330174
</div>
331-
332-
</div>
333-
334-
<footer class="local_footer">
335-
<div class="layout--wide">
336-
<p>
337-
This is the bottom footer
338-
</p>
175+
<div class="container--wide local_element">
176+
<p>Container Wide</p>
177+
<div class="container local_chip">
178+
<p>Container wide > container</p>
179+
</div>
180+
<div class="container--wide local_accent">
181+
<p>Container wide > container wide</p>
182+
</div>
183+
<div class="container--full local_accent-alt">
184+
<p>Container wide > container full</p>
185+
</div>
339186
</div>
340-
</footer>
341-
187+
<div class="container--full local_element">
188+
<p>Container full</p>
189+
<div class="container local_chip">
190+
<p>Container full > container</p>
191+
</div>
192+
<div class="container--wide local_accent">
193+
<p>Container full > container wide</p>
194+
</div>
195+
<div class="container--full local_accent-alt">
196+
<p>Container full > container full</p>
197+
</div>
198+
</div>
199+
</div>
342200
</div>
343-
344201
</body>
345202

346203
</html>

0 commit comments

Comments
 (0)