work on homepage

css/base.css

@@ -462,24 +462,43 @@ object {
             border-bottom: 5rem solid #fff;
             position: absolute;
             z-index: -1; }
-      .wrapper main section .misha_loadmore {
+      @media (min-width: 769px) {
+        .wrapper main section .misha_loadmore {
+          width: 10rem;
+          margin-right: 10rem;
+          align-self: stretch;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          height: 100%; } }
+      .wrapper main section .misha_loadmore a,
+      .wrapper main section .misha_loadmore p {
         font: bold 3rem "Westeinde Caption";
-        color: #000; }
+        color: #fff;
+        -webkit-text-stroke: #000 1px; }
         @media (-webkit-min-device-pixel-ratio: 2.1) {
-          .wrapper main section .misha_loadmore {
-            font-size: 2.5rem !important; } }
+          .wrapper main section .misha_loadmore a,
+          .wrapper main section .misha_loadmore p {
+            font-size: 2rem !important; } }
         @media (min-width: 769px) {
-          .wrapper main section .misha_loadmore {
-            font-size: 5rem; } }
+          .wrapper main section .misha_loadmore a,
+          .wrapper main section .misha_loadmore p {
+            font-size: 3rem; } }
         @media (min-width: 769px) {
-          .wrapper main section .misha_loadmore {
-            border-left: #000 1px solid;
-            padding: 4rem 10rem;
-            align-self: stretch;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            height: 100%; } }
+          .wrapper main section .misha_loadmore a,
+          .wrapper main section .misha_loadmore p {
+            transform-origin: center;
+            white-space: nowrap;
+            width: 100vh;
+            -moz-transform: rotate(-90deg);
+            -o-transform: rotate(-90deg);
+            -ms-transform: rotate(-90deg);
+            -webkit-transform: rotate(-90deg);
+            transform: rotate(-90deg); } }
+
+.touchevents .header-scroll {
+  display: none !important; }
 
 /* -------------------------------------------------------------------------- */
 /*                                  HOMEPAGE                                  */
@@ -570,16 +589,15 @@ object {
         padding-top: 4rem;
         border-right: #000 1px solid;
         /* -------------------------------- thumbnail and title ------------------------------- */
-        /* -------------------------- home article metadata big------------------------- */ }
-        .home main section .home-wrapper-big article::before {
-          content: "<hr>";
-          display: block;
-          height: 1px;
-          width: 100%;
-          background: #000; }
+        /* -------------------------- home article metadata big------------------------- */
+        /* ------------------------- home article big hover ------------------------- */ }
         .home main section .home-wrapper-big article .thumbnailwrapper {
-          height: calc(100% - 4rem); }
-          .home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-thumbnail {
+          height: calc(100% - 4rem);
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          border-top: 1px #000 solid; }
+          .home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-big-thumbnail {
             object-fit: cover;
             width: 50%;
             height: 100%; }
@@ -636,12 +654,19 @@ object {
             display: none;
             display: block;
             border-right: #000 solid 1px; }
+        .home main section .home-wrapper-big article.hovered {
+          width: calc(100vw - (10rem * 2)); }
+          .home main section .home-wrapper-big article.hovered h2 > a {
+            color: #000; }
+    .home main section .home-wrapper-1 article a.thumbnailwrapper {
+      justify-content: flex-end; }
     .home main section .home-wrapper-2 article {
       border-left: #000 1px solid; } }
   @media (min-width: 769px) {
     .home main section .home-wrapper-small {
       width: calc(100vw - (10rem * 3));
       height: calc((100vw - (10rem * 3)) / 3 * 2);
+      flex-shrink: 0;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
@@ -996,14 +1021,21 @@ object {
 
 @media (min-width: 769px) {
   .tag-be.home-big h2 a {
-    color: #00ffb8 !important; }
+    color: #00ffb8; }
+  .tag-be.home-big.hovered {
+    background-color: #00ffb8 !important; }
   .tag-be.home-small .metadata,
   .tag-be.home-small .metadata a {
     color: #000 !important; } }
 
 @media (min-width: 769px) {
   .tag-be.random .thumbnailwrapper > img {
-    clip-path: url(../img/clip/be_desktop.svg); } }
+    -webkit-mask: url(../img/clip/be_desktop.svg);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    mask: url(../img/clip/be_desktop.svg);
+    mask-repeat: no-repeat;
+    mask-size: 100%; } }
 
 .tag-do .metadata {
   color: #ff5f5f !important; }
@@ -1024,14 +1056,21 @@ object {
 
 @media (min-width: 769px) {
   .tag-do.home-big h2 a {
-    color: #ff5f5f !important; }
+    color: #ff5f5f; }
+  .tag-do.home-big.hovered {
+    background-color: #ff5f5f !important; }
   .tag-do.home-small .metadata,
   .tag-do.home-small .metadata a {
     color: #000 !important; } }
 
 @media (min-width: 769px) {
   .tag-do.random .thumbnailwrapper > img {
-    clip-path: url(../img/clip/do_desktop.svg); } }
+    -webkit-mask: url(../img/clip/do_desktop.svg);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    mask: url(../img/clip/do_desktop.svg);
+    mask-repeat: no-repeat;
+    mask-size: 100%; } }
 
 .tag-think .metadata {
   color: #fdff00 !important; }
@@ -1052,14 +1091,21 @@ object {
 
 @media (min-width: 769px) {
   .tag-think.home-big h2 a {
-    color: #fdff00 !important; }
+    color: #fdff00; }
+  .tag-think.home-big.hovered {
+    background-color: #fdff00 !important; }
   .tag-think.home-small .metadata,
   .tag-think.home-small .metadata a {
     color: #000 !important; } }
 
 @media (min-width: 769px) {
   .tag-think.random .thumbnailwrapper > img {
-    clip-path: url(../img/clip/think_desktop.svg); } }
+    -webkit-mask: url(../img/clip/think_desktop.svg);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    mask: url(../img/clip/think_desktop.svg);
+    mask-repeat: no-repeat;
+    mask-size: 100%; } }
 
 .tag-love .metadata {
   color: #3c00ff !important; }
@@ -1080,14 +1126,21 @@ object {
 
 @media (min-width: 769px) {
   .tag-love.home-big h2 a {
-    color: #3c00ff !important; }
+    color: #3c00ff; }
+  .tag-love.home-big.hovered {
+    background-color: #3c00ff !important; }
   .tag-love.home-small .metadata,
   .tag-love.home-small .metadata a {
     color: #000 !important; } }
 
 @media (min-width: 769px) {
   .tag-love.random .thumbnailwrapper > img {
-    clip-path: url(../img/clip/love_desktop.svg); } }
+    -webkit-mask: url(../img/clip/love_desktop.svg);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    mask: url(../img/clip/love_desktop.svg);
+    mask-repeat: no-repeat;
+    mask-size: 100%; } }
 
 @media (min-width: 769px) {
   .single .tag-be .metadata {