Make projects caroussel responsive

1 files changed, 99 insertions, 49 deletions

diff --git a/themes/cranky/layouts/shortcodes/prj.html b/themes/cranky/layouts/shortcodes/prj.html
index 246a8e1..2d7df98 100644
--- a/themes/cranky/layouts/shortcodes/prj.html
+++ b/themes/cranky/layouts/shortcodes/prj.html
@@ -7,55 +7,31 @@
       <div class="emptybar"></div>
       <div class="filledbar"></div>
     </div>
-    <p class="summary">{{ .Summary | truncate 220 "..." }}</p>
+    <p class="summary">
+      {{ .Summary | truncate 220 "..." }}
+    </p>
   </a>
   <!-- End the loop -->
   {{ end }}
 </div>
-<a class="button projects" href="/projects">More Projects</a>
+<a class="button projects" href="/projects">All Projects</a>
 <style>
-  .container {
-    position: relative;
-    height: auto;
-    width: 600px;
-    left: calc(50% - 300px);
-    display: flex;
-    margin-bottom: 30px;
-  }
 
   .card {
     display: flex;
     height: auto;
     width: 230px;
     margin-top: 20px;
-    /* background-color: #222d32; */
+    margin-left: 15px;
+    margin-right: 15px;
     background: linear-gradient(-45deg, #111a1f, #222d32);
     color: var(--text-fg);
     border-radius: 10px;
-    box-shadow: -1rem 0 3rem #000;
-    /* margin-left: -50px; */
     transition: 0.4s ease-out;
     position: relative;
     left: 0px;
   }
 
-  .card:not(:first-child) {
-    margin-left: -50px;
-  }
-
-  .card:hover {
-    box-shadow: 0 0 4rem #554;
-    transform: translateY(-20px);
-    transition: 0.4s ease-out;
-    color: var(--text-fg);
-  }
-
-  .card:hover ~ .card {
-    position: relative;
-    left: 70px;
-    transition: 0.4s ease-out;
-  }
-
   .title {
     color: var(--text-fg);
     font-weight: bold;
@@ -64,21 +40,10 @@
     top: 15px;
   }
 
-  .card:hover > .title {
-    color: var(--header-fg);
-    transition: 0.4s ease-out;
-  }
-
-  .bar {
-    position: absolute;
-    top: 70px;
-    left: 20px;
-    height: 5px;
-    width: 150px;
-  }
-
   .summary {
-    /* position: relative; */
+    text-overflow: ellipsis;
+    height: 230px;
+    width: 210px;
     margin-top: 80px;
     margin-left: 10px;
     margin-right: 10px;
@@ -86,10 +51,12 @@
     left: 20px;
   }
 
-  .emptybar {
-    background-color: #2e3033;
-    width: 100%;
-    height: 100%;
+  .bar {
+    position: absolute;
+    top: 70px;
+    left: 20px;
+    height: 5px;
+    width: 150px;
   }
 
   .filledbar {
@@ -102,10 +69,36 @@
     transition: 0.6s ease-out;
   }
 
-  .card:hover .filledbar {
+  .card .filledbar {
     width: 120px;
     transition: 0.4s ease-out;
   }
+
+  .readmore {
+    bottom: -30px;
+    right: 10px;
+    color: var(--text-fg);
+    font-weight: bold;
+    transition: 0.4s ease-out;
+  }
+
+  .emptybar {
+    background-color: #2e3033;
+    width: 100%;
+    height: 100%;
+  }
+
+  .container {
+    display: flex;
+    flex-wrap: nowrap;
+    margin-bottom: 30px;
+    overflow-x: scroll;
+  }
+
+  .card:hover {
+    color: var(--text-fg);
+  }
+
   /* center the button */
   .projects {
     position: relative;
@@ -113,4 +106,61 @@
     margin-top: 30px;
     margin-bottom: 30px;
   }
+
+@media (hover: hover) {
+
+  .card .filledbar {
+    width: 0px;
+  }
+
+  .card:hover .filledbar {
+    width: 120px;
+    transition: 0.4s ease-out;
+  }
+
+
+  @media (min-width: 730px) {
+
+    .card {
+      box-shadow: -1rem 0 3rem #000;
+    }
+
+    .container {
+      position: relative;
+      height: auto;
+      width: 600px;
+      left: calc(50% - 300px);
+      display: flex;
+      overflow-x: visible;
+
+    }
+
+    .card:not(:first-child) {
+      margin-left: -50px;
+    }
+
+    .card:hover {
+      box-shadow: 0 0 4rem #554;
+      transform: translateY(-20px);
+      transition: 0.4s ease-out;
+      color: var(--text-fg);
+    }
+
+    .card:hover ~ .card {
+      position: relative;
+      left: 70px;
+      transition: 0.4s ease-out;
+    }
+
+    .card:hover > .title {
+      color: var(--header-fg);
+      transition: 0.4s ease-out;
+    }
+
+    .readmore {
+      display: none;
+    }
+
+  }
+}
 </style>