Merge pull request #111 from r-gaia-cs/improve-css

Small improvements to CSS

css/swc.css

@@ -8,6 +8,10 @@ h1, h2 {
     margin-bottom: 10px;
 }
 
+h1:first-child, h2:first-child {
+    margin-top: 10px;
+}
+
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     color: inherit;
 }
@@ -111,20 +115,25 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     color: inherit;
 }
 
-/* Objectives and key points */
+/* Objectives, Callout Box and Challenges */
+.objectives, .keypoints, .callout, .challenge {
+    margin: 1em 0;
+    padding: 0em 1em;
+}
+
 .objectives, .keypoints {
     background-color: azure;
     border: 5px solid azure;
-    margin: 1em 0;
-    padding: 0em 1em;
 }
 
-/* Challenges */
+.callout {
+    background-color: #EEE;
+    border: 5px solid #EEE;
+}
+
 .challenge {
     background-color: #CCFFCC;
     border: 5px solid #CCFFCC;
-    margin: 1em 0;
-    padding: 0em 1em;
 }
 
 /* Things to fix. */
@@ -146,14 +155,6 @@ blockquote {
     width: 90%;
 }
 
-/* Callout Box */
-.callout {
-    background-color: #EEE;
-    border: 5px solid #EEE;
-    margin: 1em 0;
-    padding: 0em 1em;
-}
-
 /* Tables used for displaying choices in challenges. */
 table.choices tr td {
     vertical-align : top;
@@ -165,7 +166,8 @@ table.outlined {
 }
 
 /* Code sample */
-pre.sourceCode{
+pre.sourceCode,
+pre.input {
     color: ForestGreen;
 }
 pre.output {
@@ -187,6 +189,22 @@ pre.error {
     line-height: 13pt;
   }
 
+  /* Objectives, Callout Box and Challenges */
+  .objectives, .keypoints {
+      background-color: unset;
+      border: 5px solid;
+  }
+
+  .callout {
+      background-color: unset;
+      border: 5px solid;
+  }
+
+  .challenge {
+      background-color: unset;
+      border: 5px solid;
+  }
+
   p,ul,ol,li,pre,code {
     font-size: 8pt;
     line-height: 9pt;
@@ -195,7 +213,29 @@ pre.error {
   code {
     padding: 0px;
     border: 0px;
-    background: none;
+    background: unset;
+  }
+
+  pre.sourceCode::before,
+  pre.input::before. {
+      content: "Input:";
+  }
+
+  pre.output::before {
+      content: "Output:";
+  }
+
+  pre.error::before {
+      content: "Error:";
+  }
+
+  pre.sourceCode code,
+  pre.input code,
+  pre.output code,
+  pre.error code {
+      display: block;
+      margin-top: 1em;
+      margin-left: 2em;
   }
 
   #github-ribbon {