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>

164
public/signs.css
View File

@ -1,115 +1,121 @@
@page { @page {
margin: 0; margin: 0;
size: A4 landscape; size: A4 landscape;
} }
html { html {
font-family: 'Orbitron', sans-serif; font-family: 'Orbitron', sans-serif;
} }
body { body {
margin: 0 margin: 0
} }
.sheet { .sheet {
display: table; display: table;
margin: 0; margin: 0;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
page-break-after: always; page-break-after: always;
padding: 10mm; padding: 10mm;
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 {
height:35mm; height:35mm;
pointer-events: none; pointer-events: none;
float:inline-start; float:inline-start;
} }
.main { .main {
display: table-row; display: table-row;
font-size: 25mm; font-size: 25mm;
width: 100%; width: 100%;
height: 12.5cm; height: 12.5cm;
margin: 1cm 0; max-height: 12.5cm;
text-align: center; margin: 0;
margin-top: 0px; text-align: center;
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 {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
-webkit-user-modify: read-write; -webkit-user-modify: read-write;
-moz-user-modify: read-write; -moz-user-modify: read-write;
user-modify: read-write; user-modify: read-write;
border: none; border: none;
outline: none; outline: none;
} }
/** Screen **/ /** Screen **/
@media screen { @media screen {
body {
background: #eee body {
} background: #eee
.sheet { }
background: white;
box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3); .sheet {
margin: 20mm auto; background: white;
} box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3);
.sheet, .sheet::before, .sheet::after { margin: 20mm auto;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .4); }
border: 1px solid #bbb;
} .sheet, .sheet::before, .sheet::after {
.sheet::before, .sheet::after { box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
content: ""; border: 1px solid #bbb;
position: absolute; }
width: 297mm;
height: 210mm; .sheet::before, .sheet::after {
background-color: #eee; content: "";
} position: absolute;
.sheet::before { width: 297mm;
right: 15px; height: 210mm;
top: 0; background-color: #eee;
transform: rotate(-1deg); }
z-index: -1;
} .sheet::before {
.sheet::after { right: 15px;
top: 5px; top: 0;
right: -5px; transform: rotate(-1deg);
transform: rotate(1deg); z-index: -1;
z-index: -2; }
}
.sheet::after {
top: 5px;
right: -5px;
transform: rotate(1deg);
z-index: -2;
}
} }
@media print { @media print {
body {
width: 297mm body {
} width: 297mm
.sheet { }
overflow: hidden;
/* Make input caret transparent */ .sheet {
color: transparent; overflow: hidden;
text-shadow: 0 0 0 #000; /* 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);
})();