Skip to content

Commit

Permalink
Tweak styles for the index page
Browse files Browse the repository at this point in the history
  • Loading branch information
@biilmann
biilmann committed Mar 20, 2013
1 parent 98878d2 commit 1ef384d
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 73 deletions.
188 changes: 117 additions & 71 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,28 @@
body {
font-family: 'Neuton', serif;
font-size: 24px;
max-width: 940px;
margin: 0 auto;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Alfa Slab One', cursive;
font-weight: 400;
}
h1 {
font-size: 72px;
margin-bottom: 0;
}
h2 {
font-size: 48px;
margin: 72px 0 0;
}

a, a:visited, a:active {
text-decoration: none;
color: rgb(84, 143, 207);
}
a:hover {
color: rgb(117, 174, 236);
}
pre {
margin: 32px 0;
padding: 32px 18px;
Expand All @@ -46,20 +53,46 @@
footer {
margin-top: 72px;
font-size: 16px;
padding: 20px 0;
background: #222;
}
footer a, footer a:visited, footer a:active {
color: #efefef;
}
footer a:hover {
color: #fff;
}

p.lead {
font-size: 32px;
margin-top: 18px;
}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
.note-container {
margin-top: 10px;
}
.note {
padding: 18px 20px;
background: #eee;
margin-top: 10px;
text-decoration:none;
color:#000;
background:#ffc;
display:block;
padding: 20px;
width: 210px;
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
font-size: 18px;
}
.note h3 {
font-size: 32px;
margin: 0 0 18px;
margin: 0;
}

.container { overflow: hidden; }
Expand All @@ -80,90 +113,103 @@
.left-nav .left-col { width: 20%; }
.left-nav .right-col { width: 80%; }
.left-nav .nav {
margin-top: 136px;
list-style: none;
margin: 136px 0 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<header>
<h1 class="logo">jQuery.Pin</h1>
<h2 class="sub">Make your stuff stick!</h2>
</header>
<section class="container">
<div class="row">
<div class="left-col">
<p class="lead">
Ever wanted to <strong>pin</strong> something to the side of a text? Ever needed a subtle sticky element to quietly hang around as you scroll down?
</p>

<p>
<strong>Jquery.Pin</strong> is here to help! Pin any element to the top of a container. Easily <strong>disable</strong> it for smaller screen-sizes where there's no room for that kind of shenanigans.
</p>
<h2>Pin an element:</h2>
<pre><code>$(".pinned").pin()</code></pre>
<h2>Pin within a container</h2>
<pre><code>$(".pinned").pin({
containerSelector: ".container"
})</code></pre>
</div>
<div class="right-col">
<div class="pinned note">
<h3>Pin it!</h3>
<p>Developed by <a href="http://www.webpop.com">Webpop</a>.</p>
<p>Great for pinned navigations — or just about anything you want to stick.</p>
</div>
</div>
<div class="wrapper">
<h1 class="logo">jQuery.Pin</h1>
</div>
</section>
<section class="gallery">
<h2>Great for Kittens</h2>
<div class="container">
</header>
<div class="wrapper">
<h2 class="sub">Make your stuff stick!</h2>
<section class="container">
<div class="row">
<div class="left-col">
<img src="http://lorempixel.com/700/800/cats" width="700" height="800"/>
<p class="lead">
Ever wanted to <strong>pin</strong> something to the side of a text? Ever needed a subtle sticky element to quietly hang around as you scroll down?
</p>

<p>
<strong>jQuery.Pin</strong> is here to help! Pin any element to the top of a container. Easily <strong>disable</strong> it for smaller screen-sizes where there's no room for that kind of shenanigans.
</p>
<h2>Grab the plugin</h2>
<p>
Download <a href="https://raw.github.com/webpop/jquery.pin/gh-pages/jquery.pin.js">jquery.pin.js</a> from <a href="https://github.com/webpop/jquery.pin">our Github repo</a>.
</p>
<h2>Pin an element:</h2>
<pre><code>$(".pinned").pin()</code></pre>
<h2>Pin within a container</h2>
<pre><code>$(".pinned").pin({
containerSelector: ".container"
})</code></pre>
</div>
<div class="right-col">
<div class="pinned">
<h4>Its a cat!</h4>
<p>This description hangs around</p>
<div class="pinned note-container">
<div class="note">
<h3>Pin it!</h3>
<p>Great for pinned navigations — or just about anything you want to stick.</p>
<p>Developed by <a href="http://www.webpop.com">Webpop</a>.</p>
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<h2>Great for Kittens</h2>
<div class="container">
<div class="row">
<div class="left-col">
<img src="http://lorempixel.com/700/800/cats" width="700" height="800"/>
</div>
<div class="right-col">
<div class="pinned">
<h4>Its a cat!</h4>
<p>This description hangs around</p>
</div>
</div>
</div>
</div>
</div>

</section>
</section>

<section class="left-nav">
<div class="container">
<div class="row">
<div class="left-col">
<ul class="nav pinned">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
</ul>
</div>
<div class="right-col">
<h2>Want a sticky left menu?</h2>
<p class="lead">Just like the <a href="http://www.webpop.com/docs">Webpop documentation</a>? <strong>Pin</strong> it to the left and relax</p>
<p>Macaroon donut tiramisu gummies. Jelly halvah oat cake pastry lemon drops apple pie tart. Muffin tart donut tiramisu. Lollipop tiramisu danish cupcake topping macaroon powder. Topping candy carrot cake halvah tiramisu sesame snaps donut lollipop jelly beans. Cotton candy biscuit jelly-o jelly-o. Gummies jelly beans croissant powder. Chocolate cake marzipan halvah cupcake pudding sesame snaps.</p>
<p>Ice cream chocolate bar sweet roll chupa chups gummies soufflé lemon drops chocolate bar. Pie donut tiramisu gingerbread candy canes carrot cake sweet lollipop tart. Danish wafer pudding oat cake croissant oat cake cupcake. Dessert brownie halvah bear claw oat cake sesame snaps pudding lollipop. Tiramisu bear claw sesame snaps cheesecake powder. Topping gummies soufflé fruitcake cake pudding wafer. Candy pie tiramisu jelly beans.</p>
<p>Donut sweet jelly chocolate cake icing topping croissant bonbon wafer. Tootsie roll lemon drops tiramisu muffin croissant danish. Sesame snaps soufflé wypas cookie tiramisu. Biscuit biscuit croissant fruitcake danish caramels jelly beans. Wafer muffin gingerbread cookie macaroon. Pastry lollipop croissant sweet cotton candy chocolate cake jelly-o sugar plum. Carrot cake gingerbread ice cream pastry. Gummi bears soufflé bonbon ice cream cake biscuit brownie powder. Gummi bears cake chocolate bar pastry topping gummi bears marzipan soufflé danish.</p>
<p>Brownie topping cake oat cake liquorice bear claw candy canes tiramisu apple pie. Pudding oat cake sugar plum sweet roll gingerbread. Cake jelly-o candy canes dragée. Tiramisu sugar plum cupcake cotton candy tootsie roll sweet. Jujubes gingerbread donut fruitcake cheesecake sweet roll soufflé. Tootsie roll donut sesame snaps marzipan candy carrot cake chocolate cake. Tootsie roll applicake chupa chups. Caramels wafer gummies chocolate pastry liquorice apple pie chocolate chocolate. Fruitcake lollipop cupcake apple pie pie dessert powder cotton candy bear claw. Dragée muffin caramels gummi bears sesame snaps wypas cheesecake oat cake.</p>
<p>Gummies jelly-o oat cake. Oat cake dessert muffin apple pie carrot cake halvah chocolate cake. Ice cream faworki fruitcake. Lemon drops fruitcake marshmallow oat cake apple pie. Jelly danish pastry liquorice halvah tart gingerbread. Soufflé sweet soufflé biscuit sesame snaps jelly beans liquorice dessert apple pie. Cake ice cream candy toffee croissant sesame snaps topping candy. Halvah dessert macaroon sweet halvah marzipan caramels cake.</p>
<section class="left-nav">
<div class="container">
<div class="row">
<div class="left-col">
<ul class="nav pinned">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
</ul>
</div>
<div class="right-col">
<h2>Want a sticky left menu?</h2>
<p class="lead">Just like the <a href="http://www.webpop.com/docs">Webpop documentation</a>? <strong>Pin</strong> it and relax.</p>
<p>Macaroon donut tiramisu gummies. Jelly halvah oat cake pastry lemon drops apple pie tart. Muffin tart donut tiramisu. Lollipop tiramisu danish cupcake topping macaroon powder. Topping candy carrot cake halvah tiramisu sesame snaps donut lollipop jelly beans. Cotton candy biscuit jelly-o jelly-o. Gummies jelly beans croissant powder. Chocolate cake marzipan halvah cupcake pudding sesame snaps.</p>
<p>Ice cream chocolate bar sweet roll chupa chups gummies soufflé lemon drops chocolate bar. Pie donut tiramisu gingerbread candy canes carrot cake sweet lollipop tart. Danish wafer pudding oat cake croissant oat cake cupcake. Dessert brownie halvah bear claw oat cake sesame snaps pudding lollipop. Tiramisu bear claw sesame snaps cheesecake powder. Topping gummies soufflé fruitcake cake pudding wafer. Candy pie tiramisu jelly beans.</p>
<p>Donut sweet jelly chocolate cake icing topping croissant bonbon wafer. Tootsie roll lemon drops tiramisu muffin croissant danish. Sesame snaps soufflé wypas cookie tiramisu. Biscuit biscuit croissant fruitcake danish caramels jelly beans. Wafer muffin gingerbread cookie macaroon. Pastry lollipop croissant sweet cotton candy chocolate cake jelly-o sugar plum. Carrot cake gingerbread ice cream pastry. Gummi bears soufflé bonbon ice cream cake biscuit brownie powder. Gummi bears cake chocolate bar pastry topping gummi bears marzipan soufflé danish.</p>
<p>Brownie topping cake oat cake liquorice bear claw candy canes tiramisu apple pie. Pudding oat cake sugar plum sweet roll gingerbread. Cake jelly-o candy canes dragée. Tiramisu sugar plum cupcake cotton candy tootsie roll sweet. Jujubes gingerbread donut fruitcake cheesecake sweet roll soufflé. Tootsie roll donut sesame snaps marzipan candy carrot cake chocolate cake. Tootsie roll applicake chupa chups. Caramels wafer gummies chocolate pastry liquorice apple pie chocolate chocolate. Fruitcake lollipop cupcake apple pie pie dessert powder cotton candy bear claw. Dragée muffin caramels gummi bears sesame snaps wypas cheesecake oat cake.</p>
<p>Gummies jelly-o oat cake. Oat cake dessert muffin apple pie carrot cake halvah chocolate cake. Ice cream faworki fruitcake. Lemon drops fruitcake marshmallow oat cake apple pie. Jelly danish pastry liquorice halvah tart gingerbread. Soufflé sweet soufflé biscuit sesame snaps jelly beans liquorice dessert apple pie. Cake ice cream candy toffee croissant sesame snaps topping candy. Halvah dessert macaroon sweet halvah marzipan caramels cake.</p>
</div>
</div>
</div>
</div>
</section>
</section>
</div>

<footer>
<div class="container">
<div class="left-col">
<a href="http://mathias-biilmann.net">&copy; Mathias Biilmann, 2013</a>
</div>
<div class="right-col text-right">
<a href="http://www.webpop.com">A Webpop Production</a>
<div class="wrapper">
<div class="container">
<div class="left-col">
<a href="http://mathias-biilmann.net">&copy; Mathias Biilmann, 2013</a>
</div>
<div class="right-col text-right">
<a href="http://www.webpop.com">A Webpop Production</a>
</div>
</div>
</div>
</footer>
Expand Down
3 changes: 1 addition & 2 deletions jquery.pin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
for (var i=0, len=elements.length; i<len; i++) {
var $this = elements[i],
data = {};



if ($(window).width() <= 940) {
if ($this.parent().is(".pin-wrapper")) { $this.unwrap(); }
$this.css({width: "", left: "", top: "", position: ""});
Expand Down

0 comments on commit 1ef384d

Please sign in to comment.