k-space
/
signs
10
0
Fork 0
Code Issues Pull Requests Projects Activity

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
No known key found for this signature in database
GPG Key ID: 107973F4AE61D099
3 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,6 +1,6 @@
# Signs @ k-space.ee
Make signs the easy way. Just open up your browser, type in the info and print! Yes, print!
Make signs the easy way. Just open up your browser, type in the info and print! Yes, print! Go check it out at [https://janesmae.github.io/signs_at_k-space/](https://janesmae.github.io/signs_at_k-space/).
![select](/demo.gif)

4
public/index.html
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>

17
public/signs.css
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 {