jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

dtext: adjust space between headers and paragraphs.

Browse Source 
Adjust heading tags (h1, h2, h3, h4, h5, h6) to use margins instead of
padding so that margins collapse together. Adjust margin sizes to reduce
gaps between headers and paragraphs, and headers and subheaders.

Also adjust paragraph margins so that there's slightly less space
between paragraphs.
This commit is contained in:
evazion
2022-01-17 13:35:23 -06:00
parent ae11a59c37
commit f39b0bacf4
2 changed files with 18 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/src/styles/base/000_vars.scss
View File

@@ -12,25 +12,6 @@
--arial-font: "Arial", "Helvetica", sans-serif;
}
$h1_padding: 0.8em 0 0.25em 0;
$h2_padding: 0.8em 0 0.25em 0;
$h3_padding: 0.8em 0 0.25em 0;
$h4_padding: 0.8em 0 0.25em 0;
// https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
@mixin fa-solid-icon($content) {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: $content;
}
@mixin active-link {
color: var(--link-color);

41
app/javascript/src/styles/common/dtext.scss
View File

@@ -1,41 +1,27 @@
@import "../base/000_vars";
div.prose {
line-height: 1.4em;
word-break: break-word;
h1, h2, h3 {
line-height: 1em;
p {
margin-bottom: 0.75rem;
}
h1 {
font-size: var(--text-xl);
padding: $h1_padding;
h1, h2, h3, h4, h5, h6 {
line-height: 1;
margin-bottom: 0.75rem;
}
h2 {
h1, h2, h3, h4 {
font-size: var(--text-xl);
padding: $h2_padding;
}
h3 {
font-size: var(--text-xl);
padding: $h3_padding;
}
h4 {
font-size: var(--text-xl);
padding: $h4_padding;
margin-top: 1.75rem;
}
h5 {
font-size: var(--text-lg);
padding: $h4_padding;
}
h6 {
font-size: var(--text-md);
padding: $h4_padding;
}
table {
@@ -46,7 +32,7 @@ div.prose {
ul {
margin-left: 1em;
margin-bottom: 1em;
margin-bottom: 0.75rem;
ul {
margin-bottom: 0;
@@ -109,7 +95,16 @@ div.prose {
a.dtext-named-external-link::after {
// https://fontawesome.com/icons/external-link-alt?style=solid
@include fa-solid-icon("\f35d");
// https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f35d";
font-size: 0.6em;
padding: 0 0.2em 0 0.3em;