mirror of
https://codeberg.org/Kankys/musicCalendar.git
synced 2026-01-01 08:12:53 +00:00
komplet grafika
This commit is contained in:
170
style.css
170
style.css
@@ -1,45 +1,75 @@
|
||||
body { font-family: sans-serif; text-align: center; padding: 50px; background-image: url(./img/so0naj17qrh91.jpg); }
|
||||
.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; }
|
||||
h1 { color: black; }
|
||||
h2 { color: black}
|
||||
.smile { color: black; }
|
||||
.datum { color: red; font-size: 0.9em; margin-bottom: 10px; font-weight: bold;}
|
||||
.hastag { color: black}
|
||||
#vyzva {width: 7%; height: auto}
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
background-image: url(./img/so0naj17qrh91.jpg);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
h1 {
|
||||
color: black;
|
||||
}
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
.smile {
|
||||
color: black;
|
||||
}
|
||||
.datum {
|
||||
color: red;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.hastag {
|
||||
color: black;
|
||||
}
|
||||
#vyzva {
|
||||
width: 7%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Styl pro tlačítka streamovacích služeb */
|
||||
/* Styl pro tlačítka streamovacích služeb */
|
||||
.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; /* 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í */
|
||||
}
|
||||
|
||||
/* Barvy pro konkrétní služby */
|
||||
.tidal { background-color: #000000; } /* Černá pro Tidal */
|
||||
.spotify { background-color: #1DB954; } /* Zelená pro Spotify */
|
||||
.about { background-color: #333; } /* Hmědá o projektu */
|
||||
.tidal {
|
||||
background-color: #000000;
|
||||
} /* Černá pro Tidal */
|
||||
.spotify {
|
||||
background-color: #1db954;
|
||||
} /* Zelená pro Spotify */
|
||||
.about {
|
||||
background-color: #333;
|
||||
} /* Hmědá o projektu */
|
||||
|
||||
.btn:hover {
|
||||
transform: scale(1.05); /* Při najetí myší se tlačítko trochu zvětší */
|
||||
opacity: 0.9;
|
||||
transform: scale(1.05); /* Při najetí myší se tlačítko trochu zvětší */
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
/* .album-card {
|
||||
@@ -53,53 +83,69 @@ body { font-family: sans-serif; text-align: center; padding: 50px; background-im
|
||||
/*Archív alb */
|
||||
/* Styl pro hlavní tlačítko archivu */
|
||||
.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-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;
|
||||
}
|
||||
|
||||
.btn-main:hover {
|
||||
background-color: #555;
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
/* Mřížka pro archiv (aby byly kartičky vedle sebe) */
|
||||
.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: 1000px;
|
||||
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: white;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
width: 250px; /* Pevná šířka */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.archiv-item img {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.archiv-item h3 {
|
||||
font-size: 1em;
|
||||
margin: 5px 0;
|
||||
font-size: 1em;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.archiv-item .datum {
|
||||
font-size: 0.8em;
|
||||
color: #888;
|
||||
}
|
||||
font-size: 0.8em;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.link-footer {
|
||||
text-decoration: none; /* Zruší podtržení */
|
||||
color: black;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user