jet/website
jet/website
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: more visual fixes to make it tidy

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
src/pages/qa.ts
View file

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

25
src/styles/globals.css
View file

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