Added paths and some standard code used in different projects

2021-03-16 15:37:48 +01:00
parent e2114e79b9
commit 03ba526798
72 changed files with 1109 additions and 282 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,3 +1,15 @@
 {
-  "singleQuote": true
+  "printWidth": 120,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "overrides": [
+      {
+          "files": ".prettierrc",
+          "options": { "parser": "json" }
+      }
+  ]
 }
--- a/angular.json
+++ b/angular.json
@@ -36,7 +36,7 @@
      "projectType": "application",
      "root": "apps/dafa-web",
      "sourceRoot": "apps/dafa-web/src",
-      "prefix": "app",
+      "prefix": "dafa",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
@@ -47,11 +47,11 @@
            "polyfills": "apps/dafa-web/src/polyfills.ts",
            "tsConfig": "apps/dafa-web/tsconfig.app.json",
            "aot": true,
-            "assets": [
-              "apps/dafa-web/src/favicon.ico",
-              "apps/dafa-web/src/assets"
-            ],
-            "styles": ["apps/dafa-web/src/styles.scss"],
+            "assets": ["apps/dafa-web/src/assets"],
+            "styles": ["apps/dafa-web/src/styles/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules/@af/sass", "apps/dafa-web/src/styles"]
+            },
            "scripts": []
          },
          "configurations": {
@@ -104,10 +104,7 @@
        "lint": {
          "builder": "@nrwl/linter:eslint",
          "options": {
-            "lintFilePatterns": [
-              "apps/dafa-web/src/**/*.ts",
-              "apps/dafa-web/src/**/*.html"
-            ]
+            "lintFilePatterns": ["apps/dafa-web/src/**/*.ts", "apps/dafa-web/src/**/*.html"]
          }
        },
        "test": {
--- a/apps/dafa-web/.eslintrc.json
+++ b/apps/dafa-web/.eslintrc.json
@@ -14,7 +14,7 @@
          "error",
          {
            "type": "attribute",
-            "prefix": "app",
+            "prefix": "dafa",
            "style": "camelCase"
          }
        ],
@@ -22,7 +22,7 @@
          "error",
          {
            "type": "element",
-            "prefix": "app",
+            "prefix": "dafa",
            "style": "kebab-case"
          }
        ]
--- a/apps/dafa-web/src/app/app-routing.module.ts
+++ b/apps/dafa-web/src/app/app-routing.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { ExtraOptions, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    data: { title: 'FA Mina sidor' },
+    loadChildren: () => import('./pages/start/start.module').then(m => m.StartModule),
+  },
+  {
+    path: '**',
+    data: { title: 'Sidan hittas inte' },
+    loadChildren: () => import('./pages/page-not-found/page-not-found.module').then(m => m.PageNotFoundModule),
+  },
+];
+const options: ExtraOptions = {
+  useHash: false,
+};
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, options)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
--- a/apps/dafa-web/src/app/app.component.html
+++ b/apps/dafa-web/src/app/app.component.html
@@ -1,111 +1,11 @@
-<header class="flex">
-  <img
-    alt="Nx logo"
-    width="75"
-    src="https://nx.dev/assets/images/nx-logo-white.svg"
-  />
-  <h1>Welcome to {{ title }}!</h1>
-</header>
-<main>
-  <h2>Resources &amp; Tools</h2>
-  <p>Thank you for using and showing some ♥ for Nx.</p>
-  <div class="flex github-star-container">
-    <a
-      href="https://github.com/nrwl/nx"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      If you like Nx, please give it a star:
-      <div class="github-star-badge">
-        <svg
-          class="material-icons"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-        >
-          <path d="M0 0h24v24H0z" fill="none" />
-          <path
-            d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
-          />
-        </svg>
-        Star
-      </div>
-    </a>
-  </div>
-  <p>Here are some links to help you get started.</p>
-  <ul class="resources">
-    <li class="col-span-2">
-      <a class="resource flex" href="https://nxplaybook.com/p/nx-workspaces">
-        Nx video course
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a
-        class="resource flex"
-        href="https://nx.dev/latest/angular/getting-started/getting-started"
-      >
-        Nx video tutorial
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a
-        class="resource flex"
-        href="https://nx.dev/latest/angular/tutorial/01-create-application"
-      >
-        Interactive tutorial
-      </a>
-    </li>
-    <li class="col-span-2">
-      <a class="resource flex" href="https://nx.app/">
-        <svg
-          width="36"
-          height="36"
-          viewBox="0 0 120 120"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M120 15V30C103.44 30 90 43.44 90 60C90 76.56 76.56 90 60 90C43.44 90 30 103.44 30 120H15C6.72 120 0 113.28 0 105V15C0 6.72 6.72 0 15 0H105C113.28 0 120 6.72 120 15Z"
-            fill="#0E2039"
-          />
-          <path
-            d="M120 30V105C120 113.28 113.28 120 105 120H30C30 103.44 43.44 90 60 90C76.56 90 90 76.56 90 60C90 43.44 103.44 30 120 30Z"
-            fill="white"
-          />
-        </svg>
-        <span class="gutter-left">Nx Cloud</span>
-      </a>
-    </li>
-  </ul>
-  <h2>Next Steps</h2>
-  <p>Here are some things you can do with Nx.</p>
-  <details open>
-    <summary>Add UI library</summary>
-    <pre>
-# Generate UI lib
-ng g @nrwl/angular:lib ui
+<div [ngClass]="appClass">
+    <dafa-skip-to-content mainContentId="dafa-main-content"></dafa-skip-to-content>

-# Add a component
-ng g @nrwl/angular:component xyz --project ui</pre
-    >
-  </details>
-  <details>
-    <summary>View dependency graph</summary>
-    <pre>nx dep-graph</pre>
-  </details>
-  <details>
-    <summary>Run affected commands</summary>
-    <pre>
-# see what's been affected by changes
-ng affected:dep-graph
+    <header class="dafa__header">
+      <dafa-navigation></dafa-navigation>
+    </header>

-# run tests for current changes
-ng affected:test
-
-# run e2e tests for current changes
-ng affected:e2e
-</pre
-    >
-  </details>
-</main>
+    <main id="dafa-main-content" class="dafa__main">
+      <router-outlet></router-outlet>
+    </main>
+</div>
--- a/apps/dafa-web/src/app/app.component.scss
+++ b/apps/dafa-web/src/app/app.component.scss
@@ -1,133 +0,0 @@
-/*
- * Remove template code below
- */
-:host {
-  display: block;
-  font-family: sans-serif;
-  min-width: 300px;
-  max-width: 600px;
-  margin: 50px auto;
-}
-
-.gutter-left {
-  margin-left: 9px;
-}
-
-.col-span-2 {
-  grid-column: span 2;
-}
-
-.flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-header {
-  background-color: #143055;
-  color: white;
-  padding: 5px;
-  border-radius: 3px;
-}
-
-main {
-  padding: 0 36px;
-}
-
-p {
-  text-align: center;
-}
-
-h1 {
-  text-align: center;
-  margin-left: 18px;
-  font-size: 24px;
-}
-
-h2 {
-  text-align: center;
-  font-size: 20px;
-  margin: 40px 0 10px 0;
-}
-
-.resources {
-  text-align: center;
-  list-style: none;
-  padding: 0;
-  display: grid;
-  grid-gap: 9px;
-  grid-template-columns: 1fr 1fr;
-}
-
-.resource {
-  color: #0094ba;
-  height: 36px;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  padding: 3px 9px;
-  text-decoration: none;
-}
-
-.resource:hover {
-  background-color: rgba(68, 138, 255, 0.04);
-}
-
-pre {
-  padding: 9px;
-  border-radius: 4px;
-  background-color: black;
-  color: #eee;
-}
-
-details {
-  border-radius: 4px;
-  color: #333;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 3px 9px;
-  margin-bottom: 9px;
-}
-
-summary {
-  cursor: pointer;
-  outline: none;
-  height: 36px;
-  line-height: 36px;
-}
-
-.github-star-container {
-  margin-top: 12px;
-  line-height: 20px;
-}
-
-.github-star-container a {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: #333;
-}
-
-.github-star-badge {
-  color: #24292e;
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  padding: 3px 10px;
-  border: 1px solid rgba(27, 31, 35, 0.2);
-  border-radius: 3px;
-  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
-  margin-left: 4px;
-  font-weight: 600;
-}
-
-.github-star-badge:hover {
-  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
-  border-color: rgba(27, 31, 35, 0.35);
-  background-position: -0.5em;
-}
-.github-star-badge .material-icons {
-  height: 16px;
-  width: 16px;
-  margin-right: 4px;
-}
--- a/apps/dafa-web/src/app/app.component.spec.ts
+++ b/apps/dafa-web/src/app/app.component.spec.ts
@@ -13,19 +13,4 @@ describe('AppComponent', () => {
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
-
-  it(`should have as title 'dafa-web'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('dafa-web');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain(
-      'Welcome to dafa-web!'
-    );
-  });
 });
--- a/apps/dafa-web/src/app/app.component.ts
+++ b/apps/dafa-web/src/app/app.component.ts
@@ -1,10 +1,30 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { UnsubscribeDirective } from './directives/unsubscribe.directive';

@Component({
-  selector: 'app-root',
+  selector: 'dafa-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {
-  title = 'dafa-web';
+export class AppComponent extends UnsubscribeDirective {
+  path = '';
+
+  constructor(private router: Router) {
+    super();
+    super.unsubscribeOnDestroy(
+      this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+        const url = this.router.url;
+        this.path = url.split('/')[1].split('?')[0] || '';
+      })
+    );
+  }
+
+  get appClass(): string {
+    let defaultClass = `dafa dafa--${this.path.length ? this.path : 'home'}`;
+
+    return defaultClass;
+  }
 }
--- a/apps/dafa-web/src/app/app.module.ts
+++ b/apps/dafa-web/src/app/app.module.ts
@@ -1,11 +1,14 @@
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { NavigationModule } from './components/navigation/navigation.module';
+import { SkipToContentModule } from './components/skip-to-content/skip-to-content.module';

@NgModule({
  declarations: [AppComponent],
-  imports: [BrowserModule],
+  imports: [BrowserModule, HttpClientModule, AppRoutingModule, SkipToContentModule, NavigationModule],
  providers: [],
  bootstrap: [AppComponent],
 })
--- a/apps/dafa-web/src/app/components/navigation/navigation.component.html
+++ b/apps/dafa-web/src/app/components/navigation/navigation.component.html
@@ -0,0 +1,20 @@
+<div class="navigation">
+  <div class="navigation__logo-wrapper">
+    <a id="logo-heading" [routerLink]="['/']">
+      <img src="assets/logo/fa-mina-sidor-dark.svg" class="navigation__logo" alt="" />
+      <span class="af__a11y-sr-only">Till startsidan för FA Mina sidor</span>
+    </a>
+  </div>
+  <ul class="navigation__list dafa__hide-on-print">
+    <li class="navigation__item">
+      <a
+        class="navigation__link"
+        [routerLink]="['/']"
+        [routerLinkActive]="['navigation__link--active']"
+        [routerLinkActiveOptions]="{ exact: true }"
+      >
+        <span class="navigation__text">Startsida</span>
+      </a>
+    </li>
+  </ul>
+</div>
--- a/apps/dafa-web/src/app/components/navigation/navigation.component.scss
+++ b/apps/dafa-web/src/app/components/navigation/navigation.component.scss
@@ -0,0 +1,116 @@
+@import 'mixins/list';
+@import 'variables/border-radius';
+@import 'variables/breakpoints';
+@import 'variables/colors';
+@import 'variables/gutters';
+@import 'variables/typography';
+
+$navigation-height: 2.5rem;
+$navigation-height-large: 4rem;
+
+.navigation {
+  background-color: white;
+  border-bottom: 1px solid $af__color-background-gray;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 $af__gutter-m;
+
+  @media (max-width: $af__breakpoint-s-below) {
+    flex-direction: column;
+  }
+
+  &__logo-wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  &__logo {
+    height: $navigation-height / 2;
+    vertical-align: middle;
+
+    @media (min-width: $af__breakpoint-m) {
+      height: $navigation-height-large / 2;
+    }
+  }
+
+  &__list {
+    @include dafa__reset-list;
+    display: flex;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    border-left: 1px solid $af__color-background-gray;
+
+    &--no-link {
+      padding: 0 $af__gutter-m;
+      flex-direction: column;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      border-right: 1px solid $af__color-background-gray;
+    }
+  }
+
+  &__link,
+  &__no-link {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: $af__font-size-xs;
+    color: $af__color-text;
+    width: 7rem;
+    height: $navigation-height;
+    font-weight: $af__font-weight-normal;
+    text-decoration: none;
+
+    @media (min-width: $af__breakpoint-m) {
+      height: $navigation-height-large;
+    }
+  }
+
+  &__link {
+    &:hover {
+      background-color: $af__color-background-gray;
+    }
+
+    &--active {
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 5px;
+        background-color: $af__color-primary;
+      }
+    }
+  }
+
+  &__text {
+    margin-top: $af__gutter-xxs;
+  }
+
+  &__news {
+    display: flex;
+    gap: $af__gutter-xs;
+    padding: $af__gutter-xs $af__gutter-s;
+    background-color: $af__color-complementary-alt;
+    color: $af__color-text-light;
+    border-radius: $af__border-radius;
+
+    &:hover {
+      background-color: darken($af__color-complementary-alt, 10%);
+    }
+  }
+}
--- a/apps/dafa-web/src/app/components/navigation/navigation.component.spec.ts
+++ b/apps/dafa-web/src/app/components/navigation/navigation.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NavigationComponent } from './navigation.component';
+
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [NavigationComponent],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/apps/dafa-web/src/app/components/navigation/navigation.component.ts
+++ b/apps/dafa-web/src/app/components/navigation/navigation.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IconType } from '@dafa-enums/icon-type.enum';
+
+@Component({
+  selector: 'dafa-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavigationComponent {
+  iconType = IconType;
+}
--- a/apps/dafa-web/src/app/components/navigation/navigation.module.ts
+++ b/apps/dafa-web/src/app/components/navigation/navigation.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NavigationComponent } from './navigation.component';
+
+@NgModule({
+  declarations: [NavigationComponent],
+  imports: [CommonModule, RouterModule],
+  exports: [NavigationComponent],
+})
+export class NavigationModule {}
--- a/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss
+++ b/apps/dafa-web/src/app/components/navigation/navigation.print.component.scss
@@ -0,0 +1,9 @@
+@import 'variables/gutters';
+
+@media print {
+  .navigation {
+    border-bottom-width: 0;
+    padding: $af__gutter-m 0;
+    display: flex;
+  }
+}
--- a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.html
+++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.html
@@ -0,0 +1 @@
+<a [attr.href]="skipLinkPath" class="skip-to-content">Gå till sidans innehåll</a>
--- a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss
+++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.scss
@@ -0,0 +1,31 @@
+@import 'variables/border-radius';
+@import 'variables/colors';
+@import 'variables/gutters';
+
+.skip-to-content {
+  position: absolute;
+  top: -1000px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  z-index: 1000;
+  text-align: center;
+  padding: $af__gutter-xs $af__gutter-m;
+  display: block;
+  background-color: $dafa__color-pink;
+  color: $af__color-text-light;
+
+  &:focus {
+    position: fixed;
+    top: 0;
+    width: auto;
+    height: auto;
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
--- a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.spec.ts
+++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { SkipToContentComponent } from './skip-to-content.component';
+
+
+describe('SkipToContentComponent', () => {
+  let component: SkipToContentComponent;
+  let fixture: ComponentFixture<SkipToContentComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [SkipToContentComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SkipToContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.ts
+++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.component.ts
@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { UnsubscribeDirective } from '@dafa-directives/unsubscribe.directive';
+import { filter } from 'rxjs/operators';
+
+@Component({
+  selector: 'dafa-skip-to-content',
+  templateUrl: './skip-to-content.component.html',
+  styleUrls: ['./skip-to-content.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SkipToContentComponent extends UnsubscribeDirective {
+  @Input() mainContentId: string;
+  skipLinkPath: string;
+
+  constructor(private router: Router, private changeDetectorRef: ChangeDetectorRef) {
+    super();
+    super.unsubscribeOnDestroy(
+      this.router.events.pipe(filter((event: any) => event instanceof NavigationEnd)).subscribe(({ url }) => {
+        const mainContentId = `#${this.mainContentId}`;
+        // Check if the current URL already includes the mainContentId.
+        const existsInUrl: boolean = url.substring(url.length - mainContentId.length, url.length) === mainContentId;
+
+        this.skipLinkPath = existsInUrl ? url : `${url}${mainContentId}`;
+        this.changeDetectorRef.markForCheck();
+      })
+    );
+  }
+}
--- a/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.module.ts
+++ b/apps/dafa-web/src/app/components/skip-to-content/skip-to-content.module.ts
@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SkipToContentComponent } from './skip-to-content.component';
+
+@NgModule({
+  declarations: [SkipToContentComponent],
+  imports: [CommonModule],
+  exports: [SkipToContentComponent],
+})
+export class SkipToContentModule {}
--- a/apps/dafa-web/src/app/data/contants/.gitkeep
+++ b/apps/dafa-web/src/app/data/contants/.gitkeep
--- a/apps/dafa-web/src/app/data/enums/icon-size.enum.ts
+++ b/apps/dafa-web/src/app/data/enums/icon-size.enum.ts
@@ -0,0 +1,6 @@
+export enum IconSize {
+  S = 's',
+  M = 'm',
+  L = 'l',
+  XL = 'xl',
+}
--- a/apps/dafa-web/src/app/data/enums/icon-type.enum.ts
+++ b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts
@@ -0,0 +1,4 @@
+export enum IconType {
+  HOME = 'home',
+  USER = 'user',
+}
--- a/apps/dafa-web/src/app/data/models/.gitkeep
+++ b/apps/dafa-web/src/app/data/models/.gitkeep
--- a/apps/dafa-web/src/app/directives/unsubscribe.directive.ts
+++ b/apps/dafa-web/src/app/directives/unsubscribe.directive.ts
@@ -0,0 +1,15 @@
+import { Directive, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+@Directive()
+export class UnsubscribeDirective implements OnDestroy {
+  private subscriptions: Subscription[] = [];
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  unsubscribeOnDestroy(...sub: Subscription[]): void {
+    this.subscriptions.push(...sub);
+  }
+}
--- a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html
+++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.html
@@ -0,0 +1,10 @@
+<digi-ng-typography-base [afCompressed]="true">
+  <section class="page-not-found">
+    <h1 class="heading">Oj då! Vi kan inte hitta sidan.</h1>
+    <p>Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.</p>
+    <a class="dafa__link dafa__link--with-icon" routerLink="/">
+      <digi-ng-icon-arrow-left class="dafa__digi-ng-icon" aria-hidden="true"></digi-ng-icon-arrow-left>
+      Gå tillbaka till startsidan
+    </a>
+  </section>
+</digi-ng-typography-base>
--- a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss
+++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.scss
@@ -0,0 +1,4 @@
+.page-not-found {
+  text-align: center;
+  padding: 5rem;
+}
--- a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts
+++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { PageNotFoundComponent } from './page-not-found.component';
+
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageNotFoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.ts
+++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'dafa-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageNotFoundComponent {}
--- a/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts
+++ b/apps/dafa-web/src/app/pages/page-not-found/page-not-found.module.ts
@@ -0,0 +1,17 @@
+import { DigiNgIconArrowLeftModule } from '@af/digi-ng/_icon/icon-arrow-left';
+import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { PageNotFoundComponent } from './page-not-found.component';
+
+@NgModule({
+  declarations: [PageNotFoundComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]),
+    DigiNgTypographyBaseModule,
+    DigiNgIconArrowLeftModule,
+  ],
+})
+export class PageNotFoundModule {}
--- a/apps/dafa-web/src/app/pages/start/start.component.html
+++ b/apps/dafa-web/src/app/pages/start/start.component.html
@@ -0,0 +1,3 @@
+<digi-ng-typography-base>
+  <section class="start">Start funkar!</section>
+</digi-ng-typography-base>
--- a/apps/dafa-web/src/app/pages/start/start.component.scss
+++ b/apps/dafa-web/src/app/pages/start/start.component.scss
@@ -0,0 +1,101 @@
+@import 'variables/breakpoints';
+@import 'variables/colors';
+@import 'variables/gutters';
+@import 'variables/typography';
+@import 'mixins/ie11';
+@import 'mixins/typography';
+
+.start {
+  &__header {
+    position: relative;
+    width: 100%;
+    margin: $af__gutter-goliath 0;
+  }
+
+  &__heading {
+    position: absolute;
+    margin: 0;
+    bottom: $af__gutter-xxl;
+    left: -$af__gutter-m;
+    background-color: $af__color-primary;
+    color: $af__color-text-light;
+    padding: $af__gutter-m $af__gutter-xxl;
+  }
+
+  &__intro {
+    max-width: 700px;
+  }
+
+  &__subheading {
+    font-size: $af__font-size-h1 !important;
+    margin: $af__gutter-xxl 0 !important;
+    @include dafa__typography-ornament;
+  }
+
+  &__background-image {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    object-position: center 33%;
+
+    @media (min-width: $af__breakpoint-m) {
+      height: 250px;
+    }
+
+    @media (min-width: $af__breakpoint-l) {
+      height: 290px;
+    }
+
+    @media (min-width: $af__breakpoint-xl) {
+      height: 320px;
+    }
+  }
+
+  &__cta-wrapper {
+    background-color: $af__color-background-alt-tertiary;
+    margin: $af__gutter-xxl 0;
+    padding: $af__gutter-xxl;
+  }
+
+  &__cta {
+    display: flex;
+    gap: $af__gutter-xl;
+  }
+
+  &__puff {
+    width: calc(100% / 3);
+
+    @include ie11 {
+      &:not(:first-child) {
+        margin-left: $af__gutter-xl;
+      }
+    }
+  }
+
+  &__footer {
+    margin-top: $af__gutter-goliath;
+    background-color: $af__color-background-light-gray;
+    padding: $af__gutter-xxl 0 $af__gutter-goliath;
+  }
+
+  &__footer-heading {
+    margin-top: 0 !important;
+    margin-bottom: $af__gutter-l !important;
+  }
+
+  &__card-wrapper {
+    display: flex;
+    align-content: stretch;
+    gap: $af__gutter-xxl;
+  }
+
+  &__card {
+    max-width: 400px;
+    flex-basis: 100%;
+  }
+
+  &__card-link {
+    display: inline-block;
+    margin-top: $af__gutter-l;
+  }
+}
--- a/apps/dafa-web/src/app/pages/start/start.component.spec.ts
+++ b/apps/dafa-web/src/app/pages/start/start.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { StartComponent } from './start.component';
+
+describe('StartComponent', () => {
+  let component: StartComponent;
+  let fixture: ComponentFixture<StartComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [StartComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/apps/dafa-web/src/app/pages/start/start.component.ts
+++ b/apps/dafa-web/src/app/pages/start/start.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'dafa-start',
+  templateUrl: './start.component.html',
+  styleUrls: ['./start.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StartComponent {
+  constructor() {}
+}
--- a/apps/dafa-web/src/app/pages/start/start.module.ts
+++ b/apps/dafa-web/src/app/pages/start/start.module.ts
@@ -0,0 +1,11 @@
+import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-base';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { StartComponent } from './start.component';
+
+@NgModule({
+  declarations: [StartComponent],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]), DigiNgTypographyBaseModule],
+})
+export class StartModule {}
--- a/apps/dafa-web/src/app/services/.gitkeep
+++ b/apps/dafa-web/src/app/services/.gitkeep
--- a/apps/dafa-web/src/app/shared/components/.gitkeep
+++ b/apps/dafa-web/src/app/shared/components/.gitkeep
--- a/apps/dafa-web/src/app/utils/.gitkeep
+++ b/apps/dafa-web/src/app/utils/.gitkeep
--- a/apps/dafa-web/src/assets/favicon.png
+++ b/apps/dafa-web/src/assets/favicon.png
--- a/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.png
+++ b/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.png
--- a/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.svg
+++ b/apps/dafa-web/src/assets/logo/fa-mina-sidor-dark.svg
@@ -0,0 +1,17 @@
+<svg width="428" height="48" viewBox="0 0 428 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M68.68 3.85001H67.68V45.35H68.68V3.85001Z" fill="white"/>
+<path d="M69.18 3.35001H67.18V45.85H69.18V3.35001Z" fill="#333333"/>
+<path d="M16.43 39.37C14.2391 39.2639 12.1731 38.3189 10.6601 36.7308C9.14712 35.1428 8.30316 33.0334 8.30316 30.84C8.30316 28.6466 9.14712 26.5373 10.6601 24.9492C12.1731 23.3612 14.2391 22.4161 16.43 22.31C18.6209 22.4161 20.6869 23.3612 22.1999 24.9492C23.7129 26.5373 24.5568 28.6466 24.5568 30.84C24.5568 33.0334 23.7129 35.1428 22.1999 36.7308C20.6869 38.3189 18.6209 39.2639 16.43 39.37ZM16.43 14.88C12.2677 14.951 8.30393 16.6722 5.4104 19.6652C2.51687 22.6581 0.930454 26.6777 1 30.84C0.919652 35.0024 2.49583 39.0264 5.3819 42.0268C8.26797 45.0273 12.2276 46.7586 16.39 46.84V46.84C18.4544 46.8049 20.4916 46.3629 22.385 45.5394C24.2784 44.7159 25.9907 43.527 27.424 42.0407C28.8572 40.5545 29.9833 38.8002 30.7376 36.8782C31.4919 34.9563 31.8598 32.9044 31.82 30.84V30.84C31.9003 26.6776 30.3242 22.6537 27.4381 19.6532C24.552 16.6528 20.5924 14.9215 16.43 14.84V14.84" fill="#95C34E"/>
+<path d="M16.43 0V7.46C28.91 7.46 39 17.93 39 30.84C39.0261 35.1114 37.9036 39.3112 35.75 43L41.75 47.11C44.6883 42.2077 46.2306 36.5954 46.21 30.88C46.23 13.81 32.89 0 16.43 0Z" fill="#95C34E"/>
+<path d="M101.938 43H94.4922V7.30664H114.951V13.5078H101.938V22.7119H114.048V28.8887H101.938V43Z" fill="#333333"/>
+<path d="M143.784 43L141.196 34.5039H128.184L125.596 43H117.441L130.039 7.16016H139.292L151.938 43H143.784ZM139.39 28.1562C136.997 20.4577 135.646 16.1038 135.337 15.0947C135.044 14.0856 134.832 13.2881 134.702 12.7021C134.165 14.7855 132.627 19.9368 130.088 28.1562H139.39Z" fill="#333333"/>
+<path d="M184.556 43L175.962 14.9971H175.742C176.051 20.6937 176.206 24.4941 176.206 26.3984V43H169.443V7.30664H179.746L188.193 34.6016H188.34L197.3 7.30664H207.603V43H200.547V26.1055C200.547 25.3079 200.555 24.3883 200.571 23.3467C200.604 22.305 200.718 19.5381 200.913 15.0459H200.693L191.489 43H184.556Z" fill="#333333"/>
+<path d="M215.708 8.64941C215.708 6.22428 217.059 5.01172 219.761 5.01172C222.463 5.01172 223.813 6.22428 223.813 8.64941C223.813 9.80501 223.472 10.7083 222.788 11.3594C222.121 11.9941 221.112 12.3115 219.761 12.3115C217.059 12.3115 215.708 11.0908 215.708 8.64941ZM223.472 43H216.025V15.7051H223.472V43Z" fill="#333333"/>
+<path d="M256.504 43H249.058V27.0576C249.058 25.0882 248.708 23.6152 248.008 22.6387C247.308 21.6458 246.193 21.1494 244.663 21.1494C242.58 21.1494 241.074 21.8493 240.146 23.249C239.219 24.6325 238.755 26.9355 238.755 30.1582V43H231.309V15.7051H236.997L237.998 19.1963H238.413C239.243 17.8779 240.382 16.8851 241.831 16.2178C243.296 15.5342 244.956 15.1924 246.812 15.1924C249.985 15.1924 252.394 16.055 254.038 17.7803C255.682 19.4893 256.504 21.9632 256.504 25.2021V43Z" fill="#333333"/>
+<path d="M281.504 43L280.063 39.2891H279.868C278.615 40.8678 277.321 41.9665 275.986 42.585C274.668 43.1872 272.943 43.4883 270.811 43.4883C268.19 43.4883 266.123 42.7396 264.609 41.2422C263.112 39.7448 262.363 37.6126 262.363 34.8457C262.363 31.9486 263.372 29.8164 265.391 28.4492C267.425 27.0658 270.485 26.3008 274.57 26.1543L279.307 26.0078V24.8115C279.307 22.0446 277.891 20.6611 275.059 20.6611C272.878 20.6611 270.314 21.3203 267.368 22.6387L264.902 17.6094C268.044 15.9655 271.527 15.1436 275.352 15.1436C279.014 15.1436 281.821 15.9411 283.774 17.5361C285.728 19.1312 286.704 21.5563 286.704 24.8115V43H281.504ZM279.307 30.3535L276.426 30.4512C274.261 30.5163 272.65 30.9069 271.592 31.623C270.534 32.3392 270.005 33.4297 270.005 34.8945C270.005 36.9941 271.209 38.0439 273.618 38.0439C275.343 38.0439 276.719 37.5475 277.744 36.5547C278.786 35.5618 279.307 34.2435 279.307 32.5996V30.3535Z" fill="#333333"/>
+<path d="M326.426 34.8945C326.426 37.694 325.449 39.8262 323.496 41.291C321.559 42.7559 318.654 43.4883 314.78 43.4883C312.795 43.4883 311.102 43.3499 309.702 43.0732C308.302 42.8128 306.992 42.4222 305.771 41.9014V35.749C307.155 36.4001 308.709 36.9453 310.435 37.3848C312.176 37.8242 313.706 38.0439 315.024 38.0439C317.726 38.0439 319.077 37.2627 319.077 35.7002C319.077 35.1143 318.898 34.6423 318.54 34.2842C318.182 33.9098 317.563 33.4948 316.685 33.0391C315.806 32.5671 314.634 32.0218 313.169 31.4033C311.069 30.5244 309.523 29.7106 308.53 28.9619C307.554 28.2132 306.838 27.3587 306.382 26.3984C305.942 25.4219 305.723 24.2256 305.723 22.8096C305.723 20.3844 306.659 18.5127 308.53 17.1943C310.418 15.8597 313.088 15.1924 316.538 15.1924C319.826 15.1924 323.024 15.9085 326.133 17.3408L323.887 22.7119C322.52 22.126 321.242 21.6458 320.054 21.2715C318.866 20.8971 317.653 20.71 316.416 20.71C314.219 20.71 313.12 21.304 313.12 22.4922C313.12 23.1595 313.47 23.7373 314.17 24.2256C314.886 24.7139 316.44 25.4382 318.833 26.3984C320.965 27.2611 322.528 28.0667 323.521 28.8154C324.513 29.5641 325.246 30.4268 325.718 31.4033C326.19 32.3799 326.426 33.5436 326.426 34.8945Z" fill="#333333"/>
+<path d="M331.919 8.64941C331.919 6.22428 333.27 5.01172 335.972 5.01172C338.674 5.01172 340.024 6.22428 340.024 8.64941C340.024 9.80501 339.683 10.7083 338.999 11.3594C338.332 11.9941 337.323 12.3115 335.972 12.3115C333.27 12.3115 331.919 11.0908 331.919 8.64941ZM339.683 43H332.236V15.7051H339.683V43Z" fill="#333333"/>
+<path d="M356.162 43.4883C352.956 43.4883 350.433 42.2432 348.594 39.7529C346.771 37.2627 345.859 33.8122 345.859 29.4014C345.859 24.9255 346.787 21.4424 348.643 18.9521C350.514 16.4456 353.086 15.1924 356.357 15.1924C359.792 15.1924 362.412 16.527 364.219 19.1963H364.463C364.089 17.1618 363.901 15.347 363.901 13.752V5.01172H371.372V43H365.659L364.219 39.46H363.901C362.209 42.1455 359.629 43.4883 356.162 43.4883ZM358.774 37.5557C360.679 37.5557 362.07 37.0023 362.949 35.8955C363.844 34.7887 364.333 32.9089 364.414 30.2559V29.4502C364.414 26.5205 363.958 24.4209 363.047 23.1514C362.152 21.8818 360.687 21.2471 358.652 21.2471C356.992 21.2471 355.698 21.9551 354.771 23.3711C353.859 24.7708 353.403 26.8135 353.403 29.499C353.403 32.1846 353.867 34.2028 354.795 35.5537C355.723 36.8883 357.049 37.5557 358.774 37.5557Z" fill="#333333"/>
+<path d="M385.093 29.3037C385.093 32.0055 385.532 34.0482 386.411 35.4316C387.306 36.8151 388.755 37.5068 390.757 37.5068C392.743 37.5068 394.167 36.8232 395.029 35.4561C395.908 34.0726 396.348 32.0218 396.348 29.3037C396.348 26.6019 395.908 24.5755 395.029 23.2246C394.15 21.8737 392.71 21.1982 390.708 21.1982C388.722 21.1982 387.29 21.8737 386.411 23.2246C385.532 24.5592 385.093 26.5856 385.093 29.3037ZM403.965 29.3037C403.965 33.7471 402.793 37.222 400.449 39.7285C398.105 42.235 394.842 43.4883 390.659 43.4883C388.039 43.4883 385.728 42.9186 383.726 41.7793C381.724 40.6237 380.186 38.9717 379.111 36.8232C378.037 34.6748 377.5 32.1683 377.5 29.3037C377.5 24.8441 378.664 21.3773 380.991 18.9033C383.319 16.4294 386.59 15.1924 390.806 15.1924C393.426 15.1924 395.737 15.762 397.739 16.9014C399.741 18.0407 401.279 19.6764 402.354 21.8086C403.428 23.9408 403.965 26.4391 403.965 29.3037Z" fill="#333333"/>
+<path d="M425.352 15.1924C426.361 15.1924 427.199 15.2656 427.866 15.4121L427.305 22.3945C426.702 22.2318 425.97 22.1504 425.107 22.1504C422.731 22.1504 420.876 22.7607 419.541 23.9814C418.223 25.2021 417.563 26.9111 417.563 29.1084V43H410.117V15.7051H415.757L416.855 20.2949H417.222C418.068 18.765 419.207 17.5361 420.64 16.6084C422.088 15.6644 423.659 15.1924 425.352 15.1924Z" fill="#333333"/>
+</svg>
--- a/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.png
+++ b/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.png
--- a/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.svg
+++ b/apps/dafa-web/src/assets/logo/fa-mina-sidor-light.svg
@@ -0,0 +1,17 @@
+<svg width="428" height="48" viewBox="0 0 428 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M68.68 3.85001H67.68V45.35H68.68V3.85001Z" fill="white"/>
+<path d="M69.18 3.35001H67.18V45.85H69.18V3.35001Z" fill="white"/>
+<path d="M16.43 39.37C14.2391 39.2639 12.1731 38.3189 10.6601 36.7308C9.14712 35.1428 8.30316 33.0334 8.30316 30.84C8.30316 28.6466 9.14712 26.5373 10.6601 24.9492C12.1731 23.3612 14.2391 22.4161 16.43 22.31C18.6209 22.4161 20.6869 23.3612 22.1999 24.9492C23.7129 26.5373 24.5568 28.6466 24.5568 30.84C24.5568 33.0334 23.7129 35.1428 22.1999 36.7308C20.6869 38.3189 18.6209 39.2639 16.43 39.37ZM16.43 14.88C12.2677 14.951 8.30393 16.6722 5.4104 19.6652C2.51687 22.6581 0.930452 26.6777 0.999998 30.84C0.91965 35.0024 2.49583 39.0264 5.3819 42.0268C8.26797 45.0273 12.2276 46.7586 16.39 46.84V46.84C18.4544 46.8049 20.4916 46.3629 22.385 45.5394C24.2784 44.7159 25.9907 43.527 27.424 42.0407C28.8572 40.5545 29.9833 38.8002 30.7376 36.8782C31.4919 34.9563 31.8597 32.9044 31.82 30.84V30.84C31.9003 26.6776 30.3242 22.6537 27.4381 19.6532C24.552 16.6528 20.5924 14.9215 16.43 14.84V14.84" fill="#95C34E"/>
+<path d="M16.43 0V7.46C28.91 7.46 39 17.93 39 30.84C39.0261 35.1114 37.9036 39.3112 35.75 43L41.75 47.11C44.6883 42.2077 46.2306 36.5954 46.21 30.88C46.23 13.81 32.89 0 16.43 0Z" fill="#95C34E"/>
+<path d="M101.938 43H94.4922V7.30664H114.951V13.5078H101.938V22.7119H114.048V28.8887H101.938V43Z" fill="white"/>
+<path d="M143.784 43L141.196 34.5039H128.184L125.596 43H117.441L130.039 7.16016H139.292L151.938 43H143.784ZM139.39 28.1562C136.997 20.4577 135.646 16.1038 135.337 15.0947C135.044 14.0856 134.832 13.2881 134.702 12.7021C134.165 14.7855 132.627 19.9368 130.088 28.1562H139.39Z" fill="white"/>
+<path d="M184.556 43L175.962 14.9971H175.742C176.051 20.6937 176.206 24.4941 176.206 26.3984V43H169.443V7.30664H179.746L188.193 34.6016H188.34L197.3 7.30664H207.603V43H200.547V26.1055C200.547 25.3079 200.555 24.3883 200.571 23.3467C200.604 22.305 200.718 19.5381 200.913 15.0459H200.693L191.489 43H184.556Z" fill="white"/>
+<path d="M215.708 8.64941C215.708 6.22428 217.059 5.01172 219.761 5.01172C222.463 5.01172 223.813 6.22428 223.813 8.64941C223.813 9.80501 223.472 10.7083 222.788 11.3594C222.121 11.9941 221.112 12.3115 219.761 12.3115C217.059 12.3115 215.708 11.0908 215.708 8.64941ZM223.472 43H216.025V15.7051H223.472V43Z" fill="white"/>
+<path d="M256.504 43H249.058V27.0576C249.058 25.0882 248.708 23.6152 248.008 22.6387C247.308 21.6458 246.193 21.1494 244.663 21.1494C242.58 21.1494 241.074 21.8493 240.146 23.249C239.219 24.6325 238.755 26.9355 238.755 30.1582V43H231.309V15.7051H236.997L237.998 19.1963H238.413C239.243 17.8779 240.382 16.8851 241.831 16.2178C243.296 15.5342 244.956 15.1924 246.812 15.1924C249.985 15.1924 252.394 16.055 254.038 17.7803C255.682 19.4893 256.504 21.9632 256.504 25.2021V43Z" fill="white"/>
+<path d="M281.504 43L280.063 39.2891H279.868C278.615 40.8678 277.321 41.9665 275.986 42.585C274.668 43.1872 272.943 43.4883 270.811 43.4883C268.19 43.4883 266.123 42.7396 264.609 41.2422C263.112 39.7448 262.363 37.6126 262.363 34.8457C262.363 31.9486 263.372 29.8164 265.391 28.4492C267.425 27.0658 270.485 26.3008 274.57 26.1543L279.307 26.0078V24.8115C279.307 22.0446 277.891 20.6611 275.059 20.6611C272.878 20.6611 270.314 21.3203 267.368 22.6387L264.902 17.6094C268.044 15.9655 271.527 15.1436 275.352 15.1436C279.014 15.1436 281.821 15.9411 283.774 17.5361C285.728 19.1312 286.704 21.5563 286.704 24.8115V43H281.504ZM279.307 30.3535L276.426 30.4512C274.261 30.5163 272.65 30.9069 271.592 31.623C270.534 32.3392 270.005 33.4297 270.005 34.8945C270.005 36.9941 271.209 38.0439 273.618 38.0439C275.343 38.0439 276.719 37.5475 277.744 36.5547C278.786 35.5618 279.307 34.2435 279.307 32.5996V30.3535Z" fill="white"/>
+<path d="M326.426 34.8945C326.426 37.694 325.449 39.8262 323.496 41.291C321.559 42.7559 318.654 43.4883 314.78 43.4883C312.795 43.4883 311.102 43.3499 309.702 43.0732C308.302 42.8128 306.992 42.4222 305.771 41.9014V35.749C307.155 36.4001 308.709 36.9453 310.435 37.3848C312.176 37.8242 313.706 38.0439 315.024 38.0439C317.726 38.0439 319.077 37.2627 319.077 35.7002C319.077 35.1143 318.898 34.6423 318.54 34.2842C318.182 33.9098 317.563 33.4948 316.685 33.0391C315.806 32.5671 314.634 32.0218 313.169 31.4033C311.069 30.5244 309.523 29.7106 308.53 28.9619C307.554 28.2132 306.838 27.3587 306.382 26.3984C305.942 25.4219 305.723 24.2256 305.723 22.8096C305.723 20.3844 306.659 18.5127 308.53 17.1943C310.418 15.8597 313.088 15.1924 316.538 15.1924C319.826 15.1924 323.024 15.9085 326.133 17.3408L323.887 22.7119C322.52 22.126 321.242 21.6458 320.054 21.2715C318.866 20.8971 317.653 20.71 316.416 20.71C314.219 20.71 313.12 21.304 313.12 22.4922C313.12 23.1595 313.47 23.7373 314.17 24.2256C314.886 24.7139 316.44 25.4382 318.833 26.3984C320.965 27.2611 322.528 28.0667 323.521 28.8154C324.513 29.5641 325.246 30.4268 325.718 31.4033C326.19 32.3799 326.426 33.5436 326.426 34.8945Z" fill="white"/>
+<path d="M331.919 8.64941C331.919 6.22428 333.27 5.01172 335.972 5.01172C338.674 5.01172 340.024 6.22428 340.024 8.64941C340.024 9.80501 339.683 10.7083 338.999 11.3594C338.332 11.9941 337.323 12.3115 335.972 12.3115C333.27 12.3115 331.919 11.0908 331.919 8.64941ZM339.683 43H332.236V15.7051H339.683V43Z" fill="white"/>
+<path d="M356.162 43.4883C352.956 43.4883 350.433 42.2432 348.594 39.7529C346.771 37.2627 345.859 33.8122 345.859 29.4014C345.859 24.9255 346.787 21.4424 348.643 18.9521C350.514 16.4456 353.086 15.1924 356.357 15.1924C359.792 15.1924 362.412 16.527 364.219 19.1963H364.463C364.089 17.1618 363.901 15.347 363.901 13.752V5.01172H371.372V43H365.659L364.219 39.46H363.901C362.209 42.1455 359.629 43.4883 356.162 43.4883ZM358.774 37.5557C360.679 37.5557 362.07 37.0023 362.949 35.8955C363.844 34.7887 364.333 32.9089 364.414 30.2559V29.4502C364.414 26.5205 363.958 24.4209 363.047 23.1514C362.152 21.8818 360.687 21.2471 358.652 21.2471C356.992 21.2471 355.698 21.9551 354.771 23.3711C353.859 24.7708 353.403 26.8135 353.403 29.499C353.403 32.1846 353.867 34.2028 354.795 35.5537C355.723 36.8883 357.049 37.5557 358.774 37.5557Z" fill="white"/>
+<path d="M385.093 29.3037C385.093 32.0055 385.532 34.0482 386.411 35.4316C387.306 36.8151 388.755 37.5068 390.757 37.5068C392.743 37.5068 394.167 36.8232 395.029 35.4561C395.908 34.0726 396.348 32.0218 396.348 29.3037C396.348 26.6019 395.908 24.5755 395.029 23.2246C394.15 21.8737 392.71 21.1982 390.708 21.1982C388.722 21.1982 387.29 21.8737 386.411 23.2246C385.532 24.5592 385.093 26.5856 385.093 29.3037ZM403.965 29.3037C403.965 33.7471 402.793 37.222 400.449 39.7285C398.105 42.235 394.842 43.4883 390.659 43.4883C388.039 43.4883 385.728 42.9186 383.726 41.7793C381.724 40.6237 380.186 38.9717 379.111 36.8232C378.037 34.6748 377.5 32.1683 377.5 29.3037C377.5 24.8441 378.664 21.3773 380.991 18.9033C383.319 16.4294 386.59 15.1924 390.806 15.1924C393.426 15.1924 395.737 15.762 397.739 16.9014C399.741 18.0407 401.279 19.6764 402.354 21.8086C403.428 23.9408 403.965 26.4391 403.965 29.3037Z" fill="white"/>
+<path d="M425.352 15.1924C426.361 15.1924 427.199 15.2656 427.866 15.4121L427.305 22.3945C426.702 22.2318 425.97 22.1504 425.107 22.1504C422.731 22.1504 420.876 22.7607 419.541 23.9814C418.223 25.2021 417.563 26.9111 417.563 29.1084V43H410.117V15.7051H415.757L416.855 20.2949H417.222C418.068 18.765 419.207 17.5361 420.64 16.6084C422.088 15.6644 423.659 15.1924 425.352 15.1924Z" fill="white"/>
+</svg>
--- a/apps/dafa-web/src/favicon.ico
+++ b/apps/dafa-web/src/favicon.ico
--- a/apps/dafa-web/src/index.html
+++ b/apps/dafa-web/src/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>DafaWeb</title>
+    <title>FA Mina Sidor</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="assets/favicon.png" />
  </head>
  <body>
-    <app-root></app-root>
+    <dafa-root></dafa-root>
  </body>
 </html>
--- a/apps/dafa-web/src/styles.scss
+++ b/apps/dafa-web/src/styles.scss
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
--- a/apps/dafa-web/src/styles/functions/_u.scss
+++ b/apps/dafa-web/src/styles/functions/_u.scss
@@ -0,0 +1 @@
+@import '~@af/sass/v2/layout/functions/u';
--- a/apps/dafa-web/src/styles/mixins/_a11y.scss
+++ b/apps/dafa-web/src/styles/mixins/_a11y.scss
@@ -0,0 +1,5 @@
+@import '~@af/sass/v2/a11y/mixins/a11y__sr-only';
+
+@mixin af__a11y-sr-only {
+  @include a11y__sr-only;
+}
--- a/apps/dafa-web/src/styles/mixins/_button.scss
+++ b/apps/dafa-web/src/styles/mixins/_button.scss
@@ -0,0 +1,49 @@
+@import 'variables/colors';
+@import 'variables/gutters';
+
+@mixin dafa__base-button {
+  position: relative;
+  border-width: 0;
+  background-color: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: 0.875rem;
+  padding: $af__gutter-xs $af__gutter-m;
+}
+
+@mixin dafa__link-as-button {
+  text-decoration: none !important; // Needs important to override style from default anchor tag.
+
+  &:hover {
+    text-decoration: none !important; // Needs important to override style from default anchor tag.
+  }
+}
+
+@mixin dafa__white-button-with-border {
+  @include dafa__base-button;
+  background-color: $af__color-background-white;
+  color: $af__color-primary !important; // Needs important to override style from default anchor tag.
+  border: 1px solid $af__color-primary;
+  border-radius: 5px;
+
+  &:hover {
+    background-color: #f1f8fe;
+    color: $af__color-primary !important; // Needs important to override style from default anchor tag.
+  }
+}
+
+@mixin dafa__button-as-link($dark: false) {
+  background-color: transparent;
+  border-width: 0;
+  padding: 0;
+  margin: 0;
+  color: if($dark, $dafa__color-link-light, $af__color-link);
+
+  &:hover {
+    color: if($dark, $dafa__color-link-light-active, $af__color-link-active);
+    text-decoration: underline;
+  }
+}
--- a/apps/dafa-web/src/styles/mixins/_flex.scss
+++ b/apps/dafa-web/src/styles/mixins/_flex.scss
@@ -0,0 +1,5 @@
+@mixin dafa__flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/apps/dafa-web/src/styles/mixins/_form.scss
+++ b/apps/dafa-web/src/styles/mixins/_form.scss
@@ -0,0 +1,65 @@
+@import '~@af/sass/v2/form/mixins/form__checkbox';
+@import '~@af/sass/v2/form/mixins/form__checkbox-check';
+@import '~@af/sass/v2/form/mixins/form__checkbox-base';
+@import '~@af/sass/v2/form/mixins/form__form-field--focus';
+@import '~@af/sass/v2/form/mixins/form__form-field--disabled';
+@import '~@af/sass/v2/form/mixins/form__select-input';
+@import '~@af/sass/v2/form/mixins/form__select-arrow';
+@import '~@af/sass/v2/form/mixins/form__radiobutton';
+@import 'variables/colors';
+@import 'variables/gutters';
+@import 'variables/typography';
+
+@mixin af__form-checkbox($secondary: false, $disabled: false) {
+  @include form__checkbox($secondary, $disabled);
+}
+
+@mixin af__form-checkbox-check($disabled: false) {
+  @include form__checkbox-check($disabled);
+}
+
+@mixin af__form-checkbox-base {
+  @include form__checkbox-base;
+}
+
+@mixin af__form-field-focus {
+  @include form__form-field--focus;
+}
+
+@mixin af__form-field-disabled {
+  @include form__form-field--disabled;
+}
+
+@mixin af__form-select-input {
+  @include form__select-input;
+}
+
+@mixin af__form-select-arrow($disabled: false) {
+  @include form__select-arrow($disabled);
+}
+
+@mixin af__form-radiobutton {
+  @include form__radiobutton;
+}
+
+@mixin dafa__fieldset-reset($legendAsHeading: true) {
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+
+  legend {
+    position: relative;
+    text-align: left;
+
+    @if $legendAsHeading {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      padding-bottom: $af__gutter-xs;
+      margin: 0;
+      font-weight: $af__font-weight-bold;
+      font-size: $af__font-size-s;
+      border-bottom: 1px solid $af__color-border-light;
+    }
+  }
+}
--- a/apps/dafa-web/src/styles/mixins/_gutter.scss
+++ b/apps/dafa-web/src/styles/mixins/_gutter.scss
@@ -0,0 +1,8 @@
+@import 'variables/gutters';
+
+@mixin dafa__option-gutter-reset {
+  line-height: unset;
+  height: auto;
+  padding-top: $af__gutter-xs;
+  padding-bottom: $af__gutter-xs;
+}
--- a/apps/dafa-web/src/styles/mixins/_icon.scss
+++ b/apps/dafa-web/src/styles/mixins/_icon.scss
@@ -0,0 +1,7 @@
+@mixin dafa__digi-ng-icon($width: 1em) {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: $width;
+  max-height: $width;
+}
--- a/apps/dafa-web/src/styles/mixins/_link.scss
+++ b/apps/dafa-web/src/styles/mixins/_link.scss
@@ -0,0 +1,20 @@
+@import 'variables/colors';
+
+@mixin dafa__link-style($with-hover: true) {
+  padding: 0;
+  cursor: pointer;
+  color: $af__color-link;
+  text-align: left;
+  white-space: normal;
+
+  @if $with-hover {
+    &:hover {
+      @include dafa__link-hover-style();
+    }
+  }
+}
+
+@mixin dafa__link-hover-style {
+  color: $af__color-link-active;
+  text-decoration: underline;
+}
--- a/apps/dafa-web/src/styles/mixins/_list.scss
+++ b/apps/dafa-web/src/styles/mixins/_list.scss
@@ -0,0 +1,5 @@
+@mixin dafa__reset-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
--- a/apps/dafa-web/src/styles/mixins/_ribbon.scss
+++ b/apps/dafa-web/src/styles/mixins/_ribbon.scss
@@ -0,0 +1,7 @@
+$ribbon-position: 0.5rem;
+
+@mixin dafa__ribbon-wrapper {
+  position: absolute;
+  top: $ribbon-position * 2;
+  right: -$ribbon-position;
+}
--- a/apps/dafa-web/src/styles/mixins/_typography.scss
+++ b/apps/dafa-web/src/styles/mixins/_typography.scss
@@ -0,0 +1,23 @@
+@import '~@af/sass/v2/typography/mixins/typography__text';
+@import 'functions/u';
+
+@mixin af__typography-text {
+  @include typography__text($compressed: true, $unthemable: true);
+}
+
+@mixin dafa__typography-ornament {
+  &::after {
+    content: '';
+    display: block;
+    margin-top: u(6);
+    height: u(1.4);
+    max-width: u(38);
+    background: $ui__color--primary;
+
+    @media (min-width: $layout__breakpoint--l) {
+      height: u(2);
+      width: 100%;
+      max-width: u(44);
+    }
+  }
+}
--- a/apps/dafa-web/src/styles/mixins/ie11.scss
+++ b/apps/dafa-web/src/styles/mixins/ie11.scss
@@ -0,0 +1,5 @@
+@mixin ie11 {
+  @media all and (-ms-high-contrast: none) {
+    @content;
+  }
+}
--- a/apps/dafa-web/src/styles/styles.scss
+++ b/apps/dafa-web/src/styles/styles.scss
@@ -0,0 +1,76 @@
+@import 'variables/colors';
+@import 'variables/gutters';
+@import 'variables/typography';
+@import 'mixins/a11y';
+@import 'mixins/button';
+@import 'mixins/icon';
+
+* {
+  font-family: $af__font-family;
+  box-sizing: border-box;
+
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
+}
+
+body {
+  margin: 0;
+  font-weight: $af__font-weight-normal;
+}
+
+button {
+  @include dafa__base-button;
+}
+
+strong {
+  font-weight: $af__font-weight-semi-bold;
+}
+
+.af__a11y-sr-only {
+  @include af__a11y-sr-only;
+}
+
+.dafa {
+  &__digi-ng-icon {
+    @include dafa__digi-ng-icon;
+
+    &--right-margin {
+      margin-right: $af__gutter-s;
+    }
+    &--left-margin {
+      margin-left: $af__gutter-m;
+    }
+  }
+
+  &__highlight-characters {
+    background-color: transparent;
+    font-weight: $af__font-weight-bold;
+  }
+
+  &__link {
+    display: inline-flex;
+
+    &--with-icon {
+      gap: $af__gutter-xs;
+    }
+  }
+}
+
+// @af/digi-ng overrides
+.digi-ng-typography-icon-text__icon {
+  display: inline-flex;
+}
+
+@media print {
+  * {
+    color: $af__color-text-dark !important;
+  }
+
+  .dafa {
+    &__hide-on-print {
+      display: none !important;
+    }
+  }
+}
--- a/apps/dafa-web/src/styles/variables/_border-radius.scss
+++ b/apps/dafa-web/src/styles/variables/_border-radius.scss
@@ -0,0 +1,3 @@
+@import '~@af/sass/v2/ui/variables/ui__borders';
+
+$af__border-radius: $ui__border-radius--rounded;
--- a/apps/dafa-web/src/styles/variables/_box-shadow.scss
+++ b/apps/dafa-web/src/styles/variables/_box-shadow.scss
@@ -0,0 +1,5 @@
+@import '~@af/sass/v2/ui/variables/ui__variables';
+@import '~@af/sass/v2/ui/variables/ui__shadows';
+
+$af__box-shadow: $ui__box-shadow--elevated;
+$af__box-shadow-interactive-focus-outline: $ui__shadow--interactive-focus-outline;
--- a/apps/dafa-web/src/styles/variables/_breakpoints.scss
+++ b/apps/dafa-web/src/styles/variables/_breakpoints.scss
@@ -0,0 +1,13 @@
+@import '~@af/sass/v2/layout/variables/layout__variables';
+
+// AF variables
+$af__breakpoint-s: $layout__breakpoint--s; // 576px
+$af__breakpoint-s-below: $af__breakpoint-s - 1; // 575px
+$af__breakpoint-m: $layout__breakpoint--m; // 768px
+$af__breakpoint-m-below: $af__breakpoint-m - 1; // 767px
+$af__breakpoint-l: $layout__breakpoint--l; // 992px
+$af__breakpoint-l-below: $af__breakpoint-l - 1; // 991px
+$af__breakpoint-xl: $layout__breakpoint--xl; // 1200px
+$af__breakpoint-xl-below: $af__breakpoint-xl - 1; // 1199px
+
+// Local variables
--- a/apps/dafa-web/src/styles/variables/_colors.scss
+++ b/apps/dafa-web/src/styles/variables/_colors.scss
@@ -0,0 +1,71 @@
+@import '~@af/sass/v2/ui/variables/ui__colors';
+@import '~@af/sass/v2/typography/variables/typography__variables';
+
+// AF variables
+$af__color-primary: $ui__color--primary;
+$af__color-secondary: $ui__color--secondary;
+$af__color-complementary: $ui__color--complementary;
+$af__color-complementary-alt: $ui__color--complementary-alt;
+$af__color-interactive: $ui__color--interactive;
+$af__color--background-alt-secondary: $ui__color--background-alt-secondary;
+
+$af__color-info: $ui__color--informative;
+$af__color-success: $ui__color--success;
+$af__color-danger: $ui__color--danger;
+$af__color-warning: $ui__color--warning;
+
+$af__color-approved: $ui__color--approved;
+$af__color-action-needed: $ui__color--action-needed;
+$af__color-denied: $ui__color--denied;
+$af__color-missing: $ui__color--missing;
+
+$af__color-text-light: $typography__color--text-light;
+$af__color-text-dimmed: $typography__color--text-dimmed;
+$af__color-text-dimmed-alt: $typography__color--text-dimmed-alt;
+$af__color-text: $typography__color--text;
+$af__color-text-dark: $typography__color--text-dark;
+$af__color-text-disabled: $typography__color--text-disabled;
+
+$af__color-link: $typography__color--link;
+$af__color-link-active: $typography__color--link-active;
+$af__color-link-visited: $typography__color--link-visited;
+
+$af__color-background-white: $ui__color--background;
+$af__color-background-light-gray: $ui__color--background-alt;
+$af__color-background-gray: $ui__color--background-alt-secondary;
+$af__color-background-dark-gray: $ui__color--background-off;
+$af__color-background-dark: $ui__color--background-dark;
+$af__color-background-alt-tertiary: $ui__color--background-alt-tertiary;
+
+$af__color-border: $ui__color--border;
+$af__color-border-dark: $ui__color--border-dark;
+$af__color-border-light: $ui__color--border-light;
+$af__color-separator: $ui__color--separator;
+$af__color-background-warning: $ui__color--yellow-light;
+
+$af__color-disabled: $ui__color--disabled;
+
+// Local variables
+$dafa__color-pink: #d43372;
+$dafa__color-primary-20: #ccccde;
+$dafa__color-link-light: $af__color-text-light;
+$dafa__color-link-light-active: darken($af__color-text-light, 10%);
+
+$dafa__color-fub: #666666;
+$dafa__color-fub-dark: darken($dafa__color-fub, 30%);
+$dafa__color-fub-text: $af__color-text-light;
+$dafa__color-aub: #1616b2;
+$dafa__color-aub-dark: darken($dafa__color-aub, 30%);
+$dafa__color-aub-text: $af__color-text-light;
+$dafa__color-aub-test: #058470;
+$dafa__color-aub-test-dark: darken($dafa__color-aub-test, 30%);
+$dafa__color-aub-test-text: $af__color-text-light;
+$dafa__color-folkhogskola: #d43372;
+$dafa__color-folkhogskola-dark: darken($dafa__color-folkhogskola, 30%);
+$dafa__color-folkhogskola-text: $af__color-text-light;
+$dafa__color-rek: #fddc41;
+$dafa__color-rek-dark: darken($dafa__color-rek, 30%);
+$dafa__color-rek-text: $af__color-text-dark;
+$dafa__color-anstalt: #e21c50;
+$dafa__color-anstalt-dark: darken($dafa__color-anstalt, 30%);
+$dafa__color-anstalt-text: $af__color-text-light;
--- a/apps/dafa-web/src/styles/variables/_containers.scss
+++ b/apps/dafa-web/src/styles/variables/_containers.scss
@@ -0,0 +1,10 @@
+@import '~@af/sass/v2/layout/variables/layout__variables';
+
+// AF variables
+$af__container-width-xs: $layout__container--width-xs;
+$af__container-width-s: $layout__container--width-s;
+$af__container-width-m: $layout__container--width-m;
+$af__container-width-l: $layout__container--width-l;
+$af__container-width-xl: $layout__container--width-xl;
+
+// Local variables
--- a/apps/dafa-web/src/styles/variables/_form.scss
+++ b/apps/dafa-web/src/styles/variables/_form.scss
@@ -0,0 +1,9 @@
+@import '~@af/sass/v2/ui/variables/ui__variables';
+
+// AF variables
+$af__form-input-height: $ui__input-height;
+$af__form-input-height-s: $ui__input-height--s;
+$af__form-input-height-l: $ui__input-height--l;
+$af__form-input-border: $ui__input-border; // 1px solid $ui__color--border
+
+// Local variables
--- a/apps/dafa-web/src/styles/variables/_gutters.scss
+++ b/apps/dafa-web/src/styles/variables/_gutters.scss
@@ -0,0 +1,14 @@
+@import '~@af/sass/v2/layout/variables/layout__variables';
+@import '~@af/sass/v2/layout/functions/u';
+
+// AF variables
+$af__gutter-goliath: u(15); // 75px
+$af__gutter-xxl: u(7); // 35px
+$af__gutter-xl: u(5); // 25px
+$af__gutter-l: $layout__gutter--l; // 20px
+$af__gutter-m: $layout__gutter; // 15px
+$af__gutter-s: $layout__gutter--s; // 10px
+$af__gutter-xs: $layout__gutter--xs; // 5px
+$af__gutter-xxs: $layout__gutter--xxs; // 2.5px
+
+// Local variables
--- a/apps/dafa-web/src/styles/variables/_shadows.scss
+++ b/apps/dafa-web/src/styles/variables/_shadows.scss
@@ -0,0 +1,4 @@
+@import '~@af/sass/v2/ui/variables/ui__shadows';
+
+// AF variables
+$af__shadow-base: $ui__shadow--shadow-base-outline;
--- a/apps/dafa-web/src/styles/variables/_typography.scss
+++ b/apps/dafa-web/src/styles/variables/_typography.scss
@@ -0,0 +1,28 @@
+@import '~@af/sass/v2/typography/variables/typography__variables';
+
+// AF variables
+$af__font-weight-normal: $typography__font-weight; // 400
+$af__font-weight-semi-bold: $typography__font-weight--semibold; // 600
+$af__font-weight-bold: $typography__font-weight--bold; // 700
+
+$af__font-family: $typography__font-family; // 'Open sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$af__font-size: $typography__font-size; // 1rem
+$af__font-size-xs: $typography__font-size--xs; // .875rem
+$af__font-size-s: $typography__font-size--s; // .9375rem
+$af__font-size-m: $typography__font-size--m; // 1.25rem
+$af__font-size-heading: $typography__font-size--heading; // 1.125rem
+$af__font-size-h1: $typography__font-size--h1; // 1.75rem
+$af__font-size-h2: $typography__font-size--h2; // 1.375rem
+$af__font-size-h3: $typography__font-size--h3; // 1.125rem
+$af__font-size-desktop: $typography__font-size-desktop; // 1.125rem
+$af__font-size-desktop-xs: $typography__font-size-desktop--xs; // .9375rem
+$af__font-size-desktop-s: $typography__font-size-desktop--s; // 1rem
+$af__font-size-desktop-heading: $typography__font-size-desktop--heading; // 1.375rem
+$af__font-size-desktop-h1: $typography__font-size-desktop--h1; // 2.5rem
+$af__font-size-desktop-h2: $typography__font-size-desktop--h2; // 1.75rem
+$af__font-size-desktop-h3: $typography__font-size-desktop--h3; // 1.375rem
+$af__font-size-desktop-compressed: $typography__font-size-desktop--compressed; // 1rem
+$af__font-size-desktop-h1-compressed: $typography__font-size-desktop--h1-compressed; // 1.75rem
+
+// Local variables
+$dafa__font-size-h1: 1.5rem;
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
      "license": "MIT",
      "dependencies": {
        "@af/digi-ng": "^11.3.4",
+        "@af/sass": "^10.2.4",
        "@angular/animations": "^11.2.0",
        "@angular/common": "^11.2.0",
        "@angular/compiler": "^11.2.0",
@@ -107,6 +108,12 @@
      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
      "license": "0BSD"
    },
+    "node_modules/@af/sass": {
+      "version": "10.2.4",
+      "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/@af/sass/-/sass-10.2.4.tgz",
+      "integrity": "sha512-Ok1Je9QGnFHVN/txTS56oTpdkE9uqzfXwoEeIfqc+g7ehZ2aprdVPULtLKO6ePM8ltLsuqPxFQK0CYj44+sHxg==",
+      "license": "MIT"
+    },
    "node_modules/@angular-devkit/architect": {
      "version": "0.1100.7",
      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.7.tgz",
@@ -25095,6 +25102,11 @@
        }
      }
    },
+    "@af/sass": {
+      "version": "10.2.4",
+      "resolved": "http://nexus.arbetsformedlingen.se/repository/npm/@af/sass/-/sass-10.2.4.tgz",
+      "integrity": "sha512-Ok1Je9QGnFHVN/txTS56oTpdkE9uqzfXwoEeIfqc+g7ehZ2aprdVPULtLKO6ePM8ltLsuqPxFQK0CYj44+sHxg=="
+    },
    "@angular-devkit/architect": {
      "version": "0.1100.7",
      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1100.7.tgz",
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
  "private": true,
  "dependencies": {
    "@af/digi-ng": "^11.3.4",
+    "@af/sass": "^10.2.4",
    "@angular/animations": "^11.2.0",
    "@angular/common": "^11.2.0",
    "@angular/compiler": "^11.2.0",
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -14,7 +14,17 @@
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
-    "paths": {}
+    "paths": {
+      "@dafa-assets/*": ["apps/dafa-web/src/assets/*"],
+      "@dafa-shared/*": ["apps/dafa-web/src/app/shared/*"],
+      "@dafa-models/*": ["apps/dafa-web/src/app/data/models/*"],
+      "@dafa-constants/*": ["apps/dafa-web/src/app/data/constants/*"],
+      "@dafa-directives/*": ["apps/dafa-web/src/app/directives/*"],
+      "@dafa-enums/*": ["apps/dafa-web/src/app/data/enums/*"],
+      "@dafa-services/*": ["apps/dafa-web/src/app/services/*"],
+      "@dafa-utils/*": ["apps/dafa-web/src/app/utils/*"],
+      "@dafa-environment": ["apps/dafa-web/src/environments/environment"]
+    }
  },
  "exclude": ["node_modules", "tmp"]
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.base.json"
+}
				`@@ -0,0 +1 @@`
				`<a [attr.href]="skipLinkPath" class="skip-to-content">Gå till sidans innehåll</a>`
				`@@ -1 +0,0 @@`
				`/* You can add global styles to this file, and also import other style files */`