Lauren Dorman laurendorman
🏠
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
| { | |
| "name": "example", | |
| "private": true, | |
| "description": "A simple starter to get up running with Gatsby + TailwindCSS + PostCSS + PurgeCSS", | |
| "version": "0.1.0", | |
| "author": "Lauren Dorman <lauren@yams.studio>", | |
| "dependencies": { | |
| "gatsby": "^2.19.6", | |
| "gatsby-image": "^2.2.39", | |
| "gatsby-plugin-manifest": "^2.2.38", |
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
| export default function updateQuery(params) { | |
| window.location.search = encodeURIParams(mergeObjects(decodeURIParams(), params), true); | |
| }; | |
| function decodeURIParams(query) { | |
| if (query == null) { | |
| query = window.location.search; | |
| } | |
| if (query[0] == '?') { |
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 apply-basis($frac) { | |
| > .u-grid__item { | |
| width: $frac * 100%; | |
| } | |
| } | |
| .u-grid { | |
| display: flex; | |
| justify-content: flex-start; | |
| flex-wrap: wrap; |
laurendorman
/ _keyframes-mixin.scss
Created
March 18, 2016 07:05
Sass Mixins - Keyframe Animation Mixin
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($animation) { | |
| @-webkit-keyframes #{$animation} { | |
| @content; | |
| } | |
| @-moz-keyframes #{$animation} { | |
| @content; | |
| } | |
| @-o-keyframes #{$animation} { | |
| @content; | |
| } |
laurendorman
/ _gradient-mixins.scss
Created
December 28, 2015 16:15
Sass Mixins - Gradient Text, Borders and Backgrounds for Buttons
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
| // $dir = Direction of gradient | |
| // $from = Starting color | |
| // $to = Ending color | |
| // $width = Border width/thickness | |
| @mixin border-gradient($dir, $from, $to, $width) { | |
| border-left: $width solid $from; | |
| border-right: $width solid $to; | |
| background-image: | |
| // Needed for both the top and bottom borders |
laurendorman
/ _cursor-mixins.scss
Last active
August 8, 2019 10:49
Sass mixins + classes for cursors – For use with online photo editors, drag/drop tools, text editors and WYSIWYGs.
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
| // Used to @include a cursor within a pre-existing class | |
| @mixin cursor($cursor-type) { | |
| cursor: $cursor-type; | |
| } | |
| // Used to generate cursor classes | |
| @mixin cursor-class($cursor-type) { | |
| .#{$cursor-type}-cursor { cursor: $cursor-type; } | |
| } |
laurendorman
/ utilities.css
Last active
November 14, 2015 16:12
Utility CSS classes for projects of all sizes.
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
| // Utilities | |
| // Layout | |
| .inline { display: inline } | |
| .block { display: block } | |
| .inline-block { display: inline-block } | |
| // Overflow | |
| .overflow-hidden { overflow: hidden } | |
| .overflow-scroll { overflow: scroll } |