diff --git a/assets/code.js b/assets/code.js index e1e473dad2..0415b1bd77 100644 --- a/assets/code.js +++ b/assets/code.js @@ -244,27 +244,4 @@ var setTheme; $$('.plugin-list').forEach(listPlugins); - // small polyfill for Element#matches - if (!Element.prototype.matches) { - Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; - } - - Prism && Prism.hooks.add('complete', function (env) { - var element = env.element; - - requestAnimationFrame(function () { - if (!element.matches('div.code-toolbar > pre > code')) { - return; - } - - var pre = element.parentElement; - var wrapper = pre.parentElement; - - // transfer margin of pre to wrapper - wrapper.style.margin = window.getComputedStyle(pre).margin; - pre.style.margin = '0'; - - }); - }); - }()); diff --git a/assets/style.css b/assets/style.css index 9ca0fb5998..dc16a0d768 100644 --- a/assets/style.css +++ b/assets/style.css @@ -188,7 +188,6 @@ footer:before { } #features { - width: 66em; margin-top: 2em; font-size: 80%; } @@ -197,12 +196,16 @@ footer:before { margin: 0 0 2em 0; list-style: none; display: inline-block; - width: 27em; + width: 49%; + box-sizing: border-box; vertical-align: top; } #features li:nth-child(odd) { - margin-right: 5em; + padding-right: 2.5em; + } + #features li:nth-child(even) { + padding-left: 2.5em; } #features li:before { @@ -229,7 +232,7 @@ footer:before { position: relative; z-index: 1; float: right; - margin-right: -1em; + margin-right: -9em; text-align: center; text-transform: uppercase; letter-spacing: .2em; @@ -277,6 +280,7 @@ footer:before { #theme > input { position: absolute; + left: 0; clip: rect(0,0,0,0); } @@ -284,6 +288,81 @@ footer:before { background: #7fab14; } + @media (max-width: 1300px) and (min-width: 1051px) { + #theme { + position: relative; + z-index: 1; + float: left; + margin: 1em 0; + width: 100%; + } + #theme + * { + clear: both; + } + + #theme > p { + margin-top: .5em; + } + + #theme > label { + float: left; + font-size: 82.6%; + } + + #theme > label:before { + display: none; + } + + #theme > label:nth-of-type(n+2) { + margin-top: 0; + } + } + + @media (max-width: 1050px) { + #theme { + position: relative; + z-index: 1; + float: left; + margin: 1em 0; + } + #theme + * { + clear: both; + } + + #theme > p { + left: inherit; + right: -1em; + } + + #theme > label { + float: left; + } + + #theme > label:before { + display: none; + } + + #theme > label:nth-of-type(n+2) { + margin-top: 0; + } + #theme > label:nth-of-type(n+5) { + margin-top: -2.5em; + } + #theme > label:nth-of-type(4n+1) { + margin-left: 12.5em; + } + } + + @media (max-width: 800px) { + #theme > label:nth-of-type(4) { + margin-right: 4em; + } + #theme > label:nth-of-type(4n+1) { + margin-left: 4em; + } + } + + footer { margin-top: 2em; background-position: bottom; @@ -435,12 +514,3 @@ ul.plugin-list { ul.plugin-list > li > div { margin-bottom: .5em; } - -/* - * Fix for Toolbar's overflow issue - */ - -div.code-toolbar { - display: block; - overflow: auto; -} diff --git a/test.html b/test.html index 04a0dfc59f..dff0a8533b 100644 --- a/test.html +++ b/test.html @@ -8,10 +8,6 @@