giers10/virtual_interdimensional_spirit_summoner
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update responsive overlay styling and structure

Browse Source
This commit is contained in:
Victor Giers
2025-05-28 19:02:43 +02:00
parent 5703f1bbed
commit 685cd7e66f
1 changed files with 76 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
node/server/public/index.html
View File

@@ -38,97 +38,86 @@
/* width/height wird von JS gesetzt */
/* Wichtig: Keine max-width/max-height */
}
/* Responsive Overlay */
#spirit-info {
box-sizing: border-box;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.94);
color: #fff;
border-radius: 18px;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 12px 64px #000a;
width: 80vw;
max-width: 900px;
min-width: 0;
max-height: 80vh;
overflow-y: auto;
display: flex;
#spirit-info {
box-sizing: border-box;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.94);
color: #fff;
border-radius: 18px;
font-family: 'Segoe UI', sans-serif;
box-shadow: 0 12px 64px #000a;
width: 80vw;
max-width: 900px;
min-width: 0;
max-height: 80vh;
overflow-y: auto;
padding: 5vw;
z-index: 9999;
}
/* Flexbox-Grundlayout: IMMER */
.spirit-info-flex {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Desktop: Bild links, Text rechts */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
.spirit-info-flex {
flex-direction: row;
align-items: flex-start;
gap: 32px;
}
#spirit-info img {
max-width: 320px;
max-height: 60vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
background: #222;
flex-shrink: 0;
margin: 0;
display: block;
}
#spirit-info .spirit-info-content {
flex: 1 1 0;
min-width: 200px;
max-width: 520px;
}
}
/* Mobile: Bild oben, Text unten */
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
.spirit-info-flex {
flex-direction: column;
padding: 5vw;
gap: 18px;
gap: 16px;
}
/* Bild und Content als Grid/Side-by-Side nur auf großen Screens */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
#spirit-info {
flex-direction: row;
align-items: flex-start;
gap: 32px;
padding: 3vw 4vw;
width: 80vw;
max-width: 900px;
max-height: 80vh;
}
#spirit-info img {
max-width: 320px;
max-height: 60vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
background: #222;
flex-shrink: 0;
margin: 0;
display: block;
}
#spirit-info .spirit-info-content {
flex: 1 1 0;
min-width: 200px;
max-width: 520px;
}
#spirit-info {
width: 90vw;
max-width: 98vw;
padding: 10vw 5vw 5vw 5vw;
}
/* Mobile: Bild oben, Text unten */
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
#spirit-info {
flex-direction: column;
width: 90vw;
max-width: 98vw;
padding: 10vw 5vw 5vw 5vw;
gap: 14px;
}
#spirit-info img {
display: block;
margin: 0 auto 18px auto;
max-width: 84vw;
max-height: 30vh;
border-radius: 12px;
background: #222;
width: 100%;
height: auto;
object-fit: contain;
}
#spirit-info .spirit-info-content {
width: 100%;
max-width: 100%;
}
#spirit-info .spirit-info-flex {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
#spirit-info .spirit-info-flex {
flex-direction: row;
align-items: flex-start;
gap: 32px;
}
}
#spirit-info img {
display: block;
margin: 0 auto 18px auto;
max-width: 84vw;
max-height: 30vh;
border-radius: 12px;
background: #222;
width: 100%;
height: auto;
object-fit: contain;
}
#spirit-info .spirit-info-content {
width: 100%;
max-width: 100%;
}
}
}
</style>
</head>