From 4471d6ab3c19b695f4ebabe251c695b864ccc1b5 Mon Sep 17 00:00:00 2001 From: Jaan Janesmae Date: Wed, 11 Mar 2020 21:31:38 +0200 Subject: [PATCH] Update repo, fix #3 --- public/index.html | 6 +- public/signs.css | 164 ++++++++++++++++++++++++---------------------- public/signs.js | 12 ++++ 3 files changed, 100 insertions(+), 82 deletions(-) create mode 100644 public/signs.js diff --git a/public/index.html b/public/index.html index 5d9839b..5b0c329 100644 --- a/public/index.html +++ b/public/index.html @@ -12,12 +12,12 @@ -
+
-
Hack
the
planet!
+
Hack
the
planet!
Never stop learning!
And have fun while doing it.
+ - diff --git a/public/signs.css b/public/signs.css index 2c30c55..7123771 100644 --- a/public/signs.css +++ b/public/signs.css @@ -1,115 +1,121 @@ @page { - margin: 0; - size: A4 landscape; + margin: 0; + size: A4 landscape; } html { - font-family: 'Orbitron', sans-serif; + font-family: 'Orbitron', sans-serif; } body { - margin: 0 + margin: 0 } .sheet { - display: table; - margin: 0; - position: relative; - box-sizing: border-box; - page-break-after: always; - padding: 10mm; - padding-top: 5mm; - width: 297mm; - height: 209mm + display: table; + margin: 0; + position: relative; + box-sizing: border-box; + page-break-after: always; + padding: 10mm; + padding-top: 5mm; + width: 297mm; + height: 209mm + border-spacing: 0; } /* Put everything in the correct location */ .logo { - display: table-row; - font-size: 15mm; + display: table-row; } .logo img { - height:35mm; - pointer-events: none; - float:inline-start; + height:35mm; + pointer-events: none; + float:inline-start; } .main { - display: table-row; - font-size: 25mm; - width: 100%; - height: 12.5cm; - margin: 1cm 0; - text-align: center; - margin-top: 0px; - position:relative; - top:-7.5mm; + display: table-row; + font-size: 25mm; + width: 100%; + height: 12.5cm; + max-height: 12.5cm; + margin: 0; + text-align: center; } .subline { - display: table-row; - font-size: 12mm; - text-align: center; - position:relative; - top:-3.75mm; + display: table-row; + font-size: 12mm; + text-align: center; } .editable { - display: table-cell; - vertical-align: middle; - -webkit-user-modify: read-write; - -moz-user-modify: read-write; - user-modify: read-write; - border: none; - outline: none; + display: table-cell; + vertical-align: middle; + -webkit-user-modify: read-write; + -moz-user-modify: read-write; + user-modify: read-write; + border: none; + outline: none; } /** 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; - } + + 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; - /* Make input caret transparent */ - color: transparent; - text-shadow: 0 0 0 #000; - } + + body { + width: 297mm + } + + .sheet { + overflow: hidden; + /* Make input caret transparent */ + color: transparent; + text-shadow: 0 0 0 #000; + } + } diff --git a/public/signs.js b/public/signs.js new file mode 100644 index 0000000..4811da4 --- /dev/null +++ b/public/signs.js @@ -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); +})();