mirror/kirche-im-netz.Startodon-Hub
1
0
Fork 1
mirror of https://codeberg.org/kirche-im-netz/Startodon-Hub.git synced 2025-08-04 10:14:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Header Bild besser eingepasst

Browse source
This commit is contained in:
Alexander Müller 2024-12-19 21:22:08 +01:00
parent 01dd453767
commit 75bebc50a7
3 changed files with 37 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -150,8 +150,8 @@
<div class="footer-credits">
<p>Bildnachweis:</p>
<ul style="list-style: none; padding: 0; margin: 0;">
<li>Header-Bild <a href="https://unsplash.com/@battenhall" target="_blank">Battenhall via Unsplash</a></li>
<li>Bild zum Willkommen <a href="https://unsplash.com/de/@joephotography" target="_blank">Akira Hojo via Unsplash</a></li>
<li>Header-Bild <a href="https://unsplash.com/de/@joephotography" target="_blank">Akira Hojo via Unsplash</a></li>
<li>Bild zum Willkommen <a href="https://unsplash.com/@battenhall" target="_blank">Battenhall via Unsplash</a></li>
</ul>
</div>

48
style/media-query.css
View file

@ -1,3 +1,35 @@
@media (max-width: 1700px) {
header {
background-position-y: -400px;
}
}
@media (max-width: 1200px) {
header {
background-position-y: -200px;
}
}
@media (max-width: 900px) {
header {
background-position-y: center;
}
.content-wrapper {
flex-direction: column;
gap: 0;
}
.content-text {
order: 2;
max-width: 100%;
}
.content-image {
order: 1;
max-width: 100%;
}
}
@media (max-width: 800px) {
.recommendation-popup-content {
@ -23,19 +55,3 @@
max-width: 250px;
}
}
@media (max-width: 900px) {
.content-wrapper {
flex-direction: column;
gap: 0;
}
.content-text {
order: 2;
max-width: 100%;
}
.content-image {
order: 1;
max-width: 100%;
}
}

4
style/site.css
View file

@ -25,11 +25,13 @@ a {
}
header {
position: relative;
height: 400px;
text-align: center;
padding: 80px 20px 30px 20px;
background-image: url('../images/akira-hojo-_86u_Y0oAaM-unsplash.jpg');
background-size: cover;
background-position: center;
background-position-y: -600px;
background-position-x: center;
color: #ffffff;
}
header::before {