Refactor list styles

Add blockquote styles
This commit is contained in:
2019-03-09 18:50:40 +00:00
parent b321fb4698
commit a09b549219
2 changed files with 26 additions and 7 deletions

View File

@@ -39,28 +39,41 @@
.content ul, .content ul,
.content ol { .content ol {
counter-reset: li;
margin-bottom: var(--space-sm); margin-bottom: var(--space-sm);
padding-left: var(--space-sm);
} }
.content ul li, .content ul li,
.content ol li { .content ol li {
counter-increment: li;
position: relative; 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 ul li:before {
content: ''; content: "";
position: absolute;
left: calc(var(--space-xxs) - (var(--bullet-size) / 2));
top: calc(var(--base-line-height) / 2 * 1rem); top: calc(var(--base-line-height) / 2 * 1rem);
background-color: var(--color-dark-blue); background-color: var(--color-light-blue);
width: var(--bullet-size); width: var(--bullet-size);
height: var(--bullet-size); height: var(--bullet-size);
border-radius: 50%; border-radius: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.content ol li:before {
content: counter(li) ".";
top: 0;
color: var(--color-light-blue);
font-weight: 700;
}
.content a { .content a {
color: var(--color-light-blue); color: var(--color-light-blue);
transition: box-shadow var(--transition-md) ease-out; transition: box-shadow var(--transition-md) ease-out;
@@ -124,6 +137,12 @@
margin: var(--space-sm) 0 0; 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 { .content table {
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed; table-layout: fixed;

View File

@@ -68,7 +68,7 @@
--body-font-family: 'Open Sans', sans-serif; --body-font-family: 'Open Sans', sans-serif;
--link-focus: 0 0.1rem 0 0 var(--color-light-blue); --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); --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); @custom-media --viewport-sm (min-width: 30rem);