Carl Wood carlwood

## Base64 Tick SVG (background)
background: #f00 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIyMCA2IDkgMTcgNCAxMiI+PC9wb2x5bGluZT48L3N2Zz4=);

## mytheme.libraries.yml
global-styling:
  js:
    build/js/vendor.js: {}
    build/js/main.js: {}
  dependencies:
    - core/drupal
  css:
    theme:
      build/css/main.css: {}

## touch.js
if (navigator.userAgent.match(/mobile/i)) {
	$('body').addClass('touch');
}

## gist:60751b70088dc567cc77
// Sets rems, or px for IE
.font-size(@sizeValue) {
    @remValue: @sizeValue;
    @pxValue: (@sizeValue * 10);
    font-size: ~"@{pxValue}px";
}

// Usage
.font-size(1.6); // 16px/1.6rem

## float-width.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                carlwood
                / float-width.md
            
            
              Last active
              August 29, 2015 13:56
            
              
                Floating without widths
              
          
    I was having a problem with floating two element - both left - hoping that the second element's width would expand to the end.
Original code:
.left { float: left; {
.right { float: left; } // right does not expand to fit the width of the row

Fix:

  
## firefox-fuzzy.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                carlwood
                / firefox-fuzzy.md
            
            
              Last active
              December 17, 2015 21:48
            
              
                Problem with fuzzy firefox :after arrow rendering?
              
          
    #Fixing fuzzy CSS triangles in Firefox
References http://stackoverflow.com/questions/12301366/pure-css-triangle-looks-blurry-in-firefox.
Thanks to http://stackoverflow.com/users/295770/luca
This problem references my earlier gist (https://gist.github.com/carlwood/5663616) where I created css triangles to display a selected link - which would open a dropdown.
Original SCSS source code:

  
## linkcoloursmixin.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                carlwood
                / linkcoloursmixin.md
            
            
              Last active
              August 25, 2016 17:08
            
              
                Link colours compass mixin
              
          
    #SASS Link Colours shorthand
link-colors($normal, $hover, $active, $visited, $focus)

usage:
	global-styling:
	js:
	build/js/vendor.js: {}
	build/js/main.js: {}
	dependencies:
	- core/drupal
	css:
	theme:
	build/css/main.css: {}
	if (navigator.userAgent.match(/mobile/i)) {
	$('body').addClass('touch');
	}
	// Sets rems, or px for IE
	.font-size(@sizeValue) {
	@remValue: @sizeValue;
	@pxValue: (@sizeValue * 10);
	font-size: ~"@{pxValue}px";
	}

	// Usage
	.font-size(1.6); // 16px/1.6rem