commit ver1
This commit is contained in:
parent
88a068e342
commit
636ca95b95
2 changed files with 21 additions and 26 deletions
19
single.html
19
single.html
|
@ -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>
|
||||
|
|
28
word.html
28
word.html
|
@ -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 {
|
||||
|
|
Loading…
Add table
Reference in a new issue