lesson.scss: define 'inline' class for images

[maxim-belkin]

Define inline class for images that should not be displayed as block elements.

By appending {:class="inline"} or {: .inline} to an image definition in Markdown, one can create an inline image that doesn't break the current line and is embedded in the paragraph. Useful for showing special symbols and hieroglyphs that we can't display by other means.

Example: Lesson: https://github.com/carpentries-incubator/SDC-BIDS-dMRI Episode: diffusion_tensor_imaging Diff:

diff --git a/_episodes/diffusion_tensor_imaging.md b/_episodes/diffusion_tensor_imaging.md
index 32fa976..ca8475d 100644
--- a/_episodes/diffusion_tensor_imaging.md
+++ b/_episodes/diffusion_tensor_imaging.md
@@ -29,14 +29,14 @@ The tensor models the diffusion signal mathematically as:

 ![Diffusion signal equation]({{ relative_root_path }}/fig/diffusion_tensor_imaging/diffusion_eqn.png){:class="img-responsive"}

-Where ![Diffusion unit vector]({{ relative_root_path }}/fig/diffusion_tensor_imaging/inline_unitvector.png) 
+Where ![Diffusion unit vector]({{ relative_root_path }}/fig/diffusion_tensor_imaging/inline_unitvector.png){:class="inline"}
 is a unit vector in 3D space indicating the direction of measurement and b are the parameters of 
 the measurement, such as the strength and duration of diffusion-weighting gradient. 
-![Diffusion signal]({{ relative_root_path }}/fig/diffusion_tensor_imaging/inline_diffusionsignal.png) 
+![Diffusion signal]({{ relative_root_path }}/fig/diffusion_tensor_imaging/inline_diffusionsignal.png){:class="inline"}
 is the diffusion-weighted signal measured and 
-![Non-weighted diffusion signal]({{ relative_root_path }}/fig/diffusion_tensor_imaging/inline_nondiffsignal.png) 
+![Non-weighted diffusion signal]({{ relative_root_path }}/fig/diffusion_tensor_imaging/inline_nondiffsignal.png){:class="inline"}
 is the signal conducted in a measurement with no diffusion weighting. 
-![Diffusivity]({{ relative_root_path }}/fig/diffusion_tensor_imaging/inline_diffusionmatrix.png) 
+![Diffusivity]({{ relative_root_path }}/fig/diffusion_tensor_imaging/inline_diffusionmatrix.png){: .inline}
 is a positive-definite quadratic form, which contains six free parameters to be fit. 
 These six parameters are:

Result:

CC @jhlegarreta

[maxim-belkin]

Thanks for the feedback, @jhlegarreta. I'm going to merge this PR because the tests have passed and there should be no issues with it as it merely adds a new image class. We can change the class name down the road if there are objections or concerns with the name I propose in this PR (inline).

By the way, it seems that the img-responsive class that you guys add to image definitions in carpentries-incubator/SDC-BIDS-dMRI lesson is not necessary because it adds

  display: block;
  max-width: 100%;
  height: auto;

which intersects well with what we set for all images in lesson.scss:

article img {
    display: block;
    margin: 20px auto;
    max-width: 100%;
}

Note that height: auto is not necessary because max-width property automatically changes height (so, I'm not entirely sure why bootstrap guys do that, tbh).

[jhlegarreta]

Thanks for the hard work @maxim-belkin.

By the way, it seems that the img-responsive class that you guys add to image definitions in carpentries-incubator/SDC-BIDS-dMRI lesson is not necessary because it adds

Thanks for the note. I did not really dig into it, but it seems reasonable to remove our img-responsive classes.