Skip to content

Instantly share code, notes, and snippets.

View NatalieMac's full-sized avatar

Natalie NatalieMac

35 followers · 1 following
View GitHub Profile
@NatalieMac
NatalieMac / style.css
Last active January 2, 2016 18:58
CSS to animate the transition
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
@NatalieMac
NatalieMac / style.css
Last active January 2, 2016 18:58
CSS to show text only on hover
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
@NatalieMac
NatalieMac / style.css
Last active January 2, 2016 18:49
Step 2: CSS to place text on images
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
@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;
@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 / 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 / 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 / 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 / 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 / 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');