Skip to content

Instantly share code, notes, and snippets.

View trevor-atlas's full-sized avatar
👾
Variety is the spice of life, or something

Trevor Atlas trevor-atlas

👾
Variety is the spice of life, or something
View GitHub Profile
@trevor-atlas
trevor-atlas / clearfix.css
Created November 26, 2013 17:38
Clearfix hack using pseudo elements
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
@trevor-atlas
trevor-atlas / webform.css
Last active December 29, 2015 11:19
Better Drupal webforms
input[type="text"], input[type="password"], input[type="search"], textarea, input {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% sans-serif;
width: 250px;
background: #FFFFFF url('../images/bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
@trevor-atlas
trevor-atlas / better-hr.css
Created November 26, 2013 17:36
Better HR tag styling
hr.carved {
float: none;
width: 100%;
height: 2px;
margin: 1.4em 0;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
@trevor-atlas
trevor-atlas / better-helvetica.css
Created November 26, 2013 17:35
Better helvetica for all browsers
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
@trevor-atlas
trevor-atlas / youtube-embed.css
Last active December 29, 2015 11:19
Responsive Youtube video embeds.
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
@trevor-atlas
trevor-atlas / border-box.css
Last active December 29, 2015 11:19
Border box sizing for all elements
/* apply a natural box layout model to all elements */
*, *:before, *:after {
box-sizing: border-box;
}