Skip to content

Instantly share code, notes, and snippets.

@floriandotpy
Last active August 26, 2016 08:21
Show Gist options
  • Save floriandotpy/555a885c94be21ef49df40de0429da5c to your computer and use it in GitHub Desktop.
Save floriandotpy/555a885c94be21ef49df40de0429da5c to your computer and use it in GitHub Desktop.
Some CSS for previewing articles locally
<!doctype html>
<html>
<!-- Some CSS. Prettier when writing local articles in HTML files. Mac fonts only. -->
<style>
body { font: 18px/180% Avenir; color: #333; max-width: 800px; margin: 0 auto; padding: 0 4px; }
h1, h2 { font-family: Didot; color: #000; }
h1 { margin: 72px 0 24px; }
h2 { margin: 48px 0 12px; }
a { color: #0000cc; }
a:hover { color: #0066ff; }
pre, code { font: 14px/24px 'PT Mono'; color: #668; background: #eee; }
pre { padding: 24px 12px; overflow-x: auto; }
hr { border: none; border-top: 1px solid #ccc; margin: 36px 0; }
</style>
<body>
<h1>Article headline</h1>
<h2>Subhead One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia eu est sit amet euismod. Fusce tellus ante, iaculis ornare finibus rutrum, semper vitae nibh. Fusce nec quam nunc. Nulla blandit venenatis nulla eget ullamcorper. Sed accumsan imperdiet aliquet. Nunc neque leo, molestie eu est sit amet, scelerisque convallis lacus. In aliquet, mauris ac interdum imperdiet, ante erat viverra leo, quis efficitur mauris dolor at mi. Maecenas posuere dapibus est et laoreet. Aenean mollis felis libero, sed congue libero gravida sed. Vivamus dignissim diam vel porta iaculis. Etiam facilisis mi sapien, sed dignissim ante feugiat vitae. Nunc sit amet ante ligula. Morbi quis nisi placerat, elementum nibh sed, semper ante. Nulla vehicula fringilla mollis.</p>
<p>Vestibulum scelerisque ante ut cursus tincidunt. Pellentesque dapibus nisl ligula, vel malesuada enim pharetra a. Cras finibus arcu sit amet leo facilisis rutrum. Etiam congue nunc accumsan leo tristique, sed cursus erat efficitur. Maecenas mattis lorem vel dignissim egestas. Mauris ultricies nulla et ligula dignissim facilisis. Pellentesque tempor, velit a pellentesque consequat, lacus tellus dictum lacus, nec tristique diam ex vel felis. In magna tellus, ultrices et scelerisque vitae, pretium ut elit. Pellentesque tincidunt eleifend felis, in condimentum massa hendrerit id.</p>
<pre><code>msg = " ".join(["Hello", "World"])
print(msg)</code></pre>
<p>Mauris at velit vitae dolor laoreet elementum. Mauris sagittis urna ut tellus consequat, at ultrices dui tincidunt. Cras ut ante varius tortor ultricies consequat vel in nulla. Maecenas vel mollis nibh. Praesent scelerisque massa et ex aliquet tristique. Sed lectus purus, iaculis id efficitur vel, vehicula in mi. Nulla ornare odio quis porttitor vestibulum. Donec id eros tincidunt, pretium sapien eu, pulvinar nisl. Pellentesque porttitor metus velit, id sodales sapien semper vitae. Etiam magna purus, dapibus ut imperdiet vitae, consequat vitae tortor. Vivamus ac fringilla mi.</p>
<h2>Subhead Two</h2>
<p>Pellentesque scelerisque ante ut tincidunt. Pellentesque dapibus nisl ligula, vel malesuada enim pharetra a. Cras finibus arcu sit amet leo facilisis rutrum. Etiam congue nunc accumsan leo tristique, sed cursus erat efficitur. Maecenas mattis lorem vel dignissim egestas. Mauris ultricies nulla et ligula dignissim facilisis. Pellentesque tempor, velit a pellentesque consequat, lacus tellus dictum lacus, nec tristique diam ex vel felis. In magna tellus, ultrices et scelerisque vitae, pretium ut elit. Pellentesque tincidunt eleifend felis, in condimentum massa hendrerit id.</p>
<p>Tellus at velit vitae dolor laoreet elementum. Mauris sagittis urna ut tellus consequat, at ultrices dui tincidunt. Cras ut ante varius tortor ultricies consequat vel in nulla. Maecenas vel mollis nibh. Praesent scelerisque massa et ex aliquet tristique. Sed lectus purus, iaculis id efficitur vel, vehicula in mi. Nulla ornare odio quis porttitor vestibulum. Donec id eros tincidunt, pretium sapien eu, pulvinar nisl. Pellentesque porttitor metus velit, id sodales sapien semper vitae. Etiam magna purus, dapibus ut imperdiet vitae, consequat vitae tortor. Vivamus ac fringilla mi. Integer condimentum justo sit amet velit vulputate, in feugiat ligula dictum. Nunc elementum mi sit amet varius semper. Cras placerat turpis ac faucibus mollis.</p>
<h2>Subhead Three</h2>
<p>Vestibulum scelerisque ante ut cursus tincidunt. Pellentesque dapibus nisl ligula, vel malesuada enim pharetra a. Cras finibus arcu sit amet leo facilisis rutrum. Etiam congue nunc accumsan leo tristique, sed cursus erat efficitur. Maecenas mattis lorem vel dignissim egestas. Mauris ultricies nulla et ligula dignissim facilisis. Pellentesque tempor, velit a pellentesque consequat, lacus tellus dictum lacus, nec tristique diam ex vel felis. In magna tellus, ultrices et scelerisque vitae, pretium ut elit. Pellentesque tincidunt eleifend felis, in condimentum massa hendrerit id.</p>
<p>Mauris at velit vitae dolor laoreet elementum. Mauris sagittis urna ut tellus consequat, at ultrices dui tincidunt. Cras ut ante varius tortor ultricies consequat vel in nulla. Maecenas vel mollis nibh. Praesent scelerisque massa et ex aliquet tristique. Sed lectus purus, iaculis id efficitur vel, vehicula in mi. Nulla ornare odio quis porttitor vestibulum. Donec id eros tincidunt, pretium sapien eu, pulvinar nisl. Pellentesque porttitor metus velit, id sodales sapien semper vitae. Etiam magna purus, dapibus ut imperdiet vitae, consequat vitae tortor. Vivamus ac fringilla mi. Integer condimentum justo sit amet velit vulputate, in feugiat ligula dictum. Nunc elementum mi sit amet varius semper. Cras placerat turpis ac faucibus mollis.</p>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment