Skip to content

Instantly share code, notes, and snippets.

@gjacobrobertson

gjacobrobertson/index.css

Last active September 13, 2019 23:54
Show Gist options
  • Save gjacobrobertson/403324f95151675dee1fba6d9c56761b to your computer and use it in GitHub Desktop.
Save gjacobrobertson/403324f95151675dee1fba6d9c56761b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.css
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: grid;
grid-template-rows: [top] auto [header] 1fr [footer] auto [bottom];
grid-template-columns: [left] auto [sidebar] 1fr [nav] auto [right];
height: 100vh;
}
header {
grid-column-start: left;
grid-column-end: right;
grid-row-start: top;
grid-row-end: header;
border-bottom: 1px solid gray;
text-align: center;
}
footer {
grid-column-start: left;
grid-column-end: right;
grid-row-start: footer;
grid-row-end: bottom;
border-top: 1px solid gray;
}
main {
overflow-y: scroll;
padding: 0 1em;
border-left: 1px solid gray;
border-right: 1px solid gray;
}
nav {
overflow-y: scroll;
padding: 0 1em;
}
ul {
list-style-type: none;
padding: 0;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Genealogy Facts</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js"></script>
</head>
<body>
<header>
<h1>David's Awesome Genealogy Facts Website</h1>
</header>
<nav>
<h2>Surnames</h2>
<ul data-sorted>
<li><a href="https://forebears.io/surnames/wang">Wang</a></li>
<li><a href="https://forebears.io/surnames/li">Li</a></li>
<li><a href="https://forebears.io/surnames/zhang">Zhang</a></li>
<li><a href="https://forebears.io/surnames/chen">Chen</a></li>
<li><a href="https://forebears.io/surnames/liu">Liu</a></li>
<li><a href="https://forebears.io/surnames/devi">Devi</a></li>
<li><a href="https://forebears.io/surnames/yang">Yang</a></li>
<li><a href="https://forebears.io/surnames/huang">Huang</a></li>
<li><a href="https://forebears.io/surnames/singh">Singh</a></li>
<li><a href="https://forebears.io/surnames/wu">Wu</a></li>
<li><a href="https://forebears.io/surnames/kumar">Kumar</a></li>
<li><a href="https://forebears.io/surnames/xu">Xu</a></li>
<li><a href="https://forebears.io/surnames/ali">Ali</a></li>
<li><a href="https://forebears.io/surnames/zhao">Zhao</a></li>
<li><a href="https://forebears.io/surnames/zhou">Zhou</a></li>
<li><a href="https://forebears.io/surnames/nguyen">Nguyen</a></li>
<li><a href="https://forebears.io/surnames/khan">Khan</a></li>
<li><a href="https://forebears.io/surnames/ma">Ma</a></li>
<li><a href="https://forebears.io/surnames/lu">Lu</a></li>
<li><a href="https://forebears.io/surnames/sun">Sun</a></li>
</ul>
</nav>
<main>
<h2>Blag</h2>
<p>
Duis dignissim rhoncus semper. Maecenas cum varius fringilla urna enim consectetur massa. Scelerisque
scelerisque, euismod tortor urna sociosqu lectus. Non interdum dapibus non vel posuere lectus per eget elementum
rhoncus velit senectus. Eleifend ultricies tristique arcu purus pretium gravida. Fames quis curae; nulla
elementum! Natoque ut porttitor lobortis montes taciti sociosqu. Dictum fames pretium primis massa fringilla?
Facilisi maecenas enim litora potenti tempor.
</p>
<p>
Cras enim mi ligula vehicula magnis mauris, rutrum scelerisque. Euismod taciti diam lobortis proin nostra justo
laoreet dis congue a. Nibh primis proin, vestibulum curae; sociis? Sed primis integer quisque suscipit sagittis
torquent senectus erat lacus placerat eu consequat. Orci ad dictumst fringilla lacinia magna netus tempor
torquent, enim ad. Congue eget rutrum placerat ipsum dui? Malesuada risus per curae; cubilia dolor non gravida
duis ultrices! Praesent odio sociosqu erat tincidunt torquent consectetur lorem ipsum pulvinar lectus. Aenean.
</p>
<p>
Gravida proin egestas fringilla eget praesent aenean iaculis suspendisse mattis quisque turpis nisi! Et eros
donec potenti? Enim sociosqu ornare massa. Facilisis class placerat nullam posuere massa mattis. Proin, et
parturient vehicula rhoncus ligula luctus nisl libero platea neque sed. Ut porta pretium ac ligula facilisi
conubia rutrum ligula aliquet nisl, a vivamus. Nibh ligula ridiculus malesuada cursus amet sociosqu mus
ultrices. Dapibus montes pulvinar iaculis maecenas ullamcorper orci, vivamus taciti curae;. Consectetur aliquam.
</p>
<p>
Fringilla urna aliquet amet suspendisse lectus natoque torquent. Viverra vestibulum praesent magna praesent;
natoque vitae orci lacus mattis curae;. Posuere ac primis consequat nam cras proin class nostra. Fermentum
magnis dictumst dui neque. Morbi imperdiet mus non purus rutrum phasellus ornare ut nostra erat. Integer
sollicitudin montes a in eget molestie netus enim potenti commodo. Aliquet porta etiam eros lectus venenatis.
Aenean, non class convallis? Vitae est justo convallis ut commodo molestie etiam, sem varius! Conubia neque
lacus tempor. Torquent a feugiat vel! Aliquet ultrices habitasse blandit velit sagittis!
</p>
<p>
Tincidunt erat vestibulum penatibus viverra ornare. Cum luctus consequat rhoncus aenean hac scelerisque
suspendisse! Habitant libero ultrices conubia. Cursus vivamus hendrerit non, praesent sem aliquam eget curabitur
ullamcorper ullamcorper varius! Sem senectus tristique volutpat curabitur eget habitant tempus faucibus feugiat
at orci tellus. Elementum penatibus vestibulum purus senectus turpis nisi rutrum! Consectetur nulla nascetur
conubia est bibendum porttitor libero elit luctus congue fringilla ac. Accumsan dis facilisi mollis. Dictum
ridiculus ut etiam? Netus erat augue litora iaculis tellus facilisi. Non volutpat convallis netus, feugiat ut.
Bibendum libero, odio malesuada et sed.
</p>
</main>
<nav>
<h2>Links</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<footer>
<marquee>🦶🦶🦶Footer🦶🦶🦶</marquee>
</footer>
</body>
</html>
Raw
index.js
document.addEventListener('DOMContentLoaded', () => {
const list = document.querySelector('[data-sorted]');
[...list.children]
.sort((a, b) => a.innerText > b.innerText ? 1 : -1)
.map(child => list.appendChild(child));
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment