dslak
/
dslak_website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

oblique home

hotfix/class_typo
Dslak 5 years ago
parent
36d86ad840
commit
43b6c9c096
5 changed files with 18 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/apis/index.php
  2. 10
      src/app/app-layout/app-layout.component.html
  3. 3
      src/app/app-layout/app-layout.component.scss
  4. 23
      src/app/home/home.component.scss
  5. 2
      src/index.html

2
src/apis/index.php
View File

@ -15,7 +15,7 @@ if(isset($_GET['query'])) {
case "performances": case "performances":
case "workshops": case "workshops":
if($_GET['query'] == 'portfolio') {$filter = '';} else {$filter = "WHERE type='".$_GET['query']."'";} 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"); $qe = mysqli_query($conn,"SELECT * FROM `works` $filter $order");
if(mysqli_num_rows($qe) > 0) { if(mysqli_num_rows($qe) > 0) {
$content = null; $content = null;

10
src/app/app-layout/app-layout.component.html
View File

@ -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>

3
src/app/app-layout/app-layout.component.scss
View File

@ -0,0 +1,3 @@
main {
overflow: hidden;
}

23
src/app/home/home.component.scss
View File

@ -4,11 +4,12 @@
display: flex; display: flex;
padding-top: 100px; padding-top: 100px;
height: 100vh; height: 100vh;
transform: skew(-15deg) rotate(-15deg);
.content { .content {
display: inline-flex; display: inline-flex;
margin: auto; 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 { @each $width in 1,2,3,4,5,6 {
.slide-#{$width} { .slide-#{$width} {
@ -28,7 +29,8 @@
min-height: 300px; min-height: 300px;
max-height: 700px; max-height: 700px;
cursor: pointer; cursor: pointer;
transition: transform .4s, background .4s;
transform: skew(-6deg, -6deg) rotate(6deg);
transition: transform .4s, background .4s, opacity .4s;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
.image { .image {
@ -39,7 +41,7 @@
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: .5;
opacity: .8;
filter: grayscale(100%) contrast(3); filter: grayscale(100%) contrast(3);
transition: opacity .4s, filter .4s; transition: opacity .4s, filter .4s;
-webkit-backface-visibility: hidden; -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 { &:hover {
background: $black; background: $black;
transform: scale(1.4) rotate(14deg) skew(14deg, 0deg);
z-index: 50; 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 { .image {
filter: grayscale(0%); filter: grayscale(0%);
opacity: .5; opacity: .5;
@ -134,6 +125,6 @@
@keyframes slide { @keyframes slide {
0% {transform: translateX(-100%) translateX(100vw);} 0% {transform: translateX(-100%) translateX(100vw);}
50% {transform: translateX(0%);}
50% {transform: translateX(0%) translateX(-100vw);}
100% {transform: translateX(-100%) translateX(100vw);} 100% {transform: translateX(-100%) translateX(100vw);}
} }

2
src/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>DslakWebsite</title> <title>DslakWebsite</title>
<base href="/"> <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"> <link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
</head> </head>
<body> <body>

Write Preview
Loading…
Cancel
Save