test de grille pour un fond de pad
This commit is contained in:
commit
0b0e327260
32
pad-en-grille/cssVarCookies.css
Normal file
32
pad-en-grille/cssVarCookies.css
Normal file
@ -0,0 +1,32 @@
|
||||
#cvfc p::before {content:":root{}"}
|
||||
|
||||
#cvfc:hover p::before {content:":root{"}
|
||||
#cvfc:hover::after {content:"}"}
|
||||
|
||||
#cvfc {
|
||||
z-index:10000;
|
||||
position:fixed;
|
||||
bottom:10px;
|
||||
left:10px;
|
||||
background:whitesmoke;
|
||||
border:1px solid black;
|
||||
overflow:hidden;
|
||||
border-radius:5px;
|
||||
padding:10px;
|
||||
width:fit-content;
|
||||
|
||||
line-height:auto;
|
||||
}
|
||||
#cvfc::after, #cvfc * {color:black !important;font-size:16px; box-sizing:border-box;margin:0;font-family:Unifont;}
|
||||
#cvfc tr {padding-left:2rem; display:flex;justify-content:space-between; gap:0px;width:inherit}
|
||||
#cvfc tr:nth-of-type(2n - 1) {background:white}
|
||||
#cvfc td {background:transparent;position:relative;width:inherit;height:18px !important; white-space:nowrap}
|
||||
#cvfc td:last-of-type{border-bottom:1px solid transparent; padding-left:10px}
|
||||
#cvfc textarea{padding:0;margin:0;resize:none; width:40ch;white-space:nowrap;
|
||||
border:none;background:none}
|
||||
#cvfc table {display:none; background:none}
|
||||
#cvfc:hover table {display:inherit}
|
||||
#cvfc tr:hover td:last-of-type {background:lightgray;border-bottom:1px solid black}
|
||||
#cvfc:hover {border-color:black;
|
||||
resize:horizontal;
|
||||
}
|
||||
42
pad-en-grille/cssVarCookies.js
Normal file
42
pad-en-grille/cssVarCookies.js
Normal file
@ -0,0 +1,42 @@
|
||||
function filterEntriesWithCSSVariables(obj) {
|
||||
return Object.entries(obj).filter(([key, value]) => {
|
||||
return typeof value === 'string' && value.startsWith('--');
|
||||
});
|
||||
}
|
||||
const style = getComputedStyle(document.documentElement)
|
||||
const cssVars = filterEntriesWithCSSVariables(style).map((v) => v[1]);
|
||||
|
||||
const container = document.createElement('section')
|
||||
container.innerHTML = '<p></p>'
|
||||
container.setAttribute('id','cvfc')
|
||||
document.body.appendChild(container)
|
||||
const table = document.createElement('table')
|
||||
container.appendChild(table)
|
||||
|
||||
cssVars.reverse().forEach((cssVar) => {
|
||||
let val = style.getPropertyValue(cssVar)
|
||||
document.body.style.setProperty(cssVar,localStorage.getItem(cssVar) || val)
|
||||
|
||||
const tr = document.createElement('tr')
|
||||
|
||||
const key = document.createElement('td')
|
||||
const value = document.createElement('td')
|
||||
|
||||
const value_textArea = document.createElement('textarea')
|
||||
value_textArea.setAttribute('rows',1)
|
||||
value_textArea.addEventListener("input", function(){
|
||||
localStorage.setItem(cssVar, this.value);
|
||||
document.body.style.setProperty(cssVar, this.value);
|
||||
});
|
||||
|
||||
value_textArea.innerHTML = localStorage.getItem(cssVar) || val
|
||||
value.appendChild(value_textArea)
|
||||
|
||||
key.innerHTML = cssVar
|
||||
|
||||
tr.appendChild(key)
|
||||
tr.appendChild(value)
|
||||
|
||||
table.appendChild(tr)
|
||||
})
|
||||
|
||||
138
pad-en-grille/index.html
Normal file
138
pad-en-grille/index.html
Normal file
@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<script src="cssVarCookies.js" defer></script>
|
||||
<link rel="stylesheet" href="cssVarCookies.css">
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<nav></nav>
|
||||
<textarea id="pad" name="" cols="30" rows="100">
|
||||
|
||||
0042:
|
||||
|
||||
|
||||
|
||||
|
||||
#####
|
||||
# #
|
||||
# #
|
||||
# #
|
||||
#####
|
||||
# #
|
||||
# #
|
||||
# #
|
||||
# #
|
||||
#####
|
||||
|
||||
|
||||
|
||||
0043:
|
||||
|
||||
|
||||
|
||||
|
||||
####
|
||||
# #
|
||||
# #
|
||||
#
|
||||
#
|
||||
#
|
||||
#
|
||||
# #
|
||||
# #
|
||||
####
|
||||
|
||||
|
||||
</textarea>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<style>
|
||||
:root {
|
||||
--dim:24px;
|
||||
--largeur-1:2.0px;
|
||||
--largeur-0:1px;
|
||||
--couleur-A:lightgreen;
|
||||
--couleur-B:lightgray;
|
||||
}
|
||||
#pad, nav{
|
||||
font-size:var(--dim);
|
||||
letter-spacing: calc(var(--dim) * .31);
|
||||
line-height:var(--dim);
|
||||
font-size-adjust:0.7;
|
||||
font-family:Unifont
|
||||
}
|
||||
nav {padding-left:4px;position:sticky;top:0px;display:none}
|
||||
#pad{border:none;height:100%;width:100%;background:none;
|
||||
transform:translate(4px,-0px);
|
||||
border-left:var(--largeur-1) solid var(--couleur-A);
|
||||
border-top:var(--largeur-1) solid var(--couleur-A);
|
||||
|
||||
background-size: var(--dim) var(--dim);
|
||||
/* background-image:
|
||||
linear-gradient(to right, grey 1px, transparent 1px),
|
||||
linear-gradient(to bottom, grey 1px, transparent 1px);
|
||||
*/
|
||||
background:
|
||||
repeating-linear-gradient(90deg, transparent, transparent calc(var(--dim) * 8 - var(--largeur-1)), var(--couleur-A) calc(var(--dim) * 8 - var(--largeur-1)), var(--couleur-A) calc(var(--dim) * 8 )),
|
||||
repeating-linear-gradient(90deg, transparent, transparent calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 )),
|
||||
repeating-linear-gradient( 0deg, transparent, transparent calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 ))
|
||||
;
|
||||
background-position-y:-4.5px;
|
||||
background-position-x:4.5px;
|
||||
|
||||
background-position-y:-.6px;
|
||||
background-position-x:2px;
|
||||
|
||||
}
|
||||
section {
|
||||
margin-left:var(--dim);
|
||||
margin-top:var(--dim);
|
||||
width:calc(var(--dim) * 8 * 5)
|
||||
|
||||
/*
|
||||
background-image: url("grid.png");
|
||||
background-color: #cccccc;
|
||||
height:100%;
|
||||
*/
|
||||
}
|
||||
body {height:100%}
|
||||
html {height:100vh}
|
||||
.curseur {position:absolute;
|
||||
width:var(--dim);
|
||||
height:var(--dim);
|
||||
border:1px solid black;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Unifont;
|
||||
src: url("../unifont-15.1.05.otf") format("opentype");
|
||||
}
|
||||
*{font-family:Unifont}
|
||||
nav {width:100%;background:ivory;height:var(--dim)}
|
||||
</style>
|
||||
<script>
|
||||
const nav = document.querySelector('nav')
|
||||
for (let i = 0; i < 16; i ++){
|
||||
nav.innerHTML += (i+1)%10
|
||||
}
|
||||
//const entete = document.createElement('nav')
|
||||
//body.appendChild(entete)
|
||||
const body = document.querySelector('body')
|
||||
|
||||
const textarea = document.querySelector('textarea')
|
||||
const dim = 24;
|
||||
let curseur = document.createElement('div')
|
||||
body.appendChild(curseur)
|
||||
curseur.classList.add('curseur')
|
||||
textarea.addEventListener("mousemove", (e) => {
|
||||
console.log(e)
|
||||
let x = Math.ceil(e.clientX / dim) * dim - dim - 10
|
||||
let y = Math.ceil(e.clientY / dim) * dim - dim + 6 + dim
|
||||
curseur.style.left= `${x}px`
|
||||
curseur.style.top= `${y}px`
|
||||
});
|
||||
</script>
|
||||
BIN
unifont-15.1.05.otf
Normal file
BIN
unifont-15.1.05.otf
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user