Browse Source

Karten in HTML

master
Adrian Heine 4 years ago
parent
commit
88b16bc158
  1. BIN
      IMFePIsc29P.ttf
  2. 245
      img/Kartendesign.svg
  3. BIN
      img/gretchen.jpg
  4. 15
      src/display.js
  5. 41
      style.css

BIN
IMFePIsc29P.ttf

245
img/Kartendesign.svg
File diff suppressed because it is too large
View File

BIN
img/gretchen.jpg

After

Width: 564  |  Height: 582  |  Size: 786 KiB

15
src/display.js

@ -136,9 +136,20 @@ export class Display {
if (state.show !== null) { if (state.show !== null) {
const wrapper = document.createElement('a') const wrapper = document.createElement('a')
wrapper.href = '/' wrapper.href = '/'
const fullview = document.createElement('img')
fullview.src = '/img/Kartendesign.svg'
wrapper.className = 'fullview' wrapper.className = 'fullview'
const fullview = document.createElement('div')
const name = 'Gretchen'
const desc = 'Näherin, 20'
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>
`
wrapper.appendChild(fullview) wrapper.appendChild(fullview)
target.appendChild(wrapper) target.appendChild(wrapper)
} }

41
style.css

@ -3,9 +3,16 @@
src: url("/IMFePIit29P.ttf"); src: url("/IMFePIit29P.ttf");
} }
@font-face {
font-family: "Fell Sc";
src: url("/IMFePIsc29P.ttf");
}
body { body {
background-color: #e1eef2; background-color: #e1eef2;
margin: 0; margin: 0;
font-family: "Fell";
} }
.wrapper { .wrapper {
@ -55,7 +62,6 @@ body {
text-align: center; text-align: center;
position: absolute; position: absolute;
transform-origin: 0 0; transform-origin: 0 0;
font-family: "Fell";
} }
.fullview { .fullview {
@ -69,12 +75,41 @@ body {
box-sizing: border-box; box-sizing: border-box;
cursor: default; cursor: default;
} }
.fullview > img {
.fullview > div {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
min-width: 40em;
min-width: 20em;
min-height: 30em; min-height: 30em;
max-height: 100%; 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;
} }
Loading…
Cancel
Save