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

Update styling and layout of #spirit-info on index.html

Browse Source
This commit is contained in:
Victor Giers
2025-05-28 18:54:30 +02:00
parent b8c932e7b5
commit 175f25691d
1 changed files with 63 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,73 +40,83 @@
} }
/* Responsive Overlay */ /* Responsive Overlay */
#spirit-info { #spirit-info {
box-sizing: border-box !important; box-sizing: border-box;
position: fixed !important; position: fixed;
left: 50% !important; left: 50%;
top: 50% !important; top: 50%;
transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%);
background: rgba(0,0,0,0.94) !important; background: rgba(0,0,0,0.94);
color: #fff !important; color: #fff;
border-radius: 18px !important; border-radius: 18px;
font-family: 'Segoe UI', sans-serif !important; font-family: 'Segoe UI', sans-serif;
box-shadow: 0 12px 64px #000a !important; box-shadow: 0 12px 64px #000a;
padding: 4vw 4vw 4vw 4vw !important; width: 80vw;
width: 80vw !important; max-width: 900px;
max-width: 600px !important; min-width: 0;
min-width: 0 !important; max-height: 80vh;
max-height: 80vh !important; overflow-y: auto;
overflow-y: auto !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; padding: 5vw;
gap: 18px;
} }
/* Mobile: Bild oben, Text darunter, an allen Seiten 10% Abstand */ /* Bild und Content als Grid/Side-by-Side nur auf großen Screens */
@media (max-width: 900px), (max-aspect-ratio: 4/5) { @media (min-width: 900px) and (min-aspect-ratio: 5/4) {
#spirit-info { #spirit-info {
flex-direction: column !important; flex-direction: row;
width: 80vw !important;
max-width: 98vw !important;
min-width: 0 !important;
max-height: 80vh !important;
padding: 10vw 4vw !important;
gap: 14px !important;
}
#spirit-info img {
display: block !important;
margin: 0 auto 18px auto !important;
max-width: 80vw !important;
max-height: 30vh !important;
border-radius: 12px !important;
background: #222 !important;
}
}
/* Desktop: Bild links, Text rechts */
@media (min-width: 901px) and (min-aspect-ratio: 4/5) {
#spirit-info {
flex-direction: row !important;
align-items: flex-start; align-items: flex-start;
gap: 32px !important; gap: 32px;
width: 80vw !important; padding: 3vw 4vw;
max-width: 900px !important; width: 80vw;
max-height: 80vh !important; max-width: 900px;
padding: 4vw !important; max-height: 80vh;
} }
#spirit-info img { #spirit-info img {
display: block !important; max-width: 320px;
margin: 0 !important; max-height: 60vh;
max-width: 320px !important; width: auto;
max-height: 60vh !important; height: auto;
border-radius: 12px !important; object-fit: contain;
background: #222 !important; border-radius: 12px;
background: #222;
flex-shrink: 0;
margin: 0;
display: block;
} }
#spirit-info .spirit-info-content { #spirit-info .spirit-info-content {
flex: 1 1 0; flex: 1 1 0;
min-width: 200px; min-width: 200px;
max-width: 500px; max-width: 520px;
} }
} }
/* 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%;
}
}
}
</style> </style>
</head> </head>
<body> <body>