From fca001413ab582b449c9f9c2ccfad9b44445852f Mon Sep 17 00:00:00 2001 From: Joachim Nielandt Date: Fri, 23 Mar 2018 11:29:07 +0100 Subject: [PATCH] added more styling --- .angular-cli.json | 2 +- src/app/app.component.html | 34 +++++++++++++-------- src/app/app.component.scss | 31 +++++++++++++------ src/app/components/post/post.component.scss | 5 +-- src/globals.scss | 5 ++- src/styles.scss | 8 +++++ 6 files changed, 59 insertions(+), 26 deletions(-) diff --git a/.angular-cli.json b/.angular-cli.json index fa4d6bc..55ae1a2 100644 --- a/.angular-cli.json +++ b/.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": [ diff --git a/src/app/app.component.html b/src/app/app.component.html index 6e71d0c..5d1ec6b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,30 +2,38 @@
-
+
+
Joachim.Nielandt +
-
- -
-
-
-
- - - - - - +
+
+
+ + + + + + +
+
+
+
+ Posts +
+
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index fd7038b..6aa7aa8 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,30 +1,43 @@ +@import "../globals"; + .centercontents { text-align: center; margin-left: auto; margin-right: auto } -#topname span { - font-size: 23pt +#topname { + //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 { - border-bottom: 1pt solid black; - padding-bottom: 5px; - margin-bottom: 11pt; +#topmenubuttons, #topname { + border-left: 1px solid black; + border-right: 1px solid black; } //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; } diff --git a/src/app/components/post/post.component.scss b/src/app/components/post/post.component.scss index 788d284..7a38c7f 100644 --- a/src/app/components/post/post.component.scss +++ b/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 { diff --git a/src/globals.scss b/src/globals.scss index 1f0368d..491b408 100644 --- a/src/globals.scss +++ b/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; diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..e0b7421 100644 --- a/src/styles.scss +++ b/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; +}