gmi-web/example/expected.html

45 lines
3.6 KiB
HTML
Raw Normal View History

2021-02-02 22:02:09 +00:00
<!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&#39;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>&lt;b&gt;watch out!&lt;/b&gt; a gemtext line could have html in it that you&#39;ll need to escape!</p>
<p><br></p>
2021-02-02 22:26:11 +00:00
<a href="https://codeberg.org/talon/gmi-web">https://codeberg.org/talon/gmi-web</a>
<a href="https://codeberg.org/talon/gmi-web">links can have text too</a>
2021-02-02 22:02:09 +00:00
<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>