43 lines
3.5 KiB
HTML
43 lines
3.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html style="">
|
||
|
<head>
|
||
|
<meta charset="utf-8">
|
||
|
<meta language="en">
|
||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
<meta name="color-scheme" content="dark light">
|
||
|
<style>:root{--foreground:black;--background:white;--p-size:1.25rem;--p-indent:0rem;--p-line-height:1.5;--a-size:var(--p-size);--pre-size:1rem;--pre-line-height:1;--h1-size:3rem;--h2-size:2.25rem;--h3-size:1.5rem;--heading-line-height:1.25;--ul-size:var(--p-size);--ul-line-height:1.25;--blockquote-size:var(--p-size);--blockquote-line-height:1.25;--mono:Consolas,monaco,monospace;--serif:georgia,times,serif;--sans-serif:-apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif}body{max-width:48rem;padding:.5rem;margin:0 auto}a,audio,blockquote,h1,h2,h3,img,p,pre,ul,video{display:block;max-width:100%;margin:0;padding:0;overflow-wrap:anywhere}h1,h2,h3{font-family:var(--sans-serif);line-height:var(--heading-line-height)}p{font-size:var(--p-size);font-family:var(--serif);text-indent:var(--p-indent);line-height:var(--p-line-height)}a::before{font-size:var(--p-size);font-family:var(--mono);content:"⇒";padding-right:.25rem;vertical-align:middle}a{font-size:var(--p-size);font-family:var(--serif);text-decoration:none}pre{font-size:var(--pre-size);font-family:var(--mono);line-height:var(--pre-line-height);padding:1.25rem;overflow-y:auto}h1{font-size:var(--h1-size)}h2{font-size:var(--h2-size)}h3{font-size:var(--h3-size)}ul{font-size:var(--p-size);font-family:var(--serif);line-height:var(--ul-line-height);list-style-type:none}li::before{font-size:var(--p-size);font-family:var(--mono);content:"*";vertical-align:middle;padding-right:.5rem}blockquote{font-size:var(--p-size);font-family:var(--serif);line-height:var(--blockquote-line-height);padding-left:.75rem}pre+blockquote{padding-top:.5rem;padding-bottom:.5rem}a,blockquote,body,h1,h2,h3,html,p,pre::-moz-selection,pre::selection,ul{color:var(--foreground);background-color:var(--background)}blockquote{border-left:.5rem solid var(--foreground)}::-moz-selection,::selection,a:hover,pre{color:var(--background);background-color:var(--foreground)}@media (prefers-color-scheme:dark){a,blockquote,body,h1,h2,h3,html,p,pre::-moz-selection,pre::selection,ul{color:var(--background);background-color:var(--foreground)}blockquote{border-left:.5rem solid var(--background)}::-moz-selection,::selection,a:hover,pre{color:var(--foreground);background-color:var(--background)}}
|
||
|
</style>
|
||
|
<title>heading 1</title>
|
||
|
</head>
|
||
|
<body>
|
||
|
<h1>heading 1</h1>
|
||
|
<h2>heading 2</h2>
|
||
|
<h3>heading 3</h3>
|
||
|
<p>checkout this empty line:</p>
|
||
|
<p><br></p>
|
||
|
<ul>
|
||
|
<li>and</li>
|
||
|
<li>this</li>
|
||
|
<li>list</li>
|
||
|
</ul>
|
||
|
<p><br></p>
|
||
|
<blockquote>here's what a blockquote is like</blockquote>
|
||
|
<p><br></p>
|
||
|
<pre title="pre tags can have alt text">
|
||
|
preformatted text
|
||
|
means that it already has formatting
|
||
|
which means it should show
|
||
|
|
||
|
|
||
|
|
||
|
as is
|
||
|
</pre>
|
||
|
<p><br></p>
|
||
|
<p><b>watch out!</b> a gemtext line could have html in it that you'll need to escape!</p>
|
||
|
<p><br></p>
|
||
|
<img src="https://www.learningcontainer.com/wp-content/uploads/2020/07/Large-Sample-Image-download-for-Testing.jpg" title="JPG image that can render inline!"/>
|
||
|
<audio controls src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" title="MP3 audio that can render inline!"></audio>
|
||
|
<video controls src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" title="MP4 Video that can render inline!"/></video>
|
||
|
</body>
|
||
|
</html>
|