Commit 44bc25ce authored by Marco Kellershoff's avatar Marco Kellershoff
Browse files

Inline critical above-the-fold css

parent 868cfb6d
......@@ -4,7 +4,209 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>PWNY CodeTest</title>
<link rel="stylesheet" href="assets/pwny.css" />
<style>
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(SourceCodePro-Regular.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html,body {overflow:hidden;}
html,body,div,iframe {margin:0;padding:0;border:0 none;}
#drawer button,
#drawer select {font-family:"Helvetica Neue", "Calibri Light", Roboto, sans-serif;border:1px solid #333;margin:3px;font-size:1rem;padding:0.75rem 1.35rem;}
#app iframe {display:block;border:1px solid #444;margin-top:0;}
html,body,#app{margin:0;padding:0;width:100%;height:100%;}
@media (max-width: 1000px) {
body #app #logo {display: none;}
body #app {margin-top: 25px;}
}
#app {
display: none;
box-sizing: border-box;
margin: 100px 0 0 0;
width: 100%;
height: calc(100%-50px);
overflow-x: hidden;
overflow-y: auto;
overflow-scrolling: touch;
padding: 20px;
}
#col1, #col2 {display:inline-block;}
#col1 {width: 49.5%;height: 100%;float:left;overflow:auto;}
#col1 .ace_editor {width:100%;height:85%;}
#col2 {width: 49.5%;height: 100%;float:right;}
#col2 iframe {width:100%;height:100%;}
#btn_run {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
#file {
display:none;
}
#btn_file {
background-color: #56bf8f;
border-bottom: 5px solid #36aa7a;
text-shadow: 0px -2px #36aa7a;
}
#btn_add {
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
#btn_delete {
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
#btn_share {
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
#templates {
background-color: #112233;
border-bottom: 5px solid #051525;
text-shadow: 0px -2px #051525;
}
#syntax {
background-color: #226666;
border-bottom: 5px solid #155050;
text-shadow: 0px -2px #155050;
}
#syntax option:checked {
background-color:#033;
}
#logo {
position: fixed;
top: 0;
width: 199px;
height: 130px;
}
#drawer-toggle-label:before {
content: "";
display: block;
position: absolute;
height: 2px;
width: 24px;
background: #fff;
left: 13px;
top: 18px;
box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
}
#drawer-toggle-label {
display: none;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
z-index: 1;
background: transparent;
}
#drawer-toggle { display: none; }
#drawer {
position: fixed;
top: 0;
padding-top: 50px;
height: 100%;
width: 250px;
background: #2f2f2f;
overflow-x: hidden;
overflow-y: auto;
left: -250px;
background:"";
}
#drawer ul {
list-style: none;
padding: 0;
}
#drawer li a {
display: block;
color: #fff;
text-decoration: none;
text-align: center;
font-family: 'Source Code Pro';
}
#drawer li button,
#drawer li select {
font-family: 'Source Code Pro';
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 10px;
border-radius: 10px;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#drawer li button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
#drawer li {
margin: 0;
width: 100%;
padding: 10px 0
}
#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ header { left: calc(100% - 100px); }
#drawer-toggle:checked ~ #drawer {
width: calc(100% - 50px);
left: 0;
}
#drawer-toggle:checked ~ #app { margin-left: 300px; }
@media screen and (min-width: 380px) {
#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ #drawer {
width: 300px;
left: 0;
}
}
.loader {
margin: 5% auto;
display: none;
border-radius: 50%;
width: 180px;
height: 180px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
border-top: 16px solid #3498DB;
border-right: 16px solid #82BF56;
border-bottom: 16px solid #E74C3C;
border-left: 16px solid #F2CF66;
}
</style>
</head>
<body>
<input id="drawer-toggle" type="checkbox">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment