Skip to content

Instantly share code, notes, and snippets.

@jpetto

jpetto/new_school.html

Last active December 11, 2015 22:29
Show Gist options
  • Save jpetto/4670246 to your computer and use it in GitHub Desktop.
Save jpetto/4670246 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
new_school.html
<!DOCTYPE html>
<html>
<head>
<title>Mmm, Tasty!</title>
<link href='http://fonts.googleapis.com/css?family=Wendy+One|Pontano+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
html { font-size: 62.5%; }
body {
font-size: 1.6rem;
line-height: 133%;
background: #b9b9b4;
font-family: 'Pontano Sans', sans-serif;
}
a {
color: #b98b13;
padding: 5px;
text-decoration: none;
}
a:hover {
background: #b98b13;
color: #fff;
}
.header-font { font-family: 'Wendy One', sans-serif; }
.h1 { font-size: 4rem; }
.h2 { font-size: 3rem; }
.h3 { font-size: 2.5rem; }
.wrapper {
width: 720px;
padding: 2em;
margin: 0 auto;
background: #f1f1f1;
color: #222;
-webkit-box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.2);
}
.centered { text-align: center; }
.site-nav { margin-bottom: 6rem; }
.nav-links {
margin: 0;
padding: 0;
}
.nav-item {
display: inline;
margin-right: 1rem;
}
.nav-link {
font-size: 1.8rem;
}
.post-header {
border-bottom: 1px dotted #b1b1b1;
margin-bottom: 1rem;
}
.post {
margin-bottom: 6rem;
clear: both;
}
.sidebar {
float: right;
margin: 0 0 2rem 2rem;
width: 200px;
padding: 1rem;
background: #e2e2e2;
}
.gallery {
float: right;
width: 310px;
border: 1px solid #b1b1b1;
padding: 1rem;
margin: 0 0 2rem 2rem;
}
.caption {
font-style: italic;
display: block;
text-align: center;
}
.site-footer {
padding: 1.5rem;
background: #222;
color: #fff;
}
.toggle-theme {
background: #b9353d;
color: #fff;
padding: 1rem;
border: 0;
border-radius: 4px;
cursor: pointer;
}
/* dark styles */
.wrapper.dark {
background: #222;
color: #f1f1f1;
}
.dark .header {
border-color: #444;
}
.dark .sidebar {
background: #292929;
}
.dark .gallery {
border-color: #444;
}
.dark .site-footer {
background: #000;
}
</style>
</head>
<body>
<div id="wrapper" class="wrapper light">
<button type="button" id="toggle-theme" class="toggle-theme">Light/Dark</button>
<header class="site-header centered">
<hgroup>
<h1 class="h1 header-font">Things I like to eat</h1>
<h2 class="h2 header-font">And reasons why I like them</h2>
</hgroup>
</header>
<nav class="site-nav centered">
<ul class="nav-links">
<li class="nav-item"><a class="nav-link" href="#tacos">Tacos</a></li>
<li class="nav-item"><a class="nav-link" href="#sushi">Sushi</a></li>
<li class="nav-item"><a class="nav-link" href="#cookies">Cookies</a></li>
</ul>
</nav>
<main role="main" class="content">
<article class="post" id="tacos">
<header class="post-header">
<h1 class="h3 header-font">Tacos</h1>
</header>
<aside class="sidebar">
<p>The original sense of the word taco is of a "plug" or "wad" used to fill a hole.</p>
<p>
The sense development from "plug" may have taken place among Mexican silver miners,
who used explosive charges in plug form consisting of a paper wrapper and gunpowder filling.
</p>
</aside>
<p>
Keffiyeh assumenda flannel, pinterest blog fingerstache brunch nisi. Occupy deep v
mcsweeney's readymade. Tattooed cray narwhal, truffaut helvetica vero thundercats williamsburg
quis food truck put a bird on it dolor kale chips. Art party laboris hashtag tonx, locavore
chillwave godard fanny pack dolore occupy. Cred brooklyn cray fap. Seitan laborum aute pour-over
accusamus. Godard church-key labore, vegan lo-fi cupidatat reprehenderit umami cliche.
</p>
<p>
Delectus culpa pour-over, Austin YOLO DIY vero actually brunch eu vegan. Synth laboris
gastropub, food truck dolor magna assumenda sartorial +1 mustache consectetur wolf culpa eiusmod.
Sed neutra quis, velit ea truffaut do VHS polaroid mixtape freegan. Blog PBR locavore cupidatat,
wes anderson nostrud chillwave forage 3 wolf moon carles fugiat fap ut officia. Sriracha
chillwave aute duis commodo velit. Lomo eu ad vinyl, marfa banjo duis you probably haven't
heard of them flannel synth. Pug esse officia, retro assumenda vero wes anderson nesciunt sed
brooklyn.
</p>
</article>
<article class="post" id="sushi">
<header class="post-header">
<h1 class="h3 header-font">Sushi</h1>
</header>
<figure class="gallery">
<img src="http://farm9.staticflickr.com/8084/8305158440_c16e3784a0_q.jpg" />
<img src="http://farm8.staticflickr.com/7015/6440116361_170313c9a9_q.jpg" />
<img src="http://farm8.staticflickr.com/7193/6803612064_d76a511fdb_q.jpg" />
<img src="http://farm8.staticflickr.com/7254/8167644154_6b515b1444_q.jpg" />
<figcaption class="caption">Let's eat!</figcaption>
</figure>
<p>
Dolor etsy sed, organic quinoa yr vegan skateboard bespoke marfa american apparel authentic.
Whatever art party fixie, gluten-free brooklyn raw denim dolor fugiat biodiesel church-key food
truck keytar pug ethical. Ethnic synth laboris proident, duis beard fanny pack selvage nisi photo
booth. Hashtag messenger bag culpa, iphone dolor freegan enim pug mcsweeney's seitan consequat
fugiat butcher. Minim reprehenderit bespoke, carles kogi pitchfork gentrify occupy helvetica.
Shoreditch nostrud veniam aesthetic. Stumptown nostrud godard flannel irure, truffaut etsy.
</p>
<p>
Selvage ethical bushwick polaroid. Magna put a bird on it keffiyeh deep v fingerstache. Biodiesel
terry richardson sustainable, flexitarian ullamco street art readymade magna incididunt vinyl
pour-over adipisicing blog. Wolf Austin fingerstache viral hashtag. Aesthetic yr pug, ad
thundercats sriracha semiotics. Artisan blue bottle bicycle rights, etsy mollit street art quis.
Do eu before they sold out cardigan.
</p>
</article>
<article class="post" id="cookies">
<header class="post-header">
<h1 class="h3 header-font">Cookies</h1>
</header>
<aside class="sidebar">
<p>Did you know that no one cares what the British call cookies?</p>
</aside>
<p>
Vice vegan ex carles ugh semiotics twee. Est flannel yr squid, occupy pug try-hard banh mi
laboris +1. Yr brooklyn synth wayfarers mixtape, actually vero est 90's. Aesthetic selfies
pop-up, scenester commodo marfa mumblecore neutra truffaut synth duis lomo banh mi. Sustainable
disrupt put a bird on it, ethical retro ethnic cliche pork belly. Umami nostrud marfa chillwave,
pariatur eiusmod ex gluten-free. Pickled keytar cred, pork belly art party reprehenderit
portland.
</p>
<p>
Biodiesel 90's veniam gentrify ennui exercitation. Typewriter aute gastropub id, literally
irure consequat four loko put a bird on it craft beer. Wes anderson esse salvia sapiente ethnic
nesciunt, kogi butcher irure whatever mixtape. Put a bird on it meh tonx chambray labore.
Skateboard direct trade VHS, aesthetic 8-bit synth shoreditch master cleanse irony ut deserunt
lo-fi irure eiusmod hoodie. Ethnic organic before they sold out truffaut meh blue bottle iphone.
Marfa +1 hella try-hard, nisi meh voluptate swag laboris art party esse typewriter officia.
</p>
</article>
</main> <!-- /content -->
<footer class="site-footer">
<p>
&copy; 2013
You should totally <a href="">donate to my meal fund</a>.
</p>
</footer>
</div> <!-- /wrapper -->
<script type="text/javascript">
// get reference to the wrapper element
var wrapper = document.querySelector('#wrapper');
// get reference to the toggle button
var toggle_theme = document.querySelector("#toggle-theme");
// add a click event listener to the toggle button
toggle_theme.addEventListener('click', function(e) {
// stop the default action of clicking on the toggle button
e.preventDefault();
// if the wrapper is dark, make it light
if (wrapper.getAttribute('class') === 'wrapper dark') {
wrapper.setAttribute('class', 'wrapper light');
// otherwise, make it dark
} else {
wrapper.setAttribute('class', 'wrapper dark');
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment