diff --git a/core/static/core/markdown.scss b/core/static/core/markdown.scss
new file mode 100644
index 00000000..e9772d64
--- /dev/null
+++ b/core/static/core/markdown.scss
@@ -0,0 +1,75 @@
+.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;
+ }
+
+ code {
+ overflow: auto;
+ max-width: 100%;
+ font-family: Consolas;
+ font-size: 14px;
+ border-radius: 4px;
+ border: 1px solid var(--border-lightgrey);
+ background-color: var(--bg-lightgrey);
+ padding: 1px 2px;
+ }
+
+ pre code {
+ // code that is not inlined
+ margin: 15px;
+ padding: 10px;
+ display: block;
+ border-radius: 5px;
+ font-size: 1em;
+
+ @media screen and (max-width: 500px) {
+ margin: 10px 0;
+ }
+ }
+
+ blockquote {
+ background-color: var(--bg-lightgrey);
+ border: unset;
+ 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%;
+ }
+}
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 9ba72e7d..c5de097b 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -357,7 +357,7 @@ a:not(.button) {
@media (max-width: 800px) {
flex-direction: column;
}
-
+
.news_column {
display: inline-block;
margin: 0;
@@ -947,22 +947,6 @@ dt {
margin-top: 25px;
}
-code {
- font-family: monospace;
- overflow: auto;
- max-width: 100%;
-}
-
-blockquote {
- margin: 5px;
- padding: 2px;
- border: solid 1px $black-color;
-}
-
-blockquote h5:first-child {
- font-size: 100%;
-}
-
.edit-bar {
display: block;
margin: 4px;
@@ -979,17 +963,18 @@ blockquote h5:first-child {
}
table {
- width: 100%;
+ width: 90%;
margin: 15px auto;
border-collapse: collapse;
border-spacing: 0;
border-radius: 5px;
-moz-border-radius: 5px;
overflow: hidden;
- box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
+ box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
+ rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
}
-@media screen and (max-width: 500px){
+@media screen and (max-width: 500px) {
table {
width: 100%;
}
@@ -999,7 +984,8 @@ th {
padding: 4px;
}
-td, th {
+td,
+th {
vertical-align: middle;
text-align: center;
padding: 5px 10px;
@@ -1009,7 +995,6 @@ td, th {
}
td {
- padding: 4px;
margin: 5px;
border-collapse: collapse;
vertical-align: top;
@@ -1020,7 +1005,8 @@ td {
}
}
-th, thead td {
+th,
+thead td {
text-align: center;
border-top: none;
}
@@ -1421,7 +1407,7 @@ footer {
> .version {
margin-top: 3px;
- color: rgba(0, 0, 0, .3)
+ color: rgba(0, 0, 0, 0.3);
}
}
@@ -1485,31 +1471,6 @@ label {
}
}
-/*-------------------------------MARKDOWN------------------------------*/
-
-.markdown {
- margin: 0;
- padding: 0;
- code {
- font-family: monospace;
- color: $white-color;
- background: $black-color;
- display: inline-block;
- padding: 4px;
- line-height: 120%;
- vertical-align: middle;
- }
- a {
- color: $primary-dark-color;
- }
- a:hover {
- text-decoration: underline;
- }
- .footnotes {
- font-size: 85%;
- }
-}
-
/*--------------------------------JQuery-------------------------------*/
.ui-state-active,
@@ -2045,4 +2006,4 @@ $pedagogy-white-text: #f0f0f0;
}
}
}
-}
\ No newline at end of file
+}
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index c45d30e0..2cdccfdf 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -9,6 +9,7 @@
+