Custom HTML for ebook and top of Our Voices sections

[joshdarby]

Changes

This pull request makes the following changes:

• Adds styling for 2 new custom html sections
  • series-landing-cta-container
  • series-landing-how-to-listen-container

Why

For #44

Testing/Questions

Features that this PR affects:

• How to Listen section
• 100 Questions eBook section

Questions that need to be answered before merging:

• [x] Is this PR targeting the correct branch in this repository?

Steps to test this PR:

1. Add a text widget to a series landing page widget area and input this in the Text field:

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <div class="series-landing-cta-container">
   <h3>100 QUESTIONS EBOOK</h3>
   <p>Description of the eBook goes here with more information... lorem ipsum.</p>
   <a class="btn" href="#">Buy ebook</a>
   </div>

2. Add a text widget to a series landing page widget area and input this in the Text field (don't forget to swap out the image):

   
   [caption id="attachment_35306" align="alignleft" width="336"]<img class="wp-image-35306 size-medium" src="https://borderzine.test/wp-content/uploads/2019/07/light-pollution-NASA-2010-600x327.jpg" alt="" width="336" height="183" /> Image caption[/caption]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HOW TO LISTEN

• ►
• ►
• ►
• ►

[benlk]

In Firefox and Chrome, the h5 doesn't align with the list items. Should that remain an h5 or should it be another li?

On narrow viewports, is there enough room for the expected content here?

[joshdarby]

On narrow viewports, is there enough room for the expected content here?

@benlk There should be, assuming they only put in 4 icons like in the wireframe. But it's hard to tell since we don't have the content for it yet.

[joshdarby]

@benlk On a second look, it looks like you might not have the right HTML somewhere in there because the h5 and list items align for me on Chrome and the play icons should be orange

[joshdarby]

Ah, apparently when you paste it like

<li>
    <a href="#">
        <span>►</span>
   </a>
</li>

WP adds a <br/> tag before and after the span.

Try this:

[caption id="attachment_35306" align="alignleft" width="336"]<img class="wp-image-35306 size-medium" src="https://borderzine.test/wp-content/uploads/2019/07/light-pollution-NASA-2010-600x327.jpg" alt="" width="336" height="183" /> Image caption[/caption]

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="series-landing-how-to-listen-container">
    <h5>HOW TO LISTEN</h5>
    <ul>
        <li><a href="#"><span>►</span></a></li>
        <li><a href="#"><span>►</span></a></li>
        <li><a href="#"><span>►</span></a></li>
        <li><a href="#"><span>►</span></a></li>
    </ul>
</div>

[benlk]

Yep, that looks right.