css selectors are antichrist

This commit is contained in:
amy 2024-06-25 17:44:17 +03:30
parent bec0aaa263
commit 237d7487ab
4 changed files with 111 additions and 26 deletions

View file

@ -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);

View file

@ -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} />
</>
)
}

View file

@ -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>

View file

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