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

Update repo, fix #3

Browse Source
This commit is contained in:
Jaan Janesmae 2020-03-11 21:31:38 +02:00
parent d118329d8c
commit 4471d6ab3c
No known key found for this signature in database
GPG Key ID: 107973F4AE61D099
3 changed files with 100 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@ -12,12 +12,12 @@
</head>
<body>
<section class="sheet padding-10mm">
<section class="sheet">
<div class="logo"><img src="https://media.k-space.ee/logo/K-space_logotype_black.svg" draggable="false"></div>
<div class="main"><div class="editable" contenteditable="true">Hack<br>the<br>planet!</div></div>
<div class="main"><div id="editable" class="editable" contenteditable="true">Hack<br>the<br>planet!</div></div>
<div class="subline"><div class="editable" contenteditable="true">Never stop learning!<br>And have fun while doing it.</div></div>
</section>
</body>
<script src="signs.js" type="text/javascript"></script>
</html>

20
public/signs.css
View File

@ -21,13 +21,13 @@ body {
padding-top: 5mm;
width: 297mm;
height: 209mm
border-spacing: 0;
}
/* Put everything in the correct location */
.logo {
display: table-row;
font-size: 15mm;
}
.logo img {
@ -41,19 +41,15 @@ body {
font-size: 25mm;
width: 100%;
height: 12.5cm;
margin: 1cm 0;
max-height: 12.5cm;
margin: 0;
text-align: center;
margin-top: 0px;
position:relative;
top:-7.5mm;
}
.subline {
display: table-row;
font-size: 12mm;
text-align: center;
position:relative;
top:-3.75mm;
}
.editable {
@ -69,18 +65,22 @@ body {
/** Screen **/
@media screen {
body {
background: #eee
}
.sheet {
background: white;
box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3);
margin: 20mm auto;
}
.sheet, .sheet::before, .sheet::after {
box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
border: 1px solid #bbb;
}
.sheet::before, .sheet::after {
content: "";
position: absolute;
@ -88,28 +88,34 @@ body {
height: 210mm;
background-color: #eee;
}
.sheet::before {
right: 15px;
top: 0;
transform: rotate(-1deg);
z-index: -1;
}
.sheet::after {
top: 5px;
right: -5px;
transform: rotate(1deg);
z-index: -2;
}
}
@media print {
body {
width: 297mm
}
.sheet {
overflow: hidden;
/* Make input caret transparent */
color: transparent;
text-shadow: 0 0 0 #000;
}
}

12
public/signs.js Normal file
View File

@ -0,0 +1,12 @@
(function(){
"use strict";
var t,s,r=6;
h = function() {
this.offsetHeight > t && (r+=1),
s = t/r,
this.style.fontSize = s+'px'
};
var b = document.getElementById("editable");
t = b.offsetHeight;
b.addEventListener("input", h);
})();