Update style.css

shaynjay · Jan 26, 2021 · 65feba9 · 65feba9
1 parent ef8f440
commit 65feba9
Showing 1 changed file with 67 additions and 47 deletions.
diff --git a/style.css b/style.css
@@ -4,70 +4,91 @@ body {
   perspective: 2000px;
   display: flex;
   justify-content: center;
-} 
+}
 label .cardWrapper {
   position: relative;
   height: 40vmin;
   width: calc(40vmin / 1.4);
-  background-color: deeppurple;
-  background-image: hierophant-thoth_tarot-684x1024.jpg;(
+  background-color: royalblue;
+  background-image: repeating-linear-gradient(
       120deg,
+      rgba(255, 0, 0, 0.5),
+      rgba(255, 0, 0, 0.5) 1px,
+      transparent 1px,
+      transparent 60px
+    ),
+    repeating-linear-gradient(
+      60deg,
+      rgba(255, 0, 0, 0.5),
+      rgba(255, 0, 0, 0.5) 1px,
       transparent 1px,
       transparent 60px
-     },
-     hierophant-thoth_tarot-684x1024.jpg;
-     60deg,
-     transpartent 1px,
-     transparent 60px,
-       background-size: 70px 120px;
+    ),
+    linear-gradient(
+      60deg,
+      rgba(0, 0, 0, 0.1) 25%,
+      transparent 25%,
+      transparent 75%,
+      rgba(0, 0, 0, 0.1) 75%,
+      rgba(0, 0, 0, 0.1)
+    ),
+    linear-gradient(
+      120deg,
+      rgba(0, 0, 0, 0.1) 25%,
+      transparent 25%,
+      transparent 75%,
+      rgba(0, 0, 0, 0.1) 75%,
+      rgba(0, 0, 0, 0.1)
+    );
+  background-size: 70px 120px;
   margin: calc(40vmin / 10);
   border-radius: calc(40vmin / 20);
   box-shadow: 0 calc(40vmin / 40) calc(40vmin / 10) 0 rgba(0, 0, 0, 0.2);
   overflow: hidden;
   float: left;
   transition: transform 200ms linear, box-shadow 100ms linear;
   transform: rotateY(0deg);
-  }
-  input:checked + label.cardWrapper {
-    transform: rotateY(0deg);
-  }
-  .cardRandom {
-   width: 100%;
-   height: 100%;
-   background-color: white;
-   opacity: 1;
-   cursor: pointer;
-   transisition: opacity 1ms linear 100ms;
-   }
-   .cardWrapper:hover {
-     filter: brightness(0.98);
-   }  
-   input:focus + label .cardWrapper {
-     box-shadow: 0 0 calc(40vmin / 100) 0 rgba(0, 0, 0, 0.5);
 }
-   input:checked + label .cardRandom {
-     opacity: 0;
+input:checked + label .cardWrapper {
+  transform: rotateY(180deg);
 }
-  .cardRandom::before {
-    content: "shaynjay/cards/index/z/mycards";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-image: url(https://github.com/shaynjay/cards/index/z/mycards);
-    background-size: cover;
-    animation: randomCard 1000ms steps(24, end) infinite;
-    animation-play-state: paused;
-    transform: rotate(180deg);
+.cardRandom {
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  opacity: 1;
+  cursor: pointer;
+  transition: opacity 1ms linear 100ms;
+}
+.cardWrapper:hover {
+  filter: brightness(0.98);
+}
+input:focus + label .cardWrapper {
+  box-shadow: 0 0 calc(40vmin / 100) 0 rgba(0, 0, 0, 0.5);
+}
+input:checked + label .cardRandom {
+  opacity: 0;
+}
+.cardRandom::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url(https://assets.codepen.io/2722301/cards.jpg);
+  background-size: cover;
+  animation: randomCard 1000ms steps(77, end) infinite;
+  animation-play-state: paused;
+  transform: rotate(180deg);
 }
-    input:checked + label .cardRandom::before {
-     animation-play-state: running;
+input:checked + label .cardRandom::before {
+  animation-play-state: running;
 }
-   input {
-   height: 0;
-   width: 0;
-   border: none;
-   outline: none;
-   display: none;
+input {
+  height: 0;
+  width: 0;
+  border: none;
+  outline: none;
+  display: none;
 }
 @keyframes randomCard {
   0% {
@@ -88,4 +109,3 @@ label .cardWrapper {
 .linkElement:hover {
   filter: hue-rotate(-45deg);
 }
-