Procházet zdrojové kódy

Karten in HTML

master
Adrian Heine před 4 roky
rodič
revize
88b16bc158
  1. binární
      IMFePIsc29P.ttf
  2. 245
      img/Kartendesign.svg
  3. binární
      img/gretchen.jpg
  4. 15
      src/display.js
  5. 41
      style.css

binární
IMFePIsc29P.ttf

245
img/Kartendesign.svg
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor

binární
img/gretchen.jpg

Za

Šířka: 564  |  Výška: 582  |  Velikost: 786 KiB

15
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 = '<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)
}

41
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;
}
Načítá se…
Zrušit
Uložit