Skip to content

Instantly share code, notes, and snippets.

View szpakoli's full-sized avatar

szpakoli szpakoli

5 followers · 3 following
View GitHub Profile
@szpakoli
szpakoli / css
Created May 10, 2013 14:07
CSS Button Hover Transition: Generic starter template for a simple hover / slide effect
.button {
display: inline-block;
height: 60px;
line-height: 60px;
overflow: hidden;
position: relative;
text-align: center;
border: 1px solid #ddd;
padding: 0 15px;
}
@szpakoli
szpakoli / pallete
Created May 10, 2013 14:11
Tomorrow Night Color Scheme: Hex values pulled from the "Tomorrow Night" color scheme
.tomorrow-night-colors{
color: #1D1F21;
color: #AEAFAD;
color: #C5C8C6;
color: #4B4E55;
color: #282A2E;
color: #373B41;
color: #969896;
color: #CED1CF;
color: #C66;
@szpakoli
szpakoli / jQuery
Created May 15, 2013 13:26
Scroll to position with jQuery: reference: http://web-design-weekly.com/snippets/scroll-to-position-with-jquery/ https://github.com/web-design-weekly/scroll-to-position-demo
$.fn.scrollView = function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
$('#scroll-link').click(function (event) {
@szpakoli
szpakoli / sass
Created May 15, 2013 13:42
sass mixins: reference: https://github.com/web-design-weekly/sass-mixins/blob/master/mixins.scss
// Mixins and examples
/* Responsive Breakpoints
========================================================================== */
@mixin breakpoint($point) {
@if $point == large {
@media (min-width: 64.375em) { @content; }
}
@else if $point == medium {
@media (min-width: 50em) { @content; }
@szpakoli
szpakoli / LESS
Created May 16, 2013 15:50
LESS Vendor Prefixes Mixin
.rotate(@deg: 7deg){
-webkit-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-o-transform: rotate(@deg);
transform: rotate(@deg);
}
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
@val: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @val;
-webkit-box-shadow: @val;
@szpakoli
szpakoli / CSS for <sup> and <sub>
Created June 3, 2013 03:07 — forked from unruthless/CSS for <sup> and <sub>
sub, sup {
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
font-size: 75%;
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
/* Where the magic happens: makes all browsers position
@szpakoli
szpakoli / flatUI-colors
Created July 1, 2013 20:30
Flat UI Colors pulled from http://flatuicolors.com/
// Flat UI Colors
@turquoise: #1ABC9C;
@green-sea: #16A085;
@emerland: #2ECC71;
@nephritis: #27AE60;
@peter-river: #3498DB;
@belize-hole: #2980B9;
@amethyst: #9B59B6;
@wisteria: #8E44AD;
@wet-asphalt: #34495E;
@szpakoli
szpakoli / LESS Mixin
Created July 2, 2013 15:01
CSS Font Sizes - REMs with PX fallback for older broswers (snippet pulled from Base Framework: http://matthewhartman.github.io/base/)
// Font Sizes (REMs with PX fallback for older browsers)
.font-size (@sizeValue) {
@remValue: @sizeValue / 16;
@pxValue: (@sizeValue);
font-size: ~"@{pxValue}px";
font-size: ~"@{remValue}rem";
}
// Line Height Sizes (REMs with PX fallback for older browsers)
.line-height (@sizeValue) {
@szpakoli
szpakoli / CSS
Created July 15, 2013 19:40
Play Button Overlay: Hover / Fade Overlay with centered play button
.vid-clip-sm {
width: 121px;
height: 88px;
position: relative;
margin: 0 8px 8px 0;
float: left;
}
.vid-clip-sm .vid-clip-play {
width: 121px;
@szpakoli
szpakoli / CSS
Created August 21, 2013 15:50
Decimal Leading Zero CSS Counter Reference: http://test.csswg.org/suites/css2.1/20101210/xhtml1/content-counter-006.xht http://www.w3.org/TR/2013/WD-css-counter-styles-3-20130718/#counter-styles
#test { counter-reset: c; }
#test span { counter-increment: c; }
#test span:before { content: counter(c, decimal-leading-zero); }