diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/form.css | 9 | ||||
| -rw-r--r-- | static/icons.css | 3 | ||||
| -rw-r--r-- | static/misc.css | 16 | ||||
| -rw-r--r-- | static/note.css | 5 | ||||
| -rw-r--r-- | static/pages.css | 97 | ||||
| -rw-r--r-- | static/style.css | 1 | ||||
| -rw-r--r-- | static/theme.css | 1 |
7 files changed, 131 insertions, 1 deletions
diff --git a/static/form.css b/static/form.css index 7b38860..6f474c1 100644 --- a/static/form.css +++ b/static/form.css @@ -110,6 +110,15 @@ form:not(.nopanel) { } } + &#writePageForm { + max-width: 100%; + input, + textarea, + select { + width: 100%; + } + } + &#writeNoteForm { max-width: 100%; diff --git a/static/icons.css b/static/icons.css index 3d53416..af17feb 100644 --- a/static/icons.css +++ b/static/icons.css @@ -117,4 +117,7 @@ &.orbit-outline { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 21.5q-1.45 0-2.475-1.025T2.5 18t1.025-2.475T6 14.5t2.475 1.025T9.5 18q0 .55-.162 1.063t-.488.962v-.675q.75.325 1.55.488T12 20q3.35 0 5.675-2.325T20 12h2q0 2.075-.788 3.9t-2.137 3.175t-3.175 2.138T12 22q-1.125 0-2.2-.238t-2.075-.712q-.4.225-.837.338T6 21.5m0-2q.625 0 1.063-.437T7.5 18t-.437-1.062T6 16.5t-1.062.438T4.5 18t.438 1.063T6 19.5m6-4q-1.45 0-2.475-1.025T8.5 12t1.025-2.475T12 8.5t2.475 1.025T15.5 12t-1.025 2.475T12 15.5M2 12q0-2.075.788-3.9t2.137-3.175T8.1 2.788T12 2q1.125 0 2.2.238t2.075.712q.4-.225.838-.338T18 2.5q1.45 0 2.475 1.025T21.5 6t-1.025 2.475T18 9.5t-2.475-1.025T14.5 6q0-.55.163-1.062t.487-.963v.675q-.75-.325-1.55-.488T12 4Q8.65 4 6.325 6.325T4 12zm16-4.5q.625 0 1.063-.437T19.5 6t-.437-1.062T18 4.5t-1.062.438T16.5 6t.438 1.063T18 7.5M18 6'/%3E%3C/svg%3E"); } + &.article-outline { + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z'/%3E%3C/svg%3E"); + } } diff --git a/static/misc.css b/static/misc.css index ab2ba35..1f39795 100644 --- a/static/misc.css +++ b/static/misc.css @@ -1,3 +1,7 @@ +h1 { + font-size: var(--font-heading-size); +} + .alertbox { border: var(--border); border-radius: var(--border-radius); @@ -14,7 +18,9 @@ } button.primary, -button.secondary { +button.secondary, +a.button.primary, +a.button.secondary { border-radius: var(--border-radius); border: none; padding: var(--spacing-single) var(--spacing-double); @@ -26,6 +32,8 @@ button.secondary { display: flex; align-items: center; justify-content: center; + gap: var(--spacing-single); + text-decoration: none; &:disabled { opacity: 80%; @@ -39,6 +47,12 @@ button.secondary { background: var(--clr-secondary); color: var(--clr-foreground-on-secondary); } + &.minWidth { + width: max-content; + } + &.margined { + margin: var(--spacing-double); + } } button.material-symbols { diff --git a/static/note.css b/static/note.css index b1453dc..bdb1422 100644 --- a/static/note.css +++ b/static/note.css @@ -73,6 +73,7 @@ article.note { hyphens: auto; overflow-x: hidden; text-overflow: ellipsis; + line-break: anywhere; .selected & { font-size: var(--font-big-size); } @@ -280,6 +281,10 @@ article.note { } } } + + a.button { + margin: var(--spacing-half) 0 var(--spacing-double) 0; + } } .linkPreview { diff --git a/static/pages.css b/static/pages.css new file mode 100644 index 0000000..f19a856 --- /dev/null +++ b/static/pages.css @@ -0,0 +1,97 @@ +.notePage { + margin: var(--spacing-double); + article h1 { + margin: 0; + padding: var(--spacing-double) 0 var(--spacing-half) 0; + font-size: var(--font-heading-size); + } + .created, + .modified { + font-size: var(--font-small-size); + } + + hr { + margin: var(--spacing-double) 0; + } +} +.pageAuthor { + display: flex; + gap: var(--spacing-single); + color: inherit; + text-decoration: none; + margin-bottom: var(--spacing-single); + align-items: center; + + .displayName { + font-weight: bold; + } + + &:hover { + text-decoration: underline; + } + img { + width: var(--icon-size); + aspect-ratio: 1; + } +} + +.pageContent { + margin-top: var(--spacing-double); + + p, + ul, + ol, + blockquote { + margin: 0 0 0.4lh 0; + &:last-child { + margin-bottom: 0; + } + } + + blockquote { + padding-left: var(--spacing-double); + border-left: var(--border); + border-left-color: var(--clr-lesser-foreground); + } + + h1, + h2 { + margin: 0.2lh 0 0.2lh 0; + font-size: var(--font-big-size); + } + h3, + h4, + h5, + h6 { + margin: 0.1lh 0 0.2lh 0; + font-size: var(--font-normal-size); + } + + img { + max-height: 8lh; + } +} + +.pageItem { + display: grid; + grid-template-columns: max-content auto; + border: var(--border); + border-radius: var(--border-radius); + background-color: var(--clr-note-background); + margin: var(--spacing-double); + padding: var(--spacing-double); + gap: var(--spacing-double); + text-decoration: none; + color: inherit; + + img { + width: var(--avatar-size); + aspect-ratio: 1; + border-radius: var(--border-radius); + } + + .title { + font-size: var(--font-big-size); + font-weight: bold; + } +} diff --git a/static/style.css b/static/style.css index 34de2d2..c1b3bab 100644 --- a/static/style.css +++ b/static/style.css @@ -3,6 +3,7 @@ @import url(skeleton.css); @import url(notifications.css); @import url(note.css); +@import url(pages.css); @import url(form.css); @import url(pills.css); @import url(profile.css); diff --git a/static/theme.css b/static/theme.css index 7e8ce2a..a542cae 100644 --- a/static/theme.css +++ b/static/theme.css @@ -39,6 +39,7 @@ --font-normal-size: 12pt; --font-small-size: 10pt; --font-big-size: 16pt; + --font-heading-size: 20pt; /* misc */ --border: 1px solid var(--clr-border); |