small design fixes and more beautiful course-details-table

templates/course.hamlet

@@ -1,42 +1,43 @@
 <div .container>
-  <table>
+  <div .scrolltable>
-    $maybe school <- schoolMB
+    <table .table.table--striped.table--hover.table--vertical>
-      <tr>
+      $maybe school <- schoolMB
-        <th #school>Fakultät/Institut
+        <tr .table__row>
+          <th #school>Fakultät/Institut
+          <td>
+            #{schoolName school}
+      $maybe descr <- courseDescription course
+        <tr .table__row>
+          <th #description>Beschreibung
+          <td>
+            #{descr}
+      $maybe link <- courseLinkExternal course
+        <tr .table__row>
+          <th #website>Website
+          <td>
+            <a href=#{link} target="_blank" rel="noopener" title="Website des Kurses">#{link}
+      <tr .table__row>
+        <th #participants>Teilnehmer
         <td>
-          #{schoolName school}
+          #{participants}
-    $maybe descr <- courseDescription course
+          $maybe capacity <- courseCapacity course
-      <tr>
+            \ von #{capacity}
-        <th #description>Beschreibung
+      <tr .table__row>
+        <th #registration>Anmeldezeitraum
         <td>
-          #{descr}
+          $maybe regFrom <- courseRegisterFrom course
-    $maybe link <- courseLinkExternal course
+            #{formatTimeGerWD regFrom}
-      <tr>
+          $maybe regTo   <- courseRegisterTo   course
-        <th #website>Website
+            \ bis #{formatTimeGerWD regTo}
-        <td>
-          <a href=#{link} target="_blank" rel="noopener" title="Website des Kurses">#{link}
-    <tr>
-      <th #participants>Teilnehmer
-      <td>
-        #{participants}
-        $maybe capacity <- courseCapacity course
-          \ von #{capacity}
-    <tr>
-      <th #registration>Anmeldezeitraum
-      <td>
-        $maybe regFrom <- courseRegisterFrom course
-          #{formatTimeGerWD regFrom}
-        $maybe regTo   <- courseRegisterTo   course
-          \ bis #{formatTimeGerWD regTo}
 
-    <tr>
+      <tr .table__row>
-      <th>
+        <th>
-      <td>
+        <td>
-        $if registrationOpen
+          $if registrationOpen
-          <div .course__registration.container>
+            <div .course__registration.container>
-            <form method=post action=@{CourseR tid csh CRegisterR} enctype=#{regEnctype}>
+              <form method=post action=@{CourseR tid csh CRegisterR} enctype=#{regEnctype}>
-              $# regWidget is defined through templates/widgets/registerForm
+                $# regWidget is defined through templates/widgets/registerForm
-              ^{regWidget}
+                ^{regWidget}
 
 $# <div .container>
 $#   <div .tab-group>

templates/course.lucius

@@ -1,7 +1,3 @@
-.course__registration {
-  margin-top: 20px;
-}
-
 th {
   vertical-align: top;
   text-align: left;

templates/default-layout.lucius

@@ -118,11 +118,11 @@ h1 {
 }
 h2 {
   font-size: 24px;
-  margin: 10px 0 5px;
+  margin: 10px 0;
 }
 h3 {
   font-size: 20px;
-  margin: 5px 0;
+  margin: 10px 0;
 }
 h4 {
   font-size: 16px;

templates/formPageI18n.hamlet

@@ -1,5 +1,5 @@
 $maybe text <- formText
-  <p>
+  <h3>
     _{text}
 <form .form-horizontal method=post action=@{actionUrl}#forms enctype=#{formEnctype}>
    ^{formWidget}

templates/standalone/inputs.lucius

@@ -1,7 +1,4 @@
 /* GENERAL STYLES FOR FORMS */
-form {
-  margin: 20px 0;
-}
 
 /* FORM GROUPS */
 .form-group {
@@ -12,7 +9,7 @@ form {
   grid-gap: 5px;
   justify-content: flex-start;
   align-items: flex-start;
-  padding: 4px;
+  padding: 4px 0;
   border-left: 2px solid transparent;
 
   + .form-group {