Fixes for small screens

src/app/app.component.html

@@ -37,8 +37,8 @@
         <ul>
           <li>Btw</li>
           <li>Personenbelasting</li>
-          <li>Vennootschapsbelasting</li>
-          <li>Rechtspersonenbelasting</li>
+          <li>Vennootschaps&shy;belasting</li>
+          <li>Rechtspersonen&shy;belasting</li>
           <li>Belasting van niet-inwoners (natuurlijke personen en  vennootschappen)</li>
           <li>Diverse andere aangiften ...</li>
         </ul>
@@ -101,7 +101,7 @@
   <div class="content">
     <h2>Advies</h2>
     <app-collapse [icon]="'fa-money-check'" [title]="'Fiscaal advies'" [alternate]="true">
-      <p>Wij streven naar een correct, ondersteund/gedocumenteerd advies op uw diverse fiscale vragen.</p>
+      <p>Wij streven naar een correct, ondersteund / gedocumenteerd advies op uw diverse fiscale vragen.</p>
     </app-collapse>
     <app-collapse [icon]="'fa-receipt'" [title]="'Vennootschaprecht'" [alternate]="true">
       <p>Advies in diverse facetten van het vennootschapsrecht:</p>
@@ -207,8 +207,8 @@
     </p>
     <span class="bold">Als je deel wil uitmaken van ons team:</span>
     <ul>
-      <li>bel op 09/ 228.43.22</li>
-      <li>of bezorg dan jouw CV en motivatiebrief aan robert@sinia.be</li>
+      <li>bel op <a href="tel:+3292284322">09/ 228.43.22</a></li>
+      <li>of bezorg dan jouw CV en motivatiebrief aan <a href="mailto:robert@sinia.be">robert@sinia.be</a></li>
     </ul>
     <p>
       Wij contacteren je zo spoedig mogelijk.
@@ -221,8 +221,8 @@
       Interesse?
     </p>
     <ul>
-      <li>bel op 09/ 228.43.22</li>
-      <li>of bezorg dan jouw CV en motivatiebrief aan robert@sinia.be</li>
+      <li>bel op <a href="tel:+3292284322">09/ 228.43.22</a></li>
+      <li>of bezorg dan jouw CV en motivatiebrief aan <a href="mailto:robert@sinia.be">robert@sinia.be</a></li>
     </ul>
   </div>
 </div>

src/app/app.component.scss

@@ -366,7 +366,7 @@ h2 {
       z-index: 5;
       position: relative;
       width: 100%;
-      margin-top: -19rem;
+      margin-top: -17rem;
     }
   }
 
@@ -411,4 +411,10 @@ h2 {
     }
     }
   }
+
+  #vacatures, #contact {
+    a, a > p {
+      color: $secondary-color;
+    }
+  }
 }

src/app/collapse/collapse.component.scss

@@ -32,6 +32,8 @@
 h3 {
   width: 80%;
   margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 span {

src/app/header/header.component.scss

@@ -108,7 +108,7 @@
 
     span {
       color: $primary-color;
-      font-size: 5rem;
+      font-size: 4rem;
     }
   }
 }

src/index.html

@@ -24,6 +24,7 @@
       font-family: 'Inter';
       font-size: 2rem;
       line-height: 1.5;
+      hyphens: manual;
     }
 
     body {