diff --git a/css/content.css b/css/content.css index 25b8b67..b6b57ec 100644 --- a/css/content.css +++ b/css/content.css @@ -39,28 +39,41 @@ .content ul, .content ol { + counter-reset: li; margin-bottom: var(--space-sm); - padding-left: var(--space-sm); } .content ul li, .content ol li { + counter-increment: li; position: relative; - padding: 0 0 var(--space-xs) var(--space-sm); + margin-bottom: var(--space-xs); + padding-left: var(--space-md); +} + +.content ul li:before, +.content ol li:before { + position: absolute; + left: 0; } .content ul li:before { - content: ''; - position: absolute; - left: calc(var(--space-xxs) - (var(--bullet-size) / 2)); + content: ""; top: calc(var(--base-line-height) / 2 * 1rem); - background-color: var(--color-dark-blue); + background-color: var(--color-light-blue); width: var(--bullet-size); height: var(--bullet-size); border-radius: 50%; transform: translateY(-50%); } +.content ol li:before { + content: counter(li) "."; + top: 0; + color: var(--color-light-blue); + font-weight: 700; +} + .content a { color: var(--color-light-blue); transition: box-shadow var(--transition-md) ease-out; @@ -124,6 +137,12 @@ margin: var(--space-sm) 0 0; } +.content .wp-block-quote { + border-left: var(--space-xxs) solid var(--color-light-blue); + margin-bottom: var(--space-sm); + padding: var(--space-sm) var(--space-md); +} + .content table { border-collapse: collapse; table-layout: fixed; diff --git a/css/index.css b/css/index.css index a0da68f..ef4c31d 100644 --- a/css/index.css +++ b/css/index.css @@ -68,7 +68,7 @@ --body-font-family: 'Open Sans', sans-serif; --link-focus: 0 0.1rem 0 0 var(--color-light-blue); --image-focus: 0 0 0 0.2rem #fff, 0 0 0 0.4rem var(--color-light-blue); - --bullet-size: 0.334rem; + --bullet-size: 0.45rem; } @custom-media --viewport-sm (min-width: 30rem);