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

Update CSS for spirit-info in different screen sizes and orientations

Browse Source
This commit is contained in:
Victor Giers
2025-05-28 20:02:28 +02:00
parent 5bcadf4237
commit c4130c5b54
1 changed files with 46 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -75,10 +75,16 @@ canvas {
margin: 0; margin: 0;
} }
/* DESKTOP – immer: pointer: fine */ /* === 1. Desktop immer: Bild links, Text rechts === */
@media (pointer: fine) { @media (pointer: fine) {
#spirit-info {
width: 600px;
max-width: calc(100vw - 48px);
min-width: 320px;
max-height: calc(100dvh - 48px);
padding: 40px 36px 32px 36px;
}
.spirit-info-flex { .spirit-info-flex {
display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
gap: 32px; gap: 32px;
@@ -105,8 +111,8 @@ canvas {
} }
} }
/* MOBILE – immer: pointer: coarse */ /* === 2. Mobile Portrait: Bild oben, Text unten === */
@media (pointer: coarse) { @media (pointer: coarse) and (orientation: portrait) {
#spirit-info { #spirit-info {
width: 90vw; width: 90vw;
max-width: 98vw; max-width: 98vw;
@@ -115,7 +121,6 @@ canvas {
padding: 8vw 4vw 4vw 4vw; padding: 8vw 4vw 4vw 4vw;
} }
.spirit-info-flex { .spirit-info-flex {
display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
@@ -137,6 +142,42 @@ canvas {
word-break: break-word; word-break: break-word;
} }
} }
/* === 3. Mobile Landscape: Bild links, Text rechts === */
@media (pointer: coarse) and (orientation: landscape) {
#spirit-info {
width: 96vw;
max-width: 800px;
min-width: 0;
max-height: 82dvh;
padding: 4vw 4vw 4vw 4vw;
}
.spirit-info-flex {
flex-direction: row;
align-items: flex-start;
gap: 24px;
}
#spirit-info img {
max-width: 160px;
min-width: 80px;
width: 34vw;
max-height: 32vh;
height: auto;
object-fit: contain;
border-radius: 12px;
background: transparent;
flex-shrink: 0;
margin: 0;
display: block;
}
#spirit-info .spirit-info-content {
flex: 1 1 0;
min-width: 0;
max-width: 450px;
overflow-wrap: break-word;
word-break: break-word;
}
}
</style> </style>
</head> </head>
<body> <body>