Add classes: Actions + Divider + Illustration + InfoTable + Stat, Add utilities (needs docs)

src/package/styles/classes/actions.postcss

@@ -0,0 +1,20 @@
+.actions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-left: auto;
+    min-width: fit-content;
+
+    > *:last-child {
+        margin-top: auto;
+        color: var(--color-text-light);
+    }
+
+    @media (width <= 1000px) {
+        flex-direction: row;
+        align-items: flex-start;
+        margin-left: unset;
+    }
+}

src/package/styles/classes/base.postcss

@@ -0,0 +1,26 @@
+.base {
+    display: flex;
+    justify-content: center;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-standard);
+    font-size: var(--font-size-nm);
+    font-weight: var(--font-weight-regular);
+    padding: 1rem;
+
+    scrollbar-color: var(--color-scrollbar) var(--color-bg);
+
+    &::-webkit-scrollbar {
+        width: 14px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: var(--color-bg);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar);
+        border-radius: 999px;
+        border: 3px solid var(--color-bg);
+    }
+}

src/package/styles/classes/button-group.postcss

@@ -0,0 +1,5 @@
+.button-group {
+    display: flex;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+}

src/package/styles/classes/card.postcss

@@ -0,0 +1,101 @@
+.card {
+    --padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    background-color: var(--color-raised-bg);
+    border-radius: var(--rounded);
+    overflow: hidden;
+    box-shadow: var(--shadow-raised), var(--shadow-inset);
+
+    padding: var(--padding);
+    grid-gap: 1rem;
+    max-width: 100%;
+
+    .profile-picture {
+        z-index: 1;
+    }
+
+    &--gap {
+        &-compressed {
+            grid-gap: 0.6rem;
+        }
+
+        &-none {
+            grid-gap: 0;
+        }
+    }
+
+    &--pad {
+        &-top {
+            padding-top: 2.5rem;
+        }
+    }
+
+    &--overflow-visible {
+        overflow: visible;
+    }
+
+    &__banner {
+        --inverse-padding: calc(var(--padding) * -1);
+        margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
+        z-index: 0;
+        background-color: var(--color-divider);
+
+        &:-moz-loading {
+            visibility: hidden;
+        }
+
+        &--short {
+            height: 6.5rem;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        &--dark {
+            filter: brightness(0.7);
+        }
+    }
+
+    &__overlay {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        grid-gap: 0.5rem;
+
+        z-index: 1;
+
+        &--row {
+            flex-direction: row;
+        }
+    }
+
+    &--row {
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &--strip {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &--pad-x {
+        --padding: 1rem 1.3rem;
+    }
+
+    &.text {
+        --padding: 1.5rem;
+    }
+
+    p {
+        line-height: 130%;
+    }
+}

src/package/styles/classes/divider.postcss

@@ -0,0 +1,5 @@
+.divider {
+    margin: 0.25rem 0;
+    border: none;
+    border-top: 1px solid var(--color-divider);
+}

src/package/styles/classes/illustration.postcss

@@ -0,0 +1,16 @@
+.illustration {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    grid-gap: 2rem;
+
+    &__image {
+        max-width: 300px;
+    }
+
+    &__description {
+        font-size: 1.2rem;
+        color: var(--color-text-light)
+    }
+}

src/package/styles/classes/info-table.postcss

@@ -0,0 +1,11 @@
+.info-table {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 0.25rem 2rem;
+    width: fit-content;
+
+    &__label {
+        color: var(--color-text-lightest);
+        font-weight: var(--font-weight-medium);
+    }
+}

src/package/styles/classes/link.postcss

@@ -0,0 +1,26 @@
+.link {
+    color: var(--color-link);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    line-height: 100%;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.link-group {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    grid-gap: 0.75rem;
+
+    .link {
+        color: var(--color-text);
+
+        &:hover {
+            color: var(--color-link);
+
+        }
+    }
+}

src/package/styles/classes/markdown.postcss

@@ -0,0 +1,137 @@
+.markdown {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 1rem;
+
+    blockquote,
+    details,
+    dl,
+    ol,
+    p,
+    code,
+    pre,
+    table,
+    ul {
+        margin: 0;
+    }
+
+    p {
+        line-height: 1.5;
+        word-wrap: break-word;
+        overflow-wrap: anywhere;
+    }
+
+    h1,
+    h2 {
+        padding-bottom: 0.2em;
+        border-bottom: 1px solid var(--color-divider);
+    }
+
+    blockquote {
+        padding: 0 1rem;
+        color: var(--color-text);
+        border-left: 0.25rem solid var(--color-divider);
+    }
+
+    a {
+        color: var(--color-link);
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    img,
+    iframe {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--rounded-sm);
+    }
+
+    iframe {
+        width: 35rem;
+        aspect-ratio: 16/9;
+    }
+
+    code {
+        padding: 0.2rem 0.4rem;
+        font-size: 80%;
+        border-radius: var(--rounded-sm);
+        background-color: var(--color-code-bg);
+        color: var(--color-code-text);
+    }
+
+    pre {
+        padding: 1rem;
+        border-radius: var(--rounded-sm);
+        overflow-x: auto;
+
+        code {
+            font-size: 80%;
+            padding: 0;
+            border-radius: 0;
+            background-color: unset;
+        }
+    }
+
+    hr {
+        margin: 0;
+        color: var(--color-divider);
+    }
+
+    table {
+        display: block;
+        width: max-content;
+        max-width: 100%;
+        overflow: auto;
+        border-collapse: collapse;
+        line-height: 1.5;
+
+        th {
+            font-weight: 600;
+        }
+
+        td,
+        th {
+            padding: 0.4rem 0.85rem;
+            border: 0.1rem solid var(--color-table-border);
+        }
+
+        tr:nth-child(2n) {
+            background-color: var(--color-table-alternate-row);
+        }
+    }
+
+    details {
+        border: 0.15rem solid var(--color-button-bg);
+        border-radius: var(--rounded-sm);
+        padding: 0.5rem 0.5rem 0;
+        overflow: hidden;
+
+        summary {
+            font-weight: bold;
+            margin: -0.5rem -0.5rem 0;
+            padding: 0.5rem 0.8rem;
+            cursor: pointer;
+            background-color: var(--color-button-bg);
+
+            &:hover {
+                background-color: var(--color-button-bg-hover);
+            }
+        }
+
+        &[open] {
+            padding: 0.5rem;
+
+            summary {
+                margin-bottom: 0.5rem;
+            }
+        }
+    }
+
+    li:has(> input) {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+}

src/package/styles/classes/member.postcss

@@ -0,0 +1,13 @@
+.member {
+    display: flex;
+    grid-gap: 0.75rem;
+
+    &__info {
+        display: flex;
+        flex-direction: column;
+
+        &__link {
+            font-weight: var(--font-weight-medium);
+        }
+    }
+}

src/package/styles/classes/stat.postcss

@@ -0,0 +1,23 @@
+.stat {
+    display: flex;
+    align-items: baseline;
+    grid-gap: 0.4rem;
+
+    &--light {
+        color: var(--color-text-lightest);
+    }
+
+    .icon {
+        align-self: center;
+    }
+
+    strong {
+        font-size: 20px;
+    }
+}
+
+.stat-group {
+    display: flex;
+    grid-gap: 0.5rem;
+    flex-wrap: wrap;
+}

src/package/styles/classes/tag.postcss

@@ -0,0 +1,18 @@
+.tag {
+    display: flex;
+    align-items: center;
+    grid-gap: 0.25rem;
+    color: var(--color-text-lightest);
+
+    svg {
+        width: 1rem;
+        height: auto;
+    }
+}
+
+.tag-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin-top: auto;
+    grid-gap: 0.25rem 0.6rem;
+}

src/package/styles/classes/title.postcss

@@ -0,0 +1,14 @@
+.title-primary {
+    font-size: 24px;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-secondary {
+    font-size: 20px;
+    font-weight: var(--font-weight-bold);
+}
+
+.title-tertiary {
+    font-size: 16px;
+    font-weight: var(--font-weight-bold);
+}