|
@@ -17,13 +17,9 @@
|
|
|
height: 100%;
|
|
|
border-right: solid;
|
|
|
border-color: rgba(0, 22, 22, 0.4);
|
|
|
- /* display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center; */
|
|
|
}
|
|
|
|
|
|
header {
|
|
|
- background-color: royalblue;
|
|
|
color: black;
|
|
|
margin: 10px;
|
|
|
text-align: center;
|
|
@@ -53,7 +49,6 @@
|
|
|
|
|
|
#navbar a {
|
|
|
display: block;
|
|
|
- /* background-color: royalblue; */
|
|
|
color: #4d4e53;
|
|
|
padding: 10px 30px;
|
|
|
text-decoration: none;
|
|
@@ -61,7 +56,6 @@
|
|
|
}
|
|
|
|
|
|
#main-doc {
|
|
|
- background-color: salmon;
|
|
|
position: absolute;
|
|
|
margin-left: 310px;
|
|
|
margin-bottom: 110px;
|
|
@@ -83,46 +77,57 @@
|
|
|
}
|
|
|
|
|
|
code {
|
|
|
+ position: relative;
|
|
|
display: block;
|
|
|
text-align: left;
|
|
|
- white-space: pre-line;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: normal;
|
|
|
+ word-wrap: normal;
|
|
|
+ line-height: 2;
|
|
|
background-color: rgb(247, 247, 247);
|
|
|
margin: 10px;
|
|
|
padding: 15px;
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
+ @media only screen and (max-width:815px) {
|
|
|
+ #navbar ul {
|
|
|
+ border: 1px solid;
|
|
|
+ height: 207px;
|
|
|
+ }
|
|
|
|
|
|
+ #navbar {
|
|
|
+ background-color: white;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ width: 100%;
|
|
|
+ border: none;
|
|
|
+ z-index: 1;
|
|
|
+ max-height: 275px;
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- @media (max-width:800px) {
|
|
|
- /* body {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background-color: rgb(255, 255, 255);
|
|
|
- color: rgb(78, 79, 84);
|
|
|
- font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
|
|
- } */
|
|
|
-
|
|
|
- /* #navbar {
|
|
|
+ #main-doc {
|
|
|
position: relative;
|
|
|
- min-width: 290px;
|
|
|
- top: 0px;
|
|
|
- left: 0px;
|
|
|
- width: 300px;
|
|
|
- border: solid;
|
|
|
- border-color: rgba(0, 22, 22, 0.4);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- } */
|
|
|
+ margin-top: 270px;
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media only screen and (max-width:400px) {
|
|
|
+ #main-doc {
|
|
|
+ margin-left: -10px;
|
|
|
+ }
|
|
|
|
|
|
- /* #main-doc {
|
|
|
- margin: auto;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 110px;
|
|
|
- } */
|
|
|
+ code {
|
|
|
+ margin-left: -20px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 45px;
|
|
|
+ min-width: 233px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
|
@@ -183,12 +188,7 @@
|
|
|
<header>Hello world</header>
|
|
|
<article>
|
|
|
<p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
|
|
|
- <code>
|
|
|
- function greetMe(yourName)
|
|
|
- { alert("Hello " + yourName);
|
|
|
- }
|
|
|
- greetMe("World");
|
|
|
- </code>
|
|
|
+ <code>function greetMe(yourName) <br>{ <br> alert("Hello " + yourName); <br>}<br>greetMe("World");</code>
|
|
|
<p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!</p>
|
|
|
</article>
|
|
|
</section>
|
|
@@ -220,7 +220,7 @@
|
|
|
<article>
|
|
|
<p>When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.</p>
|
|
|
<p>JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the function (or global scope) that the block resides within. For example the following code will log 5, because the scope of x is the function (or global context) within which x is declared, not the block, which in this case is an if statement.</p>
|
|
|
- <code>if (true) { var x = 5; } console.log(x); // 5</code>
|
|
|
+ <code>if (true)<br>{<br> var x = 5; <br>}<br>console.log(x); // 5</code>
|
|
|
<p>This behavior changes, when using the let declaration introduced in ECMAScript 2015.</p>
|
|
|
<code>if (true) { let y = 5; } console.log(y); // ReferenceError: y is not defined</code>
|
|
|
</article>
|