mirror of
https://github.com/ae-utbm/sith.git
synced 2026-10-23 10:49:31 +00:00
imperosol
68c05b5b1d
A l'origine, l'API retournait le markdown encapsulé dans une div avec la class `.markdown`. Quand on est passé sur notre propre lib WASM pour faire la preview entièrement côté front, on a oublié ce détail. En même temps, on résout ici un petit glitch d'affichage qui fait qu'on avait le background des blocs de codes qui se mettait en dessous de notre propre style.
88 lines
1.6 KiB
SCSS
88 lines
1.6 KiB
SCSS
.markdown {
|
|
--bg-lightgrey: rgb(240, 241, 245);
|
|
--border-lightgrey: rgb(215, 216, 220);
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
ul,
|
|
ol,
|
|
p {
|
|
line-height: 22px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
code {
|
|
overflow: auto;
|
|
max-width: 100%;
|
|
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
|
|
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
|
|
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
|
|
monospace;
|
|
font-size: 14px;
|
|
tab-size: 4;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border-lightgrey);
|
|
background-color: var(--bg-lightgrey);
|
|
padding: 1px 2px;
|
|
}
|
|
|
|
/**
|
|
* Some restyling rules for the cases where our own md css
|
|
* conflicts with the easymde editor preview css
|
|
*/
|
|
&.editor-preview {
|
|
pre {
|
|
background: unset;
|
|
}
|
|
}
|
|
pre code {
|
|
// code that is not inlined
|
|
margin: 15px;
|
|
padding: 10px;
|
|
display: block;
|
|
border-radius: 5px;
|
|
|
|
@media screen and (max-width: 500px) {
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
background-color: var(--bg-lightgrey);
|
|
border-left: 5px solid #ccc;
|
|
border-radius: 4px;
|
|
margin: 15px;
|
|
padding: 10px 15px;
|
|
display: block;
|
|
width: fit-content;
|
|
|
|
p:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
margin: 10px 0;
|
|
padding: 8px 10px;
|
|
}
|
|
}
|
|
|
|
table {
|
|
width: auto;
|
|
min-width: 30%;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.footnotes {
|
|
font-size: 85%;
|
|
}
|
|
} |