Update repo, fix #3
This commit is contained in:
Jaan Janesmae
parent
d118329d8c
commit
4471d6ab3c
|
|
@ -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
164
public/signs.css
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
})();
|
||||||
Loading…
Reference in New Issue