Add back and improve comment form formatting

This commit is contained in:
2025-07-21 23:23:06 -04:00
parent 11bc99a2f0
commit 60e02a1435

View File

@@ -36,6 +36,8 @@ https://creativecommons.org/publicdomain/
--link-secondary: #a8f8ff;
--link-secondary-hover: #f9e9c2;
--input-border-primary: #4d4d4d;
--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
@@ -209,12 +211,10 @@ a {
text-decoration: none;
color: var(--link-primary);
}
a:hover {
cursor: pointer;
color: var(--link-primary-hover);
}
hr {
background: #4D4D4D;
border: 0;
@@ -304,6 +304,71 @@ a.lane-button img {
font-family: "GNUTypewriter", monospace;
text-transform: none;
}
fieldset {
border: thin solid var(--input-border-primary);
border-radius: 0.2rem;
}
fieldset > table,
fieldset > table thead,
fieldset > table tbody,
fieldset > table tr,
fieldset > table th,
fieldset > table td,
fieldset > table td input,
fieldset > table td textarea,
fieldset > table td select {
display: block;
font-size: 1rem;
}
fieldset > table {
width: calc(100vw + -16vw + -1rem);
max-width: 100%;
}
fieldset > table td input,
fieldset > table td textarea {
width: calc(100vw + -16vw + -1.5rem);
max-width: 100%;
border: thin solid var(--input-border-primary);
border-radius: 0.2rem;
margin-bottom: 0.5rem;
padding: 0.5rem;
}
fieldset > table td select {
appearance: none;
background: var(--background-primary);
color: var(--text-primary);
width: calc(100vw + -16vw + -0.40rem);
border: 1px solid var(--input-border-primary);
border-radius: 0.25rem;
cursor: pointer;
margin-bottom: 0.5rem;
padding: 0.5rem;
}
fieldset > table td select:focus{
background: var(--background-secondary);
color: var(--text-secondary);
}
fieldset > table td select:active {
background: var(--background-secondary);
color: var(--text-primary);
}
fieldset > table td input[type="radio"] {
display: initial;
width: initial;
margin-bottom: 0.5rem;
}
fieldset > input {
background: var(--background-secondary);
color: white;
font-weight: 600;
padding: 0.5rem;
border: thin solid var(--input-border-primary);
border-radius: 0.2rem;
}
@media (min-width: 900px) {
body > header {
background-size: 200pt, cover;
@@ -334,6 +399,50 @@ a.lane-button img {
#qr_code > img {
max-height: 195px;
}
fieldset>table,
fieldset>table thead,
fieldset>table tbody,
fieldset>table tr,
fieldset>table th,
fieldset>table td,
fieldset>table td input,
fieldset>table td textarea,
fieldset>table td select {
display: revert;
width: revert;
}
fieldset>table tr {
vertical-align: baseline;
}
fieldset>table tr:nth-child(3) {
vertical-align: top;
}
fieldset>table tr:nth-child(3) td:first-child {
padding-top: 0.5rem;
}
fieldset>table tr:nth-last-child(3) td:first-child {
padding-top: 1rem;
}
fieldset>table tr:nth-last-child(2) {
vertical-align: top;
}
fieldset>table tr:nth-last-child(2) td:first-child {
padding-top: 0.75rem;
}
fieldset>table td input[type="radio"] {
margin-top: 1.5rem;
}
fieldset>table td select {
margin-bottom: 1.0rem;
width: 100%;
}
body > main {
padding: 0.25rem 2rem;
}