From eb056ccc0a04f2ac5f093906ff230f389c3c2b09 Mon Sep 17 00:00:00 2001
From: MarsGotBars <marcinm@live.nl>
Date: Wed, 4 Sep 2024 09:39:55 +0200
Subject: [PATCH] slight adjustments

adjustment to hovers (in progress)

added small filter

changed px valuees to rem

removed unnecessary
---
 src/components/card/Card.jsx |  4 +---
 src/components/card/card.css | 45 +++++++++++++++++++++++-------------
 src/main.css                 |  7 +++---
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/components/card/Card.jsx b/src/components/card/Card.jsx
index e54ab8e..7043104 100644
--- a/src/components/card/Card.jsx
+++ b/src/components/card/Card.jsx
@@ -10,9 +10,7 @@ export default function Card() {
   return (
     <main>
       <div className="container">
-        <div>
-          <button aria-label="zie meer"></button>
-        </div>
+        <button aria-label="zie meer"></button>
         <figure>
           <img src="./ik.jpeg" alt="Marcin Magdziak" />
           <figcaption>
diff --git a/src/components/card/card.css b/src/components/card/card.css
index 61c6cfb..7f06d04 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -45,6 +45,7 @@ img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  filter: grayscale(0.7);
 }
 
 figcaption {
@@ -58,42 +59,54 @@ figcaption {
   z-index: 2;
 }
 
+figure:hover, figcaption:hover button, figure:hover button, figure:hover figcaption::after {
+  background: rgba(var(--text), 1);
+  color: rgba(var(--secondary), 1)
+}
+
+main:hover img {
+  filter: grayscale(0);
+}
+
 .container > div {
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  right: 0;
+  
   background: rgba(var(--primary), 1);
   height: 3vw;
   width: 3vw;
-  min-height: 40px;
-  min-width: 40px;
+  
   display: grid;
-  place-content: center;
   transform: translate(-0.625rem, var(--sm-spacing));
 }
 
 button {
-  height: 100%;
-  width: 100%;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  min-height: 2.5rem;
+  min-width: 2.5rem;
+  border: none;
+  height: 3.3vw;
+  width: 3.3vw;
   background-color: rgba(var(--primary), 1);
 }
 
+button:hover{
+  background: rgba(var(--text), 1);
+}
 button::before{
   content: "";
-  padding: 5px;
+  aspect-ratio: 1;
+  width: .75em;
   display: inline-block;
   border: solid rgba(var(--text), 1);
-  border-width: 0 3px 3px 0;
+  border-width: 0 0.1875rem 0.1875rem 0;
   transition: ease 200ms;
-  transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
+  transform: translateX(-0.1875rem) rotate(-45deg);
 }
 
 button:hover::before{
-  border-color: red;
+  border-color: rgba(var(--secondary));
 }
 
 h1 {
diff --git a/src/main.css b/src/main.css
index dbf7a79..70bf038 100644
--- a/src/main.css
+++ b/src/main.css
@@ -43,16 +43,15 @@ body {
   margin: 0;
   display: grid;
   place-content: center;
-  min-width: 320px;
+  min-width: 20rem;
   min-height: 100vh;
   background: url("/bg-texture.png");
 
 }
 
 button {
-  display: flex;
-  border: 1px solid transparent;
-  /* padding: 0.6em 1.2em; */
+  display: grid;
+  place-content: center;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;