🥳
58 |
59 |
60 | Potion
61 |` to make it scroll horizontally on narrower screens:
69 |
70 | ```HTML
71 | Potion
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
53 |
114 |
138 |
139 |
140 |
141 |
--------------------------------------------------------------------------------
/potion.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | box-sizing: border-box;
5 | line-height: 1.5;
6 | backface-visibility: hidden;
7 | }
8 |
9 | :root {
10 | font-variant-ligatures: common-ligatures;
11 | text-rendering: optimizeLegibility;
12 | font-smoothing: antialiased;
13 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
14 | }
15 |
16 | button,
17 | input,
18 | textarea,
19 | label {
20 | cursor: pointer;
21 | }
22 |
23 | [hidden] {
24 | display: none;
25 | }
26 |
27 | ::selection {
28 | background: rgba(45, 170, 219, 0.3);
29 | }
30 |
31 | body {
32 | margin: 0;
33 | padding-top: 108px;
34 | color: rgb(55, 53, 47);
35 | font-size: 16px;
36 | padding-bottom: 30vh;
37 | }
38 |
39 | body > :not(table):not(blockquote):not(img):not(pre):not(main),
40 | main > :not(table):not(blockquote):not(img):not(pre) {
41 | padding-left: 16px;
42 | padding-right: 16px;
43 | margin: 0 auto;
44 | max-width: 708px;
45 | }
46 |
47 | header .icon {
48 | display: inline-block;
49 | content: attr(data-icon);
50 | font-size: 78px;
51 | }
52 |
53 | header .background {
54 | height: 250px;
55 | position: absolute;
56 | top: 0;
57 | left: 0;
58 | right: 0;
59 | z-index: -1;
60 | }
61 |
62 | header .background + .icon {
63 | margin-top: 84px;
64 | }
65 |
66 | header .background + h1 {
67 | margin-top: 175px;
68 | }
69 |
70 | h1 {
71 | margin: 0 auto;
72 | font-weight: 600;
73 | font-size: 1.875em;
74 | line-height: 1.3;
75 | padding-top: 2em;
76 | padding-bottom: 7px;
77 | }
78 |
79 | header h1 {
80 | margin: 0 auto;
81 | font-weight: 700;
82 | line-height: 1.2;
83 | font-size: 40px;
84 | padding-bottom: 23px;
85 | padding-top: 20px;
86 | }
87 |
88 | h2 {
89 | margin: 0 auto;
90 | font-weight: 600;
91 | font-size: 1.5em;
92 | line-height: 1.3;
93 | padding-top: 1.4em;
94 | padding-bottom: 4px;
95 | }
96 |
97 | h3 {
98 | margin: 0 auto;
99 | font-weight: 600;
100 | font-size: 1.25em;
101 | line-height: 1.3;
102 | padding-top: 1em;
103 | padding-bottom: 4px;
104 | }
105 |
106 | p {
107 | word-break: break-word;
108 | padding-top: 3px;
109 | padding-bottom: 3px;
110 | margin-block-start: 0;
111 | margin-block-end: 0;
112 | margin-top: 2px !important;
113 | margin-bottom: 2px !important;
114 | }
115 |
116 | blockquote {
117 | border-left: 3px solid;
118 | padding-left: 13px;
119 | padding-right: 0.9em;
120 | margin-top: 8px;
121 | margin-bottom: 4px;
122 | font-size: 1.2em;
123 | line-height: 1.5;
124 | margin-left: auto;
125 | margin-right: auto;
126 | max-width: 676px;
127 | }
128 |
129 | ol {
130 | list-style-position: inside;
131 | padding-left: 22px !important;
132 | }
133 |
134 | ul {
135 | list-style-position: inside;
136 | padding-left: 25px !important;
137 | }
138 |
139 | li {
140 | padding-top: 3px;
141 | padding-bottom: 3px;
142 | }
143 |
144 | li::before {
145 | content: '';
146 | display: inline;
147 | padding-left: 5px;
148 | }
149 |
150 | hr {
151 | border: none;
152 | padding: 2px 0;
153 | padding-top: 7px;
154 | border-bottom: 1px solid rgba(55, 53, 47, 0.09);
155 | max-width: 676px !important;
156 | }
157 |
158 | .table-wrapper {
159 | -webkit-overflow-scrolling: touch;
160 | overflow-y: scroll;
161 | }
162 |
163 | table {
164 | min-width: 100%;
165 | font-size: 14px;
166 | border-collapse: collapse;
167 | margin-top: 4px;
168 | border-top: 1px solid rgba(55, 53, 47, 0.16);
169 | overflow-y: auto;
170 | margin-bottom: 38px;
171 | }
172 |
173 | table caption {
174 | text-align: left;
175 | font-weight: 600;
176 | font-size: 20px;
177 | line-height: 1.2;
178 | padding-top: 6px;
179 | padding-bottom: 9px;
180 | }
181 |
182 | td {
183 | border-bottom: 1px solid rgba(55, 53, 47, 0.16);
184 | padding: 5px 8px 6px;
185 | min-width: 100px;
186 | }
187 |
188 | td:not(:last-child) {
189 | border-right: 1px solid rgba(55, 53, 47, 0.16);
190 | }
191 |
192 | th {
193 | text-align: left;
194 | border-bottom: 1px solid rgba(55, 53, 47, 0.16);
195 | padding: 5px 8px 6px;
196 | font-weight: normal;
197 | color: rgba(55, 53, 47, 0.6);
198 | min-width: 100px;
199 | }
200 |
201 | th:not(:last-child) {
202 | border-right: 1px solid rgba(55, 53, 47, 0.16);
203 | }
204 |
205 | td > [class^='b-'],
206 | th > [class^='b-'] {
207 | line-height: 1.5;
208 | border-radius: 3px;
209 | padding: 0.1em 0.4em;
210 | white-space: nowrap;
211 | }
212 |
213 | code {
214 | font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
215 | line-height: normal;
216 | background: rgba(135,131,120,0.15);
217 | color: #EB5757;
218 | border-radius: 3px;
219 | font-size: 85%;
220 | padding: 0.2em 0.4em;
221 | }
222 |
223 | pre {
224 | font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
225 | line-height: normal;
226 | border-radius: 3px;
227 | font-size: 85%;
228 | padding: 30px 16px;
229 | margin: 16px auto;
230 | max-width: 676px;
231 | background: rgb(247, 246, 243) none repeat scroll 0% 0%;
232 | }
233 |
234 | a {
235 | color: inherit;
236 | opacity: 0.7;
237 | transition: opacity 100ms ease-in;
238 | text-decoration: none;
239 | background: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1" height="1"%3E%3Crect x="0" y="0" width="1" height="0.3" fill="rgb(55, 53, 47)"/%3E%3C/svg%3E') left bottom repeat-x;
240 | }
241 |
242 | a:hover {
243 | opacity: 1;
244 | }
245 |
246 | img {
247 | display: block;
248 | margin: 0.5em auto;
249 | height: auto;
250 | padding-left: 16px;
251 | padding-right: 16px;
252 | max-width: 100%;
253 | }
254 |
255 | .c-gray {
256 | color: rgba(55, 53, 47, 0.6);
257 | }
258 |
259 | .b-gray {
260 | background: rgb(235, 236, 237) none repeat scroll 0% 0%;
261 | }
262 |
263 | .c-brown {
264 | color: rgb(100, 71, 58);
265 | }
266 |
267 | .b-brown {
268 | background: rgb(233, 229, 227) none repeat scroll 0% 0%;
269 | }
270 |
271 | .c-orange {
272 | color: rgb(217, 115, 13);
273 | }
274 |
275 | .b-orange {
276 | background: rgb(250, 235, 221) none repeat scroll 0% 0%;
277 | }
278 |
279 | .c-yellow {
280 | color: rgb(223, 171, 1);
281 | }
282 |
283 | .b-yellow {
284 | background: rgb(251, 243, 219) none repeat scroll 0% 0%;
285 | }
286 |
287 | .c-green {
288 | color: rgb(15, 123, 108);
289 | }
290 |
291 | .b-green {
292 | background: rgb(221, 237, 234) none repeat scroll 0% 0%;
293 | }
294 |
295 | .c-blue {
296 | color: rgb(11, 110, 153);
297 | }
298 |
299 | .b-blue {
300 | background: rgb(221, 235, 241) none repeat scroll 0% 0%;
301 | }
302 |
303 | .c-purple {
304 | color: rgb(105, 64, 165);
305 | }
306 |
307 | .b-purple {
308 | background: rgb(234, 228, 242) none repeat scroll 0% 0%;
309 | }
310 |
311 | .c-pink {
312 | color: rgb(173, 26, 114);
313 | }
314 |
315 | .b-pink {
316 | background: rgb(244, 223, 235) none repeat scroll 0% 0%;
317 | }
318 |
319 | .c-red {
320 | color: rgb(224, 62, 62);
321 | }
322 |
323 | .b-red {
324 | background: rgb(251, 228, 228) none repeat scroll 0% 0%;
325 | }
326 |
327 |
--------------------------------------------------------------------------------
72 |
73 | ...
74 |
75 |
76 | ```
77 |
78 | ### Colors
79 |
80 | Original colors are supported:
81 |
82 | - Gray
83 | - Brown
84 | - Orange
85 | - Yellow
86 | - Green
87 | - Blue
88 | - Purple
89 | - Pink
90 | - Red
91 |
92 | You can color everything from spans and paragraphs to table cells. Colors are available for both the backgrounds and the text.
93 |
94 | ```HTML
95 |
96 | Yellow text
97 |Standard text on purple background
98 |Blue text on red background
99 | 100 | ``` 101 | 102 | You may always refer to the demo page HTML as a guide of how to use Potion. It's really easy. 103 | 104 | Enjoy! 105 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |🥳
18 | Potion
19 |This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS 22 | systems and frameworks.
23 |Text
24 |Heading 1
25 |Heading 2
26 |Heading 3
27 |28 | A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. 29 |
30 |31 | A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. 32 |
33 |34 | A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. 35 |
36 |37 | A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text. It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom. 38 |39 | 40 |
Ordered List
41 |-
42 |
- List Item 1 43 |
- List Item 2 44 |
- List Item 3 45 |
Unordered List
47 |-
48 |
- List Item 1 49 |
- List Item 2 50 |
- List Item 3 51 |
53 |
Tabular data
54 |
55 |
56 |
100 |
101 | | Table Heading 1 | 60 |Table Heading 2 | 61 |Table Heading 3 | 62 |Table Heading 4 | 63 |Table Heading 5 | 64 |
|---|---|---|---|---|
| Table Cell 1 | 69 |Table Cell 2 | 70 |Table Cell 3 | 71 |Table Cell 4 | 72 |Table Cell 5 | 73 |
| Table Cell 1 | 76 |Table Cell 2 | 77 |Table Cell 3 | 78 |Table Cell 4 | 79 |80 | label 81 | another label 82 | | 83 |
| Table Cell 1 | 86 |Table Cell 2 | 87 |Table Cell 3 | 88 |Table Cell 4 | 89 |Table Cell 5 | 90 |
| Table Cell 1 | 93 |Table Cell 2 | 94 |Table Cell 3 | 95 |Table Cell 4 | 96 |Table Cell 5 | 97 |
Code
102 |Inline code: <div>code</div>
a block of code104 |
Inline elements
105 | 106 | 107 |Strong is used to indicate strong importance.
108 |This text has added emphasis.
109 |The b element is stylistically different text from normal text, without any special 110 | importance.
111 |This text is deleted.
Images
113 |Colors
115 | 116 |Gray text
117 |Brown text
118 |Orange text
119 |Yellow text
120 |Green text
121 |Blue text
122 |Purple text
123 |Pink text
124 |Red text
125 | 126 |Gray background
127 |Brown background
128 |Orange background
129 |Yellow background
130 |Green background
131 |Blue background
132 |Purple background
133 |Pink background
134 |Red background
135 | 136 |Combinations
137 |