lion/nn.word
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

commit ver1

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

19
single.html
View file

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

28
word.html
View file

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