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> </head>
<body> <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="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> <div class="subline"><div class="editable" contenteditable="true">Never stop learning!<br>And have fun while doing it.</div></div>
</section> </section>
</body> </body>
<script src="signs.js" type="text/javascript"></script>
</html> </html>

20
public/signs.css
View File

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