- commit
- 6c2b0c21d7f33dec4d7f3cdc831c417ceeefb933
- parent
- 1c9c82d7543147c5c83f831c9a111c7b06cf516c
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2024-04-04 21:57
refactor styleguide
Diffstat
| M | examples/styleguide.css | 81 | ++++++++++++++++++++++++++++++++++++------------------------- |
| M | examples/styleguide.html | 582 | ++++++++++++++++++++++++++++--------------------------------- |
2 files changed, 318 insertions, 345 deletions
diff --git a/examples/styleguide.css b/examples/styleguide.css
@@ -1,42 +1,57 @@1 -1 body {2 -1 max-inline-size: 60em;3 -1 margin-block: 0;4 -1 margin-inline: auto;5 -1 padding: 0.5em;6 -1 }7 -1 main {8 -1 inline-size: 66%;9 -1 }10 -1 .page-nav {11 -1 inline-size: 30%;12 -1 float: right;-1 1 :root { -1 2 scroll-behavior: smooth; -1 3 scroll-padding-block: var(--spacer); -1 4 --width: 60em; -1 5 --padding: 1em; 13 6 } -1 7 14 8 .page-nav ul {15 -1 list-style: none;16 -1 text-align: end;17 -1 position: fixed;18 -1 top: 0;19 -1 padding: 1em;20 -1 padding-inline-start: 0;21 -1 max-block-size: 100vb;22 -1 overflow-block: auto;-1 9 list-style: none; -1 10 text-align: end; -1 11 padding: 0; 23 12 } -1 13 24 14 .example {25 -1 border: 2px solid silver;26 -1 padding: 0.5em;27 -1 margin-block-end: 2em;28 -1 border-radius: 0.5em;-1 15 border: 1px solid var(--color-border); -1 16 padding: var(--padding); -1 17 margin-block-end: 2em; -1 18 border-radius: 0.5em; 29 19 } -1 20 30 21 .example--code {31 -1 border-end-start-radius: 0;32 -1 border-end-end-radius: 0;33 -1 margin-block-end: 0;-1 22 border-end-start-radius: 0; -1 23 border-end-end-radius: 0; -1 24 margin-block-end: 0; 34 25 } -1 26 35 27 pre.example-code {36 -1 border: 2px solid silver;37 -1 border-block-start: 0;38 -1 border-end-start-radius: 1em;39 -1 border-end-end-radius: 1em;40 -1 margin-block: 0 2em;41 -1 padding: 0.5em;-1 28 border: 1px solid var(--color-border); -1 29 border-block-start: 0; -1 30 margin-block: 0 2em; -1 31 } -1 32 -1 33 @media (min-width: 40em) { -1 34 body { -1 35 display: grid; -1 36 grid-template-columns: 66% 33%; -1 37 gap: var(--padding); -1 38 } -1 39 -1 40 main { -1 41 grid-column: 1; -1 42 grid-row: 1; -1 43 } -1 44 -1 45 .page-nav { -1 46 grid-column: 2; -1 47 grid-row: 1; -1 48 } -1 49 -1 50 .page-nav ul { -1 51 position: sticky; -1 52 inset-block: var(--spacer); -1 53 margin-block: var(--spacer); -1 54 max-block-size: 100vb; -1 55 overflow: auto; -1 56 } 42 57 }
diff --git a/examples/styleguide.html b/examples/styleguide.html
@@ -1,112 +1,112 @@1 -1 <link rel="stylesheet" href="example.css"/>2 -1 <link rel="stylesheet" href="styleguide.css"/>3 -14 -1 <!-- class to trigger github markdown styles -->-1 1 <!DOCTYPE html> -1 2 <html> -1 3 <head> -1 4 <title>mfbs style guide</title> -1 5 <link rel="stylesheet" href="example.css"/> -1 6 <link rel="stylesheet" href="styleguide.css"/> -1 7 </head> 5 8 <body class="markdown-body">6 -17 -1 <nav class="page-nav">8 -1 <ul>9 -1 <li><a href="#headings-and-paragraphs">Headings and paragraphs</a></li>10 -1 <li><a href="#links">Links</a></li>11 -1 <li><a href="#lists">Lists</a></li>12 -1 <li><a href="#forms">Forms</a></li>13 -1 <li><a href="#buttons">Buttons</a></li>14 -1 <li><a href="#tables">Tables</a></li>15 -1 <li><a href="#blockquotes">Blockquotes</a></li>16 -1 <li><a href="#preformatted-text">Preformatted Text</a></li>17 -1 <li><a href="#inline-code">Inline Code</a></li>18 -1 <li><a href="#emphasis">Emphasis</a></li>19 -1 <li><a href="#address">Address</a></li>20 -1 <li><a href="#misc">Misc</a></li>21 -1 </ul>22 -1 </nav>23 -124 -1 <main>25 -1 <h2 id="headings-and-paragraphs">Headings and paragraphs</h2>26 -127 -1 <div class="example">28 -1 <h1 id="h1-heading">h1 heading</h1>29 -1 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>30 -1 <h2 id="h2-heading">h2 heading</h2>31 -1 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>32 -1 <h3 id="h3-heading">h3 heading</h3>33 -1 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>34 -1 <h4 id="h4-heading">h4 heading</h4>35 -1 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>36 -1 <h5 id="h5-heading">h5 heading</h5>37 -1 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>38 -1 <h6 id="h6-heading">h6 heading</h6>39 -1 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>40 -1 </div>41 -142 -1 <h2 id="links">Links</h2>43 -144 -1 <div class="example">-1 9 <nav class="page-nav"> 45 10 <ul>46 -1 <li><a>without href</a></li>47 -1 <li><a href="#">internal link</a></li>48 -1 <li><a href="#" rel="external">external link</a></li>-1 11 <li><a href="#headings-and-paragraphs">Headings and paragraphs</a></li> -1 12 <li><a href="#links">Links</a></li> -1 13 <li><a href="#lists">Lists</a></li> -1 14 <li><a href="#forms">Forms</a></li> -1 15 <li><a href="#buttons">Buttons</a></li> -1 16 <li><a href="#tables">Tables</a></li> -1 17 <li><a href="#blockquotes">Blockquotes</a></li> -1 18 <li><a href="#preformatted-text">Preformatted Text</a></li> -1 19 <li><a href="#inline-code">Inline Code</a></li> -1 20 <li><a href="#emphasis">Emphasis</a></li> -1 21 <li><a href="#address">Address</a></li> -1 22 <li><a href="#misc">Misc</a></li> 49 23 </ul>50 -1 </div>51 -152 -1 <h2 id="lists">Lists</h2>53 -154 -1 <div class="example">55 -1 <ul>56 -1 <li>Lorem ipsum dolor sit amet</li>57 -1 <li>Consectetur adipiscing elit</li>58 -1 <li>Integer molestie lorem at massa</li>59 -1 <li>Facilisis in pretium nisl aliquet</li>60 -1 <li>Nulla volutpat aliquam velit61 -1 <ul>62 -1 <li>Phasellus iaculis neque</li>63 -1 <li>Purus sodales ultricies</li>64 -1 <li>Vestibulum laoreet porttitor sem</li>65 -1 <li>Ac tristique libero volutpat at</li>66 -1 </ul>67 -1 </li>68 -1 <li>Faucibus porta lacus fringilla vel69 -1 <li>Lorem ipsum dolor sit amet</li>70 -1 <li>71 -1 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>72 -1 </li>73 -1 <li>74 -1 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>75 -1 <ul>76 -1 <li>Phasellus iaculis neque</li>77 -1 <li>Purus sodales ultricies</li>78 -1 <li>Vestibulum laoreet porttitor sem</li>79 -1 <li>Ac tristique libero volutpat at</li>80 -1 </ul>81 -1 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>82 -1 <li>Eget porttitor lorem</li>83 -1 </ul>84 -1 <ol>85 -1 <li>Lorem ipsum dolor sit amet</li>86 -1 <li>Consectetur adipiscing elit</li>87 -1 <li>Integer molestie lorem at massa</li>88 -1 <li>Facilisis in pretium nisl aliquet</li>89 -1 <li>Nulla volutpat aliquam velit</li>90 -1 <li>Faucibus porta lacus fringilla vel</li>91 -1 <li>Aenean sit amet erat nunc</li>92 -1 <li>Eget porttitor lorem</li>93 -1 </ol>94 -1 <dl>95 -1 <dt>Description lists</dt>96 -1 <dd>A description list is perfect for defining terms.</dd>97 -1 <dt>Euismod</dt>98 -1 <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>99 -1 <dd>Donec id elit non mi porta gravida at eget metus.</dd>100 -1 <dt>Malesuada porta</dt>101 -1 <dd>Etiam porta sem malesuada magna mollis euismod.</dd>102 -1 </dl>103 -1 </div>104 -1105 -1 <h2 id="forms">Forms</h2>106 -1107 -1 <form class="example">108 -1 <fieldset>109 -1 <legend>Example legend</legend>-1 24 </nav> -1 25 -1 26 <main> -1 27 <h2 id="headings-and-paragraphs">Headings and paragraphs</h2> -1 28 -1 29 <div class="example"> -1 30 <h1 id="h1-heading">h1 heading</h1> -1 31 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> -1 32 <h2 id="h2-heading">h2 heading</h2> -1 33 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> -1 34 <h3 id="h3-heading">h3 heading</h3> -1 35 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> -1 36 <h4 id="h4-heading">h4 heading</h4> -1 37 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> -1 38 <h5 id="h5-heading">h5 heading</h5> -1 39 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> -1 40 <h6 id="h6-heading">h6 heading</h6> -1 41 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> -1 42 </div> -1 43 -1 44 <h2 id="links">Links</h2> -1 45 -1 46 <div class="example"> -1 47 <ul> -1 48 <li><a>without href</a></li> -1 49 <li><a href="#">internal link</a></li> -1 50 <li><a href="#" rel="external">external link</a></li> -1 51 </ul> -1 52 </div> -1 53 -1 54 <h2 id="lists">Lists</h2> -1 55 -1 56 <div class="example"> -1 57 <ul> -1 58 <li>Lorem ipsum dolor sit amet</li> -1 59 <li>Consectetur adipiscing elit</li> -1 60 <li>Integer molestie lorem at massa</li> -1 61 <li>Facilisis in pretium nisl aliquet</li> -1 62 <li>Nulla volutpat aliquam velit -1 63 <ul> -1 64 <li>Phasellus iaculis neque</li> -1 65 <li>Purus sodales ultricies</li> -1 66 <li>Vestibulum laoreet porttitor sem</li> -1 67 <li>Ac tristique libero volutpat at</li> -1 68 </ul> -1 69 </li> -1 70 <li>Faucibus porta lacus fringilla vel -1 71 <li>Lorem ipsum dolor sit amet</li> -1 72 <li> -1 73 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> -1 74 </li> -1 75 <li> -1 76 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> -1 77 <ul> -1 78 <li>Phasellus iaculis neque</li> -1 79 <li>Purus sodales ultricies</li> -1 80 <li>Vestibulum laoreet porttitor sem</li> -1 81 <li>Ac tristique libero volutpat at</li> -1 82 </ul> -1 83 <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> -1 84 <li>Eget porttitor lorem</li> -1 85 </ul> -1 86 <ol> -1 87 <li>Lorem ipsum dolor sit amet</li> -1 88 <li>Consectetur adipiscing elit</li> -1 89 <li>Integer molestie lorem at massa</li> -1 90 <li>Facilisis in pretium nisl aliquet</li> -1 91 <li>Nulla volutpat aliquam velit</li> -1 92 <li>Faucibus porta lacus fringilla vel</li> -1 93 <li>Aenean sit amet erat nunc</li> -1 94 <li>Eget porttitor lorem</li> -1 95 </ol> -1 96 <dl> -1 97 <dt>Description lists</dt> -1 98 <dd>A description list is perfect for defining terms.</dd> -1 99 <dt>Euismod</dt> -1 100 <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd> -1 101 <dd>Donec id elit non mi porta gravida at eget metus.</dd> -1 102 <dt>Malesuada porta</dt> -1 103 <dd>Etiam porta sem malesuada magna mollis euismod.</dd> -1 104 </dl> -1 105 </div> -1 106 -1 107 <h2 id="forms">Forms</h2> -1 108 -1 109 <form class="example"> 110 110 <p> 111 111 <label for="input">Example input</label> 112 112 <input type="text" id="input" value="asd" placeholder="Example input"> @@ -179,84 +179,83 @@ 179 179 <label for="output">Example output</label> 180 180 <output name="result" id="output">100</output> 181 181 </p>182 -1 </fieldset>183 -1 </form>184 -1185 -1 <h2 id="buttons">Buttons</h2>186 -1187 -1 <div class="example">188 -1 <p>189 -1 <button type="submit">Button submit</button>190 -1 <input type="submit" value="Input submit button">191 -1 <input type="button" value="Input button">192 -1 </p>193 -1194 -1 <h3>disabled</h3>195 -1 <p>196 -1 <button type="submit" disabled="">Button submit</button>197 -1 <input type="submit" value="Input submit button" disabled="">198 -1 <input type="button" value="Input button" disabled="">199 -1 </p>200 -1 </div>201 -1202 -1 <h2 id="tables">Tables</h2>203 -1204 -1 <div class="example">205 -1 <table>206 -1 <caption>207 -1 This is an example table, and this is its caption to describe the contents.208 -1 </caption>209 -1 <thead>210 -1 <tr>211 -1 <th>Table heading</th>212 -1 <th>Table heading</th>213 -1 <th>Table heading</th>214 -1 <th>Table heading</th>215 -1 </tr>216 -1 </thead>217 -1 <tbody>218 -1 <tr>219 -1 <td>Table cell</td>220 -1 <td>Table cell</td>221 -1 <td>Table cell</td>222 -1 <td>Table cell</td>223 -1 </tr>224 -1 <tr>225 -1 <td>Table cell</td>226 -1 <td>Table cell</td>227 -1 <td>Table cell</td>228 -1 <td>Table cell</td>229 -1 </tr>230 -1 <tr>231 -1 <td>Table cell</td>232 -1 <td>Table cell</td>233 -1 <td>Table cell</td>234 -1 <td>Table cell</td>235 -1 </tr>236 -1 </tbody>237 -1 </table>238 -1 </div>239 -1240 -1 <h2 id="blockquotes">Blockquotes</h2>241 -1242 -1 <div class="example">243 -1 <blockquote>244 -1 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>245 -1 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>246 -1 </blockquote>247 -1 </div>248 -1249 -1 <h2 id="preformatted-text">Preformatted text</h2>250 -1251 -1 <div class="example example--code">252 -1 <pre><p>Sample text here...</p></pre>253 -1 <pre><code><p>Sample text here...</p></code></pre>254 -1 </div>255 -1 <pre class="example-code"><code><pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>256 -1 <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;</code></pre></code></pre>257 -1258 -1 <div class="example">259 -1 <pre>.example-element {-1 182 </form> -1 183 -1 184 <h2 id="buttons">Buttons</h2> -1 185 -1 186 <div class="example"> -1 187 <p> -1 188 <button type="submit">Button submit</button> -1 189 <input type="submit" value="Input submit button"> -1 190 <input type="button" value="Input button"> -1 191 </p> -1 192 -1 193 <h3>disabled</h3> -1 194 <p> -1 195 <button type="submit" disabled="">Button submit</button> -1 196 <input type="submit" value="Input submit button" disabled=""> -1 197 <input type="button" value="Input button" disabled=""> -1 198 </p> -1 199 </div> -1 200 -1 201 <h2 id="tables">Tables</h2> -1 202 -1 203 <div class="example"> -1 204 <table> -1 205 <caption> -1 206 This is an example table, and this is its caption to describe the contents. -1 207 </caption> -1 208 <thead> -1 209 <tr> -1 210 <th>Table heading</th> -1 211 <th>Table heading</th> -1 212 <th>Table heading</th> -1 213 <th>Table heading</th> -1 214 </tr> -1 215 </thead> -1 216 <tbody> -1 217 <tr> -1 218 <td>Table cell</td> -1 219 <td>Table cell</td> -1 220 <td>Table cell</td> -1 221 <td>Table cell</td> -1 222 </tr> -1 223 <tr> -1 224 <td>Table cell</td> -1 225 <td>Table cell</td> -1 226 <td>Table cell</td> -1 227 <td>Table cell</td> -1 228 </tr> -1 229 <tr> -1 230 <td>Table cell</td> -1 231 <td>Table cell</td> -1 232 <td>Table cell</td> -1 233 <td>Table cell</td> -1 234 </tr> -1 235 </tbody> -1 236 </table> -1 237 </div> -1 238 -1 239 <h2 id="blockquotes">Blockquotes</h2> -1 240 -1 241 <div class="example"> -1 242 <blockquote> -1 243 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> -1 244 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> -1 245 </blockquote> -1 246 </div> -1 247 -1 248 <h2 id="preformatted-text">Preformatted text</h2> -1 249 -1 250 <div class="example example--code"> -1 251 <pre><p>Sample text here...</p></pre> -1 252 <pre><code><p>Sample text here...</p></code></pre> -1 253 </div> -1 254 <pre class="example-code"><code><pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre> -1 255 <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;</code></pre></code></pre> -1 256 -1 257 <div class="example"> -1 258 <pre>.example-element { 260 259 margin-bottom: 1rem; 261 260 } 262 261 .example-element { @@ -295,150 +294,109 @@ 295 294 .example-element { 296 295 margin-bottom: 1rem; 297 296 }</pre>298 -1 </div>299 -1300 -1 <h2 id="inline-code">Inline Code</h2>301 -1302 -1 <div class="example example--code">303 -1 For example, <code><section></code> should be wrapped as inline.304 -1 </div>305 -1 <pre class="example-code"><code>For example, <span class="nt"><code></span><span class="ni">&lt;</span>section<span class="ni">&gt;</span><span class="nt"></code></span> should be wrapped as inline.</code></pre>306 -1307 -1 <div class="example">308 -1 <ul>309 -1 <li><code>code on its own</code></li>310 -1 <li><a href="#">link on its own</a></li>311 -1 <li><a href="#"><code>code in link</code></a></li>312 -1 <li><code><a href="#">link in code</a></code></li>313 -1 <li><a href="#"><code>code</code> in link</a></li>314 -1 <li><code><a href="#">link</a> in code</code></li>315 -1 </ul>316 -1 </div>317 -1318 -1 <h2 id="emphasis">Emphasis</h2>319 -1320 -1 <div class="example example--code">321 -1 <em>Example Text</em><br/>322 -1 <strong>Example Text</strong><br/>323 -1 <strong><em>Example Text</em></strong><br/>324 -1 <em><strong>Example Text</strong></em><br/>325 -1 <mark>Example Text</mark><br/>326 -1 </div>327 -1 <pre class="example-code"><code><em>Example Text</em>-1 297 </div> -1 298 -1 299 <h2 id="inline-code">Inline Code</h2> -1 300 -1 301 <div class="example example--code"> -1 302 For example, <code><section></code> should be wrapped as inline. -1 303 </div> -1 304 <pre class="example-code"><code>For example, <span class="nt"><code></span><span class="ni">&lt;</span>section<span class="ni">&gt;</span><span class="nt"></code></span> should be wrapped as inline.</code></pre> -1 305 -1 306 <div class="example"> -1 307 <ul> -1 308 <li><code>code on its own</code></li> -1 309 <li><a href="#">link on its own</a></li> -1 310 <li><a href="#"><code>code in link</code></a></li> -1 311 <li><code><a href="#">link in code</a></code></li> -1 312 <li><a href="#"><code>code</code> in link</a></li> -1 313 <li><code><a href="#">link</a> in code</code></li> -1 314 </ul> -1 315 </div> -1 316 -1 317 <h2 id="emphasis">Emphasis</h2> -1 318 -1 319 <div class="example example--code"> -1 320 <em>Example Text</em><br/> -1 321 <strong>Example Text</strong><br/> -1 322 <strong><em>Example Text</em></strong><br/> -1 323 <em><strong>Example Text</strong></em><br/> -1 324 <mark>Example Text</mark><br/> -1 325 </div> -1 326 <pre class="example-code"><code><em>Example Text</em> 328 327 <strong>Example Text</strong> 329 328 <strong><em>Example Text</em></strong> 330 329 <em><strong>Example Text</strong></em> 331 330 <mark>Example Text</mark></code></pre> 332 331333 -1 <h2 id="address">Address</h2>-1 332 <h2 id="address">Address</h2> 334 333335 -1 <div class="example">336 -1 <address>337 -1 <strong>Twitter, Inc.</strong><br>338 -1 1355 Market St, Suite 900<br>339 -1 San Francisco, CA 94103<br>340 -1 <abbr title="Phone">P:</abbr> (123) 456-7890341 -1 </address>342 -1 <address>343 -1 <strong>Full Name</strong><br>344 -1 <a href="https://v4-alpha.getbootstrap.com/cdn-cgi/l/email-protection#2704"><span class="__cf_email__" data-cfemail="f4929d868780da98958780b4918c9599849891da979b99">[email protected]</span><script data-cfhash="f9e31" type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a>345 -1 </address>346 -1 </div>-1 334 <div class="example"> -1 335 <address> -1 336 <strong>Twitter, Inc.</strong><br> -1 337 1355 Market St, Suite 900<br> -1 338 San Francisco, CA 94103<br> -1 339 <abbr title="Phone">P:</abbr> (123) 456-7890 -1 340 </address> -1 341 <address> -1 342 <strong>Full Name</strong><br> -1 343 <a href="https://v4-alpha.getbootstrap.com/cdn-cgi/l/email-protection#2704"><span class="__cf_email__" data-cfemail="f4929d868780da98958780b4918c9599849891da979b99">[email protected]</span><script data-cfhash="f9e31" type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> -1 344 </address> -1 345 </div> 347 346348 -1 <h2 id="misc">Misc</h2>-1 347 <h2 id="misc">Misc</h2> 349 348350 -1 <h3>Abbreviation</h3>-1 349 <h3>Abbreviation</h3> 351 350352 -1 <div class="example example--code">353 -1 Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.354 -1 </div>355 -1 <pre class="example-code"><code>Nulla <abbr title="attribute">att<</abb>> vitae elit libero, a pharetra augue.</code></pre>-1 351 <div class="example example--code"> -1 352 Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. -1 353 </div> -1 354 <pre class="example-code"><code>Nulla <abbr title="attribute">att<</abb>> vitae elit libero, a pharetra augue.</code></pre> 356 355357 -1 <h3 id="variables">Variables</h3>-1 356 <h3 id="variables">Variables</h3> 358 357359 -1 <div class="example example--code">360 -1 <var>y</var> = <var>m</var><var>x</var> + <var>b</var>361 -1 </div>362 -1 <pre class="example-code"><code class="language-html" data-lang="html"><span class="nt"><var></span>y<span class="nt"></var></span> = <span class="nt"><var></span>m<span class="nt"></var><var></span>x<span class="nt"></var></span> + <span class="nt"><var></span>b<span class="nt"></var></span></code></pre>-1 358 <div class="example example--code"> -1 359 <var>y</var> = <var>m</var><var>x</var> + <var>b</var> -1 360 </div> -1 361 <pre class="example-code"><code class="language-html" data-lang="html"><span class="nt"><var></span>y<span class="nt"></var></span> = <span class="nt"><var></span>m<span class="nt"></var><var></span>x<span class="nt"></var></span> + <span class="nt"><var></span>b<span class="nt"></var></span></code></pre> 363 362364 -1 <h3 id="user-input">User input</h3>-1 363 <h3 id="user-input">User input</h3> 365 364366 -1 <div class="example example--code">367 -1 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br />368 -1 To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>369 -1 </div>370 -1 <pre class="example-code"><code class="language-html" data-lang="html">To switch directories, type <span class="nt"><kbd></span>cd<span class="nt"></kbd></span> followed by the name of the directory.<span class="nt"><br></span>-1 365 <div class="example example--code"> -1 366 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br /> -1 367 To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> -1 368 </div> -1 369 <pre class="example-code"><code class="language-html" data-lang="html">To switch directories, type <span class="nt"><kbd></span>cd<span class="nt"></kbd></span> followed by the name of the directory.<span class="nt"><br></span> 371 370 To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span class="nt"></kbd></span> + <span class="nt"><kbd></span>,<span class="nt"></kbd></kbd></span></code></pre> 372 371373 -1 <h3 id="sample-output">Sample output</h3>374 -1375 -1 <div class="example example--code">376 -1 <samp>This text is meant to be treated as sample output from a computer program.</samp>377 -1 </div>378 -1 <pre class="example-code"><code class="language-html" data-lang="html"><span class="nt"><samp></span>This text is meant to be treated as sample output from a computer program.<span class="nt"></samp></span></code></pre>379 -1380 -1 <h3>Inserted/Deleted</h3>381 -1382 -1 <div class="example example--code">383 -1 Something <ins>was inserted</ins> and <del>somethig was deleted</del>.384 -1 </div>385 -1 <pre class="example-code"><code>Something <ins>was inserted</ins> and <del>somethig was deleted</del>.</code></pre>386 -1387 -1 <h3 id="sample-output">Subscript and Superscript</h3>388 -1 <div class="example example--code">389 -1 <p>390 -1 Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.391 -1 Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.392 -1 Curabitur<sup>blandit</sup> tempus porttitor. Aenean eu leo quam. Pellentesque<sub>ornare</sub> sem lacinia quam venenatis vestibulum.393 -1 </p>394 -1 </div>395 -1 <pre class="example-code"><code><p>396 -1 Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.397 -1 Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.398 -1 Curabitur<sup>blandit</sup> tempus porttitor. Aenean eu leo quam. Pellentesque<sub>ornare</sub> sem lacinia quam venenatis vestibulum.399 -1 </p></code></pre>400 -1401 -1 </main>402 -1403 -1 <script>404 -1 var animate = function(apply, duration) {405 -1 var start = null;406 -1407 -1 var step = function(timestamp) {408 -1 if (!start) start = timestamp;409 -1 var progress = Math.min(1, (timestamp - start) / duration);410 -1 apply(progress);411 -1 if (progress < 1) {412 -1 window.requestAnimationFrame(step);413 -1 }414 -1 };415 -1416 -1 window.requestAnimationFrame(step);417 -1 };-1 372 <h3 id="sample-output">Sample output</h3> 418 373419 -1 var smoothScroll = function(endY) {420 -1 var startY = window.scrollY;-1 374 <div class="example example--code"> -1 375 <samp>This text is meant to be treated as sample output from a computer program.</samp> -1 376 </div> -1 377 <pre class="example-code"><code class="language-html" data-lang="html"><span class="nt"><samp></span>This text is meant to be treated as sample output from a computer program.<span class="nt"></samp></span></code></pre> 421 378422 -1 animate(function(progress) {423 -1 // var f = Math.sin(Math.PI * (progress - 0.5)) / 2 + 0.5;424 -1 var f = (3 - 2 * progress) * progress * progress;425 -1 window.scrollTo(0, startY * (1 - f) + endY * f);426 -1 }, 250);427 -1 };-1 379 <h3>Inserted/Deleted</h3> 428 380429 -1 var smoothScrollClick = function(event) {430 -1 event.preventDefault();-1 381 <div class="example example--code"> -1 382 Something <ins>was inserted</ins> and <del>somethig was deleted</del>. -1 383 </div> -1 384 <pre class="example-code"><code>Something <ins>was inserted</ins> and <del>somethig was deleted</del>.</code></pre> 431 385432 -1 var selector = event.currentTarget.getAttribute('href');433 -1 var scrollY = document.querySelector(selector).offsetTop;434 -1435 -1 history.pushState(null, null, selector);436 -1 smoothScroll(scrollY);437 -1 };438 -1439 -1 document.querySelectorAll('.page-nav [href^="#"]').forEach(function(el) {440 -1 el.addEventListener('click', smoothScrollClick);441 -1 });442 -1 </script>-1 386 <h3 id="sample-output">Subscript and Superscript</h3> -1 387 <div class="example example--code"> -1 388 <p> -1 389 Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. -1 390 Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. -1 391 Curabitur<sup>blandit</sup> tempus porttitor. Aenean eu leo quam. Pellentesque<sub>ornare</sub> sem lacinia quam venenatis vestibulum. -1 392 </p> -1 393 </div> -1 394 <pre class="example-code"><code><p> -1 395 Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. -1 396 Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. -1 397 Curabitur<sup>blandit</sup> tempus porttitor. Aenean eu leo quam. Pellentesque<sub>ornare</sub> sem lacinia quam venenatis vestibulum. -1 398 </p></code></pre> 443 399444 -1 </body444 -1 \ No newline at end of file-1 400 </main> -1 401 </body> -1 402 </html -1 402 \ No newline at end of file