From 7eeca405d48c24b45460af65b1cd4b44a8ab93ac Mon Sep 17 00:00:00 2001
From: Dslak <dslaky@gmail.com>
Date: Wed, 2 Dec 2020 19:04:40 +0100
Subject: [PATCH] new portfolio grid style

add favicon
---
 angular.json                               |   2 +-
 src/app/about/about.component.scss         |   2 +-
 src/app/app-layout/app-layout.component.ts |   2 +-
 src/app/detail/detail.component.scss       |   2 +-
 src/app/portfolio/portfolio.component.html |   2 +-
 src/app/portfolio/portfolio.component.scss |  56 +++++++++++++++------
 src/assets/images/favicon.png              | Bin 0 -> 1488 bytes
 src/assets/scss/variables.scss             |   4 +-
 src/favicon.ico                            | Bin 948 -> 0 bytes
 src/favicon.png                            | Bin 0 -> 1488 bytes
 src/index.html                             |   2 +-
 11 files changed, 48 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/images/favicon.png
 delete mode 100644 src/favicon.ico
 create mode 100644 src/favicon.png

diff --git a/angular.json b/angular.json
index 52df64f..48a4209 100644
--- a/angular.json
+++ b/angular.json
@@ -24,7 +24,7 @@
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": [
-              "src/favicon.ico",
+              "src/assets/images/favicon.png",
               "src/assets"
             ],
             "styles": [
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss
index 24c9086..a0eb681 100644
--- a/src/app/about/about.component.scss
+++ b/src/app/about/about.component.scss
@@ -64,7 +64,7 @@
       border: none;
       padding: 0;
       font-size: $font-40;
-      color: $white-alpha;
+      color: $black-alpha;
       background: transparent;
       cursor: pointer;
       transition: transform .3s;
diff --git a/src/app/app-layout/app-layout.component.ts b/src/app/app-layout/app-layout.component.ts
index 83ed410..7174112 100644
--- a/src/app/app-layout/app-layout.component.ts
+++ b/src/app/app-layout/app-layout.component.ts
@@ -97,6 +97,6 @@ export class AppLayoutComponent implements OnInit {
 
 
   particlesLoaded(container: Container): void {
-    console.log('particlesLoaded', container)
+    //console.log('particlesLoaded', container)
   }
 }
diff --git a/src/app/detail/detail.component.scss b/src/app/detail/detail.component.scss
index 0df604d..6900e99 100644
--- a/src/app/detail/detail.component.scss
+++ b/src/app/detail/detail.component.scss
@@ -41,7 +41,7 @@
       border: none;
       padding: 0;
       font-size: $font-40;
-      color: $white-alpha;
+      color: $black-alpha;
       background: transparent;
       cursor: pointer;
       transition: transform .3s;
diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html
index 546cba5..3f9d61a 100644
--- a/src/app/portfolio/portfolio.component.html
+++ b/src/app/portfolio/portfolio.component.html
@@ -1,7 +1,7 @@
 <div class="component-portfolio">
   <div class="container">
     <div class="row">
-      <div class="col-12 col-sm-6 col-md-4 col-lg-3" *ngFor="let item of portfolioItems">
+      <div class="col-12 col-sm-6 mx-auto" [ngClass]="'col-md-' + ((item.id % 3)+3)" *ngFor="let item of portfolioItems">
         <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)">
           <img class="image" src="assets/{{item.image}}">
           <div class="text">
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss
index 554c6d3..a0965c4 100644
--- a/src/app/portfolio/portfolio.component.scss
+++ b/src/app/portfolio/portfolio.component.scss
@@ -6,13 +6,15 @@
   .box {
     position: relative;
     display: flex;
-    background: $black;
+    //background: $black-alpha;
     border-radius: 10px;
     overflow: hidden;
-    margin: 20px 0;
-    padding: 20px;
+    margin: 10px 0;
+    padding: 40px 20px;
+    min-height: 250px;
     cursor: pointer;
-    transition: transform .4s;
+    transition: transform .4s, background .4s;
+    -webkit-backface-visibility: hidden;
 
     .image {
       position: absolute;
@@ -21,9 +23,11 @@
       height: 100%;
       width: 100%;
       object-fit: cover;
-      transform: translate(-50%, -50%);
-      transition: transform .4s;
+      transform: translate(-50%, -50%) scale(1.2);
       opacity: .5;
+      filter: grayscale(100%) invert(100%);
+      transition: transform .4s, opacity .4s, filter .4s;
+      -webkit-backface-visibility: hidden;
       z-index: 0;
     }
 
@@ -32,47 +36,67 @@
       margin: auto;
       text-align: center;
       transform: translate(0%, 0%);
+      color: $black;
+      transition: color .4s;
+      -webkit-backface-visibility: hidden;
       z-index: 1;
 
       .title {
         display: block;
-        color: $white;
-        font-size: $font-24;
+        font-size: $font-20;
         text-transform: uppercase;
         font-weight: bold;
       }
 
       .type {
         display: block;
-        color: $white;
-        font-size: $font-18;
+        font-size: $font-16;
         font-weight: bold;
       }
 
       .tags {
         display: block;
-        color: $white;
-        font-size: $font-14;
+        font-size: $font-12;
         text-transform: uppercase;
         font-weight: bold;
-        padding-top: 20px;
+        padding-top: 10px;
       }
     }
 
     @each $angle in 0,1,2,3,4,5,6 {
-      &.skew-#{$angle} {transform: skew(#{$angle - 3}deg, #{$angle - 3}deg) ;}
+      &.skew-#{$angle} {
+        transform: skew(#{$angle - 3}deg, #{$angle - 3}deg);
+        /*animation: zoom#{$angle} #{$angle + 3}s ease-in infinite forwards;
+        @keyframes zoom#{$angle} {
+          0% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
+          50% { transform: scale(1.1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
+          75% { transform: scale(.9) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
+          100% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
+        }*/
+      }
     }
 
     &:hover {
+      background: $black;
       z-index: 50;
 
+      //animation-play-state: paused;
+
       @each $angle in 0,1,2,3,4,5,6 {
-          &.skew-#{$angle} {transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg) ;}
+        &.skew-#{$angle} {
+          transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg);
         }
+      }
 
       .image {
-        transform: translate(-50%, -50%) scale(1.4);
+        filter: grayscale(100%) invert(0%) brightness(.5);
+        opacity: .9;
+        transform: translate(-50%, -50%) scale(1.6);
+      }
+      .text {
+        color: $yellow;
       }
     }
   }
 }
+
diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d75435d056e6a1e937f63e0e7c67ceab3879cfd
GIT binary patch
literal 1488
zcmV;>1uy!EP)<h;3K|Lk000e1NJLTq001Na001Be1^@s6dXd_W00009a7bBm0003D
z0003D0hXuuPyhe`8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H11zkx*
zK~z|UwU=FN9Mu)ae`og2%<jytvoR!2?8K0m#1w^!wkW8mFSP0hQiTXrkP1>C5J*HI
zDphKwN`0tQQC^CGhZczkKtb&b?Ms1Hg0v~BL=+MbNu0Ea6DPHuIN5dlk+t`8W=<d0
z&U!z*-frCg<GJ_T`Op8JuPgkYp^7~HVtR1mWY3oiv$1>2Wou6<Zw*z7)=(7UJ8?Z5
zmi4D2BcmSy$g<<X6Zn?L9f6P#OphoIXpaa9AReI`1RPaTB6xtSkQUSdl3@A81uKym
zcQ$1&Io`~qo0uMV-0PE$+?Y0PNm~|r+qU9!|NQXM>vHe}KECxk;0d6;=MsXF#q@+j
zcHANRABX92m+ZL1jf{<I=jsjIT|ia1ayE|bY7hmc&){3X27c7ev5<>#?ugIW=Si+!
zaGASiqfzG{ZiJr>0oZY0fuK?)R4Ivx*_9^@u)m%2$l)G7d}9;ET&#Nr4S4dU2|#$`
zz#VmV+tGUraQkYGClB@T{;ONojmR?o{??|Jb~hO<7$6U9Xk5%q+x+#ned|Wz{_oH6
zoo6#dq41micM+7OY0u{ErE}I2p(Y%Ee*<Bq*{NGtrW);5OtGxy$QOaVkIjuOD^v&7
zYV52hPW`Qi%q5qwB9x0((|YefneBTP0s|~IE>4Xm$X)NK0<^`$&tKz9-&g?P>Uozx
z{9@axd$;Z?60?kF6v+$q5{@4AZ<!2$pALv8t0|tmEo{5Df4B&uz9mFWSGHb+G+G&h
z?JH*gt|A)Y8HB}^d*?GYnM>}v5IX$!?R@r^GywVe=D1l#%vSn#mQYd8pi-yM*(2Sn
zGca7>@n2p+mV^ld;mscpt{IPgJBq|?MHSzul9v_Ap8qu2HKBM)Nu=sy#YwE)WBP|n
z0EpmONG;2Xixv~76I~N()!(FpQr5q_u(TP^k`;C6!f~H4=)M?6EfT4d=HI`&s*oz4
z5h1@kGK?PW?z)n_0m<HgQo-WgU-biUeZnCMh53x#*4OnzHujeR5b#W-<OPUA;lgL$
zs*Zj-;Dv)@NJFxm{y0Sx2={*LMxFiO&$cspX6@_m-(9L*tKwUt)hio6m7uh^`iNl}
zZ6X6;ySifTtU;u+No`=bxWY+2gUBK%qYc^h<VzFu?Wjtr3V(WWYwHt5Z)sTDx*X5|
zif=^8t29^VRBw2*>;pLQ)_*M0eRe@DpsPNXXRuhzj8(_dm1vxeb(IeY@Q-(D6?qw%
zi)&Z=4Vx?Y>7e!v)H9Jv{#=XRHTkbNm8CHuiePrq;rBn^hBSm(ZrYIET;aP1vZ%s)
zuk<lJ-dXDz7%nxMd?QhiKYy$_-9LD(Ho88ze}?Zpca494k|JhDeEXT~&9zeA;)B<=
zu;s35a3(i~OpkZOhb_AbjV8~0@lo2F8jZJg+;&faJMYUgpEb-)IdyAJJmT7z%aK3!
z0x)ygX>~+PG%2Kb=J=n}d)La6Pu}fi^k|Z)^DaBT(lD(E%ud-HetXroLQ5o4Ap>_e
zC?xo1Va6F;%X#ul;%1Q>+*5x@{mj!j_U@a-iZx~qi>4ef_P-o-{Jo8wJXD*vqb_>i
z&adYA`VVHC>?$0Rp`oG8$)4DiQo&lkm*6UJ{g4M9o#VmBXPVW4&ozu55rBP94gBQX
zvE<9$K6^wUo(eUQiUQXU!nm)+L@F#Ll40KQqJ>0Hm{0drt`2=|@v?C>Cqho4Y$5YN
zG172!aFSyWJw#3KhkrQm&H1eJaxUxa4g+zF6D=4=bH>)0n5}cRtut6;Vs>~v7L!Sh
qG3CU$I&nfSj*MK)0=LjWYWOc$;1V8B_ltG_0000<MNUMnLSTaYsobFe

literal 0
HcmV?d00001

diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
index a6189e7..12602c7 100644
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@@ -4,14 +4,14 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px
+  xl: 1440px
 );
 
 $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px
+  xl: 1418px
 );
 
 $grid-columns:        12;
diff --git a/src/favicon.ico b/src/favicon.ico
deleted file mode 100644
index 997406ad22c29aae95893fb3d666c30258a09537..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 948
zcmV;l155mgP)<h;3K|Lk000e1NJLTq000~S0015c1^@s6KgE8Z00009a7bBm000XT
z000XT0n*)m`~Uz0W=TXrR7i=HS4&J2Q53!N>CBYU7IjCFmI-B}4sMJt3^s9NVg!P0
z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht
z%t<DF^WJ^$%)N8(nOiE8$$(XeL8%@9luMqDd3cT+XIb_^YH{kU)iX>9#h|nu0K(bJ
ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E
z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ
zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(<Bkhw>~2>G
z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf
z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow
zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sY<UH^*#NTt${
zNF)_f745C&UQ!hOL6J5wC>a(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU
z3LTTBtjwo`7(<AJG9luHgaE%Npo+H`lp+AIM{k6MKJszc@DM%lod&8TCER*o(XXcC
z8&nVTCXT+)%}_`PXo^}PJ?sF0i+ZEcPp`Gw`||ahk}N7#R#vq!${S`X0z(`KO6v$+
zMMZ<lOR*4Z^w4CXBMvpS<Pee{U^01BA?Uh&H@~OZ--v#JEQN=UdUMG1z|8D<@>HA6
z7gmO$yTR!5L>Bsg!X8616{JUngg_<CkvB3~uoT|Ddv8jJB0!diUI=K4ehj*vX2h(Q
zAz{=+<pcIMznABWNDpCr>@&85%>W=<KFI{w!MTfFH&rswzr*pd&s_k3#Fq-Gj~P%^
zungQTS7mB(`UGii*a&Ca#w!4DJm0!eNS%W4gXg%tYFns>mChTR;x4`P=?PJ~oPuy5
zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0
WcZ@i?LyX}70000<MNUMnLSTXxWwRmx

diff --git a/src/favicon.png b/src/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d75435d056e6a1e937f63e0e7c67ceab3879cfd
GIT binary patch
literal 1488
zcmV;>1uy!EP)<h;3K|Lk000e1NJLTq001Na001Be1^@s6dXd_W00009a7bBm0003D
z0003D0hXuuPyhe`8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H11zkx*
zK~z|UwU=FN9Mu)ae`og2%<jytvoR!2?8K0m#1w^!wkW8mFSP0hQiTXrkP1>C5J*HI
zDphKwN`0tQQC^CGhZczkKtb&b?Ms1Hg0v~BL=+MbNu0Ea6DPHuIN5dlk+t`8W=<d0
z&U!z*-frCg<GJ_T`Op8JuPgkYp^7~HVtR1mWY3oiv$1>2Wou6<Zw*z7)=(7UJ8?Z5
zmi4D2BcmSy$g<<X6Zn?L9f6P#OphoIXpaa9AReI`1RPaTB6xtSkQUSdl3@A81uKym
zcQ$1&Io`~qo0uMV-0PE$+?Y0PNm~|r+qU9!|NQXM>vHe}KECxk;0d6;=MsXF#q@+j
zcHANRABX92m+ZL1jf{<I=jsjIT|ia1ayE|bY7hmc&){3X27c7ev5<>#?ugIW=Si+!
zaGASiqfzG{ZiJr>0oZY0fuK?)R4Ivx*_9^@u)m%2$l)G7d}9;ET&#Nr4S4dU2|#$`
zz#VmV+tGUraQkYGClB@T{;ONojmR?o{??|Jb~hO<7$6U9Xk5%q+x+#ned|Wz{_oH6
zoo6#dq41micM+7OY0u{ErE}I2p(Y%Ee*<Bq*{NGtrW);5OtGxy$QOaVkIjuOD^v&7
zYV52hPW`Qi%q5qwB9x0((|YefneBTP0s|~IE>4Xm$X)NK0<^`$&tKz9-&g?P>Uozx
z{9@axd$;Z?60?kF6v+$q5{@4AZ<!2$pALv8t0|tmEo{5Df4B&uz9mFWSGHb+G+G&h
z?JH*gt|A)Y8HB}^d*?GYnM>}v5IX$!?R@r^GywVe=D1l#%vSn#mQYd8pi-yM*(2Sn
zGca7>@n2p+mV^ld;mscpt{IPgJBq|?MHSzul9v_Ap8qu2HKBM)Nu=sy#YwE)WBP|n
z0EpmONG;2Xixv~76I~N()!(FpQr5q_u(TP^k`;C6!f~H4=)M?6EfT4d=HI`&s*oz4
z5h1@kGK?PW?z)n_0m<HgQo-WgU-biUeZnCMh53x#*4OnzHujeR5b#W-<OPUA;lgL$
zs*Zj-;Dv)@NJFxm{y0Sx2={*LMxFiO&$cspX6@_m-(9L*tKwUt)hio6m7uh^`iNl}
zZ6X6;ySifTtU;u+No`=bxWY+2gUBK%qYc^h<VzFu?Wjtr3V(WWYwHt5Z)sTDx*X5|
zif=^8t29^VRBw2*>;pLQ)_*M0eRe@DpsPNXXRuhzj8(_dm1vxeb(IeY@Q-(D6?qw%
zi)&Z=4Vx?Y>7e!v)H9Jv{#=XRHTkbNm8CHuiePrq;rBn^hBSm(ZrYIET;aP1vZ%s)
zuk<lJ-dXDz7%nxMd?QhiKYy$_-9LD(Ho88ze}?Zpca494k|JhDeEXT~&9zeA;)B<=
zu;s35a3(i~OpkZOhb_AbjV8~0@lo2F8jZJg+;&faJMYUgpEb-)IdyAJJmT7z%aK3!
z0x)ygX>~+PG%2Kb=J=n}d)La6Pu}fi^k|Z)^DaBT(lD(E%ud-HetXroLQ5o4Ap>_e
zC?xo1Va6F;%X#ul;%1Q>+*5x@{mj!j_U@a-iZx~qi>4ef_P-o-{Jo8wJXD*vqb_>i
z&adYA`VVHC>?$0Rp`oG8$)4DiQo&lkm*6UJ{g4M9o#VmBXPVW4&ozu55rBP94gBQX
zvE<9$K6^wUo(eUQiUQXU!nm)+L@F#Ll40KQqJ>0Hm{0drt`2=|@v?C>Cqho4Y$5YN
zG172!aFSyWJw#3KhkrQm&H1eJaxUxa4g+zF6D=4=bH>)0n5}cRtut6;Vs>~v7L!Sh
qG3CU$I&nfSj*MK)0=LjWYWOc$;1V8B_ltG_0000<MNUMnLSTaYsobFe

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
index ccc6ae8..b5d7d53 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
   <title>DslakWebsite</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
 </head>
 <body>
   <app-root></app-root>