Julie/lure-2026
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

suaqred grid ux

Browse source
This commit is contained in:
Julie Blanc 2026-01-11 09:28:23 +01:00
parent 21711bd5dd
commit be03eab4a9
13 changed files with 243 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

51
static/csspageweaver/plugins/grid/grid.css
View file

@ -1,61 +1,58 @@
:root {
--grid-bold: #bfbfbf;
--grid-light: #efefef;
--grid-spacing: 56px;
--steps: 5;
--grid-position-x: 28px;
--grid-position-y: 0px;
--grid-subdivisions: calc(var(--grid-spacing)/var(--steps));
}
@media screen{
/* .pagedjs_sheet{
--grid-bold: #888;
--grid-light: #cfcfcf;
background-color: #e5e5f7;
opacity: 0.8;
background-image: linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px), linear-gradient(transparent 1px, transparent 1px), linear-gradient(90deg, var(--grid-light) 1px, white 1px);
background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
} */
body.grid .pagedjs_sheet {
--grid-bold: #cfcfcf;
--grid-light: #efefef;
z-index: -1;
--bold-step: 56px;
--light-step: 14px;
--shift-x: 28px;
background-color: white;
opacity: 0.8;
background-image:
/* Traits bold */
repeating-linear-gradient(
90deg,
var(--grid-bold) 0 1px,
transparent 1px var(--bold-step)
transparent 1px var(--grid-spacing)
),
repeating-linear-gradient(
0deg,
var(--grid-bold) 0 1px,
transparent 1px var(--bold-step)
transparent 1px var(--grid-spacing)
),
/* Traits fins (3 traits → 4 carrés) */
repeating-linear-gradient(
90deg,
var(--grid-light) 0 1px,
transparent 1px var(--light-step)
transparent 1px var(--grid-subdivisions)
),
repeating-linear-gradient(
0deg,
var(--grid-light) 0 1px,
transparent 1px var(--light-step)
transparent 1px var(--grid-subdivisions)
);
background-position:
var(--shift-x) 0,
var(--shift-x) 0,
var(--shift-x) 0,
var(--shift-x) 0;
var(--grid-position-x) var(--grid-position-y),
var(--grid-position-x) var(--grid-position-y),
var(--grid-position-x) var(--grid-position-y),
var(--grid-position-x) var(--grid-position-y);
}