added more styling

.angular-cli.json

@@ -19,8 +19,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/bootstrap/scss/bootstrap.scss",
         "styles.scss",
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "../node_modules/font-awesome/css/font-awesome.min.css"
       ],
       "scripts": [

src/app/app.component.html

@@ -2,18 +2,17 @@
 <div class="container-fluid">
 
   <div class="row">
-    <div class="col-md-12 centercontents" id="topname">
+    <div class="col-md-8 offset-md-2">
+      <div class="centercontents" id="topname">
         <span class="display-1" id="first">Joachim</span><span id="dot">.</span><span id="last" class="display-1">Nielandt</span>
       </div>
     </div>
-
-  <div class="row below-name">
-
   </div>
 
   <!--the top menu... should be always visible, everywhere-->
   <div class="row">
-    <div class="col-md-12 centercontents" id="topmenubuttons">
+    <div class="col-md-8 offset-md-2 centercontents">
+      <div id="topmenubuttons">
         <div class="btn-group mx-auto" role="group" aria-label="Basic example">
           <!-- <button type="button" class="btn btn-secondary">Left</button> -->
           <!-- <button type="button" class="btn btn-secondary">Middle</button> -->
@@ -23,9 +22,18 @@
           <a routerLink="/cv"><i class="text-secondary fa fa-id-badge fa-fw fa-2x" tooltip="Curriculum Vitae" placement="bottom" aria-hidden="true"></i></a>
         </div>
       </div>
+    </div>
   <!--row-->
   </div>
 
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <div class="pagetype">
+        Posts
+      </div>
+    </div>
+  </div>
+
   <!--this shows the current route's content-->
   <div class="row">
     <div class="col-md-8 offset-md-2">

src/app/app.component.scss

@@ -1,30 +1,43 @@
+@import "../globals";
+
 .centercontents {
     text-align: center;
     margin-left: auto;
     margin-right: auto
 }
 
-#topname span {
+#topname {
-    font-size: 23pt
+  //font-family: $mainFont;
+  margin-top: 25px;
+  padding-bottom: 9px;
+}
+
+#topname #first {
+    font-size: 250%
 }
 
 #topname #dot {
     line-height: 20pt;
-    font-size: 50pt;
+    font-size: 600%;
 }
 
 #topname #last {
     font-size: 20pt;
 }
 
-#topmenubuttons {
+#topmenubuttons, #topname {
-    border-bottom: 1pt solid black;
+  border-left: 1px solid black;
-    padding-bottom: 5px;
+  border-right: 1px solid black;
-    margin-bottom: 11pt;
 }
 
 //this is the row below the name, will use this for styling
 .row.below-name {
-  border-bottom: 1px solid black;
+}
-  margin-bottom: 8px;
+
+.pagetype {
+  text-align: center;
+  font-size: 200%;
+  border-bottom: 1px solid black;
+  border-top: 1px solid black;
+  margin: 35px 0px 25px 30px;
 }

src/app/components/post/post.component.scss

@@ -2,7 +2,7 @@
 @import '../../../globals';
 
 .post  {
-  font-family: $mainFont !important;
+  //font-family: $mainFont !important;
 }
 
 .post-header {
@@ -14,7 +14,8 @@
 .post-title {
   text-align: center;
   flex-grow: 1;
-  font-size: 150%;
+  font-size: 200%;
+  font-style: italic;
 }
 
 .post-date {

src/globals.scss

@@ -1,6 +1,9 @@
 /* This file is meant to be imported into other scss files */
 @import url('https://fonts.googleapis.com/css?family=Quattrocento+Sans');
 @import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');
+@import url('https://fonts.googleapis.com/css?family=Lusitana|Playfair+Display');
 
 //$mainFont: 'Cormorant Garamond', serif;
-$mainFont: 'Quattrocento Sans', sans-serif;
+//$mainFont: 'Quattrocento Sans', sans-serif;
+//$mainFont: 'Playfair Display', serif;
+$mainFont: 'Lusitana', serif;

src/styles.scss

@@ -1 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import 'globals.scss';
+
+//$font-family-sans-serif: $mainFont;
+
+body {
+  font-family: $mainFont;
+}