James snowman-repos
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| /* ROLL LINKS */ | |
| .roll-link { | |
| display: inline-block; | |
| overflow: hidden; | |
| vertical-align: top; |
snowman-repos
/ Remove whitespace around text fields
Last active
October 12, 2015 03:58
CSS: remove whitespace around text fields
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| input, | |
| textarea { | |
| margin:0; | |
| vertical-align:bottom; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Word Wrapping | |
| @mixin word-wrap() { | |
| -ms-word-break: break-all; | |
| word-break: break-all; | |
| word-break: break-word; | |
| -webkit-hyphens: auto; | |
| -moz-hyphens: auto; | |
| hyphens: auto; | |
| } | |
| .word-wrap { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Overflow Ellipsis | |
| @mixin ellipsis() { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| } | |
| .ellipsis { | |
| @include ellipsis; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin keyframes($name) { | |
| @-webkit-keyframes #{$name} { | |
| @content | |
| } | |
| @-moz-keyframes #{$name} { | |
| @content | |
| } | |
| @-ms-keyframes #{$name} { | |
| @content | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin breakpoint($point) { | |
| @if $point == mama-bear { | |
| @media (max-width: 1250px) { @content; } | |
| } | |
| @if $point == baby-bear { | |
| @media (max-width: 800px) { @content; } | |
| } | |
| @if $point == reverso-baby-bear { | |
| @media (min-width: 800px) { @content; } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin font-stack-brand { | |
| font-family: 'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif; | |
| } | |
| @mixin font-stack-headers { | |
| font-family: 'Whitney Cond A', 'Whitney Cond B', "ronnia-condensed", sans-serif; | |
| font-weight: 700; | |
| font-style: normal; | |
| } | |
| @mixin font-stack-body { | |
| font-family: 'Whitney SSm A', 'Whitney SSm B', "ff-meta-web-pro", sans-serif; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin box-emboss($outerOpacity, $innerOpacity) { | |
| box-shadow: | |
| rgba(white, $outerOpacity) 0 1px 0, | |
| rgba(black, $innerOpacity) 0 1px 0 inset; | |
| } | |
| .module, header[role="banner"] { | |
| @include box-emboss(0.3, 0.6); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| SQUARE | |
| */ | |
| #square { | |
| width: 100px; | |
| height: 100px; | |
| background: #000; | |
| } |