Skip to content

Instantly share code, notes, and snippets.

@apfelchips

apfelchips/sidebar-html-template.html

Created March 12, 2020 13:42
Show Gist options
  • Save apfelchips/773a6319c4b2514d941bcc8243008f23 to your computer and use it in GitHub Desktop.
Save apfelchips/773a6319c4b2514d941bcc8243008f23 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sidebar-html-template.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sidebar HTML Template</title>
<style type="text/css">
#nav {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 180px;
overflow: auto;
margin-top: 16px;
}
#nav * > ul,
#nav * > ol,
{
list-style: square;
padding-left: 16px;
}
#nav > div > ul:nth-child(1),
#nav > div > ol:nth-child(1)
{
list-style: none;
padding: 0;
margin: 0;
}
.column {
margin-left: 16px;
}
main {
position: fixed;
line-height: 1.6;
font-size: 18px;
color: #444;
top: 0;
left: 180px;
right: 0;
bottom: 0;
overflow: auto;
}
main > .column {
margin-right: 16px;
}
/* scoll if content excedes width */
* html main {
height: 100%;
width: 100%;
}
h1:nth-child(1) {
margin-top:0;
border-bottom: solid;
}
h1,
h2,
h3 {
line-height: 1.2
}
td,
h1,h2,h3,h4,h5,
p,
ul,ol,li
{
page-break-inside: avoid;
}
</style>
</head>
<body>
<main>
<div class="column"> <!-- needed to fix scrollbars -->
<h1><a name="Start"></a>Sidebar HTML Template</h1>
<h2><a name="Subtitle1"></a>Subtitle 1</h2>
<p>
<a href="https://example.com" target="">example.com - opened in current tab</a><br />
<a href="https://example.com">example.com</a><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate eleifend pulvinar. Donec a ultricies eros, non viverra tellus. Fusce volutpat hendrerit ligula, quis rhoncus magna iaculis at. Aenean purus magna, venenatis at tempor pellentesque, tristique nec leo. Aenean pulvinar, quam at volutpat blandit, nibh libero sagittis ex, eget placerat odio risus et nisl. In tincidunt tempus augue, vel aliquam erat interdum non. Curabitur at accumsan nibh, sit amet rhoncus augue. Aenean sed mi tincidunt, vulputate neque tristique, viverra diam. Morbi vel dapibus ipsum. Nam placerat sagittis vehicula.
</p>
<p>
Mauris quis pellentesque purus. Maecenas dictum magna et sapien pulvinar, at tempus nulla rutrum. Vivamus orci quam, finibus at ullamcorper vel, condimentum vitae lorem. Aliquam tempor tempus egestas. Aliquam eget tempor dolor. Suspendisse tristique malesuada massa, id facilisis elit sagittis sed. Nullam mattis sollicitudin massa, et eleifend augue vehicula et. Aenean sapien lectus, vehicula at ante eu, interdum suscipit sem.
</p>
<p>
Etiam at consectetur nunc. Nulla eu dolor congue, dignissim est sed, posuere lectus. Phasellus at lorem ante. Integer in tempus sem. Aenean a lacus quam. Vivamus molestie nisi sed urna lacinia laoreet. Duis vehicula augue lacinia vulputate luctus. Sed pretium ac elit id sagittis. Proin sagittis facilisis accumsan. Aenean vestibulum porttitor convallis. In ullamcorper quam quis leo luctus auctor. Nullam iaculis varius lacus at commodo. Sed facilisis augue ligula, quis maximus sapien consequat vitae. Integer dui nunc, gravida id enim non, cursus lobortis dolor.
</p>
<p>
Integer feugiat tincidunt risus, quis porttitor felis lobortis sit amet. Quisque in blandit tellus. Praesent ex mi, semper eget justo eu, tempor lacinia elit. Sed ut dui eros. Phasellus justo arcu, tempus quis porttitor nec, auctor vel purus. Maecenas ut magna non mauris efficitur aliquam in at lacus. Phasellus dapibus felis sed mauris bibendum dictum. Proin interdum commodo euismod. Quisque sed feugiat lacus, sit amet vulputate ex.
</p>
<p>
Quisque mollis tempus sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vitae massa ut sem tempor tincidunt. Donec eu ex cursus, malesuada ligula quis, pellentesque metus. Pellentesque mi ante, dictum quis erat id, iaculis finibus sem. Sed non dui odio. Aliquam malesuada risus id enim condimentum, quis vestibulum risus lacinia. Sed sollicitudin odio eget justo aliquet, ut pulvinar lorem semper. Vestibulum at fermentum mi. Suspendisse vel nunc a urna tincidunt ultrices. Suspendisse at sem et erat accumsan malesuada vel at tortor. Duis sit amet dui ut massa posuere vestibulum non non velit. Morbi facilisis, velit vitae mollis feugiat, libero elit sollicitudin quam, id aliquam ex odio id ex. Maecenas et dictum elit.
</p>
<h2><a name="Subtitle2"></a>Subtitle 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate eleifend pulvinar. Donec a ultricies eros, non viverra tellus. Fusce volutpat hendrerit ligula, quis rhoncus magna iaculis at. Aenean purus magna, venenatis at tempor pellentesque, tristique nec leo. Aenean pulvinar, quam at volutpat blandit, nibh libero sagittis ex, eget placerat odio risus et nisl. In tincidunt tempus augue, vel aliquam erat interdum non. Curabitur at accumsan nibh, sit amet rhoncus augue. Aenean sed mi tincidunt, vulputate neque tristique, viverra diam. Morbi vel dapibus ipsum. Nam placerat sagittis vehicula.
</p>
<p>
Mauris quis pellentesque purus. Maecenas dictum magna et sapien pulvinar, at tempus nulla rutrum. Vivamus orci quam, finibus at ullamcorper vel, condimentum vitae lorem. Aliquam tempor tempus egestas. Aliquam eget tempor dolor. Suspendisse tristique malesuada massa, id facilisis elit sagittis sed. Nullam mattis sollicitudin massa, et eleifend augue vehicula et. Aenean sapien lectus, vehicula at ante eu, interdum suscipit sem.
</p>
<p>
Etiam at consectetur nunc. Nulla eu dolor congue, dignissim est sed, posuere lectus. Phasellus at lorem ante. Integer in tempus sem. Aenean a lacus quam. Vivamus molestie nisi sed urna lacinia laoreet. Duis vehicula augue lacinia vulputate luctus. Sed pretium ac elit id sagittis. Proin sagittis facilisis accumsan. Aenean vestibulum porttitor convallis. In ullamcorper quam quis leo luctus auctor. Nullam iaculis varius lacus at commodo. Sed facilisis augue ligula, quis maximus sapien consequat vitae. Integer dui nunc, gravida id enim non, cursus lobortis dolor.
</p>
<p>
Integer feugiat tincidunt risus, quis porttitor felis lobortis sit amet. Quisque in blandit tellus. Praesent ex mi, semper eget justo eu, tempor lacinia elit. Sed ut dui eros. Phasellus justo arcu, tempus quis porttitor nec, auctor vel purus. Maecenas ut magna non mauris efficitur aliquam in at lacus. Phasellus dapibus felis sed mauris bibendum dictum. Proin interdum commodo euismod. Quisque sed feugiat lacus, sit amet vulputate ex.
</p>
<p>
Quisque mollis tempus sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vitae massa ut sem tempor tincidunt. Donec eu ex cursus, malesuada ligula quis, pellentesque metus. Pellentesque mi ante, dictum quis erat id, iaculis finibus sem. Sed non dui odio. Aliquam malesuada risus id enim condimentum, quis vestibulum risus lacinia. Sed sollicitudin odio eget justo aliquet, ut pulvinar lorem semper. Vestibulum at fermentum mi. Suspendisse vel nunc a urna tincidunt ultrices. Suspendisse at sem et erat accumsan malesuada vel at tortor. Duis sit amet dui ut massa posuere vestibulum non non velit. Morbi facilisis, velit vitae mollis feugiat, libero elit sollicitudin quam, id aliquam ex odio id ex. Maecenas et dictum elit.
</p>
</div>
</main>
<nav id="nav">
<div class="column">
<ul>
<li><a href="#Start">Sidebar HTML Template</a>
<ul>
<li><a href="#Subtitle1">Subtitle 1</a></li>
<li><a href="#Subtitle2">Subtitle 2</a></li>
</ul>
</ul>
</div>
</nav>
</body>
<script>
// open external links in new tab
document.addEventListener('DOMContentLoaded', function() {
let links = document.getElementsByTagName('a');
for (let i=0;i<links.length;i++){
if (links[i].hasAttribute("href") && links[i].hasAttribute("target") == false){
let url = new URL(links[i]);
if (url.protocol != 'file:' && url.hostname != window.location.host){
links[i].setAttribute('target', '_blank');
links[i].setAttribute('rel', 'nofollow');
}
}
}
},false);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment