mirror of
https://codeberg.org/Kankys/musicCalendar.git
synced 2026-06-01 07:25:42 +00:00
refactor code
This commit is contained in:
+340
-123
@@ -1,168 +1,385 @@
|
||||
/* === BODY === */
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
background-image: url(./img/4525586.jpg);
|
||||
/* Tímto zajistíte, že se tapeta při scrollování nehýbe */
|
||||
background-attachment: fixed;
|
||||
|
||||
/* Tímto zakážete opakování obrázku "dokola" */
|
||||
background-repeat: no-repeat;
|
||||
|
||||
/* DOPORUČENÉ: Roztáhne obrázek přes celou obrazovku */
|
||||
background-size: cover;
|
||||
|
||||
/* Vycentruje obrázek, aby byl vždy uprostřed */
|
||||
background-position: center;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
|
||||
url(./img/4525586.jpg);
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.album-card {
|
||||
background: grey;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
display: inline-block;
|
||||
max-width: 400px;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
/* Scanlines overlay */
|
||||
body::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.05) 2px,
|
||||
rgba(0, 0, 0, 0.05) 4px
|
||||
);
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* === H1 GLITCH === */
|
||||
h1 {
|
||||
color: black;
|
||||
color: #ffffff;
|
||||
animation: glitch-text 6s infinite;
|
||||
}
|
||||
|
||||
@keyframes glitch-text {
|
||||
0%,
|
||||
87%,
|
||||
95%,
|
||||
100% {
|
||||
text-shadow: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
88% {
|
||||
text-shadow:
|
||||
4px 0 #ff0000,
|
||||
-4px 0 #00ffff;
|
||||
transform: skewX(6deg);
|
||||
filter: brightness(1.4);
|
||||
}
|
||||
89% {
|
||||
text-shadow:
|
||||
-5px 0 #ff0000,
|
||||
5px 0 #00ffff;
|
||||
transform: skewX(-4deg) translateX(6px);
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
90% {
|
||||
text-shadow: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
92% {
|
||||
text-shadow:
|
||||
2px 0 #ff0000,
|
||||
-2px 0 #00ffff;
|
||||
transform: skewX(2deg);
|
||||
}
|
||||
93% {
|
||||
text-shadow: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* === ALBUM CARD === */
|
||||
.album-card {
|
||||
background: rgba(12, 12, 12, 0.93);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #8b0000;
|
||||
box-shadow:
|
||||
0 0 20px rgba(180, 0, 0, 0.4),
|
||||
0 0 60px rgba(180, 0, 0, 0.15),
|
||||
0 10px 30px rgba(0, 0, 0, 0.8);
|
||||
display: inline-block;
|
||||
max-width: 400px;
|
||||
transition:
|
||||
box-shadow 0.3s,
|
||||
transform 0.3s;
|
||||
animation:
|
||||
card-entrance 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) both,
|
||||
border-pulse 3s ease-in-out 0.7s infinite;
|
||||
}
|
||||
|
||||
@keyframes card-entrance {
|
||||
from {
|
||||
transform: translateY(-80px) scale(0.9) rotate(-3deg);
|
||||
opacity: 0;
|
||||
filter: blur(5px);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0) scale(1) rotate(0);
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes border-pulse {
|
||||
0%,
|
||||
100% {
|
||||
border-color: #8b0000;
|
||||
box-shadow:
|
||||
0 0 20px rgba(180, 0, 0, 0.4),
|
||||
0 0 60px rgba(180, 0, 0, 0.15),
|
||||
0 10px 30px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
50% {
|
||||
border-color: #cc0000;
|
||||
box-shadow:
|
||||
0 0 30px rgba(220, 0, 0, 0.6),
|
||||
0 0 80px rgba(220, 0, 0, 0.25),
|
||||
0 10px 30px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.album-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow:
|
||||
0 0 35px rgba(220, 0, 0, 0.7),
|
||||
0 0 90px rgba(220, 0, 0, 0.3),
|
||||
0 15px 40px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.album-card h2 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.album-card h3 {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.album-card p {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
/* === OBRÁZKY === */
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.album-card img {
|
||||
box-shadow: 0 0 12px rgba(180, 0, 0, 0.3);
|
||||
transition:
|
||||
transform 0.3s,
|
||||
box-shadow 0.3s,
|
||||
filter 0.3s;
|
||||
}
|
||||
|
||||
.album-card img:hover {
|
||||
transform: scale(1.03);
|
||||
box-shadow: 0 0 25px rgba(220, 0, 0, 0.6);
|
||||
filter: contrast(1.1) brightness(1.05);
|
||||
}
|
||||
|
||||
/* === OBECNÉ NADPISY A TŘÍDY === */
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
.smile {
|
||||
color: black;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.datum {
|
||||
color: red;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
color: #ff4444;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hastag {
|
||||
color: black;
|
||||
}
|
||||
#vyzva {
|
||||
width: 7%;
|
||||
height: auto;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
/* Styl pro tlačítka streamovacích služeb */
|
||||
.smile {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* === STREAMING TLAČÍTKA === */
|
||||
.btn {
|
||||
display: inline-block; /* Aby měly rozměry */
|
||||
text-decoration: none; /* Zruší podtržení */
|
||||
padding: 10px 20px; /* Vnitřní odsazení (prostor kolem textu) */
|
||||
border-radius: 25px; /* Kulaté rohy */
|
||||
color: white; /* Bílé písmo */
|
||||
font-weight: bold;
|
||||
margin: 5px; /* Mezera mezi tlačítky */
|
||||
transition: transform 0.2s; /* Animace při najetí */
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin: 5px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
/* Barvy pro konkrétní služby */
|
||||
.tidal {
|
||||
background-color: #000000;
|
||||
} /* Černá pro Tidal */
|
||||
background: linear-gradient(135deg, #111, #2a2a2a);
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
||||
.spotify {
|
||||
background-color: #1db954;
|
||||
} /* Zelená pro Spotify */
|
||||
background-color: #1db954;
|
||||
border: 1px solid #17a347;
|
||||
}
|
||||
|
||||
.about {
|
||||
background-color: #333;
|
||||
} /* Hmědá o projektu */
|
||||
background: linear-gradient(135deg, #333, #555);
|
||||
border: 1px solid #777;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: scale(1.05); /* Při najetí myší se tlačítko trochu zvětší */
|
||||
opacity: 0.9;
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
/* .album-card {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f0f0f0;
|
||||
} */
|
||||
}
|
||||
|
||||
/*Archív alb */
|
||||
/* Styl pro hlavní tlačítko archivu */
|
||||
/* === HLAVNÍ TLAČÍTKO (ARCHIV) === */
|
||||
.btn-main {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 15px 30px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(135deg, #6b0000 0%, #cc0000 100%);
|
||||
border: 1px solid #ff3333;
|
||||
box-shadow:
|
||||
0 0 12px rgba(200, 0, 0, 0.35),
|
||||
0 4px 15px rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
|
||||
letter-spacing: 0.5px;
|
||||
padding: 15px 30px;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-main:hover {
|
||||
background-color: #555;
|
||||
background: linear-gradient(135deg, #8b0000 0%, #ff1111 100%);
|
||||
box-shadow:
|
||||
0 0 22px rgba(255, 0, 0, 0.6),
|
||||
0 6px 20px rgba(0, 0, 0, 0.6);
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
/* Mřížka pro archiv (aby byly kartičky vedle sebe) */
|
||||
/* === FOOTER TLAČÍTKO === */
|
||||
.btn-footer {
|
||||
background: linear-gradient(135deg, #2a0033, #550066);
|
||||
border: 1px solid #cc44cc;
|
||||
box-shadow: 0 0 10px rgba(180, 0, 180, 0.3);
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-footer:hover {
|
||||
box-shadow: 0 0 22px rgba(220, 0, 220, 0.55);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.link-footer {
|
||||
text-decoration: none;
|
||||
color: #e0ccff;
|
||||
}
|
||||
|
||||
/* === ARCHIVNÍ MŘÍŽKA === */
|
||||
.archiv-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Menší kartička pro archiv */
|
||||
.archiv-item {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
width: 250px; /* Pevná šířka */
|
||||
text-align: center;
|
||||
background: rgba(18, 18, 18, 0.92);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #2a2a2a;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
|
||||
color: #cccccc;
|
||||
width: 250px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
animation: fade-up 0.4s ease forwards;
|
||||
transition:
|
||||
border-color 0.3s,
|
||||
box-shadow 0.3s,
|
||||
transform 0.25s;
|
||||
}
|
||||
|
||||
.archiv-item img {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
.archiv-item:hover {
|
||||
border-color: #8b0000;
|
||||
box-shadow:
|
||||
0 0 15px rgba(180, 0, 0, 0.4),
|
||||
0 6px 18px rgba(0, 0, 0, 0.8);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
@keyframes fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(25px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.archiv-item h3 {
|
||||
font-size: 1em;
|
||||
margin: 5px 0;
|
||||
font-size: 1em;
|
||||
margin: 5px 0;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.archiv-item .datum {
|
||||
font-size: 0.8em;
|
||||
color: #888;
|
||||
font-size: 0.8em;
|
||||
color: #ff5555;
|
||||
}
|
||||
|
||||
.btn-footer {
|
||||
/* background-color: #333;
|
||||
color: white;
|
||||
padding: 15px 30px; */
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
/* font-size: 1.1em; */
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
font-weight: bold;
|
||||
background-color: violet;
|
||||
}
|
||||
.link-footer {
|
||||
text-decoration: none; /* Zruší podtržení */
|
||||
color: black;
|
||||
.archiv-item img {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
transition:
|
||||
transform 0.3s,
|
||||
filter 0.3s;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* odkazy */
|
||||
.archiv-item img:hover {
|
||||
transform: scale(1.05);
|
||||
filter: contrast(1.1) brightness(1.05);
|
||||
}
|
||||
|
||||
/* === LOGO / FOTO === */
|
||||
#vyzva {
|
||||
width: 7%;
|
||||
height: auto;
|
||||
filter: drop-shadow(0 0 6px rgba(180, 0, 0, 0.5));
|
||||
transition:
|
||||
transform 0.3s,
|
||||
filter 0.3s;
|
||||
}
|
||||
|
||||
#vyzva:hover {
|
||||
transform: scale(1.2) rotate(5deg);
|
||||
filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.9));
|
||||
}
|
||||
|
||||
/* === ODKAZY === */
|
||||
.links {
|
||||
color: blueviolet; text-decoration: none;
|
||||
}
|
||||
color: #aa88ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links:hover {
|
||||
color: #cc99ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* === COPYRIGHT === */
|
||||
.copyright {
|
||||
font-size: 0.8em;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
#vyzva {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user