Skip to content

Instantly share code, notes, and snippets.

.grid-align-middle .col {
vertical-align: middle;
}
/*
Because how many times have you been asked to center something vertically?
*/
@jxnblk
jxnblk / _ss-icon.scss
Created February 4, 2014 20:15
Simpler, more performant styles for Symbolset icons
/*
* Cleaner Symbolset styles
* Edited for front-end performance by Jxnblk
*
* - Removed all adjoining selectors
* - Removed slow ^= and *= selectors
* - Removed .right functionality
* - Removed ligature functionality
*
*/
@jxnblk
jxnblk / ashley-banner.html
Created January 22, 2014 20:03
Banner image for Ashley Tumblr theme
<style>
/* First, find this style, then comment it out or delete it. */
/*
header {
width: 90%;
padding: 2em 5% 0;
max-width: 48em;
margin: 0 auto;
overflow: hidden;
@jxnblk
jxnblk / ss-icon.css
Created November 22, 2013 16:45
Better vertical alignment for Symbolset Standard
/* Symbolset Standard Hack */
.ss-icon {
position: relative;
top: .1875em;
}
body,h1,h2,h3,h4,h5,h6,dl,ol,ul,p,button,input,select,textarea{margin:0}button,input,select,textarea{font-family:inherit;font-size:100%}.ul{list-style:none;padding-left:0}body{font-family:"skolar",Georgia,serif;line-height:1.5;font-weight:400}h1,.h1{font-size:2rem;line-height:1.25}h2,.h2{font-size:1.5rem;line-height:1.25}h3,h4,h5,h6,dl,ol,ul,p,.p{font-size:1.125em}small,.sm{font-size:.875em}@media (min-width: 768px){.res .h1,.res.h1{font-size:4rem}.res .h2,.res.h2{font-size:2rem}.res .p,.res.p{font-size:1.25rem}.res .small,.res.small{font-size:1rem}}@media (min-width: 1024px){.res .h1,.res.h1{font-size:6rem}.res .h2,.res.h2{font-size:3rem}}strong,.bold{font-weight:700}.reg{font-weight:normal}.caps{text-transform:uppercase;letter-spacing:.2em}.center{text-align:center}.right-align{text-align:right}.m1{margin:1rem}.mt1{margin-top:1rem}.mr1{margin-right:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.m2{margin:2rem}.mt2{margin-top:2rem}.mr2{margin-right:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.m3{
// Aspect ratio classes are useful for things like fluid-width background images
// These fill the width of parent elements
.aspect-square {
width: 100%;
height: 0;
padding-bottom: 100%;
}
.aspect-4o3 {
@jxnblk
jxnblk / Preferences.sublime-settings
Created September 7, 2013 16:19
Sublime Text 3 Prefs
{
"color_scheme": "Packages/User/Jxn.tmTheme",
"font_face": "Source Code Pro",
"font_size": 18.0,
"highlight_line": true,
"ignored_packages":
[
],
"line_padding_bottom": 4,
"open_files_in_new_window": false,
@jxnblk
jxnblk / .gvimrc
Created September 4, 2013 22:16
.gvimrc work in progress
set nocompatible
set history=256
set runtimepath^=~/.vim/bundle/ctrlp.vim
execute pathogen#infect()
nnoremap ff :CtrlP<CR>
set expandtab
set autoindent
set tabstop=2
set shiftwidth=2
set smarttab
@jxnblk
jxnblk / padding.css
Last active December 21, 2015 06:38
Padding Utilities
.p-1 { padding: 1rem; }
.pt-1 { padding-top: 1rem; }
.pr-1 { padding-right: 1rem; }
.pb-1 { padding-bottom: 1rem; }
.pl-1 { padding-left: 1rem; }
.p-2 { padding: 2rem; }
.pt-2 { padding-top: 2rem; }
.pr-2 { padding-right: 2rem; }
.pb-2 { padding-bottom: 2rem; }
@jxnblk
jxnblk / margins.css
Created August 19, 2013 02:30
Margin Utilities
.m-1 { margin: 1rem; }
.mt-1 { margin-top: 1rem; }
.mr-1 { margin-right: 1rem; }
.mb-1 { margin-bottom: 1rem; }
.ml-1 { margin-left: 1rem; }
.m-2 { margin: 2rem; }
.mt-2 { margin-top: 2rem; }
.mr-2 { margin-right: 2rem; }
.mb-2 { margin-bottom: 2rem; }