Updated CSS

resources/css/main.css

@@ -1,3 +1,5 @@
+/* Colors */
+/* General styling */
 body {
   background-color: #282828;
   color: white;
@@ -7,26 +9,12 @@ body {
   margin-left: 8%;
   margin-top: 5%;
   font-family: museo-sans-rounded, sans-serif;
+  font-size: 14pt;
   font-weight: 300;
   font-style: normal;
 }
 
-button {
+/* Text elements */
-  background-color: #787878;
-  padding: 15px;
-  display: inline-block;
-  border: 2px solid white;
-  border-radius: 15px;
-  color: white;
-  font-size: 16pt;
-}
-button:hover {
-  background-color: #505050;
-}
-button:focus {
-  outline: 0;
-}
-
 h1 {
   color: #2883d0;
   text-align: center;
@@ -48,12 +36,41 @@ a:hover {
   color: #A6E22E;
 }
 
+/* Special elements */
+button, input[type=submit] {
+  background-color: #787878;
+  border: 2px solid white;
+  color: white;
+  padding: 4px 12px;
+  margin: 2px 12px;
+  font-size: 14pt;
+}
+button:hover, input[type=submit]:hover {
+  background-color: #505050;
+}
+button:focus, input[type=submit]:focus {
+  outline: 0;
+}
+button.big, input.big[type=submit] {
+  padding: 15px;
+  border-radius: 15px;
+  font-size: 18pt;
+}
+
+/* Inputs */
+input {
+  padding: 4px 12px;
+  margin: 2px 12px;
+  font-size: 14pt;
+}
+
 input[type=color] {
   width: 4em;
   height: 2em;
   background-color: #787878;
 }
 
+/* Table elements */
 table {
   width: 100%;
 }
@@ -75,6 +92,7 @@ tr:hover {
   background-color: rgba(255, 255, 255, 0.281);
 }
 
+/* Import */
 .center {
   background-color: #505050;
   margin: auto;
@@ -116,18 +134,18 @@ tr:hover {
   text-align: center;
   background-color: #787878;
 }
-.textboxGrid .linkElement {
+.textboxGrid .linkGridElement {
   border: 1px solid black;
 }
-.textboxGrid .linkElement:hover {
+.textboxGrid .linkGridElement:hover {
   background-color: #505050;
   cursor: pointer;
 }
-.textboxGrid .linkElement a:hover {
+.textboxGrid .linkGridElement a:hover {
   text-decoration: underline;
   color: #66D9EF;
 }
-.textboxGrid .linkElement * {
+.textboxGrid .linkGridElement * {
   margin: 0px;
   padding: 0px;
   background-color: transparent;

resources/css/scss/_classes.scss

@@ -19,7 +19,7 @@
 }
 
 .leftalign * {
-    margin: $standardMargin;
+    margin: 15px;
     text-align: left;
 }
 
@@ -47,7 +47,7 @@
 
     }
 
-    .linkElement {
+    .linkGridElement {
         border: 1px solid black;
 
         &:hover {

resources/css/scss/main.scss

@@ -1,5 +1,11 @@
+//sass --no-source-map --charset main.scss ../main.css
+
+/* Colors */
 @import "colors";
 
+
+/* General styling */
+
 body {
     background-color: $grey1;
     color: white;
@@ -15,23 +21,14 @@ body {
     
     font: {
         family: museo-sans-rounded, sans-serif;
+        size: 14pt;
         weight: 300;
         style: normal;
     }
 }
 
-button {
-    background-color: $grey4;
-    padding: 15px;
-    display: inline-block;
-    border: 2px solid $border-color;
-    border-radius: $radius;
-    color: white;
-    font-size: 16pt;
 
-    &:hover {background-color: $grey3;}
+/* Text elements */
-    &:focus {outline:0;}
-}
 
 h1 {
     color: $blue;
@@ -52,12 +49,49 @@ a {
     &:hover {color: $linkHover;}
 }
 
+
+/* Special elements */
+
+button {
+    background-color: $grey4;
+    border: 2px solid $border-color;
+    color: white;
+    padding: 4px 12px;
+    margin: 2px 12px;
+    font-size: 14pt;
+    
+    &:hover {background-color: $grey3;}
+    &:focus {outline:0;}
+
+    &.big {
+        padding: 15px;
+        border-radius: $radius;
+        font-size: 18pt;
+    }
+}
+
+
+/* Inputs */
+
+input {
+    padding: 4px 12px;
+    margin: 2px 12px;
+    font-size: 14pt;
+}
+
 input[type=color] {
     width: 4em;
     height: 2em;
     background-color: $grey4;
 }
 
+input[type=submit] {
+    @extend button;
+}
+
+
+/* Table elements */
+
 table {
     width: 100%;
 }
@@ -77,4 +111,7 @@ tr {
 	&:hover { background-color: rgba(255, 255, 255, 0.281);}
 }
 
+
+/* Import */
+
 @import "classes";

test-template-generator/resources/js/linkConnector.js

@@ -3,11 +3,11 @@ const grid = document.getElementsByClassName("textboxGrid")[0];
 
 for (i=0; i<taskArray.length; i++) {
 
-    const linkElement = document.createElement("div");
+    const linkGridElement = document.createElement("div");
-    linkElement.className = "linkElement";
+    linkGridElement.className = "linkGridElement";
     const path = taskArray[i]["path"];
 
-    linkElement.addEventListener("click", function () {
+    linkGridElement.addEventListener("click", function () {
         window.location.href = path;
     } )
 
@@ -17,6 +17,6 @@ for (i=0; i<taskArray.length; i++) {
     link.innerHTML = taskArray[i]["name"];
 
     h2.appendChild(link);
-    linkElement.appendChild(h2);
+    linkGridElement.appendChild(h2);
-    grid.appendChild(linkElement);
+    grid.appendChild(linkGridElement);
 }