Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
242 lines (219 sloc) 10.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pancake.CSS</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,500,600" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<nav class="main-nav">
<ul class="nav">
<li><a href="#about">About</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#examples">Examples</a></li>
</ul>
</nav>
<section class="hero">
<div class="container">
<div class="logo">
<svg class="icon-svg" viewBox="0 0 201 155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<ellipse id="path-1" cx="94.3630952" cy="34.0540541" rx="94.3630952" ry="34.0540541"></ellipse>
<ellipse id="path-3" cx="92.0892857" cy="26.4864865" rx="94.3630952" ry="34.0540541"></ellipse>
<ellipse id="path-5" cx="94.3630952" cy="34.0540541" rx="94.3630952" ry="34.0540541"></ellipse>
<ellipse id="path-7" cx="92.8472222" cy="24.2162162" rx="94.3630952" ry="34.0540541"></ellipse>
<ellipse id="path-9" cx="94.3630952" cy="34.0540541" rx="94.3630952" ry="34.0540541"></ellipse>
<ellipse id="path-11" cx="92.8472222" cy="26.4864865" rx="94.3630952" ry="34.0540541"></ellipse>
<ellipse id="path-13" cx="94.3630952" cy="34.0540541" rx="94.3630952" ry="34.0540541"></ellipse>
<ellipse id="path-15" cx="94.3630952" cy="26.4864865" rx="94.3630952" ry="34.0540541"></ellipse>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard">
<g id="Icon" transform="translate(6.000000, 11.000000)">
<g id="stack">
<g id="Group" transform="translate(0.000000, 71.891892)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" stroke="#FCEFB8" stroke-width="5" fill="#FCEFB8" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask" stroke="#FCEFB8" stroke-width="5" fill="#F6DA9D" xlink:href="#path-3"></use>
</g>
<g id="Group" transform="translate(0.000000, 49.189189)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="Mask" stroke="#FCEFB8" stroke-width="5" fill="#FCEFB8" xlink:href="#path-5"></use>
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<use id="Mask" stroke="#FCEFB8" stroke-width="5" fill="#F6DA9D" xlink:href="#path-7"></use>
</g>
<g id="Group" transform="translate(2.273810, 24.216216)">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<use id="Mask" stroke="#FCEFB8" stroke-width="5" fill="#FCEFB8" xlink:href="#path-9"></use>
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<use id="Mask" stroke="#FCEFB8" stroke-width="5" fill="#F6DA9D" xlink:href="#path-11"></use>
</g>
<g id="Group">
<mask id="mask-14" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<use id="Mask" stroke="#FCEFB8" stroke-width="5" fill="#FCEFB8" xlink:href="#path-13"></use>
<mask id="mask-16" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<use id="Mask" stroke="#FCEFB8" stroke-width="5" fill="#F6DA9D" xlink:href="#path-15"></use>
</g>
</g>
<path d="M84.0165583,18.4065747 C83.1814028,14.0755454 86.0535485,11.0720421 90.424447,11.6970289 L122.062614,16.2209123 C126.436749,16.8463618 130.564823,20.8847894 131.282632,25.2392086 L135.615584,51.5240432 C136.333524,55.8792612 133.367688,58.9702456 128.970151,58.5008284 C128.970151,58.5008284 120.849077,57.2249247 114.665853,58.0386639 C108.482628,58.852403 92.2083397,62.3010299 89.8393529,60.316308 C87.6446079,58.4775648 87.1362527,49.2757921 87.2799482,42.0216369 C87.4236438,34.7674816 84.0165583,18.4065747 84.0165583,18.4065747 Z" id="Butter" stroke-opacity="0.117725317" stroke="#F6A623" stroke-width="2" fill="#FFF13A" transform="translate(109.797418, 36.269010) rotate(320.000000) translate(-109.797418, -36.269010) "></path>
</g>
</g>
</g>
</svg>
<div class="project-info">
<h1>pancake</h1>
</div>
</div>
</div>
</section> <!-- end hero -->
<section id="about" class="about">
<div class="container">
<div class="griddle">
<div class="about-text">
<p>A deliciously simple CSS grid. Enjoy it however you want* with as many stacks as you like. Put them in a griddle and go.<span class="maple-syrup">*Maple syrup optional</span></p>
</div>
</div>
<a target="_blank" href="https://github.com/jveens/pancake" class="button">View on GitHub</a>
</div>
</section>
<section id="usage" class="usage">
<div class="container">
<div class="griddle">
<div class="usage-text">
<h2>Usage</h2>
<p>Pancake is quick to configure and easy to use. Define your grid in config.scss and compile away. No presentational classes here, use the grid mixins right in your Sass files.</p>
<div class="config-example">
<pre>$stack-number : 12;</pre>
<pre>$space-between : 15px;</pre>
<br />
<pre class="comment">// Your stacks go in a griddle</pre>
<pre>@include griddle()</pre>
<pre class="comment">// Define the width of your pancakes</pre>
<pre>@include stack-span(3)</pre>
<pre class="comment">// Move your pancake to the left</pre>
<pre>@include move-left(2)</pre>
<pre class="comment">// Move your pancake to the right</pre>
<pre>@include move-right(2)</pre>
</div>
</div>
</div>
</div>
</section>
<section id="examples" class="examples">
<div class="container">
<h2>Examples</h2>
<div class="griddle example-1">
<span class="label">@include stack-span(1)</span>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
<div class="pancake-1">🥞</div>
</div>
<div class="griddle example-2">
<span class="label">@include stack-span(2)</span>
<div class="pancake-2">🥞 🥞</div>
<div class="pancake-2">🥞 🥞</div>
<div class="pancake-2">🥞 🥞</div>
<div class="pancake-2">🥞 🥞</div>
<div class="pancake-2">🥞 🥞</div>
<div class="pancake-2">🥞 🥞</div>
</div>
<div class="griddle example-3">
<span class="label">@include stack-span(3)</span>
<div class="pancake-3">🥞 🥞 🥞</div>
<div class="pancake-3">🥞 🥞 🥞</div>
<div class="pancake-3">🥞 🥞 🥞</div>
<div class="pancake-3">🥞 🥞 🥞</div>
</div>
<div class="griddle example-4">
<span class="label">@include stack-span(4)</span>
<div class="pancake-4">🥞 🥞 🥞 🥞</div>
<div class="pancake-4">🥞 🥞 🥞 🥞</div>
<div class="pancake-4">🥞 🥞 🥞 🥞</div>
</div>
<div class="griddle example-5">
<span class="label">@include stack-span(6)</span>
<div class="pancake-6">🥞 🥞 🥞 🥞 🥞 🥞</div>
<div class="pancake-6">🥞 🥞 🥞 🥞 🥞 🥞</div>
</div>
<div class="griddle example-6">
<span class="label">@include stack-span(12)</span>
<div class="pancake-12">🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞 🥞</div>
</div>
<div class="griddle example-7">
<span class="label">@include stack-span(5)<br />@include move-left(3)</span>
<div class="pancake-5">🥞 🥞 🥞 🥞 🥞</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="griddle">
<h3>Created by <a target="_blank" href="http://jennyveens.com">Jenny Veens</a></h3>
</div>
</div>
</footer>
<script>
// Not a ton of code, but hard to
const nav = document.querySelector('nav.main-nav');
const jumpLinks = document.querySelectorAll('nav.main-nav ul li a');
const hero = document.querySelector('section.hero');
const trigger = hero.clientHeight / 2;
function changeNav() {
if(window.scrollY >= trigger) {
document.body.classList.add('add-background');
} else {
document.body.classList.remove('add-background');
}
}
function scrollTo(element, target, duration) {
if (duration <= 0) return;
var difference = target - element.scrollTop;
var perTick = difference / duration * 15;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === target) return;
scrollTo(element, target, duration - 10);
}, 10);
}
function jump( event ){
event.preventDefault();
let element = document.querySelector( this.hash );
let target = element.offsetTop - 56;
scrollTo(document.body, target, 250);
}
window.addEventListener('scroll', changeNav);
jumpLinks.forEach( link => {
link.addEventListener('click', jump);
});
</script>
</body>
</html>