Update README, update script to vertically center the editable text

This commit is contained in:
Jaan Janesmae
2020-03-06 15:55:21 +02:00
parent c2beba0a91
commit 9374a1c1d9
3 changed files with 13 additions and 10 deletions

View File

@@ -14,8 +14,8 @@
<body>
<section class="sheet padding-10mm">
<div class="logo">k-space.ee</div>
<div class="main" contentEditable="true"><br>Hack<br>the<br>planet!</div>
<div class="subline" contentEditable="true"><br>Never stop learning!<br>And have fun while doing it.</div>
<div class="main"><div class="editable">Hack<br>the<br>planet!</div></div>
<div class="subline"><div class="editable">Never stop learning!<br>And have fun while doing it.</div></div>
</section>
</body>

View File

@@ -12,6 +12,7 @@ body {
}
.sheet {
display: table;
margin: 0;
position: relative;
box-sizing: border-box;
@@ -24,10 +25,12 @@ body {
/* Put everything in the correct location */
.logo {
display: table-row;
font-size: 15mm;
}
.main {
display: table-row;
font-size: 25mm;
width: 100%;
height: 12.5cm;
@@ -36,21 +39,21 @@ body {
}
.subline {
display: table-row;
font-size: 12mm;
text-align: center;
}
/* Fix Browser added stylesheet */
[contenteditable="true"]:active, [contenteditable="true"]:focus {
.editable {
display: table-cell;
vertical-align: middle;
-webkit-user-modify: read-write;
-moz-user-modify: read-write;
user-modify: read-write;
border: none;
outline: none;
}
[contenteditable="true"]:focus>style {
display: block;
}
/** Screen **/
@media screen {