Change location and appearance of newsletter signup widget

[benlk]

• Show the current mobile-only newsletter signup form in the desktop header, replacing the current "Newsletter/Donate" buttons.
• Revise styles on homepage alert newsletter signup widget to reduce whitespace
• Apply stylesheets to make sure that the "subscribe" button remains next to the email-address input field on all viewports.

[benlk]

[benlk]

The source code of the present newsletter signup/donate buttons goes in a custom HTML widget in the "Header Widget" widget area:

<a href="/newsletter-signup/"><button style="font-size: 13px; font-weight: 800;">Newsletters</button></a>

<a href="/donate/"><button style="font-size: 13px; font-weight: 900;" class="secondary">DONATE</button></a>

The current mobile-only email signup widget is a Custom HTML widget in the "Homepage Alert" widget area, limited by Largo's widget visibility features.

<div style="margin-top: -1.5em; margin-bottom: -1.5em !important; " id="mc_embed_signup">
<form action="//publicsource.us8.list-manage.com/subscribe/post?u=353bf8a288d28d217cb70491f&amp;id=b58fd7b533&SIGNUP=HOMEPAGE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<b style="font-weight: 600 !important; font-size: 1.1em !important; color: black !important;"><i class="icon-mail"></i> Get our stories by email</b>
	<input style="height:42px; border-radius: 0px !important; border: solid black 1px; box-shadow: inset 0 0px 0px #fff !important; font-family: Mallory !important;" type="email" value="" name="EMAIL" class="required email" placeholder="Your email" id="mce-EMAIL">
	<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <input class="visuallyhidden" aria-hidden="true" type="text" name="b_353bf8a288d28d217cb70491f_b58fd7b533" tabindex="-1" value="">
    <input style="height:42.5px; border-radius: 0px !important;" type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button">
</form>
</div>

Copying and pasting that same form into different areas will cause problems; there are specific IDs within that form that have specific meanings on Mailchimp's end. If we duplicate the form, the page has multiple elements with the same ID.

But if we don't copy and paste that form, I'm not sure if there's an easy way to get it to be visible on both mobile and desktop:

header#site-header
	h1.visuallyhidden
	a
	meta
	aside#text-4.widget.widget-1.odd.no-bg.widget_text
		div.textwidget
			(The buttons)
			a
			a
header.print-header.no-content
nav#main-nv.navbar.clearfix
nav#secondary-nav.clearfix
div.alert-wrapper.max-wide
	div.alert-container
		aside.custom-html-52.widget_text.widget.widget-1.odd.no-bg.hidden-desktop.widget_custom_html.clearfix
			div.textwidget.custom-html-widget
				(the form)
				div#mc_embed_signup

The styles hiding #site-header are display:none;, so child elements won't display even if told to display.
We could do strange positioning hacks to move the form's location from the Header Alert widget area to the area in the sidebar, but that won't work.

@tylermachado Does it make sense to use Javascript here to, if the viewport is wider than breakpoint pixels, cut the signup widget from its position in the "Header Alert" widget area and paste it at the end of div#site-header? We'd use JS to put it back if the viewport shrinks, of course, and target the containing aside as the grandparent element of div#mc_embed_signup

[benlk]

From Slack discussion: js solution is fine.