oblique home

5 years ago · 43b6c9c096
5 changed files with 18 additions and 22 deletions
--- a/src/apis/index.php
+++ b/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 id RAND()';} else {$order = "ORDER BY id DESC";}
+      if($_GET['random']) {$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;
--- a/src/app/app-layout/app-layout.component.html
+++ b/src/app/app-layout/app-layout.component.html
@ -1,5 +1,7 @@
-<app-header *ngIf="page != '/admin'"></app-header>
-<router-outlet></router-outlet>
+<main>
+  <app-header *ngIf="page != '/admin'"></app-header>
+  <router-outlet></router-outlet>

-<Particles class="particles" *ngIf="particlesEnabled && page != '/admin'"
-          [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)"></Particles>
+  <Particles class="particles" *ngIf="particlesEnabled && page != '/admin'"
+            [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)"></Particles>
+</main>
--- a/src/app/app-layout/app-layout.component.scss
+++ b/src/app/app-layout/app-layout.component.scss
@ -0,0 +1,3 @@
+main {
+  overflow: hidden;
+}
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@ -4,11 +4,12 @@
  display: flex;
  padding-top: 100px;
  height: 100vh;
+  transform: skew(-15deg) rotate(-15deg);

  .content {
    display: inline-flex;
    margin: auto;
-    animation: slide 120s ease-in-out infinite;
+    animation: slide 200s ease-in-out infinite;

    @each $width in 1,2,3,4,5,6 {
      .slide-#{$width} {
@ -28,7 +29,8 @@
      min-height: 300px;
      max-height: 700px;
      cursor: pointer;
-      transition: transform .4s, background .4s;
+      transform: skew(-6deg, -6deg) rotate(6deg);
+      transition: transform .4s, background .4s, opacity .4s;
      -webkit-backface-visibility: hidden;

      .image {
@ -39,7 +41,7 @@
        width: 100%;
        object-fit: cover;
        transform: translate(-50%, -50%);
-        opacity: .5;
+        opacity: .8;
        filter: grayscale(100%) contrast(3);
        transition: opacity .4s, filter .4s;
        -webkit-backface-visibility: hidden;
@ -102,22 +104,11 @@
        }
      }

-      @each $angle in 0,1,2,3,4,5,6 {
-        &.skew-#{$angle} {
-          //transform: skew(#{$angle - 3}deg, #{$angle - 3}deg) scale(1.2);
-          transform: skew(-6deg, -6deg) rotate(6deg);
-        }
-      }
-
      &:hover {
        background: $black;
+        transform: scale(1.4) rotate(14deg) skew(14deg, 0deg);
        z-index: 50;

-        @each $angle in 0,1,2,3,4,5,6 {
-          &.skew-#{$angle} {
-            transform: scale(1.4) rotate(0deg) skew(0deg, 0deg);
-          }
-        }
        .image {
          filter: grayscale(0%);
          opacity: .5;
@ -134,6 +125,6 @@

@keyframes slide {
  0% {transform: translateX(-100%) translateX(100vw);}
-  50% {transform: translateX(0%);}
+  50% {transform: translateX(0%) translateX(-100vw);}
  100% {transform: translateX(-100%) translateX(100vw);}
 }
--- a/src/index.html
+++ b/src/index.html
@ -4,7 +4,7 @@
  <meta charset="utf-8">
  <title>DslakWebsite</title>
  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <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">
 </head>
 <body>