Inline critical above-the-fold css

index.html

@@ -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">