page-header

src/app/_modules/layout/footer/footer.component.html

@@ -47,7 +47,7 @@
         <a href="#">Новости</a>
       </div>
       <div>
-        <a href="#">Вход для зарегистрированных пользователей</a>
+        <a (click)="login()">Вход для зарегистрированных пользователей</a>
       </div>
     </div>
   </div>

src/app/_modules/layout/footer/footer.component.ts

@@ -1,4 +1,6 @@
 import {Component} from '@angular/core';
+import {AuthenticationService} from "@app/_services";
+import {Subscription} from "rxjs";
 
 @Component({
   selector: 'footer',
@@ -6,10 +8,19 @@ import {Component} from '@angular/core';
   styleUrls: ['footer.component.scss']
 })
 export class FooterComponent {
-  constructor() {
+  subscription: Subscription;
+  public user: any;
+  constructor(public authenticationService: AuthenticationService) {
+    this.subscription = this.authenticationService.user.subscribe(user => {
+      this.user = user;
+    });
   }
 
   ngOnInit() {
   }
 
+  login() {
+    this.authenticationService.popup('login');
+  }
+
 }

src/app/_modules/layout/grid/grid.component.html

@@ -2,9 +2,7 @@
 <div class="wrapper {{classActive}}">
   <header></header>
   <div class="content">
-    <div class="limiter">
       <router-outlet></router-outlet>
-    </div>
   </div>
   <footer></footer>
   <router-outlet name="slider"></router-outlet>

src/app/_modules/pages/page/page.component.html

@@ -1,11 +1,20 @@
 <div class="content" *ngIf="page">
   <div class="row">
-    <div class="col left"><page-breadcrumbs [page]="page"></page-breadcrumbs></div>
+    <div class="page-header">
+      <div class="limiter">
+        <div class="line">
+          <h1>{{page?.name}}</h1>
+        </div>        
+      </div>
+    </div>
+    <div class="limiter">
+      <page-breadcrumbs [page]="page"></page-breadcrumbs>
+    </div>
     <div class="col right" *ngIf="isEditable" (click)="toggleEditMode()">
       <div class="label">Режим редактирования</div><div class="switch" [class.active]="editMode"></div>
     </div>
   </div>
-  <h1>{{page?.name}}</h1>
+  
   <div class="holder" [ngSwitch]="page?.type?.name || page?.type">
     <content-page *ngSwitchCase="'content'" [page]="page" [editMode]="editMode"></content-page>
     <publications-page *ngSwitchCase="'publications'" [page]="page" [editMode]="editMode"></publications-page>

src/app/_modules/pages/page/page.component.scss

@@ -1,8 +1,36 @@
 .content {
   .row {
-    display: flex;
-    flex-direction: row;
+    display: block;
     width: 100%;
+    .page-header {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: start;
+      width: 100%;
+      height: 400px;
+      background-color: #86898E;
+      .limiter{
+        display: flex;
+        .line{
+          border-bottom: 12px solid var(--blue-0);
+          h1{
+            display: inline;
+            padding-right: 40px;
+            vertical-align: -20px;
+            font-family: PT Sans Narrow;
+            font-size: 76px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 60px; /* 100% */
+            letter-spacing: 0.76px;
+            color: white;
+          }
+        }
+        
+      }
+      
+    }
     .left {
       flex-grow: 1;
     }
@@ -21,13 +49,6 @@
     }
   }
 
-  h1 {
-    font-weight: 700;
-    font-size: 2rem;
-    line-height: 2.5rem;
-    color: var(--grey-7);
-  }
-
   .holder {
     margin-bottom: 32px;
   }

src/assets/css/basics.scss

@@ -35,8 +35,7 @@ body {
 
 .limiter {
   width: 100%;
-  max-width: 1240px;
-  padding: 0 40px;
+  max-width: 900px;
   margin: 0 auto;
 }
 

src/styles.scss

@@ -3,10 +3,12 @@
   --radius-2: 20px;
   --white: #ffffff;
 
+  --blue-0: #2EB2E8;
   --blue-1: #0070BA;
   --blue-2: #005799;
   --blue-3: #004077;
   --blue-4: #A1CAE5;
+  
 }
 
 * {