Website: Repositioned theme selector (#3146)
This commit is contained in:
parent
ccc02a55fd
commit
ea361e5a2b
|
@ -244,27 +244,4 @@ var setTheme;
|
||||||
|
|
||||||
$$('.plugin-list').forEach(listPlugins);
|
$$('.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 {
|
#features {
|
||||||
width: 66em;
|
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
@ -197,12 +196,16 @@ footer:before {
|
||||||
margin: 0 0 2em 0;
|
margin: 0 0 2em 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 27em;
|
width: 49%;
|
||||||
|
box-sizing: border-box;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
#features li:nth-child(odd) {
|
#features li:nth-child(odd) {
|
||||||
margin-right: 5em;
|
padding-right: 2.5em;
|
||||||
|
}
|
||||||
|
#features li:nth-child(even) {
|
||||||
|
padding-left: 2.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#features li:before {
|
#features li:before {
|
||||||
|
@ -229,7 +232,7 @@ footer:before {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: -1em;
|
margin-right: -9em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: .2em;
|
letter-spacing: .2em;
|
||||||
|
@ -277,6 +280,7 @@ footer:before {
|
||||||
|
|
||||||
#theme > input {
|
#theme > input {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
clip: rect(0,0,0,0);
|
clip: rect(0,0,0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -284,6 +288,81 @@ footer:before {
|
||||||
background: #7fab14;
|
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 {
|
footer {
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
background-position: bottom;
|
background-position: bottom;
|
||||||
|
@ -435,12 +514,3 @@ ul.plugin-list {
|
||||||
ul.plugin-list > li > div {
|
ul.plugin-list > li > div {
|
||||||
margin-bottom: .5em;
|
margin-bottom: .5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Fix for Toolbar's overflow issue
|
|
||||||
*/
|
|
||||||
|
|
||||||
div.code-toolbar {
|
|
||||||
display: block;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
|
@ -8,10 +8,6 @@
|
||||||
<link rel="stylesheet" href="assets/style.css" />
|
<link rel="stylesheet" href="assets/style.css" />
|
||||||
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
|
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
|
||||||
<style>
|
<style>
|
||||||
#theme {
|
|
||||||
margin-right: -9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10em;
|
height: 10em;
|
||||||
|
|
Loading…
Reference in New Issue