/* Global */ html { font-size: 18px; line-height: 1.6em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body { display: flex; flex-direction: column; margin: 8px; height: calc(100vh - 16px); } main#main-content { flex-grow: 1; margin: 0px 8px; } .htmx-indicator { display: none; } .htmx-request .list-loading { display: block; } .htmx-request.list-loading { display: block; } .list-loading { margin: 24px auto; } img.loading { filter: invert(100%); max-width: 64px; } /* Header */ header.header nav { display: flex; flex-direction: row; align-items: baseline; } header.header nav h1 { margin: 0; } header.header nav a { text-decoration: none; } header.header nav ul { display: flex; flex-direction: row; list-style: none; margin: 0; padding: 0; } header.header nav ul li { margin-left: 16px; } header.header nav .auth { margin-left: auto; } /* Footer */ footer.footer { text-align: center; margin-top: 64px; margin-bottom: 8px; } footer.footer hr { width: 64px; margin-bottom: 16px; } /* Home */ ul.entries { list-style: none; margin: 24px 8px; padding: 0; font-size: 16px; } li.entry { margin-bottom: 8px; } a.entry-link { text-decoration: none; } em.entry-link-domain { margin-left: 8px; color: rgba(0, 0, 0, 0.75); } /* Log */ pre#log { font-size: 12px; line-height: 1.2em; } /* Entry */ article { max-width: 35em; margin: 24px auto; font-size: 18px; } article .title { line-height: 1.3; } article span.published { font-size: 16px; line-height: 1.2em; } article img { max-width: 100%; max-height: 100%; width: auto; height: auto; } /* Feeds */ span.error { color: crimson; } div.feeds { display: grid; grid-template-columns: minmax(auto, 1fr) minmax(200px, 500px); grid-template-areas: 'feeds add-feed'; grid-gap: 24px; } @media (max-width: 768px) { div.feeds { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'feeds' 'add-feed'; } } .feeds-list { grid-area: 'feeds'; list-style: none; padding: 0; margin-left: 8px; } ul#feeds li { margin-bottom: 8px; } ul#feeds li a { text-decoration: none; } div.add-feed { grid-area: 'add-feed'; } form.feed-form .form-grid { display: grid; grid-template-columns: fit-content(100%) minmax(100px, 400px); grid-gap: 16px; width: 100%; margin-bottom: 32px; } form.feed-form .form-grid label { font-size: 16px; font-weight: bold; grid-column: 1 / 2; } form.feed-form .form-grid input, form.feed-form .form-grid textarea { font-size: 14px; grid-column: 2 / 3; } form.feed-form .form-grid textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; resize: vertical; } form.feed-form .form-grid button { font-size: 14px; padding: 4px 8px; grid-column: 3 / 3; } ul.stream-messages { list-style: none; padding: 0; margin: 0; overflow-x: hidden; white-space: nowrap; } ul.stream-messages li { overflow: hidden; white-space: no-wrap; text-overflow: ellipsis; } /* Feed */ header.feed-header { display: flex; flex-direction: row; align-items: center; } header.feed-header button { font-size: 14px; padding: 4px 8px; margin-left: 24px; } /* Register & Login */ .center-horizontal { width: fit-content; margin: 0px auto; } .center-text { text-align: center; } .auth-form-grid { display: grid; grid-template-columns: fit-content(100%) minmax(100px, 400px); grid-gap: 16px; margin: 16px auto; margin-bottom: 32px; width: fit-content; } .auth-form-grid label { font-size: 16px; font-weight: bold; grid-column: 1; text-align: right; } .auth-form-grid input { font-size: 16px; grid-column: 2; } .auth-form-grid button { font-size: 14px; padding: 4px 8px; grid-column: 2; margin-left: auto; } .auth-form-grid span.error { font-size: 16px; grid-column: 2 / 3; }