fine tuning

src/app/about/about.component.scss

@@ -1,8 +1,6 @@
 @import "../../assets/scss/variables";
 
 .component-about {
-  z-index: 0;
-
   .content {
     position: relative;
     margin: 150px auto 80px auto;
@@ -13,6 +11,8 @@
     color: $black;
     box-shadow: 0px 0px 25px $white-alpha;
     border-radius: 10px;
+    z-index: 1;
+
 
     .about-links {
       color: $black;

src/app/detail/detail.component.html

@@ -4,6 +4,12 @@
       <button class="back icon-back" (click)="back()"></button>
       <h2 class="title">{{details.title}}</h2>
 
+      <div class="date-container" *ngIf="section == 'exhibitions'">
+        <span class="date-indication" *ngIf="details.date_from != details.date_to">from</span>
+        <span class="date-indication" *ngIf="details.date_from == details.date_to">on</span>
+        <span class="date">{{details.date_from | date}}</span>
+        <span class="date" *ngIf="details.date_from != details.date_to"> <span class="date-indication">to</span> {{details.date_to | date}}</span>
+      </div>
 
       <div class="row no-gutters gallery" *ngIf="galleryImages.length">
         <div class="col-12" *ngFor="let image of galleryImages; let i = index"
@@ -12,19 +18,12 @@
                           'col-md-3': galleryImages.length >= 3}">
           <div class="gallery-container">
             <span class="gallery-title">{{image.title}}</span>
-            <img class="image" *ngIf="loadedImages[i]" src="/assets/images/loader.webp" alt="loading">
+            <img class="image" *ngIf="loadedImages[i]" src="/assets/images/loader.svg" alt="loading">
             <img class="image" [hidden]="loadedImages[i]" (load)="onLoad(i)" [src]="image.url" (click)="openGallery(i)">
           </div>
         </div>
       </div>
 
-      <div class="date-container" *ngIf="section == 'exhibitions'">
-        <span class="date-indication" *ngIf="details.date_from != details.date_to">from</span>
-        <span class="date-indication" *ngIf="details.date_from == details.date_to">on</span>
-        <span class="date">{{details.date_from | date}}</span>
-        <span class="date" *ngIf="details.date_from != details.date_to"> <span class="date-indication">to</span> {{details.date_to | date}}</span>
-      </div>
-
       <div class="text" [innerHTML]="details.content"></div>
 
       <div class="row videos" *ngIf="details.videos && details.videos.length">

src/app/detail/detail.component.scss

@@ -1,7 +1,6 @@
 @import "../../assets/scss/variables";
 
 .component-detail {
-  z-index: 0;
 
   .content {
     position: relative;
@@ -11,6 +10,7 @@
     color: $black;
     box-shadow: 0px 0px 25px $white-alpha;
     border-radius: 10px;
+    z-index: 1;
 
     .title {
       margin: 0;

src/app/home/home.component.html

@@ -3,7 +3,7 @@
   <button class="goto-next" (click)="scroll('next')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
   <div class="content" #scrollContent>
     <div [ngClass]="'slide-' + item.width" *ngFor="let item of homeItems">
-      <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)" (mouseover)="paused=true">
+      <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)" (mouseover)="paused=true" (mouseout)="paused=false">
         <img class="image" *ngIf="item.loading" src="/assets/images/loader.webp" alt="loading">
         <img class="image" [hidden]="item.loading" (load)="onLoad(item.id)" [src]="basePath+item.image">
         <div class="text">

src/app/home/home.component.scss

@@ -5,6 +5,7 @@
   padding-top: 100px;
   height: 100vh;
   transform: skew(-15deg) rotate(-15deg);
+  z-index: 1;
 
   .goto-prev,
   .goto-next {
@@ -19,6 +20,7 @@
     margin: 0;
     padding: 5px;
     cursor: pointer;
+    z-index: 2;
 
     .icon {
       &:before {
@@ -30,11 +32,11 @@
     }
   }
   .goto-prev {
-    top: 70px;
+    top: 60px;
     left: 50px;
   }
   .goto-next {
-    bottom: -30px;
+    top: calc(80vh + 10px);
     right: 50px;
     .icon {
       &:before {
@@ -45,7 +47,7 @@
 
   .content {
     display: inline-flex;
-    margin: auto;
+    margin: 0;
     margin-left: -50px;
     //animation: slide 150s linear infinite;
     transition: margin-left .5s;
@@ -60,13 +62,13 @@
       position: relative;
       display: flex;
       background: $black-alpha2;
-      border-radius: 0;
+      border-radius: 5px;
       overflow: hidden;
       margin: auto 0;
       padding: 40px 20px;
       height: calc(80vh - 90px);
-      min-height: 300px;
-      max-height: 700px;
+      min-height: 250px;
+      //max-height: 700px;
       cursor: pointer;
       transform: skew(-6deg, -6deg) rotate(6deg);
       transition: transform .4s, background .4s, opacity .4s;

src/app/home/home.component.ts

@@ -49,6 +49,7 @@ export class HomeComponent implements OnInit {
 
   ngAfterViewInit() {
     setInterval( () => {
+      console.log(this.paused)
       if(!this.paused) {
         const scrollWidth = 300
         const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0
@@ -92,10 +93,6 @@ export class HomeComponent implements OnInit {
         break;
     }
     this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px'
-
-    setTimeout ( () => {
-      this.paused = false
-    }, 2000)
   }
 
 }

src/app/portfolio/portfolio.component.html

@@ -2,7 +2,7 @@
   <div class="row no-gutters row-container">
     <div class="col-12 col-sm-6 mx-auto" [ngClass]="'col-md-' + item.width" *ngFor="let item of portfolioItems">
       <div class="box" (click)="showDetails(item.id)">
-        <img class="loader" *ngIf="item.loading" src="/assets/images/loader.webp" alt="loading">
+        <img class="loader" *ngIf="item.loading" src="/assets/images/loader.svg" alt="loading">
         <img class="image" [hidden]="item.loading" (load)="onLoad(item.id)" [src]="basePath+item.image">
         <div class="text">
           <span class="title">{{item.title}}</span>

src/app/portfolio/portfolio.component.scss

@@ -1,13 +1,15 @@
 @import "../../assets/scss/variables";
 
 .component-portfolio {
-  padding-top: 160px;
+  padding: 160px 0 80px 0;
 
   .row-container {
+    position: relative;
     transform: skew(-2deg, -2deg) rotate(-2deg);
     width: calc(100% - 50px);
     max-width: 1400px;
     margin: auto;
+    z-index: 1;
 
     .box {
       position: relative;
@@ -45,7 +47,6 @@
         height: 100%;
         width: 100%;
         object-fit: cover;
-        filter: invert(100%);
         transform: translate(-50%, -50%);
         z-index: 0;
       }

src/assets/images/loader.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="414px" height="414px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" r="0" fill="none" stroke="#a2dc02" stroke-width="2">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;20" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5s"></animate>
+  <animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5s"></animate>
+</circle>
+<circle cx="50" cy="50" r="0" fill="none" stroke="#ffffff" stroke-width="2">
+  <animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;20" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline"></animate>
+  <animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline"></animate>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>

src/assets/scss/global.scss

@@ -39,5 +39,5 @@ button {
   height: 100vh;
   width: 100vw;
   background: radial-gradient(circle, transparent 0%, transparent 85%, rgba(255,255,255,0.2) 95%, rgba(255,255,255,0.3) 100%);
-  z-index: -1;
+  z-index: 0;
 }