diff --git a/assets/scss/asciidoctor.scss b/assets/scss/asciidoctor.scss index 2d71ac5..32cd8e3 100644 --- a/assets/scss/asciidoctor.scss +++ b/assets/scss/asciidoctor.scss @@ -2,7 +2,10 @@ @import "roles"; :root { - --mark-border-style: 0.5em var(--base05) solid; + --side-accent-color: var(--base05); + --side-accent-color-text: var(--base00); + --border-style: 1px var(--side-accent-color) solid; + --mark-border-style: 0.5em var(--side-accent-color) solid; } .anchor { @@ -59,8 +62,8 @@ p.tableblock { *:not(.listingblock, .literalblock, .openblock) { > .attribution, > .title { - background: var(--foreground); - color: var(--base00); + background: var(--side-accent-color); + color: var(--side-accent-color-text); font-size: 0.9em; padding: 0.5em; word-break: break-word; @@ -76,8 +79,8 @@ p.tableblock { position: relative; > .title { - background: var(--foreground); - color: var(--background); + background: var(--side-accent-color); + color: var(--side-accent-color-text); font-size: 0.9em; padding: 0.5em; word-wrap: break-word; @@ -241,17 +244,15 @@ p { // Custom Asciidoctor components. .dialogblock { - &__box { - align-items: center; - border: var(--border-style); - border-left: var(--mark-border-style); - display: flex; - flex-flow: row nowrap; - gap: 1em; - padding: 0.5em; - max-width: 55ch; - width: fit-content; - } + align-items: center; + border: var(--border-style); + border-left: var(--mark-border-style); + display: flex; + flex-flow: row nowrap; + gap: 1em; + padding: 0.5em; + max-width: 60ch; + width: fit-content; &__avatar { --size: 4em; @@ -279,10 +280,6 @@ p { } } - &__avatar-name { - font-weight: bolder; - } - // Roles/modifiers. &.reversed { flex-direction: row-reverse; @@ -290,6 +287,11 @@ p { border-left: var(--border-style); border-right: var(--mark-border-style); } + + &.full { + max-width: unset; + width: unset; + } } @media all and (max-width: 860px) { diff --git a/assets/scss/extend.scss b/assets/scss/extend.scss index ec4e8fd..6b50049 100644 --- a/assets/scss/extend.scss +++ b/assets/scss/extend.scss @@ -18,6 +18,8 @@ table tr td > p { margin-top: 1em; } +a:hover { color: var(--base0B); } + ul, ol { margin: 1em 0 0; @@ -27,10 +29,6 @@ pre { margin-bottom: 0; } -a:hover { - color: var(--base0B); -} - button { border: var(--border-style); } @@ -48,18 +46,13 @@ main > article { } // Layouts -.site__title { - --size: 2rem; - margin-bottom: unset; - font-size: var(--size); - line-height: unset; -} - .site__socials { list-style: none; padding-left: 0; } +.site__social-icon:hover { color: var(--base0B); } + .site__links--content, .site__socials--content { margin: 1em 0 0; @@ -74,9 +67,6 @@ main > article { .site__links--content > * { flex-basis: 20; } -.site__socials--content > * { - flex-basis: 15%; -} article.post { padding: 0.5em; diff --git a/assets/scss/roles.scss b/assets/scss/roles.scss index 53d763b..7213015 100644 --- a/assets/scss/roles.scss +++ b/assets/scss/roles.scss @@ -1,4 +1,10 @@ // Asciidoctor roles (e.g., [.text-center]) on a block. +.error { + --side-accent-color: var(--base08); + --side-accent-color-text: var(--base05); + --border-style: 2px var(--side-accent-color) solid; +} + .inline-block { display: inline-block; }