hugo-book/assets/_markdown.scss

213 lines
3.3 KiB
SCSS
Raw Normal View History

2020-05-30 18:50:08 +00:00
@import "variables";
2018-09-05 14:22:04 +00:00
.markdown {
2020-05-30 18:50:08 +00:00
line-height: 1.6;
2018-09-24 15:03:23 +00:00
// remove padding at the beginning of page
> :first-child {
margin-top: 0;
}
2020-05-30 18:50:08 +00:00
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
2020-05-30 18:50:08 +00:00
line-height: 1;
margin-top: 1.5em;
margin-bottom: $padding-16;
2020-05-30 18:50:08 +00:00
a.anchor {
opacity: 0;
font-size: 0.75em;
2020-05-30 18:50:08 +00:00
vertical-align: middle;
text-decoration: none;
}
&:hover a.anchor,
a.anchor:focus {
opacity: initial;
2020-05-30 18:50:08 +00:00
}
}
2020-05-30 18:50:08 +00:00
h4,
h5,
h6 {
font-weight: bolder;
}
h5 {
2020-05-30 18:50:08 +00:00
font-size: 0.875em;
}
h6 {
2020-05-30 18:50:08 +00:00
font-size: 0.75em;
2018-09-17 13:09:51 +00:00
}
2018-09-17 23:35:54 +00:00
2020-05-30 18:50:08 +00:00
b,
optgroup,
strong {
2019-06-10 15:09:43 +00:00
font-weight: bolder;
2018-09-17 23:35:54 +00:00
}
2020-03-07 17:51:24 +00:00
2018-09-05 14:22:04 +00:00
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:visited {
color: var(--color-visited-link);
}
2018-09-05 14:22:04 +00:00
}
img {
max-width: 100%;
height: auto;
}
2018-09-05 14:22:04 +00:00
code {
direction: ltr;
unicode-bidi: embed;
2018-09-13 12:54:04 +00:00
padding: 0 $padding-4;
background: var(--gray-200);
border-radius: $border-radius;
2020-05-30 18:50:08 +00:00
font-size: 0.875em;
2018-09-05 14:22:04 +00:00
}
pre {
direction: ltr;
unicode-bidi: embed;
2018-09-05 14:22:04 +00:00
padding: $padding-16;
background: var(--gray-100);
border-radius: $border-radius;
overflow-x: auto;
2019-05-05 00:24:25 +00:00
code {
padding: 0;
background: none;
}
2018-09-05 14:22:04 +00:00
}
2022-01-13 15:52:03 +00:00
p {
2023-04-24 11:06:20 +00:00
word-wrap: break-word;
2022-01-13 15:52:03 +00:00
}
2018-09-05 14:22:04 +00:00
blockquote {
margin: $padding-16 0;
2019-10-03 16:15:24 +00:00
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
border-inline-start: $padding-4 solid var(--gray-200);
border-radius: $border-radius;
2018-09-05 14:22:04 +00:00
2020-05-30 18:50:08 +00:00
:first-child {
margin-top: 0;
}
:last-child {
margin-bottom: 0;
}
2018-09-05 14:22:04 +00:00
}
2018-09-24 15:03:23 +00:00
2019-03-25 18:47:21 +00:00
table {
2019-08-05 01:58:57 +00:00
overflow: auto;
display: block;
2019-03-25 18:47:21 +00:00
border-spacing: 0;
border-collapse: collapse;
margin-top: $padding-16;
margin-bottom: $padding-16;
2020-03-07 17:51:24 +00:00
2020-05-30 18:50:08 +00:00
tr th,
tr td {
2019-03-25 18:47:21 +00:00
padding: $padding-8 $padding-16;
border: $padding-1 solid var(--gray-200);
2019-03-25 18:47:21 +00:00
}
tr:nth-child(2n) {
background: var(--gray-100);
2019-03-25 18:47:21 +00:00
}
2018-09-24 15:03:23 +00:00
}
hr {
height: $padding-1;
border: none;
background: var(--gray-200);
}
2019-06-18 20:56:43 +00:00
2020-05-30 18:50:08 +00:00
ul,
ol {
padding-inline-start: $padding-16 * 2;
2023-04-24 11:07:08 +00:00
word-wrap: break-word;
2019-06-18 20:56:43 +00:00
}
dl {
dt {
font-weight: bolder;
margin-top: $padding-16;
}
dd {
2021-05-03 20:59:33 +00:00
margin-inline-start: 0;
margin-bottom: $padding-16;
2019-06-18 20:56:43 +00:00
}
}
2019-10-27 12:05:43 +00:00
// Special case for highlighted code with line numbers
.highlight {
direction: ltr;
unicode-bidi: embed;
border-radius: $border-radius;
overflow: hidden;
table tr {
td pre code > span {
display: flex;
}
td:nth-child(1) pre {
margin: 0;
padding-inline-end: 0;
}
td:nth-child(2) pre {
margin: 0;
padding-inline-start: 0;
}
2019-10-27 12:05:43 +00:00
}
}
2020-01-23 23:22:23 +00:00
details {
padding: $padding-16;
border: $padding-1 solid var(--gray-200);
2020-01-23 23:22:23 +00:00
border-radius: $border-radius;
summary {
line-height: 1;
2020-04-21 20:30:00 +00:00
padding: $padding-16;
margin: -$padding-16;
2020-01-23 23:22:23 +00:00
cursor: pointer;
}
2020-04-21 20:30:00 +00:00
&[open] summary {
margin-bottom: 0;
}
2020-01-23 23:22:23 +00:00
}
2020-06-16 21:24:40 +00:00
figure {
margin: $padding-16 0;
figcaption p {
margin-top: 0;
}
}
}
.markdown-inner {
// Util class to remove extra margin in nested markdown content
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}