Skip to content

Instantly share code, notes, and snippets.

View NatalieMac's full-sized avatar

Natalie NatalieMac

View GitHub Profile
@NatalieMac
NatalieMac / style.css
Created May 7, 2014 07:33
Momentum scrolling on iOS
body {
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
@NatalieMac
NatalieMac / style.css
Created May 7, 2014 07:24
Table layout fix
.site {
display: table;
height: 100%;
table-layout: fixed;
width: 100%;
}
@NatalieMac
NatalieMac / style.css
Last active September 30, 2019 03:01
Sticky footer w/ Underscores markup
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow: scroll;
}
@NatalieMac
NatalieMac / index.html
Created May 7, 2014 07:13
Sample Underscores HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Sample Underscores HTML Structure</title>
</head>
<body>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner"></header>
<div id="content" class="site-content"></div>
<footer id="colophon" class="site-footer" role="contentinfo"></footer>
@NatalieMac
NatalieMac / index.html
Created April 5, 2014 16:52
jQuery Slideshow Plugin
<!doctype html>
<html lang="en" class="jsOff">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
@NatalieMac
NatalieMac / index.html
Created April 5, 2014 16:50
Scroll to Top jQuery Plugin
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scrolly jQuery Plugin</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<h1>This is a lot of text</h1>
@NatalieMac
NatalieMac / index.html
Created April 5, 2014 16:47
Link Location jQuery Plugin
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link Location Plugin</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<h1>Here's a bunch of links</h1>
p:first-of-type {
font-size: 1.125em;
}
p:first-of-type:first-line {
font-size: 1.125em;
font-style:italic;
}
p:first-of-type:first-letter {
html {
font-size: 0.875em; /* 14 pixels */
}
@media (min-width: 30em) {
html {
font-size: 1em; /* 16 pixels */
}
}
.photo-grid figcaption {
background: rgba(0,0,0,0.8);
color: white;
display: table;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;