commit ver1

This commit is contained in:
Alexander Mahr 2023-06-22 10:04:22 +02:00
parent 88a068e342
commit 636ca95b95
2 changed files with 21 additions and 26 deletions

View file

@ -4,7 +4,9 @@
</head>
<body>
<style>
* { box-sizing:border-box; font-family:sans; }
* { box-sizing:border-box; font-family:sans;
}
.style {
display:block ;
position:absolute;
@ -21,6 +23,8 @@
}
.styleCss {
font-size: 1vh;
overflow: auto;
background-color:rgb(255,255,200);
position:relative;
top:5%;
@ -37,10 +41,11 @@
}
html{
height:100%;
height:var(--document-height);
}
body{
min-height:100%;
max-height:100%;
}
.style:focus-within {
transform: translate(0,0) scale(1);
@ -59,7 +64,9 @@
}
.style:focus-within + .body {
transform: scale(0.5) translate(50%,0%);
transform: scale(0.5) translate(50%,-50%);
height:200%;
max-height:100%;
color:blue;
}
html { width: 100%; margin:0; padding:0;background-color:rgb(150,150,150); }
@ -92,6 +99,7 @@
.sheet { margin:0; }
}
@page { margin: 0 }
.body{
height:100%;
border:3px solid red;
@ -111,9 +119,14 @@
/* becuase stupid browsers https://stackoverflow.com/a/44738574 need to set -again- */
@page { size: var(--page-width,210mm) var(--page-height,297mm) }
.sheet {
padding: 2cm;
font-family: Arial;
font-size: 13pt;
color:black;
background-color:white;
} </style>
</div>
<div class="body">
<div class="center">
<div class="sheet" contenteditable="true">sheet</div>

View file

@ -81,42 +81,25 @@
</style>
</head>
<body>
<iframe class='nsheet' src='data:text/html;charset=utf-8,
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
body{background-color:blue;
</style>
</body>
</html>
'></iframe>
<iframe class='sheet' src='data:text/html;charset=utf-8,
<!DOCTYPE html>
<html>
<head>
</head>
<body style="display:flex;justify-content:space-between">
<body>
<style>
* { box-sizing:border-box; font-family:sans; }
.style {
display:block ;
background-color:rgb(255,255,200);
flex: 1 1 fit-content;
position:absolute;
top:0;
left:0;
overflow-y: auto;
overflow-x: hidden;
width:20%;
max-width:100px;
min-width:100px;
/* transform: scale(0.2) translate(-200%,0);
transition: transform .2s ease;*/
transition: max-width .2s ease;
transform: scale(0.2) translate(-200%,0);
transition: transform .2s ease;
z-index:1;
height:fit-content;
max-height:90%;
@ -135,8 +118,7 @@
}
.style:focus-within {
/* transform: translate(0,0) scale(1);*/
max-width:50%;
transform: translate(0,0) scale(1);
color:blue;
}
.style:focus-within + .sheet {