css selectors are antichrist

src/App.css

@@ -18,6 +18,11 @@
   height: 18em;
 }
 
+.cardchild:hover + .actualreviewdiv {
+  transition: 1s;
+  transform: rotateY(100);
+}
+
 .header {
   margin-top: 2em;
   display: flex;
@@ -34,6 +39,21 @@
   text-align: center;
 }
 
+.reviewheadertext {
+  margin-bottom: -.2em;
+}
+
+.cardchild p {
+  margin-bottom: -1.5em;
+}
+.cardchild a {
+  font-size: 1.5em;
+  text-align: center;
+  color: pink;
+  text-decoration: underline;
+  margin-bottom: 0%;
+  animation: spawntop 1s;
+}
 .cardchild span {
   font-size: 1.5em;
 }
@@ -47,24 +67,52 @@
   display: none;
 }
 
-.cardchild {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
 /* CAN BROWSERS JUST AGREE ON ONE FUCKING THING */
 
 .cardchild {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
   cursor: default;
   background-color: #272525;
   border-radius: 5%;
   width: 25em;
   height: 25em;
+  margin-top: 1em;
   padding: 0.5em 5em 2em 5em;
   transform: translateY(-0em);
   transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
 }
 
+.theeaster {
+  color: pink;
+  padding: 8px;
+  font-size: 21px;
+  text-align: center;
+  border-width: 0;
+  background-color: #5555557a;
+  border-style: solid;
+  border-radius: 11px;
+}
+
+.theeaster:focus {
+  border-color: pink;
+  box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+  -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+  -moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+  transition: .5s;
+}
+
+.easteregg {
+  display: flex;
+  justify-content: center;
+}
+
+.easteregginner {
+  width: 70%;
+  background-color: #272525;
+  height: 10em;
+}
+
 .cardchild:hover {
   box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
   -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
@@ -84,9 +132,16 @@
   cursor: pointer;
 }
 
+.singlereview img {
+  border-radius: 12%;
+}
+
 .singlereview {
+  margin: 1em;
+  border-radius: 3%;
+  background-color: #00000040;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .reviewinfo {
@@ -95,6 +150,7 @@
 }
 
 .reviewname {
+  margin-bottom: 0.1em;
   font-weight: bolder;
 }
 
@@ -178,6 +234,17 @@
   }
 }
 
+@keyframes spawntop {
+  0% {
+    opacity: 0%;
+    transform: translateY(100em);
+  }
+  100% {
+    opacity: 100%;
+    transform: translateY(0);
+  }
+}
+
 @keyframes shake {
   0% {
     transform: translate(0, 0) rotate(0deg);

src/App.tsx

@@ -3,6 +3,7 @@ import HoverComponent from './components/name.tsx'
 import AdvancedBr from './components/comps.tsx'
 import { createSignal } from 'solid-js';
 import Reviews from './components/api.tsx';
+export const [ishover, setishover]= createSignal(false)
 function App() {
   function remov() {
     for (let i = 0; i < document.styleSheets.length; i++) {
@@ -65,14 +66,20 @@ function App() {
           <span>silly goober who does silly stuff <br /> self proclaimed programmer and progamer <br /> shitposts for fun</span>
         </div>
 
-        <div style={{
+        <div
+        onMouseEnter={()=> {setishover(true)}}
+        onmouseleave={() => {setishover(false)}}
+        style={{
           opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
         }} class='cardchild'>
-          <h1>reviews</h1>
+          <Reviews />
-          <Reviews/>
         </div>
       </div>
-      <AdvancedBr count={10} />
+      <AdvancedBr count={2}/>
+      <div class='easteregg'>
+          <input type="text" name="bals?"  class='theeaster'/>
+      </div>
+      <AdvancedBr count={3} />
     </>
   )
 }

src/components/api.tsx

@@ -1,4 +1,5 @@
 import { createSignal, onMount } from "solid-js"
+import { ishover } from "../App";
 
 interface Review {
     reviewID: number;
@@ -12,6 +13,7 @@ interface NeoReview extends Review {
     username: string
 }
 
+
 export default function Reviews() {
     const [reviews, setReviews] = createSignal<NeoReview[]>([]);
     onMount(() => {
@@ -39,7 +41,15 @@ export default function Reviews() {
 
 
     return (
-        <div class="actualreviewdiv">
+        <>
+            <a style={{
+                display: ishover() ? "inline" : "none" 
+            }} href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Freview.exhq.dev%2F&scope=identify">
+                <p>add your reviews here</p>
+            </a>
+            <h1 class="reviewheadertext">Reviews</h1>
+            <div
+                class="actualreviewdiv">
                 {reviews().length > 0 ? (
                     reviews().reverse().map((review) => (
                         <div>
@@ -50,16 +60,17 @@ export default function Reviews() {
                     <div>Loading reviews...</div>
                 )}
             </div>
+        </>
+
     )
 }
 
 
 function SingleReview(props: NeoReview) {
-    console.log(props.global_name)
     return <div class="singlereview">
         <img src={`https://dp.nea.moe/avatar/${props.discordID}.png`} />
         <div class="reviewinfo">
-            <div class="reviewname"> {props.global_name === null? props.username : props.global_name} </div>
+            <div class="reviewname"> {props.global_name === null ? props.username : props.global_name} </div>
             <div class="reviewtext"> {props.reviewText}</div>
         </div>
     </div>

src/components/name.tsx

@@ -20,7 +20,6 @@ function HoverComponent() {
   };
   
   const handleMouseEnter = () => {
-    removethething()
     startTimer();
   };
 
@@ -31,8 +30,9 @@ function HoverComponent() {
   return (
     <h1
       class="removethisinstantly"
-      onMouseEnter={handleMouseEnter} 
+      // disabled because uhh uhmm
-      onMouseLeave={clearTimer} 
+      onMouseEnter={removethething} 
+      // onMouseLeave={clearTimer} 
     >
       {name() ? "ECHO" : "exhq"}
     </h1>