Latest Posts
-
About Bob № 29: Tony and the M&M’s May 21, 2024 Why Tony could never look at M&M’s the same way again.
-
Adding a Moon Data Widget to Wview Website February 16, 2021 Adding moon phase information to my weather station website — the code and the result.
-
Flashers in CircuitPython January 20, 2021 Explore the stages of creating a programmable light flasher with the Trinket M0 microcontroller.
Info Boxes
This is an Info box of type "info".
This is an Info box of type "success".
Everyday carry glossier fashion axe 8-bit, helvetica stumptown offal hammock farm-to-table af church-key enamel pin franzen letterpress. Vaporware cardigan forage raclette copper mug you probably haven't heard of them migas bushwick drinking vinegar swag pour-over.
This is an Info box of type "warning".
Everyday carry glossier fashion axe 8-bit, helvetica stumptown offal hammock farm-to-table af church-key enamel pin franzen letterpress.
This is an Info box of type "alert".
Vaporware cardigan forage raclette copper mug you probably haven't heard of them migas bushwick drinking vinegar swag pour-over.
Tables
Table with headings both in and out of the thead and a caption
| Heading within the thead section | Heading | Numeric Data |
|---|---|---|
| A th within the tbody section | A td (data) | 419.10 |
| Heading | Lorem ipsum sit dolor amet | 50.81 |
| Heading | Data | 0.72 |
| Heading | Data | 1016.99 |
| Author | Title | Year | ISBN-13 | ISBN-10 |
|---|---|---|---|---|
| Miguel De Cervantes | The Ingenious Gentleman Don Quixote of La Mancha | 1605 | 9783125798502 | 3125798507 |
| Gabrielle-Suzanne Barbot de Villeneuve | La Belle et la Bête | 1740 | 9781910880067 | 191088006X |
| Sir Isaac Newton | The Method of Fluxions and Infinite Series: With Its Application to the Geometry of Curve-lines | 1763 | 9781330454862 | 1330454863 |
| Mary Shelley | Frankenstein; or, The Modern Prometheus | 1818 | 9781530278442 | 1530278449 |
| Herman Melville | Moby-Dick; or, The Whale | 1851 | 9781530697908 | 1530697905 |
| Emma Dorothy Eliza Nevitte Southworth | The Hidden Hand | 1888 | 9780813512969 | 0813512964 |
| F. Scott Fitzgerald | The Great Gatsby | 1925 | 9780743273565 | 0743273567 |
| George Orwell | Nineteen Eighty-Four | 1948 | 9780451524935 | 0451524934 |
| Nnedi Okorafor | Who Fears Death | 2010 | 9780756406691 | 0756406692 |
Table with equal-width columns and two tbody sections
| Chemical Group | Sampling Media | Instrument | Method | Detection Limit |
|---|---|---|---|---|
| Aldehydes and ketones | DNPH | HPLC/UV-VIS | SAE 930142HP | 0.02 μg/mL |
| Elemental carbon/organic carbon | Quartz | EC/OC | Birch and Cary, 1996 | 0.2 μg C |
| Trace elements | Teflon | XRF | * | * |
| C1-C12 | Tedlar Bag | GC-FID | SAE 930142HP | 10 ppb C |
| C10-C30, POPs | Quartz | GC-MS | EPA TO-13A | 1 ng |
| PM2.5 mass | Teflon | Microbalance | Two weights within 3 μg | 5 μg |
| Gas-phase NH3, SO4, and HNO3 | Fabric denuders | Spectrophotometer | Colorimetry | 0.4 μg |
| *substrates analyzed in contract laboratory. | ||||
Complex Table
| Invoice #123456789 | 14 January 2025 | ||
|---|---|---|---|
| Pay to: Acme Billing Co. 123 Main St. Cityville, NA 12345 | Customer: John Smith 321 Willow Way Southeast Northwestershire, MA 54321 | ||
| Name / Description | Qty. | @ | Cost |
| Paperclips | 1000 | 0.01 | 10.00 |
| Staples (box) | 100 | 1.00 | 100.00 |
| Subtotal | 110.00 | ||
| Tax | 8% | 8.80 | |
| Grand Total | $ 118.80 | ||
Figures
Here are examples of figure options. The available class modifiers:
fig-border- Add a border to the
img float-left- Float the
figureleft, 50% max width. float-right- Float the
figureright, 50% max width. float-left-medium- Float the
figureleft, 33% max width. float-right-medium- Float the
figureright, 33% max width. float-left-small- Float the
figureleft, 25% max width. float-right-small- Float the
figureright, 25% max width.
The width and positioning classes may be combined as in <figure class="fig-border float-left">.
This figure has class of float-left. Duis a egestas leo, quis suscipit leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla ac dui a velit imperdiet malesuada. Sed at magna blandit, faucibus felis eget, varius lectus. Etiam lacus tellus, imperdiet at commodo eget, ornare quis turpis! Nam at est laoreet eros venenatis finibus ut sed est. Proin vulputate suscipit purus, eget efficitur nisl viverra a. Mauris orci nisl, facilisis vitae libero in, viverra pulvinar eros? Sed porttitor, dui ac aliquam pretium, dolor sapien gravida felis, eget mattis elit felis vitae ligula. Donec quis nibh porta, varius arcu eu, congue nibh.
The below figure has no class setting and defaults to 100% width (to a max of the image width).
Example of float-left and float-right classes
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus nibh ac mauris ullamcorper, vitae egestas ante commodo! Aenean pretium placerat imperdiet! Vestibulum sed felis bibendum, mollis sapien at, scelerisque ipsum? Vivamus auctor placerat luctus. Vivamus pretium odio viverra iaculis condimentum. Sed finibus consequat turpis sit amet molestie? Maecenas a tristique turpis. Phasellus eget dolor turpis? Nullam dictum egestas dolor, eget scelerisque massa ultrices non. Praesent ut tristique lorem. Curabitur risus nulla, vulputate et egestas id, scelerisque eget nisl.
Quisque auctor lectus id enim convallis, et faucibus risus posuere. Cras molestie pellentesque nisi. Integer lobortis ex nec libero suscipit gravida. In eu quam sapien. Proin ac enim id diam rutrum porta. Ut eu malesuada diam, et tempor lorem. Aenean sagittis lorem eget lacus euismod, sit amet interdum mi pellentesque. Nulla blandit eget urna eget egestas! Fusce maximus turpis eu arcu faucibus blandit. Sed rhoncus justo vel metus sagittis, vitae mattis quam pellentesque! Fusce a mollis eros, ac volutpat est?
Integer malesuada vestibulum convallis. Sed eget massa non ex convallis auctor. Sed tellus dui, faucibus vitae auctor in, condimentum id tortor! Ut quis magna lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec cursus semper tortor a ultrices. Sed convallis lacus et urna interdum pharetra.
Proin laoreet rutrum ultricies. Vivamus arcu sem, egestas at augue quis, tincidunt blandit sem. Morbi aliquet aliquet euismod! Vivamus consectetur elementum pretium. Proin arcu lectus; tempor non justo id, consectetur blandit turpis. Aliquam quis neque imperdiet, dapibus sapien vulputate, commodo mi. Nunc pharetra, mauris eget aliquam pharetra, leo magna consectetur metus, sed porttitor nisi leo ut leo. Nulla eu ornare dui, et porta libero. Phasellus rutrum scelerisque nisl, a iaculis mauris ultrices non. Donec libero ipsum, elementum non nisl at, sollicitudin accumsan dui. Aliquam in augue molestie, luctus diam non, lacinia nulla. Nullam neque odio, aliquet ac magna laoreet, elementum ultrices erat? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam hendrerit ullamcorper tempor.
Donec cursus ipsum vitae urna lacinia, a lacinia libero hendrerit. Etiam a tortor sed sapien suscipit accumsan id a diam. Sed non auctor purus, eget fringilla mi. In at auctor tortor, eget fringilla dui! Morbi congue sagittis tellus, id pretium lectus sodales ultricies. Sed dignissim sapien sit amet varius cursus. Suspendisse nec placerat orci, sed aliquet ligula. Nulla laoreet, risus at bibendum tincidunt, diam odio vestibulum nisl, sit amet accumsan ipsum nibh quis urna.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus nibh ac mauris ullamcorper, vitae egestas ante commodo! Aenean pretium placerat imperdiet! Vestibulum sed felis bibendum, mollis sapien at, scelerisque ipsum? Vivamus auctor placerat luctus. Vivamus pretium odio viverra iaculis condimentum. Sed finibus consequat turpis sit amet molestie? Maecenas a tristique turpis. Phasellus eget dolor turpis? Nullam dictum egestas dolor, eget scelerisque massa ultrices non. Praesent ut tristique lorem. Curabitur risus nulla, vulputate et egestas id, scelerisque eget nisl.
Quisque auctor lectus id enim convallis, et faucibus risus posuere. Cras molestie pellentesque nisi. Integer lobortis ex nec libero suscipit gravida. In eu quam sapien. Proin ac enim id diam rutrum porta. Ut eu malesuada diam, et tempor lorem. Aenean sagittis lorem eget lacus euismod, sit amet interdum mi pellentesque. Nulla blandit eget urna eget egestas! Fusce maximus turpis eu arcu faucibus blandit. Sed rhoncus justo vel metus sagittis, vitae mattis quam pellentesque! Fusce a mollis eros, ac volutpat est?
Example of float-left-medium and float-right-medium classes
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus nibh ac mauris ullamcorper, vitae egestas ante commodo! Aenean pretium placerat imperdiet! Vestibulum sed felis bibendum, mollis sapien at, scelerisque ipsum? Vivamus auctor placerat luctus. Vivamus pretium odio viverra iaculis condimentum. Sed finibus consequat turpis sit amet molestie? Maecenas a tristique turpis. Phasellus eget dolor turpis? Nullam dictum egestas dolor, eget scelerisque massa ultrices non. Praesent ut tristique lorem. Curabitur risus nulla, vulputate et egestas id, scelerisque eget nisl.
Quisque auctor lectus id enim convallis, et faucibus risus posuere. Cras molestie pellentesque nisi. Integer lobortis ex nec libero suscipit gravida. In eu quam sapien. Proin ac enim id diam rutrum porta. Ut eu malesuada diam, et tempor lorem. Aenean sagittis lorem eget lacus euismod, sit amet interdum mi pellentesque. Nulla blandit eget urna eget egestas! Fusce maximus turpis eu arcu faucibus blandit. Sed rhoncus justo vel metus sagittis, vitae mattis quam pellentesque! Fusce a mollis eros, ac volutpat est?
Integer malesuada vestibulum convallis. Sed eget massa non ex convallis auctor. Sed tellus dui, faucibus vitae auctor in, condimentum id tortor! Ut quis magna lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec cursus semper tortor a ultrices. Sed convallis lacus et urna interdum pharetra.
Proin laoreet rutrum ultricies. Vivamus arcu sem, egestas at augue quis, tincidunt blandit sem. Morbi aliquet aliquet euismod! Vivamus consectetur elementum pretium. Proin arcu lectus; tempor non justo id, consectetur blandit turpis. Aliquam quis neque imperdiet, dapibus sapien vulputate, commodo mi. Nunc pharetra, mauris eget aliquam pharetra, leo magna consectetur metus, sed porttitor nisi leo ut leo. Nulla eu ornare dui, et porta libero. Phasellus rutrum scelerisque nisl, a iaculis mauris ultrices non. Donec libero ipsum, elementum non nisl at, sollicitudin accumsan dui. Aliquam in augue molestie, luctus diam non, lacinia nulla. Nullam neque odio, aliquet ac magna laoreet, elementum ultrices erat? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam hendrerit ullamcorper tempor.
Donec cursus ipsum vitae urna lacinia, a lacinia libero hendrerit. Etiam a tortor sed sapien suscipit accumsan id a diam. Sed non auctor purus, eget fringilla mi. In at auctor tortor, eget fringilla dui! Morbi congue sagittis tellus, id pretium lectus sodales ultricies. Sed dignissim sapien sit amet varius cursus. Suspendisse nec placerat orci, sed aliquet ligula. Nulla laoreet, risus at bibendum tincidunt, diam odio vestibulum nisl, sit amet accumsan ipsum nibh quis urna.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus nibh ac mauris ullamcorper, vitae egestas ante commodo! Aenean pretium placerat imperdiet! Vestibulum sed felis bibendum, mollis sapien at, scelerisque ipsum? Vivamus auctor placerat luctus. Vivamus pretium odio viverra iaculis condimentum. Sed finibus consequat turpis sit amet molestie? Maecenas a tristique turpis. Phasellus eget dolor turpis? Nullam dictum egestas dolor, eget scelerisque massa ultrices non. Praesent ut tristique lorem. Curabitur risus nulla, vulputate et egestas id, scelerisque eget nisl.
Quisque auctor lectus id enim convallis, et faucibus risus posuere. Cras molestie pellentesque nisi. Integer lobortis ex nec libero suscipit gravida. In eu quam sapien. Proin ac enim id diam rutrum porta. Ut eu malesuada diam, et tempor lorem. Aenean sagittis lorem eget lacus euismod, sit amet interdum mi pellentesque. Nulla blandit eget urna eget egestas! Fusce maximus turpis eu arcu faucibus blandit. Sed rhoncus justo vel metus sagittis, vitae mattis quam pellentesque! Fusce a mollis eros, ac volutpat est?
Example of float-left-small and float-right-small classes
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus nibh ac mauris ullamcorper, vitae egestas ante commodo! Aenean pretium placerat imperdiet! Vestibulum sed felis bibendum, mollis sapien at, scelerisque ipsum? Vivamus auctor placerat luctus. Vivamus pretium odio viverra iaculis condimentum. Sed finibus consequat turpis sit amet molestie? Maecenas a tristique turpis. Phasellus eget dolor turpis? Nullam dictum egestas dolor, eget scelerisque massa ultrices non. Praesent ut tristique lorem. Curabitur risus nulla, vulputate et egestas id, scelerisque eget nisl.
Quisque auctor lectus id enim convallis, et faucibus risus posuere. Cras molestie pellentesque nisi. Integer lobortis ex nec libero suscipit gravida. In eu quam sapien. Proin ac enim id diam rutrum porta. Ut eu malesuada diam, et tempor lorem. Aenean sagittis lorem eget lacus euismod, sit amet interdum mi pellentesque. Nulla blandit eget urna eget egestas! Fusce maximus turpis eu arcu faucibus blandit. Sed rhoncus justo vel metus sagittis, vitae mattis quam pellentesque! Fusce a mollis eros, ac volutpat est?
Integer malesuada vestibulum convallis. Sed eget massa non ex convallis auctor. Sed tellus dui, faucibus vitae auctor in, condimentum id tortor! Ut quis magna lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec cursus semper tortor a ultrices. Sed convallis lacus et urna interdum pharetra.
Proin laoreet rutrum ultricies. Vivamus arcu sem, egestas at augue quis, tincidunt blandit sem. Morbi aliquet aliquet euismod! Vivamus consectetur elementum pretium. Proin arcu lectus; tempor non justo id, consectetur blandit turpis. Aliquam quis neque imperdiet, dapibus sapien vulputate, commodo mi. Nunc pharetra, mauris eget aliquam pharetra, leo magna consectetur metus, sed porttitor nisi leo ut leo. Nulla eu ornare dui, et porta libero. Phasellus rutrum scelerisque nisl, a iaculis mauris ultrices non. Donec libero ipsum, elementum non nisl at, sollicitudin accumsan dui. Aliquam in augue molestie, luctus diam non, lacinia nulla. Nullam neque odio, aliquet ac magna laoreet, elementum ultrices erat? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam hendrerit ullamcorper tempor.
Donec cursus ipsum vitae urna lacinia, a lacinia libero hendrerit. Etiam a tortor sed sapien suscipit accumsan id a diam. Sed non auctor purus, eget fringilla mi. In at auctor tortor, eget fringilla dui! Morbi congue sagittis tellus, id pretium lectus sodales ultricies. Sed dignissim sapien sit amet varius cursus. Suspendisse nec placerat orci, sed aliquet ligula. Nulla laoreet, risus at bibendum tincidunt, diam odio vestibulum nisl, sit amet accumsan ipsum nibh quis urna.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dapibus nibh ac mauris ullamcorper, vitae egestas ante commodo! Aenean pretium placerat imperdiet! Vestibulum sed felis bibendum, mollis sapien at, scelerisque ipsum? Vivamus auctor placerat luctus. Vivamus pretium odio viverra iaculis condimentum. Sed finibus consequat turpis sit amet molestie? Maecenas a tristique turpis. Phasellus eget dolor turpis? Nullam dictum egestas dolor, eget scelerisque massa ultrices non. Praesent ut tristique lorem. Curabitur risus nulla, vulputate et egestas id, scelerisque eget nisl.
Quisque auctor lectus id enim convallis, et faucibus risus posuere. Cras molestie pellentesque nisi. Integer lobortis ex nec libero suscipit gravida. In eu quam sapien. Proin ac enim id diam rutrum porta. Ut eu malesuada diam, et tempor lorem. Aenean sagittis lorem eget lacus euismod, sit amet interdum mi pellentesque. Nulla blandit eget urna eget egestas! Fusce maximus turpis eu arcu faucibus blandit. Sed rhoncus justo vel metus sagittis, vitae mattis quam pellentesque! Fusce a mollis eros, ac volutpat est?
Example of fig-border
Integer malesuada vestibulum convallis. Sed eget massa non ex convallis auctor. Sed tellus dui, faucibus vitae auctor in, condimentum id tortor! Ut quis magna lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec cursus semper tortor a ultrices. Sed convallis lacus et urna interdum pharetra.
Proin laoreet rutrum ultricies. Vivamus arcu sem, egestas at augue quis, tincidunt blandit sem. Morbi aliquet aliquet euismod! Vivamus consectetur elementum pretium. Proin arcu lectus; tempor non justo id, consectetur blandit turpis. Aliquam quis neque imperdiet, dapibus sapien vulputate, commodo mi. Nunc pharetra, mauris eget aliquam pharetra, leo magna consectetur metus, sed porttitor nisi leo ut leo. Nulla eu ornare dui, et porta libero. Phasellus rutrum scelerisque nisl, a iaculis mauris ultrices non. Donec libero ipsum, elementum non nisl at, sollicitudin accumsan dui. Aliquam in augue molestie, luctus diam non, lacinia nulla. Nullam neque odio, aliquet ac magna laoreet, elementum ultrices erat? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam hendrerit ullamcorper tempor.
Donec cursus ipsum vitae urna lacinia, a lacinia libero hendrerit. Etiam a tortor sed sapien suscipit accumsan id a diam. Sed non auctor purus, eget fringilla mi. In at auctor tortor, eget fringilla dui! Morbi congue sagittis tellus, id pretium lectus sodales ultricies. Sed dignissim sapien sit amet varius cursus. Suspendisse nec placerat orci, sed aliquet ligula. Nulla laoreet, risus at bibendum tincidunt, diam odio vestibulum nisl, sit amet accumsan ipsum nibh quis urna. Aliquam quis neque imperdiet, dapibus sapien vulputate, commodo mi. Nunc pharetra, mauris eget aliquam pharetra, leo magna consectetur metus, sed porttitor nisi leo ut leo. Nulla eu ornare dui, et porta libero. Phasellus rutrum scelerisque nisl, a iaculis mauris ultrices non.