Karten in HTML

src/display.js

@@ -143,10 +143,12 @@ 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>
-        <div class=fulltext>Text text</div>
+        </header>
+        <div class=fulltext>${text}</div>
       `
       wrapper.appendChild(fullview)
       target.appendChild(wrapper)

style.css

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