diff --git a/IMFePIsc29P.ttf b/IMFePIsc29P.ttf
new file mode 100644
index 0000000..44ee75e
Binary files /dev/null and b/IMFePIsc29P.ttf differ
diff --git a/img/Kartendesign.svg b/img/Kartendesign.svg
deleted file mode 100644
index 03985fe..0000000
--- a/img/Kartendesign.svg
+++ /dev/null
@@ -1,245 +0,0 @@
-
-
diff --git a/img/gretchen.jpg b/img/gretchen.jpg
new file mode 100644
index 0000000..304e857
Binary files /dev/null and b/img/gretchen.jpg differ
diff --git a/src/display.js b/src/display.js
index a60c21e..670c519 100644
--- a/src/display.js
+++ b/src/display.js
@@ -136,9 +136,20 @@ export class Display {
if (state.show !== null) {
const wrapper = document.createElement('a')
wrapper.href = '/'
- const fullview = document.createElement('img')
- fullview.src = '/img/Kartendesign.svg'
wrapper.className = 'fullview'
+ const fullview = document.createElement('div')
+ const name = 'Gretchen'
+ const desc = 'Näherin, 20'
+ const img = '/img/gretchen.jpg'
+ const text = 'Text
More text text text
'
+ fullview.innerHTML = `
+
+ 
+ ${name}
+ ${desc}
+
+ ${text}
+ `
wrapper.appendChild(fullview)
target.appendChild(wrapper)
}
diff --git a/style.css b/style.css
index 90aa46f..6adf7d9 100644
--- a/style.css
+++ b/style.css
@@ -3,9 +3,16 @@
src: url("/IMFePIit29P.ttf");
}
+@font-face {
+ font-family: "Fell Sc";
+ src: url("/IMFePIsc29P.ttf");
+}
+
+
body {
background-color: #e1eef2;
margin: 0;
+ font-family: "Fell";
}
.wrapper {
@@ -55,7 +62,6 @@ body {
text-align: center;
position: absolute;
transform-origin: 0 0;
- font-family: "Fell";
}
.fullview {
@@ -69,12 +75,41 @@ body {
box-sizing: border-box;
cursor: default;
}
-.fullview > img {
+.fullview > div {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- min-width: 40em;
+ min-width: 20em;
min-height: 30em;
max-height: 100%;
+ background-color: #006680;
+ 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;
+ width: 120px;
+ border-radius: 80px;
+ border: 3px solid #1a1c1c;
+ margin-bottom: 1em;
+}
+
+h1, .desc {
+ font-family: "Fell Sc";
+ margin-left: 0.5rem;
+}
+
+.fulltext {
+ flex-grow: 1;
+ background-color: #99d7e9;
+ border-radius: 20px;
+ border: 3px solid #1a1c1c;
+ color: #1a1c1c;
+ padding: 0 0.5em;
}