├── README.md ├── bookmarklet-js ├── bookmarklet.js └── mediaQueryBookmarklet.js ├── docs ├── apple-touch-icon-114x114-precomposed.png ├── apple-touch-icon-57x57-precomposed.png ├── apple-touch-icon-72x72-precomposed.png ├── apple-touch-icon-precomposed.png ├── bookmarklet-js │ ├── bookmarklet.js │ └── mediaQueryBookmarklet.js ├── crossdomain.xml ├── css │ ├── base.css │ └── base.css.map ├── favicon.ico ├── humans.txt ├── images │ ├── ruler.png │ └── vert-ruler.png ├── index.html ├── robots.txt ├── sass │ ├── _example.scss │ ├── _general-mixins.scss │ ├── _getit.scss │ ├── _icons.scss │ ├── _main.scss │ ├── _monokai.scss │ ├── _sparkbox-footer.scss │ ├── _variables.scss │ └── base.scss └── stylesheets │ ├── mediaQuery.css │ └── test.css ├── images ├── ruler.png └── vert-ruler.png ├── stylesheets ├── mediaQuery.css └── test.css └── test.html /README.md: -------------------------------------------------------------------------------- 1 | # mediaQuery Bookmarklet 2 | 3 | The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query. Check out [our blog](http://seesparkbox.com/foundry/media_query_bookmarklet) for more info. 4 | 5 | **Try it out on [the docs site](http://sparkbox.github.io/mediaQueryBookmarklet/)**. 6 | 7 | ## How to Use 8 | 9 | Copy the contents of [bookmarklet.js](bookmarklet-js/bookmarklet.js) into a bookmark - done. 10 | 11 | ## Legal Stuff 12 | Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. 13 | -------------------------------------------------------------------------------- /bookmarklet-js/bookmarklet.js: -------------------------------------------------------------------------------- 1 | javascript:%20(function%20()%20{var%20jsCode%20=%20document.createElement(%27script%27);jsCode.setAttribute(%27src%27,%20%27https://sparkbox.github.io/mediaQueryBookmarklet/bookmarklet-js/mediaQueryBookmarklet.js%27);document.body.appendChild(jsCode);}()); 2 | -------------------------------------------------------------------------------- /bookmarklet-js/mediaQueryBookmarklet.js: -------------------------------------------------------------------------------- 1 | // This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. 2 | 3 | window.mqb = { 4 | 5 | init: function() { 6 | /* If the bookmarklet already exists on the page, remove it */ 7 | var bookmarklet = document.getElementById( 'sb-mediaQueryBookmarklet' ); 8 | if ( bookmarklet ) { 9 | document.body.removeChild( bookmarklet ); 10 | } 11 | 12 | mqb.version = '1.5.0'; 13 | mqb.tmpl = 14 | "

" + 15 | "

" + 16 | "
    " + 17 | "
    " + 18 | " version {{version}}" + 19 | " " + 20 | " " + 21 | "
    "; 22 | mqb.rulersTmpl = 23 | "
    " + 24 | "
    " + 25 | "
    " + 26 | "
    " + 27 | "
    " + 28 | "
    "; 29 | 30 | mqb.rulers = document.getElementById( "sb-rulers" ); 31 | mqb.emTest = document.createElement( "div" ); 32 | mqb.emTest.id = "mqb-emTest"; 33 | document.body.appendChild( mqb.emTest ); 34 | 35 | mqb.loadCSS(); 36 | mqb.createTemplate(); 37 | 38 | mqb.mqList = []; 39 | 40 | mqb.createMQList(); 41 | 42 | window.addEventListener('resize', function() { 43 | mqb.showCurrentSize(); 44 | if ( window.matchMedia ) { 45 | mqb.mqChange(); 46 | } 47 | }, false); 48 | mqb.mqChange(); 49 | 50 | mqb.initEmSize(); 51 | }, 52 | 53 | appendDisplay: function() { 54 | mqb.container = document.createElement( "div" ); 55 | mqb.container.id = "sb-mediaQueryBookmarklet"; 56 | mqb.container.className = "onRight"; 57 | mqb.container.innerHTML = mqb.tmpl; 58 | document.body.appendChild( mqb.container ); 59 | 60 | mqb.appendRulers(); 61 | mqb.attachEvents(); 62 | }, 63 | 64 | appendRulers: function() { 65 | mqb.rulers = document.createElement( "div" ); 66 | mqb.rulers.id = "sb-rulers"; 67 | mqb.rulers.innerHTML = mqb.rulersTmpl; 68 | document.body.appendChild( mqb.rulers ); 69 | 70 | mqb.mouseXPosition = document.getElementById( "mqb-mouseXPosition" ); 71 | mqb.mouseYPosition = document.getElementById( "mqb-mouseYPosition" ); 72 | mqb.showMousePosition = document.getElementById( "mqb-mousePosition" ); 73 | }, 74 | 75 | attachEvents: function() { 76 | /* Close Button */ 77 | document.getElementById( "mqb-closeButton" ).addEventListener( "click", function( e ) { 78 | mqb.close( e ); 79 | mqb = null; 80 | }); 81 | 82 | /* Position Button */ 83 | document.getElementById( "mqb-positionButton" ).addEventListener( 'click', function( e ) { 84 | if ( mqb.container.className == "onLeft" ) { 85 | mqb.container.className = "onRight"; 86 | } else { 87 | mqb.container.className = "onLeft"; 88 | } 89 | }); 90 | 91 | document.addEventListener( 'mousemove', mqb.showCurrentMousePos ); 92 | }, 93 | 94 | close: function( e ) { 95 | e.preventDefault(); 96 | 97 | document.body.removeChild( mqb.container ); 98 | document.body.removeChild( mqb.emTest ); 99 | document.body.removeChild( mqb.rulers ); 100 | document.head.removeChild( mqb.css ); 101 | 102 | for ( var i in mqb.guideStyles ) { 103 | document.head.removeChild( mqb.guideStyles[ i ] ); 104 | } 105 | 106 | document.removeEventListener( 'mousemove', mqb.showCurrentMousePos ); 107 | }, 108 | 109 | createMQList: function() { 110 | var mqs = this.getMediaQueries(), 111 | links = document.getElementsByTagName('link'), 112 | i; 113 | 114 | for ( i = mqs.length-1; i >= 0; i-- ) { 115 | if ( !this.inList( mqs[i] ) ) { 116 | this.mqList.push( window.matchMedia( mqs[ i ] ) ); 117 | } 118 | } 119 | 120 | for ( i = links.length-1; i >= 0; i-- ) { 121 | if ( links[ i ].media !== '' ) { 122 | this.mqList.push( window.matchMedia( links[ i ].media ) ); 123 | } 124 | } 125 | }, 126 | 127 | createTemplate: function() { 128 | mqb.appendDisplay(); 129 | mqb.viewDimensions = document.getElementById( "mqb-dimensions" ); 130 | mqb.viewQueries = document.getElementById( "mqb-queries" ); 131 | mqb.tmplReplace( "mqb-version", "version " + mqb.version ); 132 | mqb.showCurrentSize(); 133 | }, 134 | 135 | findEmSize: function() { 136 | return mqb.emTest.clientWidth; 137 | }, 138 | 139 | getMediaQueries: function() { 140 | var sheetList = document.styleSheets, 141 | ruleList, 142 | i, j, 143 | mediaQueries = []; 144 | 145 | for ( i=sheetList.length-1; i >= 0; i-- ) { 146 | try { 147 | ruleList = sheetList[ i ].cssRules; 148 | if ( ruleList ) { 149 | for ( j=0; j= 0; i-- ) { 172 | if ( this.mqList[ i ].media === media ) { 173 | return true; 174 | } 175 | } 176 | return false; 177 | }, 178 | 179 | loadCSS: function() { 180 | mqb.css = document.createElement( 'link' ); 181 | mqb.css.type = "text/css"; 182 | mqb.css.rel = "stylesheet"; 183 | mqb.css.href = "https://sparkbox.github.io/mediaQueryBookmarklet/stylesheets/mediaQuery.css"; 184 | debugger; 185 | document.head.appendChild( mqb.css ); 186 | }, 187 | 188 | mqChange: function() { 189 | var html = ''; 190 | 191 | for ( var i in mqb.mqList ) { 192 | if ( mqb.mqList[ i ].matches ) { 193 | html += "
  1. " + mqb.mqList[ i ].media + "
    2. "; 194 | } 195 | } 196 | mqb.viewQueries.innerHTML = html; 197 | }, 198 | 199 | showCurrentSize: function() { 200 | var width = window.innerWidth || window.outerWidth; 201 | var height = window.innerHeight || window.outerHeight; 202 | mqb.viewDimensions.innerHTML = width + 'px × ' + height + 'px
    ' + ( width / mqb.findEmSize() ).toPrecision( 4 ) + 'em × ' + ( height / mqb.findEmSize() ).toPrecision( 4 ) + 'em'; 203 | }, 204 | 205 | tmplReplace: function( dstID, src ) { 206 | document.getElementById( dstID ).innerHTML = src; 207 | }, 208 | 209 | showCurrentMousePos: function( e ) { 210 | mqb.mouseXPosition.style.left = e.clientX + "px"; 211 | mqb.mouseYPosition.style.top = e.clientY + "px"; 212 | 213 | mqb.showMousePosition.innerHTML = "x:" + e.clientX + "px   y:" + e.clientY + "px"; 214 | } 215 | 216 | }; 217 | 218 | mqb.init(); 219 | -------------------------------------------------------------------------------- /docs/apple-touch-icon-114x114-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/mediaQueryBookmarklet/0200d5d5633643c1c6a60841d72988db05062a65/docs/apple-touch-icon-114x114-precomposed.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-57x57-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/mediaQueryBookmarklet/0200d5d5633643c1c6a60841d72988db05062a65/docs/apple-touch-icon-57x57-precomposed.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-72x72-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/mediaQueryBookmarklet/0200d5d5633643c1c6a60841d72988db05062a65/docs/apple-touch-icon-72x72-precomposed.png -------------------------------------------------------------------------------- /docs/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/mediaQueryBookmarklet/0200d5d5633643c1c6a60841d72988db05062a65/docs/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /docs/bookmarklet-js/bookmarklet.js: -------------------------------------------------------------------------------- 1 | javascript:%20(function%20()%20{var%20jsCode%20=%20document.createElement(%27script%27);jsCode.setAttribute(%27src%27,%20%27https://sparkbox.github.io/mediaQueryBookmarklet/bookmarklet-js/mediaQueryBookmarklet.js%27);document.body.appendChild(jsCode);}()); -------------------------------------------------------------------------------- /docs/bookmarklet-js/mediaQueryBookmarklet.js: -------------------------------------------------------------------------------- 1 | // This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. 2 | 3 | window.mqb = { 4 | init: function () { 5 | /* If the bookmarklet already exists on the page, remove it */ 6 | var bookmarklet = document.getElementById('sb-mediaQueryBookmarklet'); 7 | if (bookmarklet) { 8 | document.body.removeChild(bookmarklet); 9 | } 10 | 11 | mqb.version = '1.4.4'; 12 | mqb.tmpl = 13 | '

    ' + 14 | '

    ' + 15 | '
      ' + 16 | ''; 21 | mqb.rulersTmpl = 22 | '
      ' + 23 | '
      ' + 24 | '
      ' + 25 | '
      ' + 26 | '
      ' + 27 | '
      '; 28 | 29 | mqb.rulers = document.getElementById('sb-rulers'); 30 | mqb.emTest = document.createElement('div'); 31 | mqb.emTest.id = 'mqb-emTest'; 32 | document.body.appendChild(mqb.emTest); 33 | 34 | mqb.loadCSS(); 35 | mqb.createTemplate(); 36 | 37 | mqb.mqList = []; 38 | 39 | mqb.createMQList(); 40 | 41 | window.addEventListener( 42 | 'resize', 43 | function () { 44 | mqb.showCurrentSize(); 45 | if (window.matchMedia) { 46 | mqb.mqChange(); 47 | } 48 | }, 49 | false 50 | ); 51 | mqb.mqChange(); 52 | 53 | mqb.initEmSize(); 54 | }, 55 | 56 | appendDisplay: function () { 57 | mqb.container = document.createElement('div'); 58 | mqb.container.id = 'sb-mediaQueryBookmarklet'; 59 | mqb.container.className = 'onRight'; 60 | mqb.container.innerHTML = mqb.tmpl; 61 | document.body.appendChild(mqb.container); 62 | 63 | mqb.appendRulers(); 64 | mqb.attachEvents(); 65 | }, 66 | 67 | appendRulers: function () { 68 | mqb.rulers = document.createElement('div'); 69 | mqb.rulers.id = 'sb-rulers'; 70 | mqb.rulers.innerHTML = mqb.rulersTmpl; 71 | document.body.appendChild(mqb.rulers); 72 | 73 | mqb.mouseXPosition = document.getElementById('mqb-mouseXPosition'); 74 | mqb.mouseYPosition = document.getElementById('mqb-mouseYPosition'); 75 | mqb.showMousePosition = document.getElementById('mqb-mousePosition'); 76 | }, 77 | 78 | attachEvents: function () { 79 | /* Close Button */ 80 | document 81 | .getElementById('mqb-closeButton') 82 | .addEventListener('click', function (e) { 83 | mqb.close(e); 84 | mqb = null; 85 | }); 86 | 87 | /* Position Button */ 88 | document 89 | .getElementById('mqb-positionButton') 90 | .addEventListener('click', function (e) { 91 | if (mqb.container.className == 'onLeft') { 92 | mqb.container.className = 'onRight'; 93 | } else { 94 | mqb.container.className = 'onLeft'; 95 | } 96 | }); 97 | 98 | document.addEventListener('mousemove', mqb.showCurrentMousePos); 99 | }, 100 | 101 | close: function (e) { 102 | e.preventDefault(); 103 | 104 | document.body.removeChild(mqb.container); 105 | document.body.removeChild(mqb.emTest); 106 | document.body.removeChild(mqb.rulers); 107 | document.head.removeChild(mqb.css); 108 | 109 | for (var i in mqb.guideStyles) { 110 | document.head.removeChild(mqb.guideStyles[i]); 111 | } 112 | 113 | document.removeEventListener('mousemove', mqb.showCurrentMousePos); 114 | }, 115 | 116 | createMQList: function () { 117 | var mqs = this.getMediaQueries(), 118 | links = document.getElementsByTagName('link'), 119 | i; 120 | 121 | for (i = mqs.length - 1; i >= 0; i--) { 122 | if (!this.inList(mqs[i])) { 123 | this.mqList.push(window.matchMedia(mqs[i])); 124 | } 125 | } 126 | 127 | for (i = links.length - 1; i >= 0; i--) { 128 | if (links[i].media !== '') { 129 | this.mqList.push(window.matchMedia(links[i].media)); 130 | } 131 | } 132 | }, 133 | 134 | createTemplate: function () { 135 | mqb.appendDisplay(); 136 | mqb.viewDimensions = document.getElementById('mqb-dimensions'); 137 | mqb.viewQueries = document.getElementById('mqb-queries'); 138 | mqb.tmplReplace('mqb-version', 'version ' + mqb.version); 139 | mqb.showCurrentSize(); 140 | }, 141 | 142 | findEmSize: function () { 143 | return mqb.emTest.clientWidth; 144 | }, 145 | 146 | getMediaQueries: function () { 147 | var sheetList = document.styleSheets, 148 | ruleList, 149 | i, 150 | j, 151 | mediaQueries = []; 152 | 153 | for (i = sheetList.length - 1; i >= 0; i--) { 154 | try { 155 | ruleList = sheetList[i].cssRules; 156 | if (ruleList) { 157 | for (j = 0; j < ruleList.length; j++) { 158 | if (ruleList[j].type == CSSRule.MEDIA_RULE) { 159 | mediaQueries.push(ruleList[j].media.mediaText); 160 | } 161 | } 162 | } 163 | } catch (e) {} 164 | } 165 | return mediaQueries; 166 | }, 167 | 168 | initEmSize: function () { 169 | mqb.cssTimer = setTimeout(function () { 170 | if (mqb.emTest.clientWidth === 0) { 171 | mqb.initEmSize(); 172 | } else { 173 | mqb.showCurrentSize(); 174 | } 175 | }, 250); 176 | }, 177 | 178 | inList: function (media) { 179 | for (var i = this.mqList.length - 1; i >= 0; i--) { 180 | if (this.mqList[i].media === media) { 181 | return true; 182 | } 183 | } 184 | return false; 185 | }, 186 | 187 | loadCSS: function () { 188 | mqb.css = document.createElement('link'); 189 | mqb.css.type = 'text/css'; 190 | mqb.css.rel = 'stylesheet'; 191 | mqb.css.href = 192 | 'https://sparkbox.github.io/mediaQueryBookmarklet/stylesheets/mediaQuery.css'; 193 | document.head.appendChild(mqb.css); 194 | }, 195 | 196 | mqChange: function () { 197 | var html = ''; 198 | 199 | for (var i in mqb.mqList) { 200 | if (mqb.mqList[i].matches) { 201 | html += '
    1. ' + mqb.mqList[i].media + '
      2. '; 202 | } 203 | } 204 | mqb.viewQueries.innerHTML = html; 205 | }, 206 | 207 | showCurrentSize: function () { 208 | var width = window.innerWidth || window.outerWidth; 209 | var height = window.innerHeight || window.outerHeight; 210 | mqb.viewDimensions.innerHTML = 211 | width + 212 | 'px x ' + 213 | height + 214 | 'px
      ' + 215 | (width / mqb.findEmSize()).toPrecision(4) + 216 | 'em x ' + 217 | (height / mqb.findEmSize()).toPrecision(4) + 218 | 'em'; 219 | }, 220 | 221 | tmplReplace: function (dstID, src) { 222 | document.getElementById(dstID).innerHTML = src; 223 | }, 224 | 225 | showCurrentMousePos: function (e) { 226 | mqb.mouseXPosition.style.left = e.clientX + 'px'; 227 | mqb.mouseYPosition.style.top = e.clientY + 'px'; 228 | 229 | mqb.showMousePosition.innerHTML = 230 | 'x:' + e.clientX + 'px   y:' + e.clientY + 'px'; 231 | }, 232 | }; 233 | 234 | mqb.init(); 235 | -------------------------------------------------------------------------------- /docs/crossdomain.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/css/base.css: -------------------------------------------------------------------------------- 1 | .highlight .hll { 2 | background-color: #49483e; } 3 | 4 | .highlight .c { 5 | color: #75715e; } 6 | 7 | /* Comment */ 8 | .highlight .err { 9 | color: #960050; 10 | background-color: #1e0010; } 11 | 12 | /* Error */ 13 | .highlight .k { 14 | color: #66d9ef; } 15 | 16 | /* Keyword */ 17 | .highlight .l { 18 | color: #ae81ff; } 19 | 20 | /* Literal */ 21 | .highlight .n { 22 | color: #f8f8f2; } 23 | 24 | /* Name */ 25 | .highlight .o { 26 | color: #f92672; } 27 | 28 | /* Operator */ 29 | .highlight .p { 30 | color: #f8f8f2; } 31 | 32 | /* Punctuation */ 33 | .highlight .cm { 34 | color: #75715e; } 35 | 36 | /* Comment.Multiline */ 37 | .highlight .cp { 38 | color: #75715e; } 39 | 40 | /* Comment.Preproc */ 41 | .highlight .c1 { 42 | color: #75715e; } 43 | 44 | /* Comment.Single */ 45 | .highlight .cs { 46 | color: #75715e; } 47 | 48 | /* Comment.Special */ 49 | .highlight .ge { 50 | font-style: italic; } 51 | 52 | /* Generic.Emph */ 53 | .highlight .gs { 54 | font-weight: bold; } 55 | 56 | /* Generic.Strong */ 57 | .highlight .kc { 58 | color: #66d9ef; } 59 | 60 | /* Keyword.Constant */ 61 | .highlight .kd { 62 | color: #66d9ef; } 63 | 64 | /* Keyword.Declaration */ 65 | .highlight .kn { 66 | color: #f92672; } 67 | 68 | /* Keyword.Namespace */ 69 | .highlight .kp { 70 | color: #66d9ef; } 71 | 72 | /* Keyword.Pseudo */ 73 | .highlight .kr { 74 | color: #66d9ef; } 75 | 76 | /* Keyword.Reserved */ 77 | .highlight .kt { 78 | color: #66d9ef; } 79 | 80 | /* Keyword.Type */ 81 | .highlight .ld { 82 | color: #e6db74; } 83 | 84 | /* Literal.Date */ 85 | .highlight .m { 86 | color: #ae81ff; } 87 | 88 | /* Literal.Number */ 89 | .highlight .s { 90 | color: #e6db74; } 91 | 92 | /* Literal.String */ 93 | .highlight .na { 94 | color: #a6e22e; } 95 | 96 | /* Name.Attribute */ 97 | .highlight .nb { 98 | color: #f8f8f2; } 99 | 100 | /* Name.Builtin */ 101 | .highlight .nc { 102 | color: #a6e22e; } 103 | 104 | /* Name.Class */ 105 | .highlight .no { 106 | color: #66d9ef; } 107 | 108 | /* Name.Constant */ 109 | .highlight .nd { 110 | color: #a6e22e; } 111 | 112 | /* Name.Decorator */ 113 | .highlight .ni { 114 | color: #f8f8f2; } 115 | 116 | /* Name.Entity */ 117 | .highlight .ne { 118 | color: #a6e22e; } 119 | 120 | /* Name.Exception */ 121 | .highlight .nf { 122 | color: #a6e22e; } 123 | 124 | /* Name.Function */ 125 | .highlight .nl { 126 | color: #f8f8f2; } 127 | 128 | /* Name.Label */ 129 | .highlight .nn { 130 | color: #f8f8f2; } 131 | 132 | /* Name.Namespace */ 133 | .highlight .nx { 134 | color: #a6e22e; } 135 | 136 | /* Name.Other */ 137 | .highlight .py { 138 | color: #f8f8f2; } 139 | 140 | /* Name.Property */ 141 | .highlight .nt { 142 | color: #f92672; } 143 | 144 | /* Name.Tag */ 145 | .highlight .nv { 146 | color: #f8f8f2; } 147 | 148 | /* Name.Variable */ 149 | .highlight .ow { 150 | color: #f92672; } 151 | 152 | /* Operator.Word */ 153 | .highlight .w { 154 | color: #f8f8f2; } 155 | 156 | /* Text.Whitespace */ 157 | .highlight .mf { 158 | color: #ae81ff; } 159 | 160 | /* Literal.Number.Float */ 161 | .highlight .mh { 162 | color: #ae81ff; } 163 | 164 | /* Literal.Number.Hex */ 165 | .highlight .mi { 166 | color: #ae81ff; } 167 | 168 | /* Literal.Number.Integer */ 169 | .highlight .mo { 170 | color: #ae81ff; } 171 | 172 | /* Literal.Number.Oct */ 173 | .highlight .sb { 174 | color: #e6db74; } 175 | 176 | /* Literal.String.Backtick */ 177 | .highlight .sc { 178 | color: #e6db74; } 179 | 180 | /* Literal.String.Char */ 181 | .highlight .sd { 182 | color: #e6db74; } 183 | 184 | /* Literal.String.Doc */ 185 | .highlight .s2 { 186 | color: #e6db74; } 187 | 188 | /* Literal.String.Double */ 189 | .highlight .se { 190 | color: #ae81ff; } 191 | 192 | /* Literal.String.Escape */ 193 | .highlight .sh { 194 | color: #e6db74; } 195 | 196 | /* Literal.String.Heredoc */ 197 | .highlight .si { 198 | color: #e6db74; } 199 | 200 | /* Literal.String.Interpol */ 201 | .highlight .sx { 202 | color: #e6db74; } 203 | 204 | /* Literal.String.Other */ 205 | .highlight .sr { 206 | color: #e6db74; } 207 | 208 | /* Literal.String.Regex */ 209 | .highlight .s1 { 210 | color: #e6db74; } 211 | 212 | /* Literal.String.Single */ 213 | .highlight .ss { 214 | color: #e6db74; } 215 | 216 | /* Literal.String.Symbol */ 217 | .highlight .bp { 218 | color: #f8f8f2; } 219 | 220 | /* Name.Builtin.Pseudo */ 221 | .highlight .vc { 222 | color: #f8f8f2; } 223 | 224 | /* Name.Variable.Class */ 225 | .highlight .vg { 226 | color: #f8f8f2; } 227 | 228 | /* Name.Variable.Global */ 229 | .highlight .vi { 230 | color: #f8f8f2; } 231 | 232 | /* Name.Variable.Instance */ 233 | .highlight .il { 234 | color: #ae81ff; } 235 | 236 | /* Literal.Number.Integer.Long */ 237 | /* Generic Heading & Diff Header */ 238 | .highlight .gu { 239 | color: #75715e; } 240 | 241 | /* Generic.Subheading & Diff Unified/Comment? */ 242 | .highlight .gd { 243 | color: #f92672; } 244 | 245 | /* Generic.Deleted & Diff Deleted */ 246 | .highlight .gi { 247 | color: #a6e22e; } 248 | 249 | /* Generic.Inserted & Diff Inserted */ 250 | .icon-bower, .icon-github { 251 | height: 45px; 252 | padding-left: 60px; 253 | background-repeat: no-repeat; 254 | line-height: 37px; 255 | font-size: 1.1em; } 256 | @media (min-width: 55em) { 257 | .icon-bower, .icon-github { 258 | font-size: 1.5em; } } 259 | 260 | .icon-bower { 261 | background-image: url("../images/icon-bower.jpg"); } 262 | 263 | .icon-github { 264 | background-image: url("../images/icon-github.png"); } 265 | 266 | .exampleList { 267 | list-style: none; 268 | padding: 0; 269 | margin: 0; } 270 | 271 | .exampleList-item { 272 | display: inline-block; } 273 | .exampleList-item.active { 274 | background: #49483e; } 275 | 276 | .exampleList-heading { 277 | display: inline-block; 278 | padding: 0.2em 1em 0 1em; 279 | line-height: 0; } 280 | .exampleList-heading a { 281 | color: #686868; 282 | text-decoration: none; } 283 | .active .exampleList-heading a { 284 | color: #fff; } 285 | 286 | .example { 287 | display: none; } 288 | .example.active { 289 | display: block; } 290 | 291 | .hll { 292 | overflow: scroll; 293 | margin: 0; 294 | font-size: 0.75em; } 295 | @media (min-width: 50em) { 296 | .hll { 297 | font-size: 1em; } } 298 | 299 | .getItList { 300 | list-style: none; 301 | padding: 0; 302 | margin: 2em 0; } 303 | @media (min-width: 50em) { 304 | .getItList { 305 | margin: 6em auto; } } 306 | 307 | .getItList-item { 308 | text-align: center; } 309 | .getItList-item + .getItList-item { 310 | margin-top: 3em; } 311 | @media (min-width: 50em) { 312 | .getItList-item + .getItList-item { 313 | margin-top: 4em; } } 314 | 315 | .button { 316 | white-space: nowrap; 317 | padding: 0.5rem; 318 | font-size: 1em; 319 | border-radius: 0.375em; 320 | text-decoration: none; } 321 | @media (min-width: 50em) { 322 | .button { 323 | padding: 0.5rem 0.875rem; 324 | font-size: 1.125em; } } 325 | 326 | .button-gray { 327 | color: #333; 328 | background-color: #F3F3F3; 329 | border: 1px solid #E4E4E4; } 330 | 331 | .button-blue { 332 | color: white; 333 | background-color: #50B7C8; 334 | border: 1px solid #379dae; } 335 | 336 | .sparkbox-footer { 337 | color: #8C8C8C; 338 | text-align: center; 339 | margin-bottom: 3em; } 340 | .sparkbox-footer a { 341 | color: #50B7C8; } 342 | 343 | .icon-sparkbox { 344 | height: 55px; 345 | width: 51px; 346 | margin: 2em auto 0; } 347 | 348 | body { 349 | font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; 350 | color: #686868; 351 | background-color: white; 352 | margin: 0; } 353 | 354 | a { 355 | color: #50B7C8; } 356 | 357 | a[class], 358 | a:not([href]) { 359 | text-decoration: none; } 360 | 361 | code { 362 | font-family: Monaco, monospace; } 363 | 364 | .content-wrapper { 365 | box-sizing: border-box; 366 | width: 95%; 367 | max-width: 50em; 368 | margin: 0 auto; } 369 | 370 | .main-heading { 371 | font-size: 1em; 372 | overflow: hidden; 373 | text-align: center; 374 | max-width: 40em; 375 | margin: 1em auto; 376 | background-size: contain; 377 | background-position: center center; 378 | position: relative; } 379 | .main-heading svg { 380 | width: 100%; 381 | position: absolute; 382 | top: 0; 383 | right: 0; 384 | bottom: 0; 385 | left: 0; } 386 | @media (min-width: 50em) { 387 | .main-heading { 388 | margin: 3em auto; } } 389 | .main-heading:after { 390 | padding-top: 18.6722%; 391 | content: ''; 392 | display: block; } 393 | 394 | .tagline { 395 | color: #acacac; 396 | text-align: center; 397 | margin: 0; } 398 | 399 | .description { 400 | font-size: 1.125em; } 401 | @media (min-width: 50em) { 402 | .description { 403 | font-size: 1.5em; } } 404 | 405 | .section-heading { 406 | margin-top: 2em; 407 | font-size: 1.5em; 408 | color: #50B7C8; } 409 | @media (min-width: 50em) { 410 | .section-heading { 411 | font-size: 1.9em; } } 412 | 413 | .footer { 414 | border-top: 1px solid #eee; 415 | margin: 3em 0; 416 | padding: 3em 0 0; } 417 | .footer p { 418 | margin: 0; } 419 | 420 | /*# sourceMappingURL=base.css.map */ 421 | -------------------------------------------------------------------------------- /docs/css/base.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../sass/_monokai.scss","../sass/_icons.scss","../sass/_example.scss","../sass/_getit.scss","../sass/_sparkbox-footer.scss","../sass/_main.scss"], 5 | "names": [], 6 | "file": "base.css" 7 | } -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/mediaQueryBookmarklet/0200d5d5633643c1c6a60841d72988db05062a65/docs/favicon.ico -------------------------------------------------------------------------------- /docs/humans.txt: -------------------------------------------------------------------------------- 1 | /* the humans responsible & colophon */ 2 | /* humanstxt.org */ 3 | 4 | /* TEAM */ 5 | President: Ben Callahan 6 | Site: http://seesparkbox.com 7 | Twitter: bencallahan 8 | Location: Dayton, OH 9 | 10 | Creative Director: Jeremy Loyd 11 | Site: http://seesparkbox.com 12 | Twitter: jeremyloyd 13 | Location: Dayton, OH 14 | 15 | Brand Analyst: Jän Ostendorf 16 | Site: http://seesparkbox.com 17 | Twitter: jpostendorf 18 | Location: Dayton, OH 19 | 20 | Content Strategist: Drew Clemens 21 | Site: http://seesparkbox.com 22 | Twitter: drewclemens 23 | Location: Dayton, OH 24 | 25 | Technical Director: Rob Harr 26 | Site: http://seesparkbox.com 27 | Twitter: robertharr 28 | Location: Dayton, OH 29 | 30 | Web Developer: Andy Rossi 31 | Site: http://seesparkbox.com 32 | Twitter: andrewrocco 33 | Location: Dayton, OH 34 | 35 | Software Engineer: Rob Tarr 36 | Site: http://seesparkbox.com 37 | Twitter: robtarr 38 | Location: Dayton, OH 39 | 40 | Office Manager: Dom Richardson 41 | Site: http://seesparkbox.com 42 | Location: Dayton, OH 43 | 44 | 45 | /* THANKS */ 46 | Names (& URL): 47 | 48 | /* SITE */ 49 | Standards: HTML5, CSS3 50 | Components: Modernizr, jQuery 51 | Software: 52 | 53 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 54 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 55 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 56 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 57 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMmMMMMMMMMMMMMMMMMMMMMM 58 | MMMMMMMMMMMMMMMMMMMMMMMMMMh-yMMMMMMMMMMMMMMMMMMMMM 59 | MMMMMMMMMMMMMMMMMMMMMMMMy. -MMMMMMMMMMMMMMMMMMMMMM 60 | MMMMMMMMMMMMMMMMMMMMMNs. dMMMMMMMMMMMMMMMMMMMMMM 61 | MMMMMMMMMMMMMMMMMMMNo` +MMMMMMMMMMMMMMMMMMMMMMM 62 | MMMMMMMMMMMMMMMMMN+` yNMMMMMMMMMMMMMMMMMMMMMM 63 | MMMMMMMMMMMMMMMN+ `:oymMMMMMMMMMMMMMMMMM 64 | MMMMMMMMMMMMMMMMNds/- /NMMMMMMMMMMMMMMM 65 | MMMMMMMMMMMMMMMMMMMMMMds /dMMMMMMMMMMMMMMMMM 66 | MMMMMMMMMMMMMMMMMMMMMMMo +mMMMMMMMMMMMMMMMMMMM 67 | MMMMMMMMMMMMMMMMMMMMMMm `oNMMMMMMMMMMMMMMMMMMMMM 68 | MMMMMMMMMMMMMMMMMMMMMM: `oNMMMMMMMMMMMMMMMMMMMMMMM 69 | MMMMMMMMMMMMMMMMMMMMMy.sMMMMMMMMMMMMMMMMMMMMMMMMMM 70 | MMMMMMMMMMMMMMMMMMMMMdMMMMMMMMMMMMMMMMMMMMMMMMMMMM 71 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 72 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 73 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 74 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 75 | MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 76 | -------------------------------------------------------------------------------- /docs/images/ruler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/mediaQueryBookmarklet/0200d5d5633643c1c6a60841d72988db05062a65/docs/images/ruler.png -------------------------------------------------------------------------------- /docs/images/vert-ruler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/mediaQueryBookmarklet/0200d5d5633643c1c6a60841d72988db05062a65/docs/images/vert-ruler.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | mediaQuery Bookmarklet 6 | 7 | 8 | 9 | 10 |
      11 |
      12 |

      13 | 14 | mediaQuery Bookmarklet 15 | 16 | 17 | 18 | 19 | 20 | 21 |

      22 |

      Easily see the current document size and active mediaqueries.

      23 |
      24 |
      25 |
      26 |

      The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

      27 | 38 |

      Check out the Sparkbox Foundry for more info.

      39 |
      40 |
      41 |

      Legal Stuff

      42 |

      43 | 44 | Creative Commons License 45 | 46 |

      47 |

      This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. 48 |

      49 |
      50 |
      51 |

      The mediaQuery Bookmarklet is a project of Sparkbox.

      52 |
      53 |
      54 | 55 | 56 | -------------------------------------------------------------------------------- /docs/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | # http://code.google.com/web/controlcrawlindex/ 3 | 4 | User-agent: * 5 | -------------------------------------------------------------------------------- /docs/sass/_example.scss: -------------------------------------------------------------------------------- 1 | .exampleList { 2 | list-style: none; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | .exampleList-item { 8 | display: inline-block; 9 | 10 | &.active { 11 | background: #49483e; 12 | } 13 | } 14 | 15 | .exampleList-heading { 16 | display: inline-block; 17 | padding: 0.2em 1em 0 1em; 18 | line-height: 0; 19 | 20 | a { 21 | color: #686868; 22 | text-decoration: none; 23 | 24 | .active & { 25 | color: #fff; 26 | } 27 | } 28 | } 29 | 30 | .example { 31 | display: none; 32 | 33 | &.active { 34 | display: block; 35 | } 36 | } 37 | 38 | .hll { 39 | overflow: scroll; 40 | margin: 0; 41 | font-size: 0.75em; 42 | @media(min-width: $bp-medium) { 43 | font-size: 1em; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /docs/sass/_general-mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin rem( $property, $a:0, $b:$a, $c:$a, $d:$b ) { 2 | $base-font-multiplier: 1 !default; 3 | 4 | // Font Families 5 | @if ( $property == "font-size" ) { 6 | // $a is the font size 7 | // %b is the keyword 8 | @if ( $a != $b ) { 9 | font-size: $b; 10 | } 11 | @else { 12 | font-size: $a * $base-font-multiplier * 16px; 13 | } 14 | font-size: $a * 1rem; 15 | } @else { 16 | $apx: $a * $base-font-multiplier * 16px; 17 | $bpx: $b * $base-font-multiplier * 16px; 18 | $cpx: $c * $base-font-multiplier * 16px; 19 | $dpx: $d * $base-font-multiplier * 16px; 20 | $arem: $a * 1rem; 21 | $brem: $b * 1rem; 22 | $crem: $c * 1rem; 23 | $drem: $d * 1rem; 24 | 25 | @if ( $property == "padding" or $property == "margin" ){ 26 | #{$property}: $apx $bpx $cpx $dpx; 27 | #{$property}: $arem $brem $crem $drem; 28 | } @else { 29 | #{$property}: $apx; 30 | #{$property}: $arem; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /docs/sass/_getit.scss: -------------------------------------------------------------------------------- 1 | .getItList { 2 | list-style: none; 3 | padding: 0; 4 | margin: 2em 0; 5 | // max-width: 37em; 6 | 7 | @media (min-width: 50em) { 8 | margin: 6em auto; 9 | } 10 | } 11 | 12 | .getItList-item { 13 | text-align: center; 14 | 15 | & + & { 16 | margin-top: 3em; 17 | @media (min-width: 50em) { 18 | margin-top: 4em; 19 | } 20 | } 21 | } 22 | 23 | .button { 24 | white-space: nowrap; 25 | padding: 0.5rem; 26 | font-size: 1em; 27 | border-radius: 0.375em; 28 | text-decoration: none; 29 | 30 | @media (min-width: 50em) { 31 | padding: 0.5rem 0.875rem; 32 | font-size: 1.125em; 33 | } 34 | } 35 | 36 | .button-gray { 37 | color: #333; 38 | background-color: #F3F3F3; 39 | border: 1px solid #E4E4E4; 40 | } 41 | 42 | .button-blue { 43 | color: white; 44 | background-color: #50B7C8; 45 | border: 1px solid darken(#50B7C8, 10%); 46 | } 47 | -------------------------------------------------------------------------------- /docs/sass/_icons.scss: -------------------------------------------------------------------------------- 1 | %icon { 2 | height: 45px; 3 | padding-left: 60px; 4 | background-repeat: no-repeat; 5 | line-height: 37px; 6 | font-size: 1.1em; 7 | 8 | @media (min-width: 55em) { 9 | font-size: 1.5em; 10 | } 11 | } 12 | 13 | .icon-bower { 14 | @extend %icon; 15 | background-image: url('../images/icon-bower.jpg'); 16 | } 17 | 18 | .icon-github { 19 | @extend %icon; 20 | background-image: url('../images/icon-github.png'); 21 | } 22 | -------------------------------------------------------------------------------- /docs/sass/_main.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; 3 | color: #686868; 4 | background-color: white; 5 | margin: 0; 6 | } 7 | 8 | a { 9 | color: #50B7C8; 10 | } 11 | 12 | a[class], 13 | a:not([href]) { 14 | text-decoration: none; 15 | } 16 | 17 | code { 18 | font-family: Monaco, monospace; 19 | } 20 | 21 | .content-wrapper { 22 | box-sizing: border-box; 23 | width: 95%; 24 | max-width: 50em; 25 | margin: 0 auto; 26 | } 27 | 28 | .main-heading { 29 | font-size: 1em; 30 | overflow: hidden; 31 | text-align: center; 32 | max-width: 40em; 33 | margin: 1em auto; 34 | background-size: contain; 35 | background-position: center center; 36 | position: relative; 37 | 38 | svg { 39 | width: 100%; 40 | position: absolute; 41 | top: 0; 42 | right: 0; 43 | bottom: 0; 44 | left: 0; 45 | } 46 | 47 | @media(min-width: $bp-medium) { 48 | margin: 3em auto; 49 | } 50 | 51 | &:after { 52 | padding-top: (90/482)*100%; 53 | content: ''; 54 | display: block; 55 | } 56 | } 57 | 58 | .tagline { 59 | color: #acacac; 60 | text-align: center; 61 | margin: 0; 62 | } 63 | 64 | .description { 65 | font-size: 1.125em; 66 | @media(min-width: $bp-medium) { 67 | font-size: 1.5em; 68 | } 69 | } 70 | 71 | 72 | .section-heading { 73 | margin-top: 2em; 74 | font-size: 1.5em; 75 | color: #50B7C8; 76 | @media (min-width: $bp-medium) { 77 | font-size: 1.9em; 78 | } 79 | } 80 | 81 | .footer { 82 | border-top: 1px solid #eee; 83 | margin: 3em 0; 84 | padding: 3em 0 0; 85 | p { 86 | margin: 0; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /docs/sass/_monokai.scss: -------------------------------------------------------------------------------- 1 | .highlight .hll { background-color: #49483e } 2 | .highlight .c { color: #75715e } /* Comment */ 3 | .highlight .err { color: #960050; background-color: #1e0010 } /* Error */ 4 | .highlight .k { color: #66d9ef } /* Keyword */ 5 | .highlight .l { color: #ae81ff } /* Literal */ 6 | .highlight .n { color: #f8f8f2 } /* Name */ 7 | .highlight .o { color: #f92672 } /* Operator */ 8 | .highlight .p { color: #f8f8f2 } /* Punctuation */ 9 | .highlight .cm { color: #75715e } /* Comment.Multiline */ 10 | .highlight .cp { color: #75715e } /* Comment.Preproc */ 11 | .highlight .c1 { color: #75715e } /* Comment.Single */ 12 | .highlight .cs { color: #75715e } /* Comment.Special */ 13 | .highlight .ge { font-style: italic } /* Generic.Emph */ 14 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 15 | .highlight .kc { color: #66d9ef } /* Keyword.Constant */ 16 | .highlight .kd { color: #66d9ef } /* Keyword.Declaration */ 17 | .highlight .kn { color: #f92672 } /* Keyword.Namespace */ 18 | .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ 19 | .highlight .kr { color: #66d9ef } /* Keyword.Reserved */ 20 | .highlight .kt { color: #66d9ef } /* Keyword.Type */ 21 | .highlight .ld { color: #e6db74 } /* Literal.Date */ 22 | .highlight .m { color: #ae81ff } /* Literal.Number */ 23 | .highlight .s { color: #e6db74 } /* Literal.String */ 24 | .highlight .na { color: #a6e22e } /* Name.Attribute */ 25 | .highlight .nb { color: #f8f8f2 } /* Name.Builtin */ 26 | .highlight .nc { color: #a6e22e } /* Name.Class */ 27 | .highlight .no { color: #66d9ef } /* Name.Constant */ 28 | .highlight .nd { color: #a6e22e } /* Name.Decorator */ 29 | .highlight .ni { color: #f8f8f2 } /* Name.Entity */ 30 | .highlight .ne { color: #a6e22e } /* Name.Exception */ 31 | .highlight .nf { color: #a6e22e } /* Name.Function */ 32 | .highlight .nl { color: #f8f8f2 } /* Name.Label */ 33 | .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ 34 | .highlight .nx { color: #a6e22e } /* Name.Other */ 35 | .highlight .py { color: #f8f8f2 } /* Name.Property */ 36 | .highlight .nt { color: #f92672 } /* Name.Tag */ 37 | .highlight .nv { color: #f8f8f2 } /* Name.Variable */ 38 | .highlight .ow { color: #f92672 } /* Operator.Word */ 39 | .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ 40 | .highlight .mf { color: #ae81ff } /* Literal.Number.Float */ 41 | .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ 42 | .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ 43 | .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ 44 | .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ 45 | .highlight .sc { color: #e6db74 } /* Literal.String.Char */ 46 | .highlight .sd { color: #e6db74 } /* Literal.String.Doc */ 47 | .highlight .s2 { color: #e6db74 } /* Literal.String.Double */ 48 | .highlight .se { color: #ae81ff } /* Literal.String.Escape */ 49 | .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ 50 | .highlight .si { color: #e6db74 } /* Literal.String.Interpol */ 51 | .highlight .sx { color: #e6db74 } /* Literal.String.Other */ 52 | .highlight .sr { color: #e6db74 } /* Literal.String.Regex */ 53 | .highlight .s1 { color: #e6db74 } /* Literal.String.Single */ 54 | .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ 55 | .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ 56 | .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ 57 | .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ 58 | .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ 59 | .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ 60 | 61 | .highlight .gh { } /* Generic Heading & Diff Header */ 62 | .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ 63 | .highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ 64 | .highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ 65 | -------------------------------------------------------------------------------- /docs/sass/_sparkbox-footer.scss: -------------------------------------------------------------------------------- 1 | .sparkbox-footer { 2 | color: #8C8C8C; 3 | text-align: center; 4 | margin-bottom: 3em; 5 | 6 | a { 7 | color: #50B7C8; 8 | } 9 | } 10 | 11 | .icon-sparkbox { 12 | height: 55px; 13 | width: 51px; 14 | margin: 2em auto 0; 15 | } 16 | -------------------------------------------------------------------------------- /docs/sass/_variables.scss: -------------------------------------------------------------------------------- 1 | // $bp-medium: 37em; 2 | $bp-medium: 50em; 3 | -------------------------------------------------------------------------------- /docs/sass/base.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'general-mixins'; 3 | @import 'monokai'; 4 | @import 'icons'; 5 | @import 'example'; 6 | @import 'getit'; 7 | @import 'sparkbox-footer'; 8 | @import 'main'; 9 | -------------------------------------------------------------------------------- /docs/stylesheets/mediaQuery.css: -------------------------------------------------------------------------------- 1 | #sb-mediaQueryBookmarklet { 2 | color: white; 3 | background-color: black; 4 | background-color: rgba(15, 15, 15, 0.95); 5 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 6 | font-weight: 200; 7 | -webkit-backdrop-filter: blur(10px); 8 | backdrop-filter: blur(10px); 9 | padding: 5px 15px 15px; 10 | position: fixed; 11 | right: 20px; 12 | top: 20px; 13 | z-index: 99999; 14 | border-radius: 0.25em; 15 | box-shadow: 0 0.25em 0.75em -0.25em rgba(0, 0, 0, 0.8); 16 | } 17 | 18 | #sb-mediaQueryBookmarklet:before { 19 | content: ''; 20 | display: block; 21 | height: 10px; 22 | width: 10px; 23 | position: fixed; 24 | top: 0; 25 | left: 0; 26 | opacity: 0.8; 27 | background: black; 28 | } 29 | 30 | #sb-mediaQueryBookmarklet.onLeft { 31 | left: 20px; 32 | right: auto; 33 | } 34 | 35 | #mqb-dimensions { 36 | font-size: 25px; 37 | text-transform: lowercase; 38 | padding-bottom: 5px; 39 | margin: 0; 40 | } 41 | 42 | #mqb-mousePosition { 43 | font-size: 25px; 44 | text-transform: lowercase; 45 | border-bottom: 1px dashed #000; 46 | padding-bottom: 5px; 47 | margin: 0 0 10px; 48 | } 49 | 50 | #mqb-queries { 51 | font-size: 16px; 52 | list-style: circle; 53 | padding: 0 0 0 1em; 54 | font-family: monospace; 55 | text-transform: lowercase; 56 | } 57 | 58 | #mqb-linksContainer { 59 | font-size: 10px; 60 | margin-top: 10px; 61 | text-align: right; 62 | display: -webkit-box; 63 | display: -webkit-flex; 64 | display: -ms-flexbox; 65 | display: flex; 66 | -webkit-box-pack: justify; 67 | -webkit-justify-content: space-between; 68 | -ms-flex-pack: justify; 69 | justify-content: space-between; 70 | -webkit-box-align: center; 71 | -webkit-align-items: center; 72 | -ms-flex-align: center; 73 | align-items: center; 74 | -webkit-flex-wrap: wrap; 75 | -ms-flex-wrap: wrap; 76 | flex-wrap: wrap; 77 | } 78 | 79 | #mqb-version { 80 | color: #ccc; 81 | float: right; 82 | text-transform: lowercase; 83 | width: 100%; 84 | text-align: right; 85 | margin-bottom: 5px; 86 | } 87 | 88 | #mqb-closeButton { 89 | -webkit-appearance: none; 90 | background: transparent; 91 | border: none; 92 | clear: right; 93 | color: #ccc; 94 | cursor: pointer; 95 | display: block; 96 | float: right; 97 | margin-top: 5px; 98 | text-decoration: none; 99 | } 100 | 101 | #mqb-positionButton { 102 | -webkit-appearance: none; 103 | border: none; 104 | clear: right; 105 | color: #ccc; 106 | cursor: pointer; 107 | display: -webkit-box; 108 | display: -webkit-flex; 109 | display: -ms-flexbox; 110 | display: flex; 111 | float: right; 112 | height: 17px; 113 | background: none; 114 | outline: none; 115 | } 116 | 117 | #mqb-positionButton:before { 118 | content: 'Left'; 119 | display: inline-block; 120 | margin-right: 4px; 121 | } 122 | 123 | #mqb-positionButton:after { 124 | content: 'Right'; 125 | display: inline-block; 126 | margin-left: 4px; 127 | } 128 | 129 | #mqb-positionButton span { 130 | display: inline-block; 131 | height: 15px; 132 | width: 30px; 133 | box-sizing: border-box; 134 | border: 1px #bbb solid; 135 | border-radius: 15px; 136 | position: relative; 137 | } 138 | 139 | #mqb-positionButton span:before { 140 | content: ''; 141 | display: block; 142 | height: 9px; 143 | width: 9px; 144 | background-color: #ddd; 145 | border-radius: 50%; 146 | position: absolute; 147 | top: 2px; 148 | right: 2px; 149 | } 150 | 151 | .onLeft #mqb-positionButton span:before { 152 | right: auto; 153 | left: 2px; 154 | } 155 | 156 | #mqb-emTest { 157 | height: 0; 158 | width: 1em; 159 | } 160 | 161 | #mqb-mouseXPosition { 162 | background: deeppink; 163 | display: block; 164 | height: 20px; 165 | position: fixed; 166 | top: 0; 167 | width: 1px; 168 | z-index: 99999; 169 | } 170 | 171 | #mqb-mouseYPosition { 172 | background: deeppink; 173 | display: block; 174 | height: 1px; 175 | position: fixed; 176 | left: 0; 177 | width: 20px; 178 | z-index: 100000; 179 | } 180 | 181 | #mqb-horz-ruler { 182 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAUCAYAAAAA5FpZAAAABGdBTUEAALGPC/xhBQAAAKdJREFUWAnt2MEJgDAMhWEjrucczuQcDlibY6CJCHm3vxdpUl7go4hoY4xzm8vMHn9ma567vTfPXdkZr5O31pkuwzv7uk1VJQC4SjbJBTyBUZUBV8kmuYAnMKoy4CrZJBfwBEZVPr6+v/8OJq8W44bXPu1dwNtJ60DAa5/2LuDtpHUg4LVPe9faEwlcCvC3cMmiL/JK0RuHCYAHDv0GcL1xmAB44NBvXsmCL6+54O3ZAAAAAElFTkSuQmCC) repeat-x; 183 | background-size: auto 10px; 184 | height: 10px; 185 | top: 0; 186 | left: 10px; 187 | width: 100%; 188 | position: fixed; 189 | border-bottom: 1px solid black; 190 | } 191 | 192 | #mqb-vert-ruler { 193 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABcCAYAAABugpUMAAAABGdBTUEAALGPC/xhBQAAAIdJREFUWAntmbENwCAQA/PZL3MwE3NkwA/UIIoIF1hH+Qi9fJblgsjM51qciHgX18PVPUwYQMCAQLSk1D86WoLK7B1JmVFhdjyBnhQ65XgbESAnQKfIEbPAggCdYmEjIuQE6BQ5YhZYEKBTLGxEhJwAnSJHzAILAnSKhY2IkBPoScmdW7b/p3yaySgbUY+DDAAAAABJRU5ErkJggg==) repeat-y; 194 | background-size: 10px auto; 195 | height: 100%; 196 | top: 10px; 197 | left: 0; 198 | width: 10px; 199 | border-right: 1px solid black; 200 | } 201 | 202 | #mqb-horz-ruler, 203 | #mqb-vert-ruler { 204 | background-color: #111; 205 | opacity: 0.8; 206 | position: fixed; 207 | -webkit-backdrop-filter: blur(10px); 208 | } -------------------------------------------------------------------------------- /docs/stylesheets/test.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 500px) { 2 | body { 3 | background: red; 4 | } 5 | } 6 | 7 | @media (min-width: 700px) { 8 | body { 9 | background: blue; 10 | } 11 | } 12 | 13 | @media (min-width: 900px) { 14 | body { 15 | background: green; 16 | } 17 | } -------------------------------------------------------------------------------- /images/ruler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/mediaQueryBookmarklet/0200d5d5633643c1c6a60841d72988db05062a65/images/ruler.png -------------------------------------------------------------------------------- /images/vert-ruler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkbox/mediaQueryBookmarklet/0200d5d5633643c1c6a60841d72988db05062a65/images/vert-ruler.png -------------------------------------------------------------------------------- /stylesheets/mediaQuery.css: -------------------------------------------------------------------------------- 1 | #sb-mediaQueryBookmarklet { 2 | color: white; 3 | background-color: black; 4 | background-color: rgba(15, 15, 15, 0.95); 5 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 6 | font-weight: 200; 7 | -webkit-backdrop-filter: blur(10px); 8 | backdrop-filter: blur(10px); 9 | padding: 5px 15px 15px; 10 | position: fixed; 11 | right: 20px; 12 | top: 20px; 13 | z-index: 99999; 14 | border-radius: 0.25em; 15 | box-shadow: 0 0.25em 0.75em -0.25em rgba(0, 0, 0, 0.8); 16 | } 17 | 18 | #sb-mediaQueryBookmarklet:before { 19 | content: ''; 20 | display: block; 21 | height: 10px; 22 | width: 10px; 23 | position: fixed; 24 | top: 0; 25 | left: 0; 26 | opacity: 0.8; 27 | background: black; 28 | } 29 | 30 | #sb-mediaQueryBookmarklet.onLeft { 31 | left: 20px; 32 | right: auto; 33 | } 34 | 35 | #mqb-dimensions { 36 | font-size: 25px; 37 | text-transform: lowercase; 38 | padding-bottom: 5px; 39 | margin: 0; 40 | } 41 | 42 | #mqb-mousePosition { 43 | font-size: 25px; 44 | text-transform: lowercase; 45 | border-bottom: 1px dashed #000; 46 | padding-bottom: 5px; 47 | margin: 0 0 10px; 48 | } 49 | 50 | #mqb-queries { 51 | font-size: 16px; 52 | list-style: circle; 53 | padding: 0 0 0 1em; 54 | font-family: monospace; 55 | text-transform: lowercase; 56 | } 57 | 58 | #mqb-linksContainer { 59 | font-size: 10px; 60 | margin-top: 10px; 61 | text-align: right; 62 | display: -webkit-box; 63 | display: -webkit-flex; 64 | display: -ms-flexbox; 65 | display: flex; 66 | -webkit-box-pack: justify; 67 | -webkit-justify-content: space-between; 68 | -ms-flex-pack: justify; 69 | justify-content: space-between; 70 | -webkit-box-align: center; 71 | -webkit-align-items: center; 72 | -ms-flex-align: center; 73 | align-items: center; 74 | -webkit-flex-wrap: wrap; 75 | -ms-flex-wrap: wrap; 76 | flex-wrap: wrap; 77 | } 78 | 79 | #mqb-version { 80 | color: #ccc; 81 | float: right; 82 | text-transform: lowercase; 83 | width: 100%; 84 | text-align: right; 85 | margin-bottom: 5px; 86 | } 87 | 88 | #mqb-closeButton { 89 | -webkit-appearance: none; 90 | background: transparent; 91 | border: none; 92 | clear: right; 93 | color: #ccc; 94 | cursor: pointer; 95 | display: block; 96 | float: right; 97 | margin-top: 5px; 98 | text-decoration: none; 99 | } 100 | 101 | #mqb-positionButton { 102 | -webkit-appearance: none; 103 | border: none; 104 | clear: right; 105 | color: #ccc; 106 | cursor: pointer; 107 | display: -webkit-box; 108 | display: -webkit-flex; 109 | display: -ms-flexbox; 110 | display: flex; 111 | float: right; 112 | height: 17px; 113 | background: none; 114 | outline: none; 115 | } 116 | 117 | #mqb-positionButton:before { 118 | content: 'Left'; 119 | display: inline-block; 120 | margin-right: 4px; 121 | } 122 | 123 | #mqb-positionButton:after { 124 | content: 'Right'; 125 | display: inline-block; 126 | margin-left: 4px; 127 | } 128 | 129 | #mqb-positionButton span { 130 | display: inline-block; 131 | height: 15px; 132 | width: 30px; 133 | box-sizing: border-box; 134 | border: 1px #bbb solid; 135 | border-radius: 15px; 136 | position: relative; 137 | } 138 | 139 | #mqb-positionButton span:before { 140 | content: ''; 141 | display: block; 142 | height: 9px; 143 | width: 9px; 144 | background-color: #ddd; 145 | border-radius: 50%; 146 | position: absolute; 147 | top: 2px; 148 | right: 2px; 149 | } 150 | 151 | .onLeft #mqb-positionButton span:before { 152 | right: auto; 153 | left: 2px; 154 | } 155 | 156 | #mqb-emTest { 157 | height: 0; 158 | width: 1em; 159 | } 160 | 161 | #mqb-mouseXPosition { 162 | background: deeppink; 163 | display: block; 164 | height: 20px; 165 | position: fixed; 166 | top: 0; 167 | width: 1px; 168 | z-index: 99999; 169 | } 170 | 171 | #mqb-mouseYPosition { 172 | background: deeppink; 173 | display: block; 174 | height: 1px; 175 | position: fixed; 176 | left: 0; 177 | width: 20px; 178 | z-index: 100000; 179 | } 180 | 181 | #mqb-horz-ruler { 182 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAUCAYAAAAA5FpZAAAABGdBTUEAALGPC/xhBQAAAKdJREFUWAnt2MEJgDAMhWEjrucczuQcDlibY6CJCHm3vxdpUl7go4hoY4xzm8vMHn9ma567vTfPXdkZr5O31pkuwzv7uk1VJQC4SjbJBTyBUZUBV8kmuYAnMKoy4CrZJBfwBEZVPr6+v/8OJq8W44bXPu1dwNtJ60DAa5/2LuDtpHUg4LVPe9faEwlcCvC3cMmiL/JK0RuHCYAHDv0GcL1xmAB44NBvXsmCL6+54O3ZAAAAAElFTkSuQmCC) repeat-x; 183 | background-size: auto 10px; 184 | height: 10px; 185 | top: 0; 186 | left: 10px; 187 | width: 100%; 188 | position: fixed; 189 | border-bottom: 1px solid black; 190 | } 191 | 192 | #mqb-vert-ruler { 193 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABcCAYAAABugpUMAAAABGdBTUEAALGPC/xhBQAAAIdJREFUWAntmbENwCAQA/PZL3MwE3NkwA/UIIoIF1hH+Qi9fJblgsjM51qciHgX18PVPUwYQMCAQLSk1D86WoLK7B1JmVFhdjyBnhQ65XgbESAnQKfIEbPAggCdYmEjIuQE6BQ5YhZYEKBTLGxEhJwAnSJHzAILAnSKhY2IkBPoScmdW7b/p3yaySgbUY+DDAAAAABJRU5ErkJggg==) repeat-y; 194 | background-size: 10px auto; 195 | height: 100%; 196 | top: 10px; 197 | left: 0; 198 | width: 10px; 199 | border-right: 1px solid black; 200 | } 201 | 202 | #mqb-horz-ruler, 203 | #mqb-vert-ruler { 204 | background-color: #111; 205 | opacity: 0.8; 206 | position: fixed; 207 | -webkit-backdrop-filter: blur(10px); 208 | } 209 | -------------------------------------------------------------------------------- /stylesheets/test.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 500px) { 2 | body { 3 | background: url(https:unsplash.it/500) red; 4 | } 5 | } 6 | 7 | @media (min-width: 700px) { 8 | body { 9 | background: url(https:unsplash.it/700) blue; 10 | } 11 | } 12 | 13 | @media (min-width: 900px) { 14 | body { 15 | background: url(https:unsplash.it/900) green; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | mediaQuery Bookmarklet Test Page. 15 | 16 | 17 | --------------------------------------------------------------------------------