Browse Source

Karten in HTML

master
Adrian Heine 7 months ago
parent
commit
88b16bc158
5 changed files with 51 additions and 250 deletions
  1. BIN
      IMFePIsc29P.ttf
  2. +0
    -245
      img/Kartendesign.svg
  3. BIN
      img/gretchen.jpg
  4. +13
    -2
      src/display.js
  5. +38
    -3
      style.css

BIN
IMFePIsc29P.ttf View File


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


BIN
img/gretchen.jpg View File

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

+ 13
- 2
src/display.js View File

@@ -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 = '<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)
target.appendChild(wrapper)
}


+ 38
- 3
style.css View File

@@ -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;
}

Loading…
Cancel
Save