Files
musicCalendar/style.css

168 lines
3.2 KiB
CSS

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;
}
.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 */
.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í */
}
/* 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 */
.btn:hover {
transform: scale(1.05); /* Při najetí myší se tlačítko trochu zvětší */
opacity: 0.9;
}
@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 */
.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;
}
.btn-main:hover {
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;
}
/* 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;
}
.archiv-item img {
width: 100%;
border-radius: 4px;
margin-bottom: 10px;
}
.archiv-item h3 {
font-size: 1em;
margin: 5px 0;
}
.archiv-item .datum {
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;
background-color: violet;
}
.link-footer {
text-decoration: none; /* Zruší podtržení */
color: black;
}
/* odkazy */
.links {
color: blueviolet; text-decoration: none;
}