Blockquote

[aridus]

Yes, I agree. At the moment msmbstyle is just piggy-backing on the tufte package, and that seems to define block quote as a simple indentation, which doesn't seem in the spirit of how blockquote is supposed to be used. I'll have a look at some examples and maybe refine it a bit, but I'll try to keep the side notes inline when I do!

Feel free to ask questions / make suggestions about the CSS, it's not my forte either. Glad you're finding the package useful, and I'd be very excited to see it used elsewhere in the wild.

Originally posted by @grimbough in #8 (comment)

[aridus]

Referring here to our earlier discussion of how the blockquote should appear, have you had a chance to think about this further?

Many thanks!

[aridus]

I have just noticed that blockquotes now have a grey background (as in bookdown: thanks), but that they are indented and in italics, perhaps neither of which are necessary?

With thanks.

[grimbough]

I quite like the indent & italics, but if you want to modify the style further, you can provide your own CSS file which will override the version provided in the package. For example the following should remove the indent and font style:

blockquote {
  width: 56%;
  -webkit-padding-start: 0%;
  -webkit-padding-end: 0%;
  -moz-padding-start: 0%;
  -moz-padding-end: 0%;
}

blockquote p {
  font-style: normal;
}

You can then save that in the same folder as your Rmd files and then include it in the YAML header. In the example below I saved it as test.css:

output:
  msmbstyle::msmb_html_book:
    highlight: tango
    toc: TRUE
    toc_depth: 1
    split_by: chapter
    margin_references: FALSE
    css: test.css

and that gets me:

You can use this same mechanism to modify almost any of the styling like header colours, fonts sizes, table borders etc.

[aridus]

Thank you: this is very helpful! Other than a stylistic preference, one of the disadvantages of using italics is that any footnote on a blockquote also appears in italics.

I have included your suggestion in our css, and I notice two things (see image):

1. Any footnote on a blockquote is indented in the right-hand margin (it is ok without the inclusion of the css you supplied).

2. The font is not the same as the body text (somehow it is not picking up font we are using). Here is our css (not written by me) with your new code included (sorry, the code below is refusing to format as code, and I can't figure out why):

`.siteHeader {
position: fixed;
background-color: #181a31;
z-index: 2;
top: 0;
left: 0;
right: 0;
height: 50px;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
}

.siteHeader-logo img {
height: 35px;
padding-top: 6px;
}

.siteHeader a {
color: white;
background: none;
text-shadow: none;
}

.siteHeader-back a:hover {
text-decoration: underline;
}

@media (max-width: 760px) {
body {
padding-top: 150px !important;
}
}

#TOC {
max-width: none;
position: fixed;
z-index: 2;
left: 0;
top: 50px;
right: 0;
}

#TOC p.title {
display: none;
}

#TOC ul.navbar {
background-color: #181a31;
}

#TOC ul.navbar li .dropbtn {
padding-top: 10px;
padding-bottom: 10px;
}

#TOC .author {
padding: 0;
}

#TOC .msmb {
padding: 11px 16px;
}

#TOC .dropdown-content {
right: 0;
background-color: #e5e5e5;
margin-right: 0;
}

/* Add padding to compensate for fixed headers */
body {
padding-top: 110px;
}

/* Set the default paragragh styling */
p, ol, ul {
font-size: 1.2rem;
line-height: 1.8rem;
}

h1 {
border-bottom-width: 1px;
}

h2 {
border-bottom-width: 1px;
}

.btn {
border: none;
padding: 4px 12px 5px 12px;
cursor: pointer;
background: none;
background-color: #0c83be;
text-shadow: none;
color: white;
font-size: 1.1rem;
line-height: 1.7rem;
outline: none;
}

html, body, input, *, textarea, select, p, li, label {
font-family: 'Assistant', Times;
}

h1, h2, h3, h4, h5, h6 {
border: none;
margin-top: 2.5rem;
color: #222;
padding-bottom: 0;
}

h1 {
font-weight: bold;
font-size: 2.5rem;
}

h2 {
font-weight: bold;
font-size: 2.1rem;
}

h3 {
font-weight: bold;
font-size: 1.6rem;
}

p a:link, p a:visited, td a:link, td a:visited {
color: #0c83be;
text-decoration: none;
background: none;
}

p a:hover, td a:hover {
text-decoration: underline;
}

blockquote {
width: 56%;
-webkit-padding-start: 0%;
-webkit-padding-end: 0%;
-moz-padding-start: 0%;
-moz-padding-end: 0%;
}

blockquote p {
font-style: normal;
}`

With grateful thanks.

[grimbough]

To my eyes the font in your block quote is correct, it's just scaled up. It looks like the sizing specified in the tufte package is taking precedence so you need to set it to be the same as for the rest of the book.

I hadn't accounted for the impact making the block quote full width would have on the side notes. I think these two can be fixed with the following:

/* remove italics and set size */
blockquote p {
    font-style: normal;
    font-size: 1.2rem;
}

/* restore spacing for notes in quotes */
blockquote .sidenote {
    margin-right: -60%;
    width: 50%;
}

[aridus]

Thanks again! Your comment on the text is correct, and this CSS fixes it, as you can see here:

But the code to restore the spacing is not quite correct. By experimentation I found that this

/* restore spacing for notes in quotes */ blockquote .sidenote { margin-right: -60%; width: 37%; }

sorts out the margin, thus:

but then the margin is insufficiently wide.

It would also be nice to know how to un-indent the blockquote (as I think the grey background is sufficient indication that it is something different).

Many thanks!

[grimbough]

Sorry, the intention was to also use this part from the previous post, which gets rid of the indentation

blockquote {
width: 55%;
-webkit-padding-start: 0%;
-webkit-padding-end: 0%;
-moz-padding-start: 0%;
-moz-padding-end: 0%;
}

[aridus]

Ah...I feel that my ignorance is showing! When this project is completed I need to try and find some time to study CSS... Thank you, and all is now well with the blockquotes.