Files
windycoys/css/content.css
2019-01-14 21:45:23 +00:00

159 lines
2.6 KiB
CSS

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
font-family: var(--heading-font-family);
margin-bottom: var(--space-sm);
color: var(--color-dark-blue);
}
.content h1 {
font-size: var(--size-heading-1);
}
.content h2 {
font-size: var(--size-heading-2);
}
.content h3 {
font-size: var(--size-heading-3);
}
.content h4 {
font-size: var(--size-heading-4);
}
.content h5 {
font-size: var(--size-heading-5);
}
.content h6 {
font-size: var(--size-heading-6);
}
.content p {
margin-bottom: var(--space-sm);
}
.content ul,
.content ol {
margin-bottom: var(--space-sm);
}
.content ul li,
.content ol li {
position: relative;
padding: 0 0 var(--space-xs) var(--space-sm);
}
.content ul li:before {
content: '';
position: absolute;
left: calc(var(--space-xxs) - (var(--bullet-size) / 2));
top: calc(var(--base-line-height) / 2 * 1rem);
background-color: var(--color-dark-blue);
width: var(--bullet-size);
height: var(--bullet-size);
border-radius: 50%;
transform: translateY(-50%);
}
.content a {
color: var(--color-light-blue);
transition: box-shadow var(--transition-md) ease-out;
}
.content a img {
transition:
box-shadow var(--transition-md) ease-out,
filter var(--transition-md) ease-out;
}
.content a:focus {
box-shadow: var(--link-focus);
}
.content a:focus img {
box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--color-light-blue);
filter: brightness(125%);
}
.content a:hover {
box-shadow: var(--link-focus);
}
/**
* Wordpress overrides
*/
.content .twitter-tweet {
width: auto !important;
}
.content .wp-caption {
background-color: #fff;
border: 1px solid var(--color-light-grey);
border-radius: 4px;
display: inline-block;
margin: 0 0 var(--space-sm);
padding: var(--space-sm);
}
.content .wp-caption a {
display: inline-block;
}
.content .wp-caption a:after {
display: none;
}
@media (--viewport-md) {
.content .twitter-tweet,
.content .wp-caption {
margin: 0 0 var(--space-md);
padding: var(--space-md);
}
}
.content .wp-caption-text {
font-family: var(--heading-font-family);
margin: var(--space-sm) 0 0;
}
.content table {
border-collapse: collapse;
table-layout: fixed;
display: block;
overflow-x: auto;
height: auto !important;
max-width: 85vw;
white-space: nowrap;
margin-bottom: var(--space-md);
width: auto !important;
}
@media (--viewport-md) {
.content table {
max-width: 100%;
}
}
.content th,
.content tr,
.content td {
border-width: 0 0 1px;
border-style: solid;
border-color: var(--color-dark-blue);
padding: var(--space-xs);
}
.content th {
border-width: 0 0 2px;
}
.content iframe {
max-width: 100%;
}