upüdate html and css to center text vertically

2020-03-06 15:50:52 +02:00 · 2020-03-06 15:50:52 +02:00 · 615b2da489
commit 615b2da489
2 changed files with 136 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -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"><div class="editable">Hack<br>the<br>planet!</div></div>
+		<div class="subline"><div class="editable">Never stop learning!<br>And have fun while doing it.</div></div>
+	</section>
+</body>
+
+</html>
--- a/signs.css
+++ b/signs.css
@ -0,0 +1,114 @@
+@page {
+        margin: 0;
+        size: A4 landscape;
+}
+
+html {
+        font-family: 'Orbitron', sans-serif;
+}
+
+body {
+        margin: 0
+}
+
+.sheet {
+	display: table;
+        margin: 0;
+        position: relative;
+        box-sizing: border-box;
+        page-break-after: always;
+        padding: 10mm;
+        width: 297mm;
+        height: 209mm
+}
+
+/* Put everything in the correct location */
+
+.logo {
+	display: table-row;
+        font-size: 15mm;
+}
+
+.main {
+	display: table-row;
+        font-size: 25mm;
+        width: 100%;
+        height: 12.5cm;
+        margin: 1cm 0;
+        text-align: center;
+}
+
+.subline {
+	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;
+} 
+
+/* Fix Browser added stylesheet */
+
+[contenteditable="true"]:active, [contenteditable="true"]:focus {
+        border: none;
+        outline: none;
+}
+
+[contenteditable="true"]:focus>style {
+        display: block;
+}
+
+/** 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;
+                /* Make input caret transparent */
+                color: transparent;
+                text-shadow: 0 0 0 #000;
+        }
+}