__________________________________________________________________________________________

~~[##style:e2h-responsive]~~

GRID: BLOCKS

Revisions:
    20211201 (provoked by lies experiment)
    20211204 moved via 🔗e2h-responsive-css (playground)

Via:
    https://www.freecodecamp.org/news/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431/

¶*** PARTS

→ 🔗grid-narrative-css
Defining different block styles, depending on narrative/header ordinal.

→ 🔗grid-popup-css
Pop-up on hover/active.

→ 🔗grid-bingo-css
Keep font size the same
Zoom thusly just brings you more blocks (and less padding/margins) (and maybe hidden overfloat)

→ 🔗grid-noselect-css
no text selection

→ 🔗grid-activating-css
experiment with multi-activation (and "CSS activated elements")

<---------------------- (new) PARTS ↑

¶*** EXAMPLES

* 🔗e2h-responsive2
based on 🔗101 !

* 🔗e2h-responsive3
workon tes to set up named areas !

¶*** NEXT

¶[!**] (→html) make higher order (like 3-stars) blocks BG change

will need nested divs i suppose

¶[!!*] WEBSITE TEMPLATE VIA GRID AREAS
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid-template-areas3

¶[!!] UNDERSTAND GRID NUMBER POSITIONING, WTF

a la
grid-column: 1 / -1;

or
grid-row-start: 1;
grid-row-end: 3;

¶* ADDRESS DIVS BY "#", TO:
    * POSITION THEM AS AREA
    * HIDE TITLES
    * [...]

¶[!] long blocks in columns (like, TOC)
https://www.w3schools.com/css/css3_multiple_columns.asp

¶[!] sensible text rotation (within a block)

https://stackoverflow.com/questions/28435888/transform-origin-relative-to-container-rotated-text

¶[!] responsive font size

https://www.w3schools.com/howto/howto_css_responsive_text.asp

A) keep size about same, so that zoom changes to show MORE BLOCKS!
B) ###

¶[!] weird css "onclick"

https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css/32721572
!!!

¶[!] ATTRIBUTE SELECTOR

https://www.w3schools.com/css/css_attribute_selectors.asp

make stuff with that!
maybe even filters?!

¶[!] Do a sensible "triangle" style to replace the rounded corners (with skew)

"""
transform-origin: right bottom;
transform: skew(4deg, 2deg);
transform: perspective(400px) rotateZ(1deg);
"""

¶[~] utilize perspective skew

transform: perspective(400px) rotateZ(4deg);

¶[!] interesting CSS ":before" / ":after" use with image lazy loading

_____________________________
.div_2:active::before {
content: url("https://dcht00.totalism.org/lanza_topo.png");
background: rgba(25,25,25,1) !important;
position: fixed !important;
transform: scale(.3);
    top: 50px;
    right: 50px;
    padding: 5px;
}
___________________________

<---------------------------- (new)+ ↑

___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___
__ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___
___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___
___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___ ___
*/

/*

¶*** RESET + SET
*/

.main_container {
    margin: 0px !important;
    background: var(--BG) !important;
z-index: -200;
}

.etherpad_container {
    width: auto !important;
    max-width: none !important;
z-index: -100;
}

.paradiv.a {
    border: none !important;
}

.footer {
    display: none !important;
}
.buttons {
    display: none !important;
}

/*

¶*** DEFAULTS
*/
:root {
    --BG: #DDA !important;

    --SUBCOLOR: white;
    --BG: #FFD !important;

    --BLOCK_Y: 250px !important;
}

/*

¶*** THE GRID
*/

¶.etherpad_container {
    display: grid !important;
    grid-gap: 10px;

/*
RE-ENABLE / FIGURE OUT THIS SIZING
    grid-template-columns: repeat(auto-fit, minmax(400px, 3fr));
    grid-template-rows: repeat(auto-fit, minmax(400px, 3fr));
*/

    background: var(--BG) !important;
}

¶#TITLE {
    grid-column: 2 / span 3;
/*
    grid-area: t;
    grid-column-end: 3;
*/
}

¶#TOC {
/*
    grid-area: b;
    grid-column-start: 1;
*/

/*
    column-count: 4;
    column-gap: 5%;
*/
}

¶div.paradiv {
/*
    grid-column-start: 2;
    grid-area: x;
*/

    border: #666 solid 3px !important;
    background: rgb(255,255,245);
/*
    margin: 20px !important;
*/
    padding: 3% !important;
}

/*
[!!] LEARN TO HIDE SPECIFIC DIVS VIA # OF THEIR TITLE

¶#blaparadiv1.a.strong.u {
display: none !important;
background: white !important;
}
*/

/*
SPECIAL TOC CASE
*/

¶.etherpad_tocX {
overflow: scroll !important;
height: 1000px !important;
}

__________________________________________________________________________________________

GRID: BLOCKS

Edit Site

Edit CSS

1	*** PARTS
2	*** EXAMPLES
3	*** NEXT
3.1	[!**] (→html) make higher order (like 3-stars) blocks BG change
3.2	[!!*] WEBSITE TEMPLATE VIA GRID AREAS
3.3	[!!] UNDERSTAND GRID NUMBER POSITIONING, WTF
3.4	* ADDRESS DIVS BY "#", TO:
3.5	[!] long blocks in columns (like, TOC)
3.6	[!] sensible text rotation (within a block)
3.7	[!] responsive font size
3.8	[!] weird css "onclick"
3.9	[!] ATTRIBUTE SELECTOR
3.10	[!] Do a sensible "triangle" style to replace the rounded corners (with skew)
3.11	[~] utilize perspective skew
3.12	[!] interesting CSS ":before" / ":after" use with image lazy loading
4	*** RESET + SET
5	*** DEFAULTS
6	*** THE GRID
6.1	.etherpad_container {
6.2	#TITLE {
6.3	#TOC {
6.4	div.paradiv {
6.5	#blaparadiv1.a.strong.u {
6.6	.etherpad_tocX {