create single page html

2023-06-22 08:09:28 +02:00 · 2023-06-22 08:09:28 +02:00 · 88a068e342
commit 88a068e342
parent d61b125a98
1 changed files with 123 additions and 0 deletions
--- a/single.html
+++ b/single.html
@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    </head>
+    <body> 
+    <style>
+    * { box-sizing:border-box; font-family:sans; } 
+    .style { 
+        display:block ; 
+        position:absolute;
+        top:0;
+        width:50%;
+        left:0;
+        overflow-y: auto;
+        overflow-x: hidden;
+        transform: scale(0.2) translate(-200%,0);
+        transition: transform .2s ease;
+        z-index:1;
+        height:100%;
+       
+        }
+
+    .styleCss {
+        background-color:rgb(255,255,200);
+        position:relative;
+        top:5%;
+        height:90%;
+        color:green;
+        width:100%;
+        height:90%;
+        border:none;
+        min-width:500px;
+        display:inline-block;
+        font-family: monospace;
+        white-space: pre; 
+        white-space: pre-wrap; 
+    }
+
+    html{
+        height:100%;
+    }
+    body{ 
+        min-height:100%;
+    }
+    .style:focus-within {
+        transform: translate(0,0) scale(1);
+        height:100%;
+        color:blue;
+    }
+    .body {
+        transition: transform .2s ease;
+    }
+    .center {
+        position:relative;
+        margin:auto;
+        top:50%;
+        border:2px solid green;
+        transform: translateY(-50%);
+        
+    }
+    .style:focus-within  + .body {
+        transform: scale(0.5) translate(50%,0%);
+        color:blue;
+    }
+    html { width: 100%;  margin:0; padding:0;background-color:rgb(150,150,150); } 
+    body { width: 100%; overflow:auto;  margin:0;} 
+    body { color:green; width: var(--page-width); height:var(--page-height)}
+    .sheet {
+        overflow: hidden;
+        margin:auto;
+        box-sizing: border-box;
+        page-break-after: always;
+        height: 297mm;
+        height: var(--page-height);
+        width: 210mm;
+        width: var(--page-width);
+        flex:0 0 var(--page-width);
+        display:block;
+        padding: 2cm;
+        transition: transform .2s ease;
+        }
+    @media screen {
+      body { width:100%; background: rgb(150,150,150); }
+      .sheet {
+        box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
+    /*    margin: 5mm auto;*/
+      }
+    }
+    @media print {
+      .style, style { display: none;}
+      body { width : 210mm; width: var(--page-width);margin:0; }
+      .sheet { margin:0; }
+    }
+    @page { margin: 0 }
+    .body{
+        height:100%;
+        border:3px solid red;
+    }
+    .body{
+        border:3px solid red;
+    }
+
+    </style>
+    <div class="style">
+        <style class="styleCss" contenteditable="true">
+/* set page size */                                
+:root  {
+  --page-width: 210mm;
+  --page-height: 297mm;
+}
+/* becuase stupid browsers  https://stackoverflow.com/a/44738574 need to set -again- */
+@page { size: var(--page-width,210mm) var(--page-height,297mm) }
+.sheet { 
+    background-color:white;
+    }   </style>
+    </div>
+    <div class="body"> 
+        <div class="center"> 
+            <div class="sheet" contenteditable="true">sheet</div>
+        </div>
+    </div>
+    </body>
+</html>