fix: more visual fixes to make it tidy

This commit is contained in:
Jet 2026-03-26 17:40:58 -07:00
parent 6ba64d29a9
commit d76a44aa02
No known key found for this signature in database
2 changed files with 17 additions and 14 deletions

View file

@ -66,8 +66,8 @@ function renderQuestions(list: HTMLElement, questions: Question[]) {
<div class="qa-item-meta" role="note">
${formatQuestionTooltip(q)}
</div>
<p style="color: var(--light-cyan);">${escapeHtml(q.question)}</p>
<p class="mt-[1ch]" style="color: var(--light-green);">${escapeHtml(q.answer)}</p>
<p style="color: var(--light-gray);">${escapeHtml(q.question)}</p>
<p class="mt-[1ch]" style="color: var(--light-blue);">${escapeHtml(q.answer)}</p>
</section>`,
)
.join("");
@ -91,7 +91,7 @@ export async function qaPage(outlet: HTMLElement) {
class="qa-textarea"
aria-describedby="qa-status char-count"
placeholder="${escapeHtml(placeholderQuestion)}">${escapeHtml(draft)}</textarea>
<div class="qa-input-bar" aria-hidden="true">
<div class="qa-input-bar">
<span id="char-count" class="qa-bar-text">${draft.length}/200</span>
<button id="qa-submit" type="submit" class="qa-button">[SUBMIT]</button>
</div>

View file

@ -53,6 +53,11 @@ body {
line-height: 1;
}
::selection {
background-color: var(--light-blue);
color: var(--black);
}
*,
*::before,
*::after {
@ -93,7 +98,7 @@ body {
}
.site-shell {
width: min(100%, 66.666667%);
width: min(100%, 60%);
box-sizing: border-box;
margin: 0 auto;
user-select: text;
@ -166,6 +171,9 @@ a[aria-current="page"] {
padding: 1ch;
background-color: rgba(0, 0, 0, 0.18);
border: 2px solid var(--white);
display: flex;
flex-direction: column;
gap: 1ch;
}
.qa-page {
@ -206,13 +214,13 @@ a[aria-current="page"] {
.qa-textarea {
width: 100%;
min-height: 2lh;
background-color: transparent;
border: none;
caret-color: var(--white);
caret-shape: block;
color: var(--light-gray);
padding: 0;
padding-right: 14ch;
padding-bottom: 4ch;
overflow-y: auto;
resize: none;
font-family: inherit;
@ -225,17 +233,11 @@ a[aria-current="page"] {
}
.qa-input-bar {
position: absolute;
right: 2px;
bottom: 2px;
left: 2px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1ch;
padding: 0 1ch 1ch;
pointer-events: none;
background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
pointer-events: auto;
}
.qa-bar-text {
@ -244,11 +246,12 @@ a[aria-current="page"] {
.qa-button {
border: none;
padding: 0.25ch 1ch;
padding: 0;
color: var(--yellow);
background: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
cursor: pointer;
pointer-events: auto;
}