CoastalCommitsPastes/client/styles/markdown.css
2022-03-22 21:37:27 -07:00

132 lines
2.6 KiB
CSS

article {
max-width: var(--main-content);
margin: 0 auto;
line-height: 1.9;
}
article > * + * {
margin-top: 2em;
}
article img {
max-width: 100%;
/* width: var(--main-content); */
width: auto;
margin: auto;
display: block;
border-radius: var(--radius);
}
article [id]::before {
content: "";
display: block;
height: 70px;
margin-top: -70px;
visibility: hidden;
}
/* Lists */
article ul {
padding: 0;
list-style-position: inside;
list-style-type: circle;
}
article ol {
padding: 0;
list-style-position: inside;
}
article ul li.reset {
display: flex;
align-items: flex-start;
list-style-type: none;
margin-left: -0.5rem;
}
article ul li.reset .check {
display: flex;
align-items: center;
margin-right: 0.51rem;
}
/* Checkbox */
input[type="checkbox"] {
vertical-align: middle;
appearance: none;
display: inline-block;
background-origin: border-box;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
background-color: var(--bg);
color: var(--fg);
border: 1px solid var(--fg);
border-radius: 3px;
}
input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
html[data-theme="light"] input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
}
input[type="checkbox"]:focus {
outline: none;
box-shadow: 0 0 0 2px var(--gray);
border-color: var(--fg);
}
/* Code Snippets */
.token-line:not(:last-child) {
min-height: 1.4rem;
}
article *:not(pre) > code {
font-weight: 500;
font-family: var(--font-sans);
font-size: 1rem;
}
article li > p {
font-family: var(--font-mono);
display: inline-block;
}
article pre {
overflow-x: auto;
background: var(--lightest-gray);
border-radius: var(--inline-radius);
line-height: 1.8;
padding: 1rem;
font-size: 0.875rem;
}
/* Linkable Headers */
.header-link {
color: inherit;
text-decoration: none;
}
.header-link::after {
opacity: 0;
content: "#";
margin-left: var(--gap-half);
}
.header-link:hover::after {
opacity: 1;
}