From a1e48b52bbb1870f49013d29702502e8d124ec52 Mon Sep 17 00:00:00 2001
From: Nowell VanHoesen <nowell@mediavine.com>
Date: Thu, 31 Oct 2019 06:32:07 -0400
Subject: [PATCH] first pass from last WCUS

---
 .../themes/wptv2/anon-upload-template.php     |  28 +-
 .../wp-content/themes/wptv2/front-page.php    | 105 ++--
 .../wp-content/themes/wptv2/header.php        |   3 +-
 .../wp-content/themes/wptv2/sidebar.php       |   2 +-
 .../wp-content/themes/wptv2/style.css         | 503 +++++++++++++-----
 5 files changed, 452 insertions(+), 189 deletions(-)

diff --git wordpress.tv/public_html/wp-content/themes/wptv2/anon-upload-template.php wordpress.tv/public_html/wp-content/themes/wptv2/anon-upload-template.php
index e09c42c54..3c04cc2d6 100644
--- wordpress.tv/public_html/wp-content/themes/wptv2/anon-upload-template.php
+++ wordpress.tv/public_html/wp-content/themes/wptv2/anon-upload-template.php
@@ -27,16 +27,16 @@ function anon_upload_css() {
 			padding-top: 10px;
 		}
 
-		.page-template-anon-upload-template-php #footer {
+		/*.page-template-anon-upload-template-php #footer {
 			position: absolute;
 			bottom: 0;
 			right: 0;
 			left: 0;
-		}
+		}*/
 
-		.video-upload {
+		/*.video-upload {
 			padding-bottom: 70px;
-		}
+		}*/
 
 		.noscript-show p {
 			margin: 0 !important;
@@ -48,6 +48,7 @@ function anon_upload_css() {
 
 		.video-upload-left {
 			max-width: 550px;
+			margin: 15px;
 		}
 
 		.video-upload-right {
@@ -56,6 +57,14 @@ function anon_upload_css() {
 			margin: -25px 0 25px;
 		}
 
+		@media screen and ( max-width: 920px ) {
+			.video-upload-right {
+				float: none;
+				width: auto;
+				margin: 0 10px;
+			}
+		}
+
 		.video-upload p {
 			margin: 16px 0;
 			overflow: hidden;
@@ -74,6 +83,13 @@ function anon_upload_css() {
 			font-weight: bold;
 		}
 
+		@media screen and ( max-width: 500px ) {
+			.video-upload-left p > label,
+			.video-upload-left div > label {
+				width: 100%;
+			}
+		}
+
 		.video-upload-left p > label.wptv-video-wordcamp-cb {
 			display: inline;
 			float: none;
@@ -93,12 +109,12 @@ function anon_upload_css() {
 			color: #333;
 			background-color: #fff;
 			padding: 4px;
-			width: 329px;
+			width: 96%;
 			max-width: 329px;
 		}
 
 		.video-upload-left ul.cats-checkboxes {
-			margin-left: 130px;
+			/*margin-left: 130px;*/
 			height: 150px;
 			overflow: auto;
 		}
diff --git wordpress.tv/public_html/wp-content/themes/wptv2/front-page.php wordpress.tv/public_html/wp-content/themes/wptv2/front-page.php
index 55f89c9c2..03fe2c742 100644
--- wordpress.tv/public_html/wp-content/themes/wptv2/front-page.php
+++ wordpress.tv/public_html/wp-content/themes/wptv2/front-page.php
@@ -29,7 +29,6 @@ get_header(); ?>
 			</h3>
 		</div><!-- .main-video -->
 		<?php endwhile; // $featured->have_posts ?>
-
 		<div class="secondary-videos">
 			<h3>
 				<?php esc_html_e( 'WordCampTV', 'wptv' ); ?>
@@ -49,12 +48,16 @@ get_header(); ?>
 				?>
 
 				<li class="group">
-					<a href="<?php the_permalink(); ?>" rel="bookmark">
-						<span class="video-thumbnail">
+					<span class="video-thumbnail">
+						<a href="<?php the_permalink(); ?>" rel="bookmark">
 							<?php $wptv->the_video_image( 50, null, false ); ?>
-						</span>
-						<span class="video-title"><?php the_title(); ?></span>
-					</a>
+						</a>
+					</span>
+					<span class="video-title">
+						<a href="<?php the_permalink(); ?>" rel="bookmark">
+							<?php the_title(); ?>
+						</a>
+					</span>
 					<?php $wptv->the_event( '<strong class="video-event">', '</strong>' ); ?>
 				</li>
 
@@ -73,53 +76,53 @@ get_header(); ?>
 
 		<!-- Latest Videos -->
 		<?php
-			if ( have_posts() ) :
-		?>
-		<h3><?php esc_html_e( 'Latest Videos', 'wptv' ); ?></h3>
-		<ul class="video-list four-col">
-
-			<?php while ( have_posts() ) : the_post(); ?>
-			<li>
-				<a href="<?php the_permalink(); ?>">
-					<span class="video-thumbnail"><?php $wptv->the_video_image( 50, null, false ); ?></span>
-					<span class="video-title"><?php the_title(); ?></span>
-				</a>
-			</li>
-			<?php endwhile; ?>
-
-		</ul>
+		if ( have_posts() ) :
+			?>
+			<h3><?php esc_html_e( 'Latest Videos', 'wptv' ); ?></h3>
+			<ul class="video-list four-col">
+
+				<?php while ( have_posts() ) : the_post(); ?>
+					<li>
+						<a href="<?php the_permalink(); ?>">
+							<span class="video-thumbnail"><?php $wptv->the_video_image( 50, null, false ); ?></span>
+							<span class="video-title"><?php the_title(); ?></span>
+						</a>
+					</li>
+				<?php endwhile; ?>
+
+			</ul>
 		<?php
-			endif; // $latest->have_posts
-
-			// Popular Videos
-			$popular = new WP_Query( array(
-				'posts_per_page' => 8,
-				'meta_key'       => 'wptv_post_views',
-				'orderby'        => 'meta_value_num',
-				'order'          => 'DESC',
-				'date_query'     => array(
-					'after' => '-180 days',
-				),
-			) );
-
-			if ( $popular->have_posts() ) :
-		?>
-		<h3><?php esc_html_e( 'Popular Videos', 'wptv' ); ?></h3>
-		<ul class="video-list four-col">
-
-			<?php while ( $popular->have_posts() ) : $popular->the_post(); ?>
-			<li>
-				<a href="<?php the_permalink(); ?>">
-					<span class="video-thumbnail"><?php $wptv->the_video_image( 50, null, false ); ?></span>
-					<span class="video-title"><?php the_title(); ?></span>
-				</a>
-			</li>
-			<?php endwhile; ?>
-
-		</ul>
+		endif; // $latest->have_posts
+
+		// Popular Videos
+		$popular = new WP_Query( array(
+			'posts_per_page' => 8,
+			'meta_key'       => 'wptv_post_views',
+			'orderby'        => 'meta_value_num',
+			'order'          => 'DESC',
+			'date_query'     => array(
+				'after' => '-180 days',
+			),
+		) );
+
+		if ( $popular->have_posts() ) :
+			?>
+			<h3><?php esc_html_e( 'Popular Videos', 'wptv' ); ?></h3>
+			<ul class="video-list four-col">
+
+				<?php while ( $popular->have_posts() ) : $popular->the_post(); ?>
+					<li>
+						<a href="<?php the_permalink(); ?>">
+							<span class="video-thumbnail"><?php $wptv->the_video_image( 50, null, false ); ?></span>
+							<span class="video-title"><?php the_title(); ?></span>
+						</a>
+					</li>
+				<?php endwhile; ?>
+
+			</ul>
 		<?php
-			endif; // $popular->have_posts
-			unset( $popular );
+		endif; // $popular->have_posts
+		unset( $popular );
 		?>
 
 	</div><!-- .primary-content -->
diff --git wordpress.tv/public_html/wp-content/themes/wptv2/header.php wordpress.tv/public_html/wp-content/themes/wptv2/header.php
index ad2b0e2f4..84cbca9cc 100644
--- wordpress.tv/public_html/wp-content/themes/wptv2/header.php
+++ wordpress.tv/public_html/wp-content/themes/wptv2/header.php
@@ -14,7 +14,7 @@ global $wptv;
 
 <head>
 	<meta charset="<?php bloginfo( 'charset' ); ?>">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
@@ -46,6 +46,7 @@ global $wptv;
 			</form>
 
 			<div id="menu">
+				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu', 'wptv' ); ?></button>
 				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
 			</div>
 
diff --git wordpress.tv/public_html/wp-content/themes/wptv2/sidebar.php wordpress.tv/public_html/wp-content/themes/wptv2/sidebar.php
index be61888cd..a6ff2b593 100644
--- wordpress.tv/public_html/wp-content/themes/wptv2/sidebar.php
+++ wordpress.tv/public_html/wp-content/themes/wptv2/sidebar.php
@@ -1,6 +1,6 @@
 <div class="secondary-content">
 	<ul>
-		<li>
+		<li class="widget">
 			<h3><?php esc_html_e( 'Resources', 'wptv' ); ?></h3>
 
 			<ul>
diff --git wordpress.tv/public_html/wp-content/themes/wptv2/style.css wordpress.tv/public_html/wp-content/themes/wptv2/style.css
index d300cc75f..3a326768d 100644
--- wordpress.tv/public_html/wp-content/themes/wptv2/style.css
+++ wordpress.tv/public_html/wp-content/themes/wptv2/style.css
@@ -87,18 +87,18 @@ a img {
 }
 
 /* Contain floats */
-.group:before, .group:after {
+/*.group:before, .group:after {
 	content: "";
 	display: table;
-}
+}*/
 
-.group:after {
+/*.group:after {
 	clear: both;
-}
+}*/
 
-.group {
+/*.group {
 	*zoom: 1;
-}
+}*/
 
 /*************************************/
 
@@ -111,13 +111,13 @@ body {
 	color: #444;
 }
 
-.group:after {
+/*.group:after {
 	content: ".";
 	display: block;
 	height: 0;
 	clear: both;
 	visibility: hidden;
-}
+}*/
 
 .clear {
 	clear: both;
@@ -246,38 +246,69 @@ div.success p {
 
 #header {
 	margin-top: 10px;
-	height: 57px;
+	padding: 0 30px;
+}
+
+#header:after {
+	clear: both;
+	content: '';
+	display: table;
 }
 
 #header h1 {
 	padding-top: 8px;
-	float: left;
 }
 
 #header .sleeve {
-	width: 942px;
+	max-width: 942px;
+	margin: 0 auto;
+}
+
+/* Menu */
+.menu-toggle {
 	margin: 0 auto;
 }
 
+#menu {
+	clear: both;
+	padding: 10px 0;
+	text-align: center;
+}
+
 #menu ul {
-	float: right;
-	height: 57px;;
+	margin-left: -30px;	/* offset margins on #header, to achieve 100% viewport width */
+	margin-right: -30px;
+	background-color: #2698CF;
+	text-align: center;
 }
 
 #menu li {
-	float: left;
-	display: block;
-	margin-left: 10px;
+	font-size: 14px;
 	line-height: 57px;
+	margin-left: 0;
+	border-bottom: 1px solid white;
+}
+
+#menu li:last-child {
+	border-bottom: none;
 }
 
+#menu li a {
+	border: 0;
+	display: block;
+	padding: 0 5px;
+}
+
+#menu #searchform {
+	margin: 0 0 0 15px;
+}
+
+
 #menu li a,
 #menu li a:link,
 #menu li a:visited {
-	padding: 5px;
-	color: #555;
+	color: white;
 	text-decoration: none;
-	border: 0;
 }
 
 #menu .current-menu-item > a,
@@ -288,9 +319,20 @@ div.success p {
 	color: #000 !important;
 }
 
-#searchform {
-	float: right;
-	margin-left: 15px;
+.menu-primary-container {
+	display: none;
+	margin-top: 20px;
+}
+
+#menu.toggled .menu-primary-container {
+	display: block;
+}
+
+#menu .current-menu-item > a,
+#menu .current-menu-ancestor > a,
+#menu .current_page_item > a,
+#menu .current_page_ancestor > a {
+	color: white !important;
 }
 
 #searchform #searchbox,
@@ -303,7 +345,7 @@ div.success p {
 	border-radius: 2px;
 	height: 15px;
 	padding: 5px 6px;
-	width: 140px;
+	width: 71%;
 	-webkit-appearance: textfield;
 }
 
@@ -322,6 +364,8 @@ div.success p {
 	box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
 }
 
+/* Forms */
+
 input[type=submit], button, .button {
 	text-decoration: none;
 	-moz-border-radius: 5px;
@@ -396,6 +440,8 @@ input[type=submit]:active, button:active, .button:active {
 	);
 }
 
+/* Intro */
+
 .intro {
 	font-size: 30px;
 	height: 64px;
@@ -1479,10 +1525,10 @@ div.sharedaddy.sd-rating-enabled .sd-like .post-likes-widget, div.sharedaddy.sd-
 	display: none;
 }
 
-#content {
+/*#content {
 	width: 100%;
 	float: left;
-}
+}*/
 
 #content .post {
 	margin-bottom: 20px;
@@ -1784,21 +1830,29 @@ a {
 	outline: none
 }
 
-.container {
-	width: 940px;
+/*body.home .wptv-hero .container,
+body.home #page > .container {*/
+body .wptv-hero .container,
+body #page > .container {
+	display: flex;
+	flex-direction: column;
+}
+
+.wptv-hero .container,
+#page > .container {
 	margin: auto;
+	max-width: 940px;
+	padding: 0 10px;
 }
 
 .primary-content {
-	float: left;
-	width: 700px;
+	flex: 1 1 auto;
 	margin: 0;
 }
 
 .secondary-content {
-	float: right;
-	width: 200px;
-	margin: 0 0 50px 0;
+	flex: 1 1 auto;
+	margin: 0 30px;
 }
 
 .tag-count {
@@ -1869,35 +1923,6 @@ a {
 /* Typography
 ============================================================= */
 
-/* Menu */
-
-#menu {
-	margin-right: 5px;
-}
-
-#menu li {
-	font-size: 14px;
-}
-
-#menu li a,
-#menu li a:link,
-#menu li a:visited {
-	color: #21759b;
-}
-
-#menu li a.selected {
-	color: #545454;
-}
-
-#menu li a:hover,
-#menu li a:focus {
-	color: #d54e21;
-}
-
-#menu #searchform {
-	margin: 0 0 0 15px;
-}
-
 /* Titles and Body Text */
 
 body, td, p,
@@ -1918,7 +1943,7 @@ body, td, p,
 }
 
 .page-title {
-	width: 940px;
+	max-width: 940px;
 	margin: auto;
 }
 
@@ -2015,25 +2040,20 @@ h5 {
 ============================================================= */
 
 .wptv-hero {
-	clear: both;
-
-	margin: 10px auto 30px auto;
-	padding: 30px 0 10px 0;
-
+	margin: 10px auto 30px;
+	padding: 30px 0 10px;
 	background: #F0F0F0;
 }
 
 .wptv-hero .main-video {
 	background: #2f2f2f;
-	clear: both;
-
-	float: left;
-	width: 575px;
+	/* margin: auto; */
+	max-width: 575px;
+	position: relative;
 }
 
 .wptv-hero .main-video .video-player {
-	width: 100% !important;
-	height: 323px !important;
+	/*width: 100% !important;*/
 	margin: 0 !important;
 }
 
@@ -2050,7 +2070,7 @@ h5 {
 }
 
 .wptv-hero .main-video .video-player .videopress-title,
-.wptv-hero .main-video .video-player .videopress-watemark {
+.wptv-hero .main-video .video-player .videopress-watermark {
 	display: none !important;
 }
 
@@ -2096,8 +2116,8 @@ h5 {
 }
 
 .wptv-hero .secondary-videos {
-	float: right;
-	width: 345px;
+	margin: 20px auto 0;
+	max-width: 575px;
 }
 
 .wptv-hero .secondary-videos h3 {
@@ -2111,20 +2131,13 @@ h5 {
 
 .wptv-hero .secondary-videos li {
 	font-size: 13px;
-
-	min-height: 75px;
-	position: relative;
-
-	margin: 0 auto 23px 0;
-	padding: 0 0 0 142px;
+	margin: 0 auto 23px;
+	max-width: 130px;
 }
 
 .wptv-hero .secondary-videos .video-thumbnail img {
 	width: 130px;
 	height: 75px;
-
-	position: absolute;
-	left: 0;
 }
 
 .wptv-hero .secondary-videos a:hover img {
@@ -2135,19 +2148,25 @@ h5 {
 ============================================================= */
 
 .video-list {
-	clear: both;
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0 -5px;
+}
+
+.video-list:after {
+	content: '';
+	flex: auto;
 }
 
 .video-list li {
-	float: left;
-	min-height: 220px;
+	flex: 0 0 160px;
 	margin-bottom: 20px;
+	padding: 0 5px;
 }
 
 .video-list li .video-thumbnail {
 	display: block;
 	width: 100%;
-	height: 100px;
 
 	margin: 0 0 8px 0;
 
@@ -2160,15 +2179,6 @@ h5 {
 	min-height: 100px;
 }
 
-.video-list.four-col {
-	width: 860px;
-}
-
-.video-list.four-col li {
-	width: 160px;
-	margin-right: 20px;
-}
-
 .secondary-content .video-list .video-title {
 	font-size: 13px;
 	display: block;
@@ -2203,7 +2213,7 @@ h5 {
 	position: relative;
 }
 
-.archive.video-list .video-thumbnail {
+/*.archive.video-list .video-thumbnail {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -2212,17 +2222,17 @@ h5 {
 	height: 120px;
 
 	margin: 0 20px 0 0;
-}
+}*/
 
 .archive.video-list .video-title {
 	font-size: 16px;
 	margin: 4px 0 8px;
 }
 
-.archive.video-list .video-description {
+/*.archive.video-list .video-description {
 	display: block;
 	padding-left: 240px;
-}
+}*/
 
 .archive.video-list .video-date {
 	color: #aaa;
@@ -2281,13 +2291,13 @@ body:not(.single) .video-info {
 
 /* Video Player and Placeholder */
 
-.single .video-player {
+/*.single .video-player {
 	float: left;
 	width: 940px !important;
 	height: 529px !important;
 
 	overflow: hidden;
-}
+}*/
 
 .videopress-placeholder,
 .video-player object {
@@ -2429,15 +2439,15 @@ h3#comments {
 	margin: 3px 0 20px 0;
 }
 
-.category-wordcamptv .secondary-content {
+/*.category-wordcamptv .secondary-content {
 	float: left;
 	width: 200px;
-}
+}*/
 
-.category-wordcamptv .primary-content {
+/*.category-wordcamptv .primary-content {
 	float: right;
 	margin: 0;
-}
+}*/
 
 /* WordCamp Individual Page
 ============================================================= */
@@ -2453,6 +2463,11 @@ h3#comments {
 	margin: 0 0 40px 0;
 }
 
+.secondary-content li.widget {
+	border: 0;
+	text-align: center;
+}
+
 .secondary-content li li {
 	border-bottom: 1px #e5e5e5 solid;
 	padding: 5px 0;
@@ -2468,15 +2483,11 @@ h3#comments {
 	padding: 0 0 9px;
 }
 
-.secondary-content li.widget {
-	border: 0;
-}
-
 /* 404 page
 ============================================================= */
 
 .error404 .primary-content {
-	width: 940px;
+	max-width: 940px;
 }
 
 .error404 h2 {
@@ -2512,24 +2523,19 @@ h3#comments {
 
 #footer {
 	background: #f0f0f0;
-	clear: both;
 	color: #888;
-	height: 3.5em;
-	margin: 10px 0 15px 0;
+	margin: 10px 0 0 0;
 	padding: 10px 0;
 }
 
 #footer .automattic {
-	width: 400px;
-	float: right;
-	text-align: right;
 	font-size: 11px;
 	letter-spacing: 0.2em;
-	line-height: 3em;
-	padding-top: 13px;
+	line-height: 28px;
 	padding-right: 2px;
+	padding-top: 13px;
+	text-align: center;
 	text-transform: uppercase;
-	line-height: 28px;
 }
 
 #footer .automattic a {
@@ -2540,17 +2546,10 @@ h3#comments {
 
 .menu-footer-container,
 #footer div.menu {
-	float: left;
 	line-height: 4em;
-	margin-left: 2px;
 	font-size: 13px;
 	margin-bottom: 0;
-}
-
-.menu-footer-container li,
-#footer div.menu li {
-	display: inline-block;
-	margin: 0 10px;
+	text-align: center;
 }
 
 .menu-footer-container li:last-of-type:after,
@@ -2587,3 +2586,247 @@ h3#comments {
 #footer img.videopress {
 	display: inline;
 }
+
+/* Media Queries
+============================================================= */
+
+@media screen and ( min-width: 415px ) {
+	.wptv-hero .secondary-videos li {
+		max-width: initial;
+		min-height: 75px;
+		padding-left: 150px;
+		position: relative;
+	}
+
+	.wptv-hero .secondary-videos .video-thumbnail {
+		left: 0;
+		position: absolute;
+	}
+}
+
+@media screen and ( min-width: 500px ) {
+	#header {
+		padding: 0 20px;
+	}
+
+	#header h1 {
+		float: left;
+	}
+
+	.menu-primary-container {
+		display: initial;
+	}
+
+	.menu-toggle {
+		display: none;
+	}
+
+	#menu ul {
+		background-color: transparent;
+		margin-left: -10px;
+		margin-right: auto;
+	}
+
+	#menu li {
+		float: left;
+		margin-left: 10px;
+	}
+
+	#menu li a,
+	#menu li a:link,
+	#menu li a:visited {
+		color: #21759b;
+	}
+
+	#menu li a.selected {
+		color: #545454;
+	}
+
+	#menu li a:hover,
+	#menu li a:focus {
+		color: #d54e21;
+	}
+
+	#searchform {
+		float: right;
+	}
+
+	#searchform #searchbox,
+	#searchform input#s {
+		width: 140px;
+	}
+
+	.secondary-content li.widget {
+		width: 45%;
+		display: inline-block;
+		vertical-align: top;
+		margin-right: -6px;	/* http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
+		padding-right: 30px;
+	}
+
+	.secondary-content li.widget:nth-child( even ) {
+		margin-right: 0;
+		padding-right: 0;
+	}
+
+}
+
+@media screen and ( min-width: 600px ) {
+	.menu-toggle {
+		display: none;
+	}
+
+	#menu li a:link,
+	#menu li a:visited {
+		color: #555;
+	}
+
+	#footer {
+		height: 3.5em;
+	}
+
+	.menu-footer-container li,
+	#footer div.menu li {
+		display: inline-block;
+		margin: 0 10px;
+	}
+
+
+}
+
+@media screen and ( min-width: 940px ) {
+}
+
+@media screen and ( min-width: 940px ) {
+	#menu {
+		clear: initial;
+		padding: 0;
+	}
+
+	#menu ul {
+		float: right;
+		height: 57px;
+	}
+
+	#menu li {
+		padding: 0;
+	}
+
+	#menu li a {
+		display: initial;
+		padding: 5px;
+	}
+
+	#searchform {
+		margin-left: 15px;
+	}
+
+	body.home .wptv-hero .container,
+	body.home #page > .container {
+		flex-direction: row;
+	}
+
+	.wptv-hero .main-video {
+		flex: 0 0 575px;
+	}
+
+	.wptv-hero .secondary-videos {
+		flex: 1 1 auto;
+		margin-left: 23px;
+		margin-top: 0;
+	}
+
+	.secondary-content {
+		flex: 0 0 200px;
+		margin: -20px 0 50px 40px;
+	}
+
+	.secondary-content li.widget {
+		display: initial;
+		text-align: left;
+		width: auto;
+	}
+
+	.category-wordcamptv .secondary-content {
+		float: left;
+		width: 170px;
+	}
+
+	.category-wordcamptv .primary-content {
+		float: right;
+		margin: 0;
+	}
+
+	.single .video-player {
+		float: left;
+		width: 940px !important;
+		height: 529px !important;
+		overflow: hidden;
+	}
+
+	.menu-footer-container,
+	#footer div.menu {
+		float: left;
+	}
+
+	#footer .automattic {
+		float: right;
+		margin-right: 20px;
+		text-align: right;
+		width: 380px;
+	}
+}
+
+@media screen and ( max-width: 940px ) {
+
+	.category .page-title,
+	.desc {
+		float: none;
+	}
+
+	.wptv-hero .main-video .video-player {
+		/*height: auto !important;*/
+
+		/* todo when video starts playing, it dissappears */
+		/* todo watermark is creating empty space */
+	}
+
+}
+
+@media screen and ( min-width:920px ) {
+	#footer {
+		height: 3.5em;
+	}
+}
+
+@media screen and ( max-width:620px ) {
+	.dot {
+		display: none;
+	}
+}
+
+@media screen and ( min-width:621px ) {
+	.archive.video-list .video-thumbnail {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		width: 220px;
+		height: 120px;
+
+		margin: 0 20px 0 0;
+	}
+
+	.archive.video-list .video-description {
+		display: block;
+		padding-left: 240px;
+	}
+}
+
+@media screen and ( max-width:400px ) {
+
+	.entry .contact-form textarea {
+		width: 98%;
+	}
+}
+
-- 
2.20.1

From 9dd8120620d91c5a1fb6e23ed89b0a21c468d7f5 Mon Sep 17 00:00:00 2001
From: Nowell VanHoesen <nowell@mediavine.com>
Date: Tue, 5 Nov 2019 16:42:32 -0500
Subject: [PATCH] responsive adjustments

---
 .../wp-content/themes/wptv2/style.css         | 46 +++++++------------
 1 file changed, 17 insertions(+), 29 deletions(-)

diff --git wordpress.tv/public_html/wp-content/themes/wptv2/style.css wordpress.tv/public_html/wp-content/themes/wptv2/style.css
index 3a326768d..740ca415b 100644
--- wordpress.tv/public_html/wp-content/themes/wptv2/style.css
+++ wordpress.tv/public_html/wp-content/themes/wptv2/style.css
@@ -1846,7 +1846,7 @@ body #page > .container {
 }
 
 .primary-content {
-	flex: 1 1 auto;
+	flex: 1 1 650px;
 	margin: 0;
 }
 
@@ -1951,6 +1951,7 @@ body, td, p,
 	font-size: 13px;
 	font-weight: bold;
 	-webkit-font-smoothing: antialiased;
+  text-align: left;
 }
 
 h2 {
@@ -2047,7 +2048,7 @@ h5 {
 
 .wptv-hero .main-video {
 	background: #2f2f2f;
-	/* margin: auto; */
+  margin: 0 auto;
 	max-width: 575px;
 	position: relative;
 }
@@ -2428,27 +2429,17 @@ h3#comments {
 }
 
 .category .page-title {
-	float: left;
-	width: auto;
-	margin: -8px 0 20px 0;
+	flex: 0 0 25%;
+	margin: -8px auto 20px;
 }
 
 .desc {
-	float: right;
+  flex: 0 0 70%;
 	color: #969696;
 	margin: 3px 0 20px 0;
+  text-align: center;
 }
 
-/*.category-wordcamptv .secondary-content {
-	float: left;
-	width: 200px;
-}*/
-
-/*.category-wordcamptv .primary-content {
-	float: right;
-	margin: 0;
-}*/
-
 /* WordCamp Individual Page
 ============================================================= */
 
@@ -2694,9 +2685,6 @@ h3#comments {
 
 }
 
-@media screen and ( min-width: 940px ) {
-}
-
 @media screen and ( min-width: 940px ) {
 	#menu {
 		clear: initial;
@@ -2721,17 +2709,21 @@ h3#comments {
 		margin-left: 15px;
 	}
 
-	body.home .wptv-hero .container,
-	body.home #page > .container {
+  body .wptv-hero .container,
+	body #page > .container {
 		flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
 	}
 
 	.wptv-hero .main-video {
 		flex: 0 0 575px;
+    margin-left: 0;
+    margin-right: 0;
 	}
 
 	.wptv-hero .secondary-videos {
-		flex: 1 1 auto;
+		flex: 1 0 320px;
 		margin-left: 23px;
 		margin-top: 0;
 	}
@@ -2748,13 +2740,14 @@ h3#comments {
 	}
 
 	.category-wordcamptv .secondary-content {
-		float: left;
+    margin: 0 30px 0 0;
+    order: 0;
 		width: 170px;
 	}
 
 	.category-wordcamptv .primary-content {
-		float: right;
 		margin: 0;
+    order: 1;
 	}
 
 	.single .video-player {
@@ -2779,11 +2772,6 @@ h3#comments {
 
 @media screen and ( max-width: 940px ) {
 
-	.category .page-title,
-	.desc {
-		float: none;
-	}
-
 	.wptv-hero .main-video .video-player {
 		/*height: auto !important;*/
 
-- 
2.20.1