patch

assets/css/patches.css

@@ -13,82 +13,8 @@ a {
     text-decoration: none;
 }
 
-a:hover {
-    opacity: 0.5;
-}
-
-header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    padding: 8px;
-    font-size: 32px;
-
-}
-
-header > * {
-    flex-shrink: 0;
-}
-
-
-
-header .title {
- margin: 0;
- margin-right: 32px;
- font-size: 32px;
- font-weight: normal;
-
-}
-
-.path-slash {
-    margin: 0 4px;
-}
-
-.parent {
-    /* color: rgb(147, 149, 161); */
-}
-
-
-.search {
-    position: relative;
-
-    display: inline-block;
-    height: 32px;
-    margin-left: auto;
-    overflow: hidden;
-    flex: 0 0 32px;
-    transition: flex 0.3s ease-in;
-}
-
-.search:hover{
-    transition: flex 0.6s ease-out;
-    flex: 1 0 auto;
-}
-
-.search svg {
-    width: 32px;
-    height: 32px;
-    padding: 4px;
-    margin: 0;
-}
 
-.search input {
-    border: none;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 32px;
-    outline: none;
-    border-bottom: 1px solid currentColor;
 
-    font-size: 32px;
-
-    padding: 0;
-    padding-left: 4px;
-
-    background: none;
-}
 
 
 
@@ -119,6 +45,7 @@ main {
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 
 
 
@@ -140,6 +67,34 @@ main {
     height: 32px;
 }
 
+.card img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.card .overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    vertical-align: middle;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: grey;
+    opacity: 0;
+}
+
+.card .overlay:hover {
+    opacity: 1;
+}
+
+.card .title {
+    font-weight: normal;
+}
+
 
 
 @media (max-width: 767px){

assets/icons/play.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 13.5L0.749999 26.9234L0.75 0.0766048L24 13.5Z" fill="currentColor"/>
+</svg>