Karten in HTML

src/display.js

@@ -143,12 +143,10 @@ export class Display {
       const img = '/img/gretchen.jpg'
       const text = '<p>Text</p><p>More text text text</p>'
       fullview.innerHTML = `
-        <header>
         <img src=${img} />
         <h1>${name}</h1>
         <p class=desc>${desc}</p>
-        </header>
-        <div class=fulltext>${text}</div>
+        <div class=fulltext>Text text</div>
       `
       wrapper.appendChild(fullview)
       target.appendChild(wrapper)

style.css

@@ -75,6 +75,15 @@ body {
   box-sizing: border-box;
   cursor: default;
 }
+.fullview > img {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 40em;
+  min-height: 30em;
+  max-height: 100%;
+}
 .fullview > div {
   position: fixed;
   top: 50%;
@@ -84,13 +93,11 @@ body {
   min-height: 30em;
   max-height: 100%;
   background-color: #006680;
-  padding: 1em;
+  padding: 1.5em;
   color: white;
   border-radius: 20px;
   border: 5px solid #1a1c1c;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
 }
 .fullview > div img {
   float: right;
@@ -102,14 +109,14 @@ body {
 
 h1, .desc {
   font-family: "Fell Sc";
-  margin-left: 0.5rem;
 }
 
 .fulltext {
-  flex-grow: 1;
+  clear: both;
   background-color: #99d7e9;
-  border-radius: 20px;
+  border-radius: 80px;
   border: 3px solid #1a1c1c;
   color: #1a1c1c;
-  padding: 0 0.5em;
+  margin-left: -10px;
+  padding: 0.5em;
 }