pollei.github.io/main0.css at master · pollei/pollei.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
:where(p, div):where( :first-child) {
    margin-block-start: 0;
    /* outline: blueviolet 3px solid; */
}

* + :where(p, div) {
    margin-block-start: 1em;
    /* outline: red 3px solid; */
}

p { max-width: 62em;}
div.urls { column-count: 2;  min-width:36em; }
div.urls p { max-width: 28em ; margin: 2px; }
div.qrtrs {
  min-width: 25em;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;}
div.qrtr { margin: 5.6px;
  min-width: max( 10vw - 1em, 11em);
  max-width: max( 33vw - 3em, 16em);
  min-height: 4.5em;
  /* outline: orange dashed 2px; */
}
div.qrtr > :where(p, div) {
  margin: 0;

}
div.qrtr:focus-within, div.qrtr:hover  {
  outline: orange dashed 1.4px;
  outline-offset: 3.5px;
}
h1,h2,h3,h4 {text-align:center; margin: 1px;}
svg, img { float:right; clear: right;}

div.cntx {min-width:72em;float:left;clear:right}
div.lsec--left {max-width:36em;outline:black dotted;float:left;padding:4px;margin:6px;min-height:7em;}
div.lsec--right {max-width:36em;outline:black dotted;float:right;padding:4px;margin:6px;clear:right}
form#uShare label {min-width:4em;text-align:right;display: inline-block;}
form#uShare fieldset {border:none;display:contents;}
form#uShare input:invalid { border: 2px dashed red;}
form#uShare input[type=text] {font-family: "Lucida Console", Courier, monospace;}
@supports (user-select: all) {
  span#enrollCode { user-select: all;}
}
@media screen and (min-width: 54em) { div.urls { column-count: 3; } }
@media screen and (min-width: 72em) { div.urls { column-count: 4; } }
span.NC { user-select: none;} /* Not Content */
a[href=""] {
  pointer-events: none;
  opacity: 0.65;
}