badbl0cks
da4925753d
Some checks failed
Build And Deploy / build-and-deploy (push) Has been cancelled
accessibility, and unify SVG fill color to #fff
Update BaseLayout to use a header <p> for the website title, rename the
main slot/id to
"main", and update all pages to match. Add CSS rule svg { fill:
currentColor }
and size header > p the same as h1. Fix a minor comment typo.
630 lines
12 KiB
CSS
630 lines
12 KiB
CSS
h1.giga {
|
|
font-size: var(--pt-double-canon);
|
|
}
|
|
h1.mega {
|
|
font-size: var(--pt-canon);
|
|
}
|
|
h1,
|
|
header > p {
|
|
font-size: var(--pt-double-great-primer);
|
|
}
|
|
h2 {
|
|
font-size: var(--pt-double-english);
|
|
}
|
|
h3 {
|
|
font-size: var(--pt-double-pica);
|
|
}
|
|
h4 {
|
|
font-size: var(--pt-paragon);
|
|
}
|
|
h5 {
|
|
font-size: var(--pt-great-primer);
|
|
}
|
|
h6 {
|
|
font-size: var(--pt-english);
|
|
}
|
|
small {
|
|
font-size: var(--pt-small-pica);
|
|
}
|
|
small.micro {
|
|
font-size: var(--pt-long-primer);
|
|
}
|
|
small.nano {
|
|
font-size: var(--pt-bourgeois);
|
|
}
|
|
small.pico {
|
|
font-size: var(--pt-minion);
|
|
}
|
|
body {
|
|
animation: textShadow 1.6s infinite;
|
|
background-color: var(--color-bg);
|
|
background-image: radial-gradient(
|
|
var(--color-accent-transparent),
|
|
black 120%
|
|
);
|
|
color: var(--color-fg);
|
|
column-gap: var(--gutter-large);
|
|
display: grid;
|
|
font-size: var(--pt-pica);
|
|
grid-template-rows: auto 1fr auto;
|
|
height: 100dvb;
|
|
left: 0;
|
|
overflow-x: hidden;
|
|
padding-inline: var(--page-padding-inline);
|
|
place-items: center;
|
|
position: absolute;
|
|
row-gap: var(--stack-large);
|
|
text-shadow: 0 0 5px var(--color-glow);
|
|
top: 0;
|
|
width: 100dvi;
|
|
}
|
|
@keyframes flicker {
|
|
0% {
|
|
opacity: 0.27861;
|
|
}
|
|
5% {
|
|
opacity: 0.34769;
|
|
}
|
|
10% {
|
|
opacity: 0.23604;
|
|
}
|
|
15% {
|
|
opacity: 0.90626;
|
|
}
|
|
20% {
|
|
opacity: 0.18128;
|
|
}
|
|
25% {
|
|
opacity: 0.83891;
|
|
}
|
|
30% {
|
|
opacity: 0.65583;
|
|
}
|
|
35% {
|
|
opacity: 0.67807;
|
|
}
|
|
40% {
|
|
opacity: 0.26559;
|
|
}
|
|
45% {
|
|
opacity: 0.84693;
|
|
}
|
|
50% {
|
|
opacity: 0.96019;
|
|
}
|
|
55% {
|
|
opacity: 0.08594;
|
|
}
|
|
60% {
|
|
opacity: 0.20313;
|
|
}
|
|
65% {
|
|
opacity: 0.71988;
|
|
}
|
|
70% {
|
|
opacity: 0.53455;
|
|
}
|
|
75% {
|
|
opacity: 0.37288;
|
|
}
|
|
80% {
|
|
opacity: 0.71428;
|
|
}
|
|
85% {
|
|
opacity: 0.70419;
|
|
}
|
|
90% {
|
|
opacity: 0.7003;
|
|
}
|
|
95% {
|
|
opacity: 0.36108;
|
|
}
|
|
100% {
|
|
opacity: 0.24387;
|
|
}
|
|
}
|
|
@keyframes textShadow {
|
|
0% {
|
|
text-shadow:
|
|
0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
|
|
-0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
5% {
|
|
text-shadow:
|
|
2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
|
|
-2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
10% {
|
|
text-shadow:
|
|
0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
|
|
-0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
15% {
|
|
text-shadow:
|
|
0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
|
|
-0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
20% {
|
|
text-shadow:
|
|
3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
|
|
-3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
25% {
|
|
text-shadow:
|
|
1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
|
|
-1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
30% {
|
|
text-shadow:
|
|
0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
|
|
-0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
35% {
|
|
text-shadow:
|
|
3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
|
|
-3.896914047650351px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
40% {
|
|
text-shadow:
|
|
3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
|
|
-3.870905614848819px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
45% {
|
|
text-shadow:
|
|
2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
|
|
-2.231056963361899px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
50% {
|
|
text-shadow:
|
|
0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
|
|
-0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
55% {
|
|
text-shadow:
|
|
2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
|
|
-2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
60% {
|
|
text-shadow:
|
|
2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
|
|
-2.202193051050636px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
65% {
|
|
text-shadow:
|
|
2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
|
|
-2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
70% {
|
|
text-shadow:
|
|
0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
|
|
-0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
75% {
|
|
text-shadow:
|
|
1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
|
|
-1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
80% {
|
|
text-shadow:
|
|
0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
|
|
-0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
85% {
|
|
text-shadow:
|
|
0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
|
|
-0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
90% {
|
|
text-shadow:
|
|
3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
|
|
-3.443339761481782px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
95% {
|
|
text-shadow:
|
|
2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
|
|
-2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
100% {
|
|
text-shadow:
|
|
2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
|
|
-2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3),
|
|
0 0 3px;
|
|
}
|
|
}
|
|
body::after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(18, 16, 16, 0.1);
|
|
opacity: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
animation: flicker 15s infinite;
|
|
}
|
|
body::before {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background:
|
|
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
|
|
linear-gradient(
|
|
90deg,
|
|
rgba(255, 0, 0, 0.06),
|
|
rgba(0, 255, 0, 0.02),
|
|
rgba(0, 0, 255, 0.06)
|
|
);
|
|
z-index: 2;
|
|
background-size:
|
|
100% 2px,
|
|
3px 100%;
|
|
pointer-events: none;
|
|
}
|
|
header,
|
|
main,
|
|
footer {
|
|
width: 100%;
|
|
}
|
|
header,
|
|
footer {
|
|
padding-block: var(--stack-large);
|
|
text-align: center;
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
nav {
|
|
padding-block: var(--stack-small);
|
|
padding-inline: var(--gutter-small);
|
|
width: 100%;
|
|
}
|
|
nav ul {
|
|
column-gap: var(--gutter-large);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
list-style: none;
|
|
margin-block-start: 0;
|
|
row-gap: var(--stack-large);
|
|
}
|
|
nav li {
|
|
align-content: center;
|
|
white-space: nowrap;
|
|
}
|
|
.iconBox {
|
|
display: inline-block;
|
|
height: 19px;
|
|
width: 19px;
|
|
}
|
|
p,
|
|
ul {
|
|
margin-block-end: var(--stack-large);
|
|
max-inline-size: var(--line-length);
|
|
}
|
|
form p {
|
|
margin-block-end: none;
|
|
}
|
|
a {
|
|
color: var(--color-fg);
|
|
margin: 0 -1ch;
|
|
padding: 0 1ch;
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-glow);
|
|
|
|
&:hover::before {
|
|
color: var(--color-glow);
|
|
content: "[";
|
|
}
|
|
&:hover::after {
|
|
color: var(--color-glow);
|
|
content: "]";
|
|
}
|
|
&:hover {
|
|
color: var(--color-fg);
|
|
padding: 0;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
footer a {
|
|
text-decoration: none;
|
|
width: fit-content;
|
|
display: inline-block;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
|
|
&:hover::before {
|
|
content: none;
|
|
}
|
|
&:hover::after {
|
|
content: none;
|
|
}
|
|
}
|
|
ul {
|
|
list-style-type: square;
|
|
}
|
|
fieldset {
|
|
border: 2px solid var(--color-fg);
|
|
padding-block: var(--stack-small);
|
|
padding-inline: var(--gutter-small);
|
|
}
|
|
label {
|
|
display: block;
|
|
}
|
|
label:has(> input[type="checkbox"]),
|
|
label:has(> input[type="radio"]) {
|
|
align-items: center;
|
|
column-gap: var(--gutter-large);
|
|
display: flex;
|
|
margin-block: var(--stack-large);
|
|
}
|
|
/* TODO: use textarea-wrapper strategy to implement invisible inputs idea,
|
|
but have the text-glow effect done on the ::after pseudo-element and hide
|
|
the input when it isnt focused, and swap when focused */
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="url"],
|
|
input[type="tel"],
|
|
input[type="number"],
|
|
input[type="date"],
|
|
input[type="time"],
|
|
input[type="datetime-local"],
|
|
textarea,
|
|
.textarea-wrapper::after,
|
|
select {
|
|
background-color: var(--color-bg);
|
|
border: 2px solid var(--color-accent);
|
|
padding-block: var(--stack-small);
|
|
padding-inline: var(--gutter-small);
|
|
transition:
|
|
border-color 0.5s,
|
|
box-shadow 0.5s;
|
|
width: 100%;
|
|
}
|
|
textarea,
|
|
.textarea-wrapper::after {
|
|
grid-area: 1 / 1 / 2 / 2; /* Place on top of each other */
|
|
min-height: calc(2rlh + (var(--stack-small) * 2) - 2px);
|
|
}
|
|
.textarea-wrapper {
|
|
display: grid;
|
|
}
|
|
.textarea-wrapper::after {
|
|
content: attr(data-replicated-value) " "; /* Needed to prevent jumpy behavior */
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
}
|
|
.textarea-wrapper > textarea {
|
|
overflow: hidden;
|
|
resize: none;
|
|
}
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
box-shadow: 0 0 5px var(--color-glow);
|
|
outline: none;
|
|
}
|
|
input:disabled,
|
|
textarea:disabled,
|
|
select:disabled,
|
|
button:disabled,
|
|
fieldset:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
button,
|
|
input[type="submit"],
|
|
input[type="reset"] {
|
|
background-color: var(--color-accent);
|
|
box-shadow: 0 0 2px var(--color-glow);
|
|
color: var(--color-bg);
|
|
margin-block: var(--stack-small);
|
|
padding-block: var(--stack-small);
|
|
padding-inline: var(--gutter-small);
|
|
transition: background-color 0.5s;
|
|
text-align: center;
|
|
}
|
|
|
|
button:hover:enabled,
|
|
input[type="submit"]:hover:enabled,
|
|
input[type="reset"]:hover:enabled {
|
|
background-color: var(--color-accent-bright);
|
|
}
|
|
button:active:enabled,
|
|
input[type="submit"]:active:enabled,
|
|
input[type="reset"]:active:enabled {
|
|
background-color: var(--color-accent-bright);
|
|
}
|
|
|
|
svg {
|
|
fill: currentColor;
|
|
}
|
|
|
|
/*input[type="checkbox"],
|
|
input[type="radio"] {
|
|
appearance: none;
|
|
background-color: var(--color-bg);
|
|
border: 2px solid var(--color-fg);
|
|
cursor: pointer;
|
|
height: var(--pt-english);
|
|
position: relative;
|
|
vertical-align: middle;
|
|
width: var(--pt-english);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input[type="checkbox"]:checked,
|
|
input[type="radio"]:checked {
|
|
background-color: var(--color-accent);
|
|
}
|
|
|
|
input[type="checkbox"]:checked::after {
|
|
color: var(--color-accent);
|
|
content: "✓";
|
|
font-size: var(--pt-long-primer);
|
|
left: 2px;
|
|
position: absolute;
|
|
top: -1px;
|
|
}
|
|
|
|
input[type="radio"]:checked::after {
|
|
background-color: var(--color-accent);
|
|
border-radius: 50%;
|
|
content: "";
|
|
height: var(--pt-minion);
|
|
left: 3px;
|
|
position: absolute;
|
|
top: 3px;
|
|
width: var(--pt-minion);
|
|
}
|
|
|
|
select {
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
|
|
background-position: calc(100% - 8px) center;
|
|
background-repeat: no-repeat;
|
|
padding-block-end: var(--stack-small);
|
|
}
|
|
|
|
input[type="file"] {
|
|
background-color: var(--color-bg);
|
|
border: 2px dashed var(--color-fg);
|
|
cursor: pointer;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
input[type="file"]::file-selector-button {
|
|
background-color: var(--color-accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: var(--bg-color);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
margin-right: 10px;
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
input[type="range"] {
|
|
appearance: none;
|
|
background-color: var(--color-fg);
|
|
border-radius: 3px;
|
|
height: 6px;
|
|
margin: 10px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
appearance: none;
|
|
background-color: var(--color-accent);
|
|
border: 2px solid var(--bg-color);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
height: 18px;
|
|
width: 18px;
|
|
}
|
|
|
|
input[type="color"] {
|
|
border: 2px solid var(--color-fg);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
height: 40px;
|
|
padding: 2px;
|
|
width: 60px;
|
|
}
|
|
|
|
input:invalid,
|
|
textarea:invalid,
|
|
select:invalid {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
label.required::after {
|
|
color: var(--color-accent);
|
|
content: "*";
|
|
margin-left: 4px;
|
|
}
|
|
|
|
|
|
|
|
button,
|
|
input[type="submit"],
|
|
input[type="reset"] {
|
|
background-color: var(--color-accent);
|
|
border: 2px solid var(--color-accent);
|
|
border-radius: 4px;
|
|
color: var(--bg-color);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
padding: 10px 20px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
button:hover,
|
|
input[type="submit"]:hover,
|
|
input[type="reset"]:hover {
|
|
background-color: var(--color-fg);
|
|
border-color: var(--color-fg);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
button:active,
|
|
input[type="submit"]:active,
|
|
input[type="reset"]:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
progress {
|
|
background-color: var(--color-bg);
|
|
border: 2px solid var(--color-fg);
|
|
border-radius: 4px;
|
|
height: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
progress::-webkit-progress-bar {
|
|
background-color: var(--color-bg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
progress::-webkit-progress-value {
|
|
background-color: var(--color-accent);
|
|
border-radius: 2px;
|
|
}
|
|
*/
|