Merge branch 'fetture/routing_title' into develop

src/apis/index.php

@@ -15,7 +15,7 @@ if(isset($_GET['query'])) {
     case "performances":
     case "workshops":
       if($_GET['query'] == 'portfolio') {$filter = '';} else {$filter = "WHERE type='".$_GET['query']."'";}
-      if($_GET['random']) {$order = 'ORDER BY RAND()';} else {$order = "ORDER BY id DESC";}
+      if($_GET['random'] == 'true') {$order = 'ORDER BY RAND()';} else {$order = "ORDER BY id DESC";}
       $qe = mysqli_query($conn,"SELECT * FROM `works` $filter $order");
       if(mysqli_num_rows($qe) > 0) {
         $content = null;

src/app/app.component.ts

@@ -1,10 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'Dslak | new-media arts';
+export class AppComponent implements OnInit {
+
+  public constructor(private titleService: Title) { }
+
+  ngOnInit(): void {
+    this.titleService.setTitle('Dslak | New-media arts')
+  }
+
 }

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, Title } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { NgParticlesModule } from "ng-particles";
@@ -38,7 +38,9 @@ import { SpinnerComponent } from './spinner/spinner.component';
     AngularEditorModule,
     HttpClientModule
   ],
-  providers: [],
+  providers: [
+    Title
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/detail/detail.component.html

@@ -51,14 +51,14 @@
 
       <span class="links" *ngIf="details.exhibitions && details.exhibitions.length"><b>Exhibitions:</b>
         <span class="link" *ngFor="let exhibition of details.exhibitions"
-              (click)="showDetails('exhibitions', exhibition.id, exhibition.title)"
-              routerLink="/detail/exhibitions/{{exhibition.id}}">{{exhibition.title}} </span>
+              (click)="showDetails('exhibitions', exhibition.id)"
+              routerLink="/detail/exhibitions/{{exhibition.id}}/{{parseTitle(exhibition.title)}}">{{exhibition.title}} </span>
       </span>
 
       <span class="links" *ngIf="details.works && details.works.length"><b>Works:</b>
         <span class="link" *ngFor="let work of details.works"
-              (click)="showDetails('works', work.id, work.title)"
-              routerLink="/detail/works/{{work.id}}">{{work.title}} </span>
+              (click)="showDetails('works', work.id)"
+              routerLink="/detail/works/{{work.id}}/{{parseTitle(work.title)}}">{{work.title}} </span>
       </span>
   </div>
 </div>

src/app/detail/detail.component.scss

@@ -60,6 +60,7 @@
           left: 0;
           width: 100%;
           height: 100%;
+          padding: 2px;
           object-fit: cover;
           cursor: pointer;
           transition: transform .4s;

src/app/detail/detail.component.ts

@@ -4,6 +4,7 @@ import { DomSanitizer } from '@angular/platform-browser'
 import { Location } from '@angular/common'
 import { NgxImageGalleryComponent, GALLERY_IMAGE, GALLERY_CONF } from "ngx-image-gallery"
 import { ApisService } from '../services/apis.service'
+import { Title } from '@angular/platform-browser';
 import { environment } from '../../environments/environment'
 
 @Component({
@@ -29,6 +30,7 @@ export class DetailComponent implements OnInit {
     imageOffset: '0px',
     showDeleteControl: false,
     showImageTitle: false,
+    showArrows: false
   }
 
   public galleryImages: GALLERY_IMAGE[] = []
@@ -39,7 +41,8 @@ export class DetailComponent implements OnInit {
     private router: Router,
     private location: Location,
     private activeRoute: ActivatedRoute,
-    private sanitizer: DomSanitizer
+    private sanitizer: DomSanitizer,
+    private titleService: Title
   ) { }
 
   ngOnInit(): void {
@@ -52,16 +55,17 @@ export class DetailComponent implements OnInit {
     this.init = true
   }
 
-  showDetails(section, id, title = ''): void {
+  showDetails(section, id): void {
     this.galleryImages = []
     this.apisService.getDetails(section, id).toPromise().then((response) => {
-      if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) {
-        this.history.push(`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`)
+      this.details = response.item
+
+      if(this.history[this.history.length - 1] != `/detail/${section}/${id}/${this.parseTitle(this.details.title)}`) {
+        this.history.push(`/detail/${section}/${id}/${this.parseTitle(this.details.title)}`)
       }
 
-      const detail = response.item
-      detail.videos = detail.videos ? JSON.parse(detail.videos) : []
-      detail.videos.forEach((e) => {
+      this.details.videos = this.details.videos ? JSON.parse(this.details.videos) : []
+      this.details.videos.forEach((e) => {
         e.code = e.url.split('/').pop()
         switch(e.type) {
           case 'youtube':
@@ -76,9 +80,9 @@ export class DetailComponent implements OnInit {
         }
       })
 
-      detail.gallery = detail.gallery ? JSON.parse(detail.gallery) : []
+      this.details.gallery = this.details.gallery ? JSON.parse(this.details.gallery) : []
 
-      detail.gallery.forEach((e) => {
+      this.details.gallery.forEach((e) => {
         if(!e.main) {
           this.galleryImages.push({
             url: `${this.basePath}${e.url}`,
@@ -91,7 +95,7 @@ export class DetailComponent implements OnInit {
       })
 
       this.loaded = !this.loadedImages.length
-      this.details = detail
+      this.titleService.setTitle(`Dslak | New-media arts | ${this.details.title}`)
 
     },(error) => {
       console.error('getPortfolio ERROR', error)
@@ -102,6 +106,7 @@ export class DetailComponent implements OnInit {
 
   back(): void {
     this.history.pop()
+    let title = ''
     if(this.history.length > 0) {
       const last = this.history[this.history.length - 1]
       this.section = last.split('/')[2]
@@ -110,6 +115,8 @@ export class DetailComponent implements OnInit {
       this.location.back()
     } else {
       this.location.back()
+      title = this.router.url.split('/')[2]
+      this.titleService.setTitle(`Dslak | New media arts | ${title.charAt(0).toUpperCase() + title.slice(1)}`)
     }
   }
 
@@ -119,7 +126,9 @@ export class DetailComponent implements OnInit {
     this.loaded = this.init && this.loadedImages.every( (val) => !val)
   }
 
-
+  parseTitle(title): string {
+    return title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-').replace('--', '-').replace('--', '-')
+  }
 
 
 

src/app/header/header.component.html

@@ -7,13 +7,13 @@
   <div class="menu" [ngClass]="{'open': isMenuOpen}">
     <nav class="nav">
       <ul class="items">
-        <li class="item" routerLink="/about" [routerLinkActive]="'active'">About</li>
-        <li class="item" routerLink="/portfolio" [routerLinkActive]="'active'">Portfolio</li>
-        <li class="item" routerLink="/exhibitions" [routerLinkActive]="'active'">Exhibitions</li>
-        <li class="item" routerLink="/installations" [routerLinkActive]="'active'">Installations</li>
-        <li class="item" routerLink="/entertainment" [routerLinkActive]="'active'">Entertainment</li>
-        <li class="item" routerLink="/performances" [routerLinkActive]="'active'">Performances</li>
-        <li class="item" routerLink="/workshops" [routerLinkActive]="'active'">Workshops</li>
+        <li class="item" routerLink="/about" [routerLinkActive]="'active'" (click)="setTitle('About')">About</li>
+        <li class="item" routerLink="/portfolio" [routerLinkActive]="'active'" (click)="setTitle('Portfolio')">Portfolio</li>
+        <li class="item" routerLink="/exhibitions" [routerLinkActive]="'active'" (click)="setTitle('Exhibitions')">Exhibitions</li>
+        <li class="item" routerLink="/installations" [routerLinkActive]="'active'" (click)="setTitle('Installations')">Installations</li>
+        <li class="item" routerLink="/entertainment" [routerLinkActive]="'active'" (click)="setTitle('Entertainment')">Entertainment</li>
+        <li class="item" routerLink="/performances" [routerLinkActive]="'active'" (click)="setTitle('Performances')">Performances</li>
+        <li class="item" routerLink="/workshops" [routerLinkActive]="'active'" (click)="setTitle('Workshops')">Workshops</li>
       </ul>
     </nav>
   </div>

src/app/header/header.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, HostListener, Inject } from '@angular/core'
 import { Router, NavigationEnd } from '@angular/router'
+import { Title } from '@angular/platform-browser';
 import { DOCUMENT } from '@angular/common'
 
 @Component({
@@ -13,11 +14,15 @@ export class HeaderComponent implements OnInit {
   public isMenuOpen: boolean = false
   public isFirstScroll: boolean = true
 
-  constructor(@Inject(DOCUMENT) private document: Document, private router: Router) {
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private router: Router,
+    private titleService: Title
+  ) {
     router.events.subscribe((val) => {
       this.isMenuOpen = false
-      //this.isSticky = true
       this.document.body.classList.remove('no-scroll')
+      //if(val.shouldActivate) { console.log('route', val) }
     })
   }
 
@@ -45,4 +50,8 @@ export class HeaderComponent implements OnInit {
     }
   }
 
+  setTitle(title): void {
+    this.titleService.setTitle(`Dslak - New media arts | ${title}`)
+  }
+
 }

src/app/home/home.component.html

@@ -1,8 +1,6 @@
 <div class="component-home">
-  <button class="goto-prev" (click)="scroll('prev')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
-  <button class="goto-next" (click)="scroll('next')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
   <div class="content" #scrollContent (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
-    <div [ngClass]="'slide-' + item.width" *ngFor="let item of homeItems">
+    <div class="slide" [ngClass]="'slide-' + item.width" *ngFor="let item of homeItems">
       <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id, item.title)" (mouseover)="paused=true" (mouseout)="paused=false">
         <img class="image" *ngIf="item.loading" src="/assets/images/loader.svg" alt="loading">
         <img class="image" [hidden]="item.loading" (load)="onLoad(item.id)" [src]="basePath+item.image">
@@ -28,4 +26,9 @@
   </div>
 </div>
 
+
+<button class="goto-prev" (click)="scroll('prev')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
+<button class="goto-next" (click)="scroll('next')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
+
+
 <app-spinner [show]="!loaded"></app-spinner>

src/app/home/home.component.scss

@@ -2,60 +2,19 @@
 
 .component-home {
   display: flex;
-  padding-top: 100px;
+  padding-top: 150px;
   height: 100vh;
   transform: skew(-15deg) rotate(-15deg);
   z-index: 1;
 
-  .goto-prev,
-  .goto-next {
-    position: absolute;
-    height: 40px;
-    width: 60px;
-    border: none;
-    background: none;
-    color: $black;
-    font-size: $font-40;
-    appearance: none;
-    margin: 0;
-    padding: 5px;
-    cursor: pointer;
-    z-index: 2;
-
-    .icon {
-      &:before {
-        transform: translate(-50%, -50%);
-        position: absolute;
-        top: 50%;
-        left: 50%;
-      }
-    }
-  }
-  .goto-prev {
-    top: 60px;
-    left: 20px;
-  }
-  .goto-next {
-    top: calc(80vh + 10px);
-    right: 20px;
-    .icon {
-      &:before {
-        transform: translate(-50%, -50%) rotate(180deg);
-      }
-    }
-  }
-
   .content {
     display: inline-flex;
     margin: 0;
-    margin-left: -50px;
     //animation: slide 150s linear infinite;
     transition: margin-left .5s;
 
-    @each $width in 1,2,3,4,5,6 {
-      .slide-#{$width} {
-        width: #{($width+2)*100}px;
-      }
+    .slide {
+      width: 100vw;
     }
 
     .box {
@@ -64,13 +23,14 @@
       background: $black-alpha2;
       border-radius: 5px;
       overflow: hidden;
-      margin: auto 0;
+      margin: auto;
       padding: 40px 20px;
       height: calc(80vh - 90px);
+      width: calc(100% - 20px);
       min-height: 250px;
       //max-height: 700px;
       cursor: pointer;
-      transform: skew(-6deg, -6deg) rotate(6deg);
+      transform: rotate(15deg) skew(15deg, 0deg);
       transition: transform .4s, background .4s, opacity .4s;
       -webkit-backface-visibility: hidden;
 
@@ -147,7 +107,7 @@
 
       &:hover {
         background: $black;
-        transform: scale(1.4) rotate(14deg) skew(14deg, 0deg);
+        transform: scale(1.4) rotate(15deg) skew(15deg, 0deg);
         z-index: 50;
 
         .image {
@@ -166,15 +126,71 @@
 }
 
 
+.goto-prev,
+.goto-next {
+  position: absolute;
+  display: none;
+  height: 40px;
+  width: 60px;
+  border: none;
+  background: none;
+  color: $white;
+  font-size: $font-40;
+  appearance: none;
+  margin: 0;
+  padding: 5px;
+  cursor: pointer;
+  opacity: .4;
+  transition: opacity .4s;
+  z-index: 2;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  .icon {
+    &:before {
+      transform: translate(-50%, -50%);
+      position: absolute;
+      top: 50%;
+      left: 50%;
+    }
+  }
+}
+
+.goto-prev {
+  top: 20px;
+  left: 20px;
+}
+.goto-next {
+  bottom: 20px;
+  right: 20px;
+  .icon {
+    &:before {
+      transform: translate(-50%, -50%) rotate(180deg);
+    }
+  }
+}
+
+
 @media (min-width: map-get($grid-breakpoints, 'md')) {
   .component-home {
-    .goto-prev {
-      left: 50px;
-    }
-    .goto-next {
-      right: 50px;
+    .content {
+      margin-left: -calc(100vw / 2);
+      .slide {
+        @each $width in 1,2,3,4,5,6 {
+          &.slide-#{$width} {
+            width: #{($width+2)*100}px;
+          }
+        }
+      }
     }
   }
+
+  .goto-prev,
+  .goto-next {
+    display: block;
+  }
 }
 
 

src/app/home/home.component.ts

@@ -58,7 +58,7 @@ export class HomeComponent implements OnInit {
 
     setInterval( () => {
       if(!this.paused) {
-        const scrollWidth = 300
+        const scrollWidth = document.body.clientWidth > 768 ? document.body.clientWidth / 3 : document.body.clientWidth
         const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0
         this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ?
                           -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth
@@ -78,7 +78,7 @@ export class HomeComponent implements OnInit {
   }
 
   scroll(dir): void {
-    const scrollWidth = document.body.clientWidth / 3
+    const scrollWidth = document.body.clientWidth > 768 ? document.body.clientWidth / 3 : document.body.clientWidth
     const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0
     this.paused = true
 
@@ -97,7 +97,7 @@ export class HomeComponent implements OnInit {
   swipe(e: TouchEvent, when: string): void {
     const coord: [number, number] = [e.changedTouches[0].clientX, e.changedTouches[0].clientY]
     const time = new Date().getTime()
-    const scrollWidth = document.body.clientWidth
+    const scrollWidth = document.body.clientWidth > 768 ? document.body.clientWidth / 3 : document.body.clientWidth
     const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0
 
     this.paused = true

src/app/portfolio/portfolio.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { Router, NavigationEnd } from '@angular/router'
 import { ApisService } from '../services/apis.service'
+import { Title } from '@angular/platform-browser';
 import { environment } from '../../environments/environment'
 
 @Component({
@@ -19,8 +20,9 @@ export class PortfolioComponent implements OnInit {
 
   constructor(
     private apisService: ApisService,
-    private router: Router)
-  { }
+    private router: Router,
+    private titleService: Title
+  ) { }
 
   ngOnInit(): void {
     this.section = this.router.url.split('/')[1]
@@ -73,7 +75,8 @@ export class PortfolioComponent implements OnInit {
 
   showDetails(id, title = ''): void {
     const section = this.section == 'exhibitions' ? 'exhibitions' : 'works'
-    this.router.navigate([`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`])
+    if(title) { this.titleService.setTitle(`Dslak | New-media arts | ${title}`) }
+    this.router.navigate([`/detail/${section}/${id}/${this.parseTitle(title)}`])
   }
 
   onLoad(id): void {
@@ -81,4 +84,9 @@ export class PortfolioComponent implements OnInit {
     this.loaded = this.init && this.portfolioItems.every( (val) => !val.loading)
   }
 
+  parseTitle(title): string {
+    return title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-').replace('--', '-').replace('--', '-')
+  }
+
+
 }

src/app/services/apis.service.ts

@@ -16,8 +16,8 @@ export class ApisService extends BaseService {
     super()
   }
 
-  getPortfolio(section, randon = false): Observable<any> {
-    let urlApi = `${this.restApi}?query=${section}&random=${randon}`
+  getPortfolio(section, random = false): Observable<any> {
+    let urlApi = `${this.restApi}?query=${section}&random=${random}`
     return this.http.get<any>(urlApi).pipe(
       catchError(this.handleError)
     )

src/assets/images/logo.svg

@@ -5,15 +5,52 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
-   id="svg291"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1"
-   viewBox="0 0 134.02536 119.09393"
-   height="119.09393mm"
-   width="134.02536mm">
+   id="svg2"
+   height="94.896881"
+   width="106.79461">
   <defs
-     id="defs285" />
+     id="defs4">
+    <pattern
+       id="pattern3027"
+       patternTransform="translate(-304.03979,561.33801)"
+       height="200"
+       width="200"
+       patternUnits="userSpaceOnUse">
+      <image
+         y="-1.1368684e-13"
+         x="0"
+         id="image3013"
+         height="200"
+         width="200"
+         xlink:href="file:///docs/Dslak/BIO/Logo/bg_texture_grey.jpg" />
+    </pattern>
+    <pattern
+       xlink:href="#pattern4526-8"
+       id="pattern4723"
+       patternTransform="matrix(0.6701195,0,0,0.75925927,-422.39307,1208.7618)" />
+    <pattern
+       patternTransform="matrix(0.6701195,0,0,0.75925927,-169.69952,1204.4455)"
+       id="pattern4526-8"
+       xlink:href="#pattern3027-2" />
+    <pattern
+       id="pattern3027-2"
+       patternTransform="translate(-304.03979,561.33801)"
+       height="200"
+       width="200"
+       patternUnits="userSpaceOnUse">
+      <image
+         y="-1.1368684e-13"
+         x="0"
+         id="image3013-7"
+         height="200"
+         width="200"
+         xlink:href="file:///docs/Dslak/BIO/Logo/bg_texture_grey.jpg" />
+    </pattern>
+  </defs>
   <metadata
-     id="metadata288">
+     id="metadata7">
     <rdf:RDF>
       <cc:Work
          rdf:about="">
@@ -25,84 +62,85 @@
     </rdf:RDF>
   </metadata>
   <g
-     transform="translate(26.947181,-31.923306)"
-     id="layer1">
+     transform="translate(-509.49411,-555.85051)"
+     id="layer2">
     <g
-       transform="matrix(0.85764954,0,0,0.85764954,-2439.8694,1481.7208)"
-       id="g5142"
-       style="opacity:1;stroke-width:0.3085;stop-opacity:1">
+       style="opacity:1;stroke-width:1.46329;stop-opacity:1"
+       transform="matrix(0.68339561,0,0,0.68339561,-1403.3442,1715.6078)"
+       id="g5226">
       <g
-         transform="matrix(1.6074173,-0.06506215,0.06506215,1.6074173,2783.9869,396.74804)"
-         id="g4123"
-         style="opacity:1;stroke-width:0.191764;stop-opacity:1">
-        <path
-           id="rect4119"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.17434;stroke-linecap:round;stop-opacity:1"
-           d="m 78.642441,-1290.2797 h 77.756669 c 4.67863,0 8.44519,3.7666 8.44519,8.4452 v 63.1761 c 0,4.6786 -3.76656,8.4452 -8.44519,8.4452 H 78.642441 c -4.678636,0 -8.445191,-3.7666 -8.445191,-8.4452 v -63.1761 c 0,-4.6786 3.766555,-8.4452 8.445191,-8.4452 z" />
-        <path
-           d="m 101.70376,-1285.4686 52.03314,-6.6491 c 7.49898,-0.9582 14.01226,7.6726 12.14454,14.9982 l -13.74945,53.9284 c -1.86771,7.3256 -7.4443,11.8412 -14.99818,12.1445 l -55.608725,2.2332 c -7.553888,0.3035 -14.641402,-7.8624 -12.144536,-14.9981 l 17.325021,-49.5126 c 2.496887,-7.1358 7.499187,-11.1862 14.99819,-12.1445 z"
-           style="opacity:1;fill:#282828;fill-opacity:1;stroke-width:2.17434;stroke-linecap:round;stop-opacity:1"
-           id="path4121" />
-      </g>
-      <g
-         id="g4147-8-9"
-         style="opacity:1;stroke-width:0.21846;stop-opacity:1"
-         transform="matrix(1.4786476,0,0,1.3486498,1787.459,186.3728)">
-        <path
-           id="rect4125-6-4"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 719.07696,-1327.05 h 9.51459 c 0.66504,0 1.20044,0.5464 1.20044,1.2251 v 9.5083 c 0,0.6787 -0.5354,1.2252 -1.20044,1.2252 h -9.51459 c -0.66504,0 -1.20043,-0.5465 -1.20043,-1.2252 v -9.5083 c 0,-0.6787 0.53539,-1.2251 1.20043,-1.2251 z" />
-        <path
-           id="rect4127-8-2"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 733.01366,-1333.8127 h 14.62838 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 14.6406 c 0,0.6787 -0.53539,1.2252 -1.20043,1.2252 h -14.62838 c -0.66503,0 -1.20043,-0.5465 -1.20043,-1.2252 v -14.6406 c 0,-0.6787 0.5354,-1.2251 1.20043,-1.2251 z" />
-        <path
-           id="rect4129-9-1"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 752.04498,-1334.4426 h 11.89331 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 11.8957 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -11.89331 c -0.66504,0 -1.20044,-0.5464 -1.20044,-1.2251 v -11.8957 c 0,-0.6787 0.5354,-1.2251 1.20044,-1.2251 z" />
-        <path
-           id="rect4131-3-7"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 752.86669,-1316.9962 h 5.19802 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 5.1761 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -5.19802 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -5.1761 c 0,-0.6787 0.53539,-1.2251 1.20043,-1.2251 z" />
-        <path
-           id="rect4133-1-75"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 737.72674,-1314.4257 h 10.71582 c 0.66504,0 1.20043,0.5465 1.20043,1.2252 v 10.7139 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -10.71582 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -10.7139 c 0,-0.6787 0.53539,-1.2252 1.20043,-1.2252 z" />
-        <path
-           id="rect4135-2-60"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 728.25585,-1313.5555 h 4.41987 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 4.3951 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -4.41987 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -4.3951 c 0,-0.6787 0.53539,-1.2251 1.20043,-1.2251 z" />
-        <path
-           id="rect4137-7-9"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 759.00152,-1349.4855 h 10.63346 c 0.66504,0 1.20043,0.5464 1.20043,1.2252 v 10.6312 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -10.63346 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -10.6312 c 0,-0.6788 0.53539,-1.2252 1.20043,-1.2252 z" />
-        <path
-           id="rect4139-2-1"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 769.62182,-1362.4576 h 7.93585 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 7.9238 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -7.93585 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -7.9238 c 0,-0.6787 0.53539,-1.2251 1.20043,-1.2251 z" />
-        <path
-           id="rect4141-3-7"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 786.83764,-1379.2218 h 2.58218 c 0.66504,0 1.20043,0.5464 1.20043,1.2252 v 2.5507 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -2.58218 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -2.5507 c 0,-0.6788 0.53539,-1.2252 1.20043,-1.2252 z" />
-        <path
-           id="rect4143-9-8"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 779.15331,-1372.4268 h 4.94383 c 0.66504,0 1.20043,0.5465 1.20043,1.2252 v 4.921 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -4.94383 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -4.921 c 0,-0.6787 0.53539,-1.2252 1.20043,-1.2252 z" />
-        <path
-           id="rect4145-3-8"
-           style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:2.47704;stroke-linecap:round;stop-opacity:1"
-           transform="matrix(1,0,0.00451391,0.99998981,0,0)"
-           d="m 793.26153,-1383.2676 h 1.42925 c 0.66504,0 1.20044,0.5464 1.20044,1.2252 v 1.3937 c 0,0.6787 -0.5354,1.2251 -1.20044,1.2251 h -1.42925 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -1.3937 c 0,-0.6788 0.53539,-1.2252 1.20043,-1.2252 z" />
+         style="opacity:1;stroke-width:1.46329;stop-opacity:1"
+         id="g5142"
+         transform="translate(-14.392352,-6.619979)">
+        <g
+           style="opacity:1;stroke-width:0.909582;stop-opacity:1"
+           id="g4123"
+           transform="matrix(1.6074173,-0.06506215,0.06506215,1.6074173,2783.9869,396.74804)">
+          <path
+             d="m 78.642441,-1290.2797 h 77.756669 c 4.67863,0 8.44519,3.7666 8.44519,8.4452 v 63.1761 c 0,4.6786 -3.76656,8.4452 -8.44519,8.4452 H 78.642441 c -4.678636,0 -8.445191,-3.7666 -8.445191,-8.4452 v -63.1761 c 0,-4.6786 3.766555,-8.4452 8.445191,-8.4452 z"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:10.3134;stroke-linecap:round;stop-opacity:1"
+             id="rect4119" />
+          <path
+             id="path4121"
+             style="opacity:1;fill:#282828;fill-opacity:1;stroke-width:10.3134;stroke-linecap:round;stop-opacity:1"
+             d="m 101.70376,-1285.4686 52.03314,-6.6491 c 7.49898,-0.9582 14.01226,7.6726 12.14454,14.9982 l -13.74945,53.9284 c -1.86771,7.3256 -7.4443,11.8412 -14.99818,12.1445 l -55.608725,2.2332 c -7.553888,0.3035 -14.641402,-7.8624 -12.144536,-14.9981 l 17.325021,-49.5126 c 2.496887,-7.1358 7.499187,-11.1862 14.99819,-12.1445 z" />
+        </g>
+        <g
+           transform="matrix(1.5326451,0,0,1.3978999,1747.3096,252.12211)"
+           style="opacity:1;stroke-width:0.999704;stop-opacity:1"
+           id="g4147-8-92">
+          <path
+             d="m 713.08678,-1328.6669 h 9.51459 c 0.66504,0 1.2029,0.5464 1.20597,1.2251 l 0.0429,9.5082 c 0.003,0.6787 -0.52987,1.2252 -1.19491,1.2252 h -9.51459 c -0.66504,0 -1.2029,-0.5465 -1.20596,-1.2252 l -0.0429,-9.5082 c -0.003,-0.6787 0.52986,-1.2251 1.1949,-1.2251 z"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3351;stroke-linecap:round;stop-opacity:1"
+             id="rect4125-6-24" />
+          <path
+             d="m 733.01366,-1333.8127 h 14.62838 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 14.6406 c 0,0.6787 -0.53539,1.2252 -1.20043,1.2252 h -14.62838 c -0.66503,0 -1.20043,-0.5465 -1.20043,-1.2252 v -14.6406 c 0,-0.6787 0.5354,-1.2251 1.20043,-1.2251 z"
+             transform="matrix(1,0,0.00451391,0.99998981,0,0)"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3352;stroke-linecap:round;stop-opacity:1"
+             id="rect4127-8-0" />
+          <path
+             d="m 752.04498,-1334.4426 h 11.89331 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 11.8957 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -11.89331 c -0.66504,0 -1.20044,-0.5464 -1.20044,-1.2251 v -11.8957 c 0,-0.6787 0.5354,-1.2251 1.20044,-1.2251 z"
+             transform="matrix(1,0,0.00451391,0.99998981,0,0)"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3352;stroke-linecap:round;stop-opacity:1"
+             id="rect4129-9-5" />
+          <path
+             d="m 746.33271,-1317.7806 h 6.73873 c 0.86216,0 1.55943,0.7083 1.56341,1.5882 l 0.0303,6.7103 c 0.004,0.8799 -0.68691,1.5882 -1.54907,1.5882 h -6.73873 c -0.86216,0 -1.55944,-0.7083 -1.56341,-1.5882 l -0.0303,-6.7103 c -0.004,-0.8799 0.68691,-1.5882 1.54907,-1.5882 z"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3351;stroke-linecap:round;stop-opacity:1"
+             id="rect4131-3-6" />
+          <path
+             d="m 730.9232,-1314.1292 h 10.71582 c 0.66504,0 1.2029,0.5465 1.20596,1.2252 l 0.0484,10.7138 c 0.003,0.6787 -0.52986,1.2251 -1.1949,1.2251 h -10.71582 c -0.66504,0 -1.20289,-0.5464 -1.20596,-1.2251 l -0.0484,-10.7138 c -0.003,-0.6787 0.52986,-1.2252 1.1949,-1.2252 z"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3351;stroke-linecap:round;stop-opacity:1"
+             id="rect4133-1-4" />
+          <path
+             d="m 720.37403,-1314.1292 h 5.65608 c 0.85105,0 1.53934,0.6993 1.54326,1.5678 l 0.0253,5.6244 c 0.004,0.8686 -0.67806,1.5677 -1.52911,1.5677 h -5.65607 c -0.85105,0 -1.53933,-0.6991 -1.54326,-1.5677 l -0.0253,-5.6244 c -0.004,-0.8685 0.67806,-1.5678 1.5291,-1.5678 z"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3351;stroke-linecap:round;stop-opacity:1"
+             id="rect4135-2-0" />
+          <path
+             d="m 759.00152,-1349.4855 h 10.63346 c 0.66504,0 1.20043,0.5464 1.20043,1.2252 v 10.6312 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -10.63346 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -10.6312 c 0,-0.6788 0.53539,-1.2252 1.20043,-1.2252 z"
+             transform="matrix(1,0,0.00451391,0.99998981,0,0)"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3352;stroke-linecap:round;stop-opacity:1"
+             id="rect4137-7-8" />
+          <path
+             d="m 769.62182,-1362.4576 h 7.93585 c 0.66504,0 1.20043,0.5464 1.20043,1.2251 v 7.9238 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -7.93585 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -7.9238 c 0,-0.6787 0.53539,-1.2251 1.20043,-1.2251 z"
+             transform="matrix(1,0,0.00451391,0.99998981,0,0)"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3352;stroke-linecap:round;stop-opacity:1"
+             id="rect4139-2-9" />
+          <path
+             d="m 786.83764,-1379.2218 h 2.58218 c 0.66504,0 1.20043,0.5464 1.20043,1.2252 v 2.5507 c 0,0.6788 -0.53539,1.2252 -1.20043,1.2252 h -2.58218 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2252 v -2.5507 c 0,-0.6788 0.53539,-1.2252 1.20043,-1.2252 z"
+             transform="matrix(1,0,0.00451391,0.99998981,0,0)"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3352;stroke-linecap:round;stop-opacity:1"
+             id="rect4141-3-9" />
+          <path
+             d="m 779.15331,-1372.4268 h 4.94383 c 0.66504,0 1.20043,0.5465 1.20043,1.2252 v 4.921 c 0,0.6787 -0.53539,1.2251 -1.20043,1.2251 h -4.94383 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -4.921 c 0,-0.6787 0.53539,-1.2252 1.20043,-1.2252 z"
+             transform="matrix(1,0,0.00451391,0.99998981,0,0)"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3352;stroke-linecap:round;stop-opacity:1"
+             id="rect4143-9-6" />
+          <path
+             d="m 793.26153,-1383.2676 h 1.42925 c 0.66504,0 1.20044,0.5464 1.20044,1.2252 v 1.3937 c 0,0.6787 -0.5354,1.2251 -1.20044,1.2251 h -1.42925 c -0.66504,0 -1.20043,-0.5464 -1.20043,-1.2251 v -1.3937 c 0,-0.6788 0.53539,-1.2252 1.20043,-1.2252 z"
+             transform="matrix(1,0,0.00451391,0.99998981,0,0)"
+             style="opacity:1;fill:#a2dc02;fill-opacity:1;stroke-width:11.3352;stroke-linecap:round;stop-opacity:1"
+             id="rect4145-3-0" />
+        </g>
       </g>
     </g>
   </g>

src/index.html

@@ -2,12 +2,23 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>DslakWebsite</title>
+  <title>Dslak | New-media arts</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
   <link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
+
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-54545635-1', 'auto');
+    ga('send', 'pageview');
+
+  </script>
 </head>
-<body>
+<body itemscope itemtype="https://schema.org/WebPage">
   <app-root></app-root>
 </body>
 </html>