diff --git a/package-lock.json b/package-lock.json index a9b6fc4..3129f14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@angular/router": "^16.2.0", "@nguniversal/express-engine": "^16.2.0", "express": "^4.15.2", + "normalize.css": "^8.0.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" @@ -10525,6 +10526,11 @@ "node": ">=0.10.0" } }, + "node_modules/normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "node_modules/npm-bundled": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.0.tgz", diff --git a/package.json b/package.json index cdf1dcf..170e75e 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@angular/router": "^16.2.0", "@nguniversal/express-engine": "^16.2.0", "express": "^4.15.2", + "normalize.css": "^8.0.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" @@ -47,4 +48,4 @@ "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.1.3" } -} \ No newline at end of file +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c122e73..ebd0523 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,11 +7,13 @@ import {MatCardModule} from "@angular/material/card"; import { AppRoutingModule } from './app-routing.module'; import { HomeComponent } from './home/home.component'; import {MatButtonModule} from "@angular/material/button"; +import { HomeCardComponent } from './home-card/home-card.component'; @NgModule({ declarations: [ AppComponent, - HomeComponent + HomeComponent, + HomeCardComponent ], imports: [ BrowserModule, diff --git a/src/app/home-card/home-card.component.html b/src/app/home-card/home-card.component.html new file mode 100644 index 0000000..f84e653 --- /dev/null +++ b/src/app/home-card/home-card.component.html @@ -0,0 +1,8 @@ + +
+ +
+
+ +
+ diff --git a/src/app/home-card/home-card.component.scss b/src/app/home-card/home-card.component.scss new file mode 100644 index 0000000..034234a --- /dev/null +++ b/src/app/home-card/home-card.component.scss @@ -0,0 +1,55 @@ +.thumb-container { + width: 100%; + min-width: 200px; + height: 200px; + border-radius: 24px; +} + +:host[size="small"] { + grid-column: span 2; + justify-content: start; +} + +:host { + + + + + > a { + &:hover { + background: var(--theme-color-secondary-container) + } + + display: flex; + flex-direction: column-reverse; + overflow: hidden; + + border-radius: 24px; + + transition: border-radius .3s cubic-bezier(.2,0,0,1),background-color .3s cubic-bezier(.2,0,0,1); + + + background: var(--theme-color-surface-1); + + cursor: pointer; + + &:focus { + outline: 2px solid var(--theme-color-on-surface); + border-radius: 48px; + } + } +} + +.content-container { + margin: 24px; + display: grid; + gap: 8px; +} + +:host ::ng-deep .title { + font-size: var(--theme-headline-s-font-size); + font-weight: var(--theme-headline-s-font-weight); + letter-spacing: var(--theme-headline-s-letter-spacing); + + transition: font-variation-settings .3s cubic-bezier(.2,0,0,1); +} diff --git a/src/app/home-card/home-card.component.ts b/src/app/home-card/home-card.component.ts new file mode 100644 index 0000000..30ab893 --- /dev/null +++ b/src/app/home-card/home-card.component.ts @@ -0,0 +1,21 @@ +import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core'; + +@Component({ + selector: 'app-home-card', + templateUrl: './home-card.component.html', + styleUrls: ['./home-card.component.scss'] +}) +export class HomeCardComponent { + @Input() background: string = ''; + @Output() action = new EventEmitter(); + + @HostBinding('attr.size') @Input() size: 'small' | 'medium' | 'large' = 'small'; + + onClick() { + console.log('on click') + } + + triggerAction() { + this.action.emit(); + } +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 292e1e1..9d895bc 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,7 +1,8 @@
-
+ +

Hulp­verlening

@@ -16,5 +17,25 @@
+
+ + Cursussen + + Voor mensen die een cursus willen volgen + + + + Lid worden + + Heb je EHBO en wil je lid worden? + + + + Leden + + Voor huidige leden + + +
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index f25b346..b5c30f1 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -37,10 +37,14 @@ header { padding: 56px; border-radius: 24px; + + background: var(--theme-color-surface-1); - background-repeat: no-repeat; - background-position: 0 50%; - background-size: cover; + background: #95E5CA; + background: linear-gradient(90deg, #95E5CA 0%, #FDCDCD 100%); + //background-repeat: no-repeat; + //background-position: 0 50%; + //background-size: cover; .wrapper { max-width: 1200px; @@ -100,8 +104,33 @@ h1 { font-size: var(--theme-headline-s-font-size); font-weight: var(--theme-headline-s-font-weight); letter-spacing: var(--theme-headline-s-letter-spacing); - - - } } + + +.content-container { + margin-top: 96px; + max-width: 1200px; + width: 100%; + + display: grid; + gap: 8px; + grid-template-columns: repeat(6, 1fr); + grid-auto-flow: row; + grid-auto-rows: minmax(var(--min-row-height),auto); +} + +.section { + margin: 96px 0; +} + +.card-set { + --min-row-height: 320px; + --stacked-col-max-height: 198px; + + display: grid; + gap: 8px; + grid-template-columns: repeat(6, 1fr); + grid-auto-flow: row; + grid-auto-rows: minmax(var(--min-row-height), auto); +} diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 820d900..505b53f 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -7,4 +7,11 @@ import { Component } from '@angular/core'; }) export class HomeComponent { + background1 = 'linear-gradient(90deg, #F8C5CC 0%, #B0A4DF 100%)' + background2 = 'linear-gradient(90deg, #BDED9E 0%, #BCFEE2 100%)' + background3 = 'linear-gradient(90deg, #CDC0B2 0%, #F4F576 33.33%, #EEEFE0 50%, #F4F576 66.666%, #CDC0B2 100%)' + + navigateToCursussen() { + console.log('hello world') + } } diff --git a/src/styles.scss b/src/styles.scss index 1253493..7db9fe5 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,8 @@ /* You can add global styles to this file, and also import other style files */ +@import "normalize.css"; +@import "styles/_custom-reset.scss"; + html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } @@ -7,11 +10,19 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } body { box-sizing: border-box; - --theme-color-background: #1f1f1f; - --theme-color-on-background: #e3e3e3; - --theme-color-surface-1: #282928; - --theme-color-primary: #a8c7fa; - --theme-color-on-primary: #062e6f; + //--theme-color-background: #1f1f1f; + --theme-color-background: #fff; + //--theme-color-on-background: #e3e3e3; + --theme-color-on-background: #1f1f1f; + //--theme-color-surface-1: #282928; + --theme-color-surface-1: #faf8fd; + //--theme-color-primary: #a8c7fa; + --theme-color-primary: #0b57d0; + //--theme-color-on-primary: #062e6f; + --theme-color-on-primary: #fff; + + --theme-color-secondary-container: #c2e7ff; + --theme-color-on-surface: #1f1f1f; --theme-title-l-font-family: "Google Sans Text", sans-serif; @@ -33,14 +44,25 @@ body { --theme-hero-font-weight: 475; --theme-hero-letter-spacing: normal; + --min-row-height: 320px; + .mat-mdc-unelevated-button.mat-primary { --mdc-filled-button-container-color: var(--theme-color-primary); --mdc-filled-button-label-text-color: var(--theme-color-on-primary); } - - background: var(--theme-color-background); } + +// Main styling +.content-container { + max-width: 1200px; + width: 100%; +} + +.section { + margin: 96px 0; +} + diff --git a/src/styles/_custom-reset.scss b/src/styles/_custom-reset.scss new file mode 100644 index 0000000..d9ba7f0 --- /dev/null +++ b/src/styles/_custom-reset.scss @@ -0,0 +1,42 @@ +// https://www.joshwcomeau.com/css/custom-css-reset/ + +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, *::before, *::after { + box-sizing: border-box; +} +/* + 2. Remove default margin +*/ +* { + margin: 0; +} +/* + Typographic tweaks! + 3. Add accessible line-height + 4. Improve text rendering +*/ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +/* + 5. Improve media defaults +*/ +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} +/* + 6. Remove built-in form typography styles +*/ +input, button, textarea, select { + font: inherit; +} +/* + 7. Avoid text overflows +*/ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +}