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; height: 18em;
} }
.cardchild:hover + .actualreviewdiv {
transition: 1s;
transform: rotateY(100);
}
.header { .header {
margin-top: 2em; margin-top: 2em;
display: flex; display: flex;
@ -34,6 +39,21 @@
text-align: center; 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 { .cardchild span {
font-size: 1.5em; font-size: 1.5em;
} }
@ -47,24 +67,52 @@
display: none; display: none;
} }
.cardchild {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* CAN BROWSERS JUST AGREE ON ONE FUCKING THING */ /* CAN BROWSERS JUST AGREE ON ONE FUCKING THING */
.cardchild { .cardchild {
-ms-overflow-style: none;
scrollbar-width: none;
cursor: default; cursor: default;
background-color: #272525; background-color: #272525;
border-radius: 5%; border-radius: 5%;
width: 25em; width: 25em;
height: 25em; height: 25em;
margin-top: 1em;
padding: 0.5em 5em 2em 5em; padding: 0.5em 5em 2em 5em;
transform: translateY(-0em); transform: translateY(-0em);
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s; 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 { .cardchild:hover {
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4); 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); -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
@ -84,9 +132,16 @@
cursor: pointer; cursor: pointer;
} }
.singlereview img {
border-radius: 12%;
}
.singlereview { .singlereview {
margin: 1em;
border-radius: 3%;
background-color: #00000040;
display: flex; display: flex;
align-items: center; align-items: flex-start;
} }
.reviewinfo { .reviewinfo {
@ -95,6 +150,7 @@
} }
.reviewname { .reviewname {
margin-bottom: 0.1em;
font-weight: bolder; font-weight: bolder;
} }
@ -178,6 +234,17 @@
} }
} }
@keyframes spawntop {
0% {
opacity: 0%;
transform: translateY(100em);
}
100% {
opacity: 100%;
transform: translateY(0);
}
}
@keyframes shake { @keyframes shake {
0% { 0% {
transform: translate(0, 0) rotate(0deg); 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 AdvancedBr from './components/comps.tsx'
import { createSignal } from 'solid-js'; import { createSignal } from 'solid-js';
import Reviews from './components/api.tsx'; import Reviews from './components/api.tsx';
export const [ishover, setishover]= createSignal(false)
function App() { function App() {
function remov() { function remov() {
for (let i = 0; i < document.styleSheets.length; i++) { 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> <span>silly goober who does silly stuff <br /> self proclaimed programmer and progamer <br /> shitposts for fun</span>
</div> </div>
<div style={{ <div
onMouseEnter={()=> {setishover(true)}}
onmouseleave={() => {setishover(false)}}
style={{
opacity: isAnimating() || animatedwoem() ? "0%" : "100%" opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
}} class='cardchild'> }} class='cardchild'>
<h1>reviews</h1> <Reviews />
<Reviews/>
</div> </div>
</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 { createSignal, onMount } from "solid-js"
import { ishover } from "../App";
interface Review { interface Review {
reviewID: number; reviewID: number;
@ -12,6 +13,7 @@ interface NeoReview extends Review {
username: string username: string
} }
export default function Reviews() { export default function Reviews() {
const [reviews, setReviews] = createSignal<NeoReview[]>([]); const [reviews, setReviews] = createSignal<NeoReview[]>([]);
onMount(() => { onMount(() => {
@ -39,27 +41,36 @@ export default function Reviews() {
return ( return (
<div class="actualreviewdiv"> <>
{reviews().length > 0 ? ( <a style={{
reviews().reverse().map((review) => ( display: ishover() ? "inline" : "none"
<div> }} href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Freview.exhq.dev%2F&scope=identify">
<SingleReview {...review} /> <p>add your reviews here</p>
</div> </a>
)) <h1 class="reviewheadertext">Reviews</h1>
) : ( <div
<div>Loading reviews...</div> class="actualreviewdiv">
)} {reviews().length > 0 ? (
</div> reviews().reverse().map((review) => (
<div>
<SingleReview {...review} />
</div>
))
) : (
<div>Loading reviews...</div>
)}
</div>
</>
) )
} }
function SingleReview(props: NeoReview) { function SingleReview(props: NeoReview) {
console.log(props.global_name)
return <div class="singlereview"> return <div class="singlereview">
<img src={`https://dp.nea.moe/avatar/${props.discordID}.png`} /> <img src={`https://dp.nea.moe/avatar/${props.discordID}.png`} />
<div class="reviewinfo"> <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 class="reviewtext"> {props.reviewText}</div>
</div> </div>
</div> </div>

View file

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