joachim/homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added more styling

Browse Source
This commit is contained in:
Joachim Nielandt 2018-03-23 11:29:07 +01:00
parent 686f2773e0
commit fca001413a
6 changed files with 59 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.angular-cli.json
View File

@ -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": [

34
src/app/app.component.html
View File

@ -2,30 +2,38 @@
<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>
<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="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> -->
<!-- <button type="button" class="btn btn-secondary">Right</button> -->
<a routerLink="/home"><i class="text-secondary fa fa-home fa-fw fa-2x" tooltip="Huis" placement="bottom" aria-hidden="true"></i></a>
<a routerLink="/posts"><i class="text-secondary fa fa-sticky-note fa-fw fa-2x" tooltip="Posts" placement="bottom" aria-hidden="true"></i></a>
<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 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> -->
<!-- <button type="button" class="btn btn-secondary">Right</button> -->
<a routerLink="/home"><i class="text-secondary fa fa-home fa-fw fa-2x" tooltip="Huis" placement="bottom" aria-hidden="true"></i></a>
<a routerLink="/posts"><i class="text-secondary fa fa-sticky-note fa-fw fa-2x" tooltip="Posts" placement="bottom" aria-hidden="true"></i></a>
<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">

31
src/app/app.component.scss
View File

@ -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;
}

5
src/app/components/post/post.component.scss
View File

@ -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 {

5
src/globals.scss
View File

@ -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;

8
src/styles.scss
View File

@ -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;
}