remove some bullshit and change to vars

This commit is contained in:
zyqunix 2025-06-12 10:44:30 +02:00
parent 6316f390d7
commit 3631d57309
14 changed files with 90 additions and 510 deletions

View file

@ -9,11 +9,7 @@
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
</head>
<body>
<marquee id="ad" behavior="scroll" direction="left" aria-label="Site donation message">
Help maintain this site by <a href="https://fentseller.lol/bio">donating crypto</a> (server costs are $2/month). If you don't want to or can't, that's alright :)! You can submit audios <a href="https://github.com/zyqunix/tools/issues">here</a>
</marquee>
<div class="main" id="main">
<div class="cards" id="main">
<h3 id="played">No sound played. Press the button!</h3>
<button id="sound1 playButton">Play <strong>autist</strong>
<audio src="wav/sound1.wav"></audio>

View file

@ -1,23 +1,9 @@
@import url(/global.css);
.top {
top: 0;
left: 0;
}
marquee {
position: relative;
font-size: 16px;
padding: 10px 0;
background-color: #454545;
color: #fff;
width: 100%;
}
button:not(#toggle) {
color: white;
background-color: #b49cdf;
border: 2px solid #9f8ac7;
color: var(--white);
background-color: var(--mauve);
border: 2px solid var(--mauve);
border-radius: 3px;
cursor: pointer;
transition: 0.1s ease-in-out;
@ -26,29 +12,7 @@ button:not(#toggle) {
}
#toggle {
left: 10px;
bottom: 10px;
position: absolute;
cursor: pointer;
padding: 5px;
color: #c0c0c0;
background-color: #454545;
border: 2px solid #404040;
border: none;
}
#toggle:hover {
color: #b49cdf;
background-color: #404040;
}
button:hover:not(#toggle) {
background-color: #9f8ac7;
border-color: #947fb9;
}
.main {
.cards {
max-width: 80%;
text-align: center;
padding: 30px;
@ -59,7 +23,7 @@ button:hover:not(#toggle) {
}
@media (min-width: 1024px) {
.main {
.cards {
max-width: 50%;
padding: 40px;
transform: scale(1.2);
@ -69,14 +33,10 @@ button:hover:not(#toggle) {
padding: 12px 30px;
}
marquee {
position: absolute;
top: 0;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.main {
.cards {
max-width: 70%;
padding: 35px;
}
@ -84,27 +44,15 @@ button:hover:not(#toggle) {
button {
padding: 10px 20px;
}
marquee {
position: absolute;
top: 0;
}
}
@media (max-width: 767px) {
.main {
.cards {
max-width: 100%;
padding: 20px;
transform: scale(1);
}
marquee {
font-size: 14px;
position: absolute;
top: 0;
}
button {
padding: 8px 16px;
font-size: 14px;