diff --git a/.angular-cli.json b/.angular-cli.json index e4227b2..fa4d6bc 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -24,7 +24,6 @@ "../node_modules/font-awesome/css/font-awesome.min.css" ], "scripts": [ - "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ], "environmentSource": "environments/environment.ts", "environments": { diff --git a/design/assets/avatar.svg b/design/assets/avatar.svg new file mode 100644 index 0000000..19af83e --- /dev/null +++ b/design/assets/avatar.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/design/drawing.svg b/design/drawing.svg new file mode 100644 index 0000000..fd51763 --- /dev/null +++ b/design/drawing.svg @@ -0,0 +1,563 @@ + + + + + + + + + + image/svg+xml + + + + + + + + Joachim + . + Nielandt + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur varius ullamcorper tellus, eu ultrices nisi volutpat vitae. Fusce sapien dolor, pharetra vel odio non, venenatis rutrum dolor. Phasellus gravida hendrerit ante eu tristique. Sed ut purus eget augue aliquam venenatis. Donec rutrum justo ut convallis vulputate. Ut et tempor est. Aliquam erat volutpat. Proin gravida purus quis condimentum laoreet. Praesent molestie sit amet arcu gravida vehicula. Duis ullamcorper fermentum semper. Donec posuere metus in ante egestas feugiat. Phasellus felis eros, sollicitudin sit amet risus vitae, ornare ultrices dolor. Fusce eu aliquam dui, sit amet condimentum ipsum. In sodales iaculis porttitor. Nam tincidunt maximus sem ac egestas.Fusce congue purus nisi, at ornare orci egestas ac. Donec auctor non diam at ornare. Etiam tortor nisl, ullamcorper quis orci ac, vehicula facilisis eros. Integer vitae posuere odio. Etiam risus arcu, ornare et elit ut, commodo consectetur diam. Maecenas non imperdiet metus. Sed vehicula dui ut semper sollicitudin. Quisque id rhoncus purus. Duis ut convallis nisi, sed feugiat ante. Suspendisse nec quam imperdiet, sagittis ipsum auctor, volutpat arcu. Nunc in est tincidunt est sodales imperdiet. Praesent vitae enim dapibus, convallis orci ac, lacinia libero. Pellentesque nec vehicula felis.Proin at ultricies tortor, at tempor ipsum. Vestibulum sit amet magna at odio mollis facilisis a eget erat. Integer rutrum dapibus sapien, et ultricies ligula vulputate bibendum. Nulla at faucibus libero, vitae tempus ipsum. Mauris bibendum enim ac eros imperdiet posuere. Pellentesque purus nisi, sodales et condimentum faucibus, viverra a mauris. Aliquam erat volutpat. Sed sit amet est sed ipsum pellentesque pharetra. Proin odio sem, rhoncus quis quam vitae, rhoncus accumsan massa. Aenean venenatis euismod ante, et iaculis ante dictum ut. Donec convallis sit amet urna et condimentum. Nunc tincidunt ligula vitae quam dignissim sagittis. Curabitur mollis tincidunt velit in mollis. Nam consequat ante quis urna hendrerit sollicitudin. Pellentesque auctor urna a nunc sagittis maximus. Titel van de post + 12/02/1985 + (T)(P) + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur varius ullamcorper tellus, eu ultrices nisi volutpat vitae. Fusce sapien dolor, pharetra vel odio non, venenatis rutrum dolor. Phasellus gravida hendrerit ante eu tristique. Sed ut purus eget augue aliquam venenatis. Donec rutrum justo ut convallis vulputate. Ut et tempor est. Aliquam erat volutpat. Proin gravida purus quis condimentum laoreet. Praesent molestie sit amet arcu gravida vehicula. Duis ullamcorper fermentum semper. Donec posuere metus in ante egestas feugiat. Phasellus felis eros, sollicitudin sit amet risus vitae, ornare ultrices dolor. Fusce eu aliquam dui, sit amet condimentum ipsum. In sodales iaculis porttitor. Nam tincidunt maximus sem ac egestas.Fusce congue purus nisi, at ornare orci egestas ac. Donec auctor non diam at ornare. Etiam tortor nisl, ullamcorper quis orci ac, vehicula facilisis eros. Integer vitae posuere odio. Etiam risus arcu, ornare et elit ut, commodo consectetur diam. Maecenas non imperdiet metus. Sed vehicula dui ut semper sollicitudin. Quisque id rhoncus purus. Duis ut convallis nisi, sed feugiat ante. Suspendisse nec quam imperdiet, sagittis ipsum auctor, volutpat arcu. Nunc in est tincidunt est sodales imperdiet. Praesent vitae enim dapibus, convallis orci ac, lacinia libero. Pellentesque nec vehicula felis.Proin at ultricies tortor, at tempor ipsum. Vestibulum sit amet magna at odio mollis facilisis a eget erat. Integer rutrum dapibus sapien, et ultricies ligula vulputate bibendum. Nulla at faucibus libero, vitae tempus ipsum. Mauris bibendum enim ac eros imperdiet posuere. Pellentesque purus nisi, sodales et condimentum faucibus, viverra a mauris. Aliquam erat volutpat. Sed sit amet est sed ipsum pellentesque pharetra. Proin odio sem, rhoncus quis quam vitae, rhoncus accumsan massa. Aenean venenatis euismod ante, et iaculis ante dictum ut. Donec convallis sit amet urna et condimentum. Nunc tincidunt ligula vitae quam dignissim sagittis. Curabitur mollis tincidunt velit in mollis. Nam consequat ante quis urna hendrerit sollicitudin. Pellentesque auctor urna a nunc sagittis maximus. Titel van de post + 12/02/1985 + (T)(P) + + + + + + + + Posts + + + + + diff --git a/src/app/app.component.html b/src/app/app.component.html index 33ccef9..6e71d0c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -7,6 +7,10 @@ +
+ +
+
@@ -14,9 +18,9 @@ - - - + + +
diff --git a/src/app/app.component.css b/src/app/app.component.scss similarity index 71% rename from src/app/app.component.css rename to src/app/app.component.scss index c4af6e9..fd7038b 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.scss @@ -17,13 +17,14 @@ font-size: 20pt; } -#topname { - border-bottom: 1pt solid black; - margin-bottom: 9pt; -} - #topmenubuttons { border-bottom: 1pt solid black; padding-bottom: 5px; margin-bottom: 11pt; -} \ No newline at end of file +} + +//this is the row below the name, will use this for styling +.row.below-name { + border-bottom: 1px solid black; + margin-bottom: 8px; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a921216..8987db2 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,7 +4,7 @@ declare var $: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'Joachim Homepage'; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5f2ca93..1f2df84 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -12,6 +12,7 @@ import { CvComponent } from './components/cv/cv.component'; import { PosttypepipePipe } from './pipes/posttypepipe.pipe'; import { TooltipModule } from 'ngx-bootstrap/tooltip'; +import {SimpledatePipe} from './pipes/simpledate.pipe'; @NgModule({ declarations: [ @@ -20,7 +21,8 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip'; PostsComponent, PostComponent, CvComponent, - PosttypepipePipe + PosttypepipePipe, + SimpledatePipe ], imports: [ BrowserModule, diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index 0aaf608..9e75bb5 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -1,7 +1,14 @@ -
-
-
{{post.title}}
-
{{post.type}} {{post.created_timestamp}}
-
+
+
+
+ {{post.created_timestamp | simpledate}} +
+
+ {{post.title}} +
+
+ {{post.type}}(T)(P) +
-
\ No newline at end of file +
+
diff --git a/src/app/components/post/post.component.scss b/src/app/components/post/post.component.scss index e69de29..788d284 100644 --- a/src/app/components/post/post.component.scss +++ b/src/app/components/post/post.component.scss @@ -0,0 +1,41 @@ +//do the fonts +@import '../../../globals'; + +.post { + font-family: $mainFont !important; +} + +.post-header { + display: flex; + align-items: baseline; + margin: 0px 25px; +} + +.post-title { + text-align: center; + flex-grow: 1; + font-size: 150%; +} + +.post-date { + flex-direction: row; +} + +.post-tags { + flex-direction: row-reverse; +} + +.post-date, .post-tags { + display: flex; + align-items: flex-end; + width: 100px; + //need this to align the bottom of the texts with the bottom of the title text + //margin-bottom: 2px; +} + +.post-body { + border-left: 1px solid black; + padding-left: 25px; + border-right: 1px solid black; + padding-right: 25px; +} diff --git a/src/app/pipes/simpledate.pipe.ts b/src/app/pipes/simpledate.pipe.ts new file mode 100644 index 0000000..9938a10 --- /dev/null +++ b/src/app/pipes/simpledate.pipe.ts @@ -0,0 +1,16 @@ +import { Pipe, PipeTransform } from '@angular/core'; +/* + * Raise the value exponentially + * Takes an exponent argument that defaults to 1. + * Usage: + * value | exponentialStrength:exponent + * Example: + * {{ 2 | exponentialStrength:10 }} + * formats to: 1024 +*/ +@Pipe({name: 'simpledate'}) +export class SimpledatePipe implements PipeTransform { + transform(date: Date): string { + return date.toLocaleDateString(); + } +} diff --git a/src/globals.scss b/src/globals.scss new file mode 100644 index 0000000..1f0368d --- /dev/null +++ b/src/globals.scss @@ -0,0 +1,6 @@ +/* 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'); + +//$mainFont: 'Cormorant Garamond', serif; +$mainFont: 'Quattrocento Sans', sans-serif; diff --git a/src/styles.scss b/src/styles.scss index e50a47e..90d4ee0 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1 @@ -/* You can add global styles to this file, and also import other style files */ \ No newline at end of file +/* You can add global styles to this file, and also import other style files */