spee.ch/client/scss/_markdown.scss

166 lines
2.6 KiB
SCSS

.markdown-preview {
margin: $tertiary-padding 0px;
h1,
h2,
h3 {
font-size: inherit;
font-weight: inherit;
margin: $tertiary-padding 0px;
}
h4, h5, h6 {
font-size: $text-large;
font-weight: 600;
margin: $tertiary-padding 0px;
}
// Paragraphs
p {
font-size: 1.15rem;
white-space: pre-line;
margin: $tertiary-padding 0px;
svg {
width: 1rem;
height: 1rem;
margin-left: 0.2rem;
position: relative;
top: 1px;
}
}
blockquote {
background: $blockquote-background;
padding: $tertiary-padding;
min-width: 60%;
margin: $tertiary-padding;
p:first-child{
margin-top: 0px;
}
p:last-child {
margin-bottom: 0px;
}
div {
display: none;
}
}
// Strikethrough text
del {
}
// Tables
table {
width: 100%;
background-color: $base-color;
border-spacing: 0;
border: .5px solid $chrome-color;
margin: $tertiary-padding 0px;
tr {
td,
th,
td:first-of-type,
th:first-of-type,
td:last-of-type,
th:last-of-type {
padding: $thin-padding $tertiary-padding;
text-overflow: ellipsis;
}
td:last-of-type {
text-align: right;
}
th {
background: $chrome-color;
}
}
tr:nth-child(even){
background: $chrome-color;
}
}
// Image
img {
margin-bottom: $tertiary-padding;
margin-top: $tertiary-padding;
padding: $secondary-padding;
object-fit: scale-down;
box-sizing: border-box;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 90vw;
}
iframe {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 90vw;
margin-top: $tertiary-padding 0px;
margin-bottom: $tertiary-padding 0px;
}
// Horizontal Rule
hr {
width: 100%;
height: 1px;
background-color: $base-color;
margin-bottom: 2rem;
position: relative;
top: 1rem;
html[data-theme='dark'] & {
background-color: rgba($base-color, 0.2);
}
}
// Code
pre {
white-space: normal;
}
code {
margin-bottom: $tertiary-padding;
padding: $tertiary-padding;
background-color: $subtle-border-color;
color: $text-color;
display: block;
font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
}
a {
color: $primary-color;
display: inline;
}
// Lists
ul,
ol {
margin-bottom: $thin-padding;
> li {
list-style-position: outside;
}
}
ul {
list-style: initial;
}
li {
margin-left: $primary-padding;
p {
display: inline-block;
}
}
}