diff --git a/playground/css.css b/playground/css.css
index 75de740..f0949f0 100644
--- a/playground/css.css
+++ b/playground/css.css
@@ -1,14 +1,14 @@
#content {
position: absolute;
width: 100%;
- height: 94vh;
+ height: 95vh;
top: 55px;
}
#content div {
float: left;
}
#codeContent {
- height: 100%;
+ height: 95vh;
width: 50%;
background-color: #222226;
}
@@ -47,3 +47,12 @@
height: 100%;
width: 50%;
}
+@media screen and (min-width:0px) and (max-width:1079px) {
+ #codeContent {
+ display: block!important;
+ width: 100%;
+ }
+ iframe {
+ width: 100%!important;
+ }
+}
diff --git a/playground/index.html b/playground/index.html
index 893b107..8bd9d56 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -17,14 +17,14 @@
-
-
-
+
+
+
-
-
-
+
+
+
diff --git a/playground/js.js b/playground/js.js
index 5b0e6aa..74fa61b 100644
--- a/playground/js.js
+++ b/playground/js.js
@@ -1,4 +1,5 @@
var d = document.getElementById.bind(document);
+var g = document.querySelector.bind(document);
var autoRunCheck = localStorage.getItem("autoRun")
var setCodeHTML = localStorage.getItem("writtenCodeHTML")
var setCodeCSS = localStorage.getItem("writtenCodeCSS")
@@ -30,16 +31,18 @@ function autoRun() {
}
function showCode(lang) {
- d("cssInput").style = "display: none"
- d("jsInput").style = "display: none"
- d("htmlInput").style = "display: none"
+ $(".langButton").css("background-color", "#3b3c45")
+ $(".langInput").css("display", "none")
if (lang == "html") {
+ d("htmlButton").style = "background-color: #27282e;"
d("htmlInput").style = "display: block"
}
else if (lang == "css") {
+ d("cssButton").style = "background-color: #27282e;"
d("cssInput").style = "display: block"
}
else {
+ d("jsButton").style = "background-color: #27282e;"
d("jsInput").style = "display: block"
}
}
@@ -48,15 +51,13 @@ function updateCode(source) {
var autoRunCheck = localStorage.getItem("autoRun")
var code = "" + "" + d("htmlInput").value
if (source == "run" || autoRunCheck == "on") {
+ localStorage.setItem("writtenCodeHTML", d("htmlInput").value)
+ localStorage.setItem("writtenCodeCSS", d("cssInput").value)
+ localStorage.setItem("writtenCodeJS", d("jsInput").value)
d("htmlOutput").setAttribute('srcdoc', code)
}
- localStorage.setItem("writtenCodeHTML", d("htmlInput").value)
- localStorage.setItem("writtenCodeCSS", d("cssInput").value)
- localStorage.setItem("writtenCodeJS", d("jsInput").value)
}
emmet.require('textarea').setup({
-pretty_break: true, // enable formatted line breaks (when inserting
- // between opening and closing tag)
use_tab: true // expand abbreviations by Tab key
});