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

Initial commit, updated README.md

Browse Source
This commit is contained in:
Jaan Janesmae 2018-04-15 19:14:33 +03:00
parent c9840db11c
commit 37ad5457ae
No known key found for this signature in database
GPG Key ID: 0A5680076D5563BC
4 changed files with 120 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -1,2 +1,13 @@
# digital-signage_at_k-space # Digital Signs @ k-space.ee
Make signs the easy way.
Make signs the easy way. Just open up your browser, type in the info and print! Yes, print!
![select](/demo.gif)
## Install
Easy, install a webserver and put the included index.html and signs.css file into the public webroot directory.
## License
[MIT](LICENSE)

BIN
demo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

22
public/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Signs @ k-space</title>
<meta name="description" content="Signs @ k-space.ee">
<meta name="Author" content="Jaan Janesmae">
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<link href="signs.css" rel="stylesheet">
</head>
<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>
</section>
</body>
</html>

85
public/signs.css Normal file
View File

@ -0,0 +1,85 @@
@page {
margin: 0;
size: A4 landscape;
}
html {
font-family: 'Orbitron', sans-serif;
}
body {
margin: 0;
width: 297mm;
height: 209mm;
}
.sheet {
position: relative;
box-sizing: border-box;
page-break-after: always;
padding: 10mm;
}
/* Put everything in the correct location */
.logo {
font-size: 15mm;
}
.main {
font-size: 25mm;
width: 100%;
height: 12.5cm;
margin: 1cm 0;
text-align: center;
}
.subline {
font-size: 12mm;
text-align: center;
}
/** 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;
width: 297mm;
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;
}
}