Skip to content

Instantly share code, notes, and snippets.

View NatalieMac's full-sized avatar

Natalie NatalieMac

33 followers · 1 following
View GitHub Profile
@NatalieMac
NatalieMac / functions.php
Created February 12, 2013 04:37
Step 1: Adding Google Web Fonts to your WordPress theme
function ggl_load_styles() {
}
@NatalieMac
NatalieMac / functions.php
Last active December 12, 2015 10:39
Step 2: Adding Google Web Fonts to your WordPress theme
function ggl_load_styles() {
if (!is_admin()) {
wp_register_style('googleFont', 'http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script');
}
}
@NatalieMac
NatalieMac / functions.php
Last active December 12, 2015 10:39
Step 3: Adding Google Web Fonts to your WordPress theme
function ggl_load_styles() {
if (!is_admin()) {
wp_register_style('googleFont', 'http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script');
wp_enqueue_style('ggl', get_stylesheet_uri(), array('googleFont') );
}
}
@NatalieMac
NatalieMac / functions.php
Last active December 12, 2015 10:39
Step 4: Adding Google Web Fonts to your WordPress theme
function ggl_load_styles() {
if (!is_admin()) {
wp_register_style('googleFont', 'http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script');
wp_enqueue_style('ggl', get_stylesheet_uri(), array('googleFont') );
}
}
add_action('wp_enqueue_scripts', 'ggl_load_styles');
@NatalieMac
NatalieMac / style.css
Created February 12, 2013 04:52
Step 5: Adding Google Web Fonts to your WordPress theme
h1, h2, h3, h4, h5, h6 {
font-family: 'Holtwood One SC', serif;
}
@NatalieMac
NatalieMac / style.css
Created February 12, 2013 04:57
Step 6: Adding Google Web Fonts to your WordPress theme
.site-description {
font-family: 'Rouge Script', cursive;
}
@NatalieMac
NatalieMac / gist:7622248
Created November 24, 2013 01:30
Sass Breakpoint for Mobile
Setting up breakpoints:
@mixin bp($point) {
@if $point == lg {
@media screen and (min-width: 960px) { @content; }
}
@else if $point == md {
@media screen and (min-width: 600px) { @content; }
}
@else if $point == sm {
@NatalieMac
NatalieMac / gist:7622263
Created November 24, 2013 01:33
converting pixels to rems
@function cr($size) {
$remSize: $size / 16px;
@return #{$remSize}rem;
}
Calling the function:
body {
@NatalieMac
NatalieMac / index.html
Last active January 2, 2016 18:49
Text on hover image list markup
<ul class="img-list">
<li>
<a href="http://nataliemac.com">
<img src="http://geekgirllife.com/images/filename.jpg" width="150" height="150" />
<span class="text-content"><span>Place Name</span></span>
</a>
</li>
...
</ul>
@NatalieMac
NatalieMac / style.css
Created January 10, 2014 03:37
Step 1: CSS to style text on hover image lists
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 150px;