CoastalCommitsPastes/client/styles/markdown.css

131 lines
2.4 KiB
CSS
Raw Normal View History

article {
2022-03-23 19:28:39 -04:00
max-width: var(--main-content);
margin: 0 auto;
line-height: 1.9;
}
article > * + * {
2022-03-23 19:28:39 -04:00
margin-top: 2em;
}
article img {
2022-03-23 19:28:39 -04:00
max-width: 100%;
margin: auto;
}
article [id]::before {
2022-03-23 19:28:39 -04:00
content: "";
display: block;
height: var(--gap-half);
margin-top: calc(var(--gap-half) * -1);
2022-03-23 19:28:39 -04:00
visibility: hidden;
}
/* Lists */
article ul {
2022-03-23 19:28:39 -04:00
padding: 0;
list-style-position: inside;
list-style-type: circle;
}
article ol {
2022-03-23 19:28:39 -04:00
padding: 0;
list-style-position: inside;
}
article ul li.reset {
2022-03-23 19:28:39 -04:00
display: flex;
align-items: flex-start;
2022-03-23 19:28:39 -04:00
list-style-type: none;
margin-left: -0.5rem;
}
article ul li.reset .check {
2022-03-23 19:28:39 -04:00
display: flex;
align-items: center;
margin-right: 0.51rem;
}
/* Checkbox */
input[type="checkbox"] {
2022-03-23 19:28:39 -04:00
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 {
2022-03-23 19:28:39 -04:00
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 {
2022-03-23 19:28:39 -04:00
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 {
2022-03-23 19:28:39 -04:00
outline: none;
border-color: var(--fg);
}
/* Code Snippets */
.token-line:not(:last-child) {
2022-03-23 19:28:39 -04:00
min-height: 1.4rem;
}
article *:not(pre) > code {
2022-03-23 19:28:39 -04:00
font-weight: 500;
font-family: var(--font-sans);
}
2022-03-23 00:37:27 -04:00
article li > p {
2022-03-23 19:28:39 -04:00
display: inline-block;
2022-03-23 19:49:58 -04:00
padding: 0;
margin: 0;
}
article code > * {
font-family: var(--font-mono);
2022-03-23 00:37:27 -04:00
}
article pre {
2022-03-23 19:28:39 -04:00
overflow-x: auto;
border-radius: var(--inline-radius);
line-height: 1.8;
padding: 1rem;
font-size: 0.875rem;
}
/* Linkable Headers */
.header-link {
2022-03-23 19:28:39 -04:00
color: inherit;
text-decoration: none;
}
.header-link::after {
2022-03-23 19:28:39 -04:00
opacity: 0;
content: "#";
margin-left: var(--gap-half);
}
.header-link:hover::after {
2022-03-23 19:28:39 -04:00
opacity: 1;
}