fix: more visual fixes to make it tidy
This commit is contained in:
parent
6ba64d29a9
commit
d76a44aa02
2 changed files with 17 additions and 14 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue