Update css

html/tasks/chapter_8/notes/oppgave.html

@@ -13,12 +13,13 @@
     <h1>Notes</h1>
     
     <div class="center">
-
-      <form id="noteInput">
-        <input type="text" id="noteInputText">
-        <label for="noteInputSubmit">Legg til notis</label>
-        <input type="submit" id="noteInputSubmit">
-      </form>
+      <div class="inline">
+        <form id="noteInput">
+          <textarea  id="noteInputText" style="resize: none;" rows="4" ></textarea>
+          <label for="noteInputSubmit">Legg til notis</label>
+          <input type="submit" id="noteInputSubmit">
+        </form>
+      </div>
 
       <div id="notes" class="textboxGrid"></div>
     </div>

html/tasks/chapter_8/task3_randomArrayData/oppgave.html

@@ -17,14 +17,14 @@
         <span id="dataSpan"></span>
       </div>
 
-      <table id="dataTable">
+      <table id="dataTable" class="inlineTable">
         <tr>
           <th>Nummer</th>
           <th>Data</th>
         </tr>
       </table>
 
-      <table id="history"></table>
+      <table id="history" class="inlinetable"></table>
     </div>
   </body>
 </html>

resources/css/main.css

@@ -78,6 +78,7 @@ input[type=color] {
 table {
   width: 100%;
   display: table;
+  border-spacing: 0px;
 }
 
 tbody {
@@ -125,9 +126,6 @@ tr:hover {
 
 .center * {
   margin: auto;
-}
-
-.center >  {
   display: block;
 }
 
@@ -136,11 +134,12 @@ tr:hover {
 }
 
 .inline {
-  margin: 15px;
+  margin: 15px 0px;
 }
 
 .inline * {
   display: inline-block;
+  vertical-align: middle;
 }
 
 .leftalign * {
@@ -163,8 +162,7 @@ tr:hover {
 }
 
 .textboxGrid * {
-  display: auto;
-  size: 100%;
+  display: block;
   margin: 0px;
   padding: 30px 0px;
   text-align: center;
@@ -172,12 +170,13 @@ tr:hover {
 }
 
 .textboxGrid .gridElement, .textboxGrid .linkGridElement {
+  display: initial;
   border: 1px solid black;
   overflow-wrap: break-word;
 }
 
 .textboxGrid .gridElement *, .textboxGrid .linkGridElement * {
-  margin: 3px;
+  margin: auto;
   padding: 0px 30px;
   background-color: transparent;
 }
@@ -195,3 +194,20 @@ tr:hover {
 .hoverable:hover {
   background-color: rgba(0, 0, 0, 0.2);
 }
+
+.inlineTable {
+  display: table;
+  margin: 20px 0px;
+}
+
+.inlineTable tbody {
+  display: table-row-group;
+}
+
+.inlineTable tr {
+  display: table-row;
+}
+
+.inlineTable tr th, .inlineTable tr td {
+  display: table-cell;
+}

resources/css/scss/_classes.scss

@@ -7,9 +7,10 @@
   height: max-content;
   border-radius: $radius;
   
-  * { margin: auto;}
-
-  &>:not(table, .textboxGrid){ display: block;}
+  * {
+    margin: auto;
+    display: block;
+  }
 
   canvas {
     border: 5px solid black;
@@ -17,8 +18,11 @@
 }
 
 .inline {
-  margin: $standardMargin;
-  * {display: inline-block;}
+  margin: $standardMargin 0px;
+  * {
+    display: inline-block;
+    vertical-align: middle;
+  }
 }
 
 .leftalign * {
@@ -40,9 +44,8 @@
   }
 
   * {
-    display: auto;
+    display: block;
 
-    size: 100%;
     margin: 0px;
     padding: 30px 0px;
     text-align: center;
@@ -53,11 +56,13 @@
 
   .gridElement {
 
+    display: initial;
+
     border: 1px solid black;
     overflow-wrap: break-word;
 
     * {
-      margin: 3px;
+      margin: auto;
       padding: 0px 30px;
       background-color: transparent;
     }
@@ -82,4 +87,22 @@
   &:hover {
     background-color: rgba($color: #000000, $alpha: 0.2);
   }
+}
+
+.inlineTable {
+  display: table;
+  margin: 20px 0px;
+  
+  tbody {
+    display: table-row-group;
+  }
+
+  tr {
+    display: table-row;
+
+    th, td {
+      display: table-cell;
+    }
+  }
+
 }

resources/css/scss/main.scss

@@ -3,7 +3,6 @@
 /* Colors */
 @import "colors";
 
-
 /* General styling */
 
 body {
@@ -95,6 +94,7 @@ input[type=submit] {
 table {
   width: 100%;
   display: table;
+  border-spacing: 0px;
 }
 
 tbody {