Files
windycoys/css/content.css
Dan Head 4bc196ad7b Use viewport unit to scale base font size
Use rems for font sizes and margin/padding
2019-01-11 15:46:00 +00:00

157 lines
2.5 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);
}
.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);
}
@media (--viewport-md) {
.content p {
margin-bottom: var(--space-md);
}
}
.content ul li {
position: relative;
padding: 0 0 var(--space-xs) var(--space-sm);
}
.content ul li:before {
content: '';
position: absolute;
left: 4px;
top: 10px;
background-color: var(--color-dark-blue);
width: 6px;
height: 6px;
border-radius: 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: 5px;
}
.content th {
border-width: 0 0 2px;
}
.content iframe {
max-width: 100%;
}