Add back and improve comment form formatting
This commit is contained in:
		| @@ -36,6 +36,8 @@ https://creativecommons.org/publicdomain/ | |||||||
| 	--link-secondary: #a8f8ff; | 	--link-secondary: #a8f8ff; | ||||||
| 	--link-secondary-hover: #f9e9c2; | 	--link-secondary-hover: #f9e9c2; | ||||||
|  |  | ||||||
|  | 	--input-border-primary: #4d4d4d; | ||||||
|  |  | ||||||
| 	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem); | 	--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem); | ||||||
|  |  | ||||||
| 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */; | 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */; | ||||||
| @@ -209,12 +211,10 @@ a { | |||||||
| 	text-decoration: none; | 	text-decoration: none; | ||||||
| 	color: var(--link-primary); | 	color: var(--link-primary); | ||||||
| } | } | ||||||
|  |  | ||||||
| a:hover { | a:hover { | ||||||
| 	cursor: pointer; | 	cursor: pointer; | ||||||
| 	color: var(--link-primary-hover); | 	color: var(--link-primary-hover); | ||||||
| } | } | ||||||
|  |  | ||||||
| hr { | hr { | ||||||
| 	background: #4D4D4D; | 	background: #4D4D4D; | ||||||
| 	border: 0; | 	border: 0; | ||||||
| @@ -304,6 +304,71 @@ a.lane-button img { | |||||||
| 	font-family: "GNUTypewriter", monospace; | 	font-family: "GNUTypewriter", monospace; | ||||||
| 	text-transform: none; | 	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) { | @media (min-width: 900px) { | ||||||
| 	body > header { | 	body > header { | ||||||
| 		background-size: 200pt, cover; | 		background-size: 200pt, cover; | ||||||
| @@ -334,6 +399,50 @@ a.lane-button img { | |||||||
| 	#qr_code > img { | 	#qr_code > img { | ||||||
| 		max-height: 195px; | 		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 { | 	body > main { | ||||||
| 		padding: 0.25rem 2rem; | 		padding: 0.25rem 2rem; | ||||||
| 	} | 	} | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user