diff --git a/homepage/static/assets/css/guestbook.css b/homepage/static/assets/css/guestbook.css index 5d7a3f2..717b293 100644 --- a/homepage/static/assets/css/guestbook.css +++ b/homepage/static/assets/css/guestbook.css @@ -1,82 +1,86 @@ ::placeholder { color: var(--primary-color); } button.refresh:disabled { - color: gray; - cursor: progress; } + color: gray; + cursor: progress; } -#new-post { - display: grid; - gap: .5rem; - grid-template-areas: - "n w w" - "m m m" - "c a s"; - grid-template-columns: 1fr 1fr 1fr; } +form { + display: grid; + gap: .5rem; + grid-template-areas: + "n w w" + "m m m" + "c a s"; + grid-template-columns: 1fr 1fr 1fr; } -#new-post input[name="name"] { grid-area: n; } +:is(input, textarea):focus { + outline-color: var(--primary-color); + outline-style: solid; + outline-width: 1px; } -#new-post input[name="website"] { grid-area: w; } +input[name="name"] { grid-area: n; } -#new-post span.checkboxes { grid-area: c; } +input[name="website"] { grid-area: w; } -#new-post textarea { - grid-area: m; - height: 5.5rem; - max-width: 100%; - min-width: 100%; } +textarea { + grid-area: m; + height: 5.5rem; + max-width: 100%; + min-width: 100%; } -#new-post input[type="submit"] { - background-color: var(--primary-color); - border: none; - color: #f5f5f5; - font: inherit; - grid-area: s; - height: 2rem; } +input[type="text"], +textarea { + background-color: var(--background-color); + border: none; + border-bottom: 1px solid var(--primary-color); + color: var(--text-color); + font: inherit; } -#new-post input[type="submit"]:hover { background-color: var(--secondary-color); } +span.checkboxes { grid-area: c; } -#new-post span.checkbox:not(:last-child) { margin-right: 2rem; } +span.checkbox:not(:last-child) { margin-right: 2rem; } -#new-post input[type="text"], -#new-post textarea { - background-color: var(--background-color); - border: none; - border-bottom: 1px solid var(--primary-color); - color: var(--text-color); - font: inherit; } +span.captcha { + display: flex; + flex-basis: 100%; + grid-area: a; + justify-content: space-evenly; align-items: center; column-gap: .5rem; } -#new-post span.captcha { - display: flex; - flex-basis: 100%; - grid-area: a; - justify-content: space-evenly; align-items: center; column-gap: .5rem; } +span.captcha img { + height: 40px; + width: 160px; } -#new-post span.captcha img { - height: 40px; - width: 160px; } +span.captcha input[type="text"] { width: 4.5rem; text-align: center; height: 27px; } -#new-post span.captcha input[type="text"] { width: 4.5rem; text-align: center; height: 27px; } +input[type="submit"] { + background-color: var(--primary-color); + border: none; + color: #f5f5f5; + font: inherit; + grid-area: s; + height: 2rem; } -#posts article:not(:last-child) { margin-bottom: 1rem; } +input[type="submit"]:hover { background-color: var(--secondary-color); } -#posts article header { display: inline; font-size: .85rem; } +article:not(:last-child) { margin-bottom: 1rem; } -#posts article > *, -#posts article div.feedback > *, -#posts article div.feedback { margin-left: .5rem; } +article header { display: inline; font-size: .85rem; } -#posts article p.quote { font-style: italic; } +article > *, +article div.reply > * { margin-left: .5rem; } + +article p.quote { font-style: italic; } #pagination a:not(:first-child) { margin-left: .5rem; } @media screen and (max-width: 641px) { - #new-post { - gap: 1.5rem; - grid-template-areas: - "n" - "w" - "m" - "c" - "a" - "s"; - grid-template-columns: 1fr; } } \ No newline at end of file + form { + gap: 1.5rem; + grid-template-areas: + "n" + "w" + "m" + "c" + "a" + "s"; + grid-template-columns: 1fr; } } \ No newline at end of file