Improved the frontpage hero and newsletter sections. Improved the carousel to support dragging and moving the games in it.

Author: paweljarosz

_includes/newsletter_section.html

@@ -6,13 +6,11 @@
 	<div class="container">
 		<div class="community-newsletter-shell">
 			<div class="community-newsletter-copy">
-				<div class="community-newsletter-visual">
-					<img class="community-newsletter-graphic" src="/images/icons/icon-newsletter.svg" alt="">
-				</div>
-				<div class="community-newsletter-copy-text">
-					<h2>{{ newsletter_title }}</h2>
-					<p>{{ newsletter_body }}</p>
-				</div>
+				<h2 class="feature-heading community-newsletter-heading">
+					<img class="feature-heading-icon community-newsletter-graphic" src="/images/icons/icon-newsletter.svg" alt="" aria-hidden="true"/>
+					<span class="community-newsletter-heading-text">{{ newsletter_title }}</span>
+				</h2>
+				<p>{{ newsletter_body }}</p>
 			</div>
 			<div class="community-newsletter-form-shell">
 				<div class="community-newsletter-form">

_includes/showcase_carousel.html

@@ -12,9 +12,7 @@
 
 <div class="frontpage-hero-showcase{% if include.wrapper_class %} {{ include.wrapper_class }}{% endif %}">
 	<div class="frontpage-hero-showcase-header">
-		<div class="frontpage-hero-showcase-copy">
-			<p class="asset-hub-filter-label">{{ carousel_label }}</p>
-		</div>
+		<p class="asset-hub-filter-label">{{ carousel_label }}</p>
 		{%- if carousel_action_link and carousel_action_text -%}
 		<div class="frontpage-hero-showcase-action">
 			{% include secondary_button.html link=carousel_action_link text=carousel_action_text target=include.action_target %}
@@ -36,7 +34,7 @@
 											<img
 												src="/images/games/{{ game.images.third }}"
 												srcset="/images/games/{{ game.images.third }} 800w, /images/games/{{ game.images.half }} 1200w, /images/games/{{ game.images.full }} 2000w"
-												sizes="(min-width: 1200px) 22vw, (min-width: 800px) 30vw, (min-width: 560px) 45vw, 92vw"
+												sizes="(min-width: 1400px) 26vw, (min-width: 980px) 32vw, (min-width: 640px) 48vw, 96vw"
 												alt="{{ game.name }}"
 												loading="{% if rendered_initial_count < 2 %}eager{% else %}lazy{% endif %}"
 												{% if rendered_initial_count == 0 %}fetchpriority="high"{% endif %}
@@ -61,7 +59,7 @@
 									<img
 										src="/images/games/{{ game.images.third }}"
 										srcset="/images/games/{{ game.images.third }} 800w, /images/games/{{ game.images.half }} 1200w, /images/games/{{ game.images.full }} 2000w"
-										sizes="(min-width: 1200px) 22vw, (min-width: 800px) 30vw, (min-width: 560px) 45vw, 92vw"
+										sizes="(min-width: 1400px) 26vw, (min-width: 980px) 32vw, (min-width: 640px) 48vw, 96vw"
 										alt="{{ game.name }}"
 										loading="{% if forloop.index0 < 2 %}eager{% else %}lazy{% endif %}"
 										{% if forloop.first %}fetchpriority="high"{% endif %}