Scott W. halofx
halofx
/ leading.css
Last active
January 30, 2017 22:28
CSS based Molten Leading technique. by Mike Riethmuller, adapted from Wilto. Found from a CSS-Tricks email.
This file contains hidden or 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
| .molten-leading { | |
| line-height: 1.2em; | |
| } | |
| @media screen and (min-width: 20em) { | |
| .molten-leading { | |
| line-height: calc(1.2em + 0.6 * ((100vw - 20em) / 60)); | |
| } | |
| } |
halofx
/ SassMeister-input.scss
Last active
August 13, 2020 07:35
Responsive Font Size with Sass Maps
This file contains hidden or 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
| // ---- | |
| // libsass (v3.2.5) | |
| // From https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/ | |
| // ---- | |
| // Breakpoint values for min-width operators. | |
| $breakpoints: ( | |
| small : 480px, | |
| medium: 700px, | |
| large : 1024px |
This file contains hidden or 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
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| $font-stack: | |
| (group: lato, id: light, font: ('Lato', san-serif ), weight: 300, style: normal), | |
| (group: lato, id: light-italic, font: ('Lato', san-serif ), weight: 300, style: italic), | |
| (group: lato, id: regular, font: ('Lato', san-serif), weight: 400, style: normal), | |
| (group: lato, id: regular-italic, font: ('Lato', san-serif), weight: 400, style: italic), | |
| (group: lato, id: bold, font: ('Lato', san-serif), weight: 700, style: normal), |
halofx
/ Unitless PX to Rem Font Size.css
Last active
August 29, 2015 14:11
Unitless version of previous rem mixin
This file contains hidden or 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
| p { | |
| font-size: 42px; | |
| font-size: 4.2rem; | |
| } | |
| p { | |
| font-size: 42px; | |
| font-size: 4.2rem; | |
| } |
This file contains hidden or 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
| // ---- | |
| // Sass (v3.4.7) | |
| // Breakpoint (v2.5.0) | |
| // ---- | |
| @import "breakpoint"; | |
| // Single Value. | |
| $single: screen 500px; |
This file contains hidden or 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
| // ---- | |
| // Sass (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Supports back to IE5 | |
| @mixin opacity($opacity) { | |
| opacity: $opacity; | |
| filter: alpha(opacity=$opacity*100); //IE8 |
This file contains hidden or 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
| a { | |
| color: gray; | |
| -webkit-transition: color 0.3s ease; | |
| -moz-transition: color 0.3s ease; | |
| -ms-transition: color 0.3s ease; | |
| -o-transition: color 0.3s ease; | |
| transition: color 0.3s ease; | |
| } | |
| a:hover { | |
| color: black; |
halofx
/ SVG Background with PNG Fallback.scss
Last active
February 15, 2016 23:50
SVG background images with PNG and retina fallback
This file contains hidden or 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
| // ---- | |
| // Sass (v3.4.7) | |
| // ---- | |
| // Requires Modernizr | |
| $image-path: '../img' !default; | |
| $fallback-extension: 'png' !default; | |
| $retina-suffix: '@2x'; | |
| @mixin background-image($name, $size:false){ |
This file contains hidden or 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
| // ---- | |
| // Sass (v3.4.7) | |
| // ---- | |
| @mixin bp-large { | |
| @media only screen and (max-width: 60em) { | |
| @content; | |
| } | |
| } |
This file contains hidden or 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
| // ---- | |
| // Sass (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // set rem and em to 10px | |
| html { font-size: 62.5%; } | |
| $base-font-size: 10px; | |
| $rem-ratio: $base-font-size / 1rem; |
NewerOlder