better style for rendered markdown

This commit is contained in:
thomas girod 2024-07-08 15:04:11 +02:00
parent 02ec3607b2
commit 30948f1701
3 changed files with 87 additions and 50 deletions

View File

@ -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%;
}
}

View File

@ -947,22 +947,6 @@ dt {
margin-top: 25px; 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 { .edit-bar {
display: block; display: block;
margin: 4px; margin: 4px;
@ -979,17 +963,18 @@ blockquote h5:first-child {
} }
table { table {
width: 100%; width: 90%;
margin: 15px auto; margin: 15px auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
border-radius: 5px; border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
overflow: hidden; 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 { table {
width: 100%; width: 100%;
} }
@ -999,7 +984,8 @@ th {
padding: 4px; padding: 4px;
} }
td, th { td,
th {
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
padding: 5px 10px; padding: 5px 10px;
@ -1009,7 +995,6 @@ td, th {
} }
td { td {
padding: 4px;
margin: 5px; margin: 5px;
border-collapse: collapse; border-collapse: collapse;
vertical-align: top; vertical-align: top;
@ -1020,7 +1005,8 @@ td {
} }
} }
th, thead td { th,
thead td {
text-align: center; text-align: center;
border-top: none; border-top: none;
} }
@ -1421,7 +1407,7 @@ footer {
> .version { > .version {
margin-top: 3px; 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-------------------------------*/ /*--------------------------------JQuery-------------------------------*/
.ui-state-active, .ui-state-active,

View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="{{ static('core/jquery.datetimepicker.min.css') }}"> <link rel="stylesheet" href="{{ static('core/jquery.datetimepicker.min.css') }}">
<link rel="stylesheet" href="{{ static('ajax_select/css/ajax_select.css') }}"> <link rel="stylesheet" href="{{ static('ajax_select/css/ajax_select.css') }}">
<link rel="stylesheet" href="{{ scss('core/style.scss') }}"> <link rel="stylesheet" href="{{ scss('core/style.scss') }}">
<link rel="stylesheet" href="{{ scss('core/markdown.scss') }}">
<link rel="stylesheet" href="{{ scss('core/header.scss') }}"> <link rel="stylesheet" href="{{ scss('core/header.scss') }}">
<link rel="stylesheet" href="{{ scss('core/navbar.scss') }}"> <link rel="stylesheet" href="{{ scss('core/navbar.scss') }}">