Website: Repositioned theme selector (#3146)
This commit is contained in:
parent
ccc02a55fd
commit
ea361e5a2b
|
@ -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';
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
}());
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue