misuzu/assets/less/markdown.less

223 lines
3.8 KiB
Text

.markdown {
line-height: 1.7em;
a {
.link();
}
a:not([href]) {
color: inherit;
text-decoration: none;
}
p,
blockquote,
ul,
ol,
dl,
table,
pre {
margin-top: 0;
margin-bottom: @font-size;
}
hr {
height: 2px;
padding: 0;
margin: @font-size 0;
background-color: var(--accent-colour);
border: 0;
}
blockquote {
padding: 0 1em;
color: var(--accent-colour);
border-left: 0.25em solid var(--accent-colour);
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: #777;
vertical-align: middle;
background-color: #000;
border: solid 1px darken(#333, 4%);
border-bottom-color: #444;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #444;
}
code {
padding: .2em .4em;
margin: 0;
background-color: fade(#000, 67%);
border-radius: 2px;
}
del code {
text-decoration: inherit;
}
pre code {
display: inline;
padding: 0;
margin: 0;
overflow: hidden;
line-height: inherit;
word-wrap: break-word;
background: transparent;
border: 0;
}
pre {
word-wrap: normal;
> code {
word-break: normal;
white-space: pre;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: @font-size * 1.2;
margin-bottom: @font-size;
font-weight: 700;
line-height: 1em;
tt,
code {
font-size: inherit;
}
}
h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid var(--accent-colour);
}
h2 {
padding-bottom: 0.3em;
font-size: 1.5em;
border-bottom: 1px solid var(--accent-colour);
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.875em;
}
h6 {
font-size: 0.85em;
color: var(--accent-colour);
}
img {
box-sizing: content-box;
background-color: var(--background-color);
max-width: 100%;
max-height: 100%;
&[align=right] {
padding-left: 20px;
}
&[align=left] {
padding-right: 20px;
}
}
ul,
ol {
padding-left: 2em;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-top: 0;
margin-bottom: 0;
}
li {
word-wrap: break-all;
}
li > p {
margin-top: @font-size;
}
li + li {
margin-top: .25em;
}
dl {
padding: 0;
dt {
padding: 0;
margin-top: @font-size;
font-size: 1em;
font-style: italic;
font-weight: 700;
}
dd {
padding: 0 @font-size;
margin-bottom: @font-size;
}
}
table {
display: block;
width: 100%;
overflow: auto;
th {
font-weight: 700;
}
th,
td {
padding: 6px 13px;
border: 1px solid var(--accent-colour);
}
tr {
background-color: var(--background-colour);
border-top: 1px solid var(--accent-colour);
&:nth-child(2n) {
background-image: linear-gradient(0deg, var(--background-colour-translucent-9), var(--background-colour-translucent-9));
background-color: var(--accent-colour);
}
}
img {
background-color: transparent;
}
}
}