src/app/home/HomeContainer.scss
.home {
position: relative;
.markdown {
.heading {
padding-bottom: 0.3em;
margin-bottom: 16px;
border-bottom: 1px solid rgba($black, 0.1);
}
h1 {
flex-grow: 1;
padding-right: 10px;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
h2 {
padding-bottom: 0.3em;
margin-top: 1em;
margin-bottom: 16px;
border-bottom: 1px solid rgba($black, 0.1);
}
h3,
h4,
h5,
h6 {
margin-top: 1em;
margin-bottom: 16px;
}
ul,
ol {
overflow: hidden;
:global(.task-list-item) {
list-style: none;
}
input {
display: inline-block;
margin: 0 0.5em 0.25em -1.6em;
vertical-align: middle;
}
}
blockquote {
padding: 0 divide($grid-gutter-width, 2);
color: $gray-600;
border-left: 4px solid $gray-300;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 6px 13px;
border: 1px solid $gray-400;
}
th {
text-align: center;
}
tr:nth-child(2n) {
background: $gray-100;
}
:not(pre) > code:not([class*='language-']) {
padding: 0.15em 0;
font-size: 0.85em;
color: darken($slategray, 30%);
white-space: nowrap;
background: transparentize($gray-900, 0.95);
border-radius: 3px;
&::before,
&::after {
letter-spacing: -0.2em;
content: '\00a0';
}
}
}
}
@include media-breakpoint-down(sm) {
.home {
.markdown {
font-size: 0.85rem;
h1 {
font-size: $h3-font-size;
}
h2 {
font-size: $h4-font-size;
}
h3 {
font-size: $h5-font-size;
}
h4,
h5,
h6 {
font-size: $h6-font-size;
}
}
}
}