Index: anon-upload-template.php
===================================================================
--- anon-upload-template.php (revision 1549)
+++ anon-upload-template.php (working copy)
@@ -29,17 +29,6 @@
padding-top: 10px;
}
- .page-template-anon-upload-template-php #footer {
- position: absolute;
- bottom: 0;
- right: 0;
- left: 0;
- }
-
- .video-upload {
- padding-bottom: 70px;
- }
-
.noscript-show p {
margin: 0 !important;
}
@@ -51,14 +40,20 @@
.video-upload-left {
max-width: 550px;
+ margin: 15px;
}
.video-upload-right {
- float: right;
- width: 390px;
- margin: -25px 0 25px;
+ margin: -25px 15px 0;
}
+ .video-upload-right {
+ float: right;
+ width: 390px;
+ margin: -25px 0 25px;
+ }
+ }
+
.video-upload p {
margin: 16px 0;
}
@@ -107,12 +102,11 @@
color: #333;
background-color: #fff;
padding: 4px;
- width: 329px;
+ width: 98%;
max-width: 329px;
}
.video-upload-left ul.cats-checkboxes {
- margin-left: 130px;
height: 150px;
overflow: auto;
}
Index: functions.php
===================================================================
--- functions.php (revision 1557)
+++ functions.php (working copy)
@@ -772,6 +772,8 @@
wp_enqueue_style( 'wptv-ie', get_template_directory_uri() . '/ie6.css', array( 'wptv-style' ) );
wp_style_add_data( 'wptv-ie', 'conditional', 'IE 6' );
+ wp_enqueue_script( 'wptv', get_template_directory_uri() . '/js/wordpress-tv.js', array(), 1, true );
+
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
Index: header.php
===================================================================
--- header.php (revision 1549)
+++ header.php (working copy)
@@ -14,6 +14,7 @@
+
<?php wp_title( '|', true, 'right' ); ?>
@@ -38,6 +39,7 @@
Index: js/wordpress-tv.js
===================================================================
--- js/wordpress-tv.js (revision 0)
+++ js/wordpress-tv.js (working copy)
@@ -0,0 +1,97 @@
+var WordPressTV = ( function() {
+ /**
+ * Initialize
+ */
+ function init() {
+ toggleNavigationMenu();
+ }
+
+ /**
+ * Handles toggling the navigation menu for small screens and enables tab
+ * support for dropdown menus.
+ */
+ function toggleNavigationMenu() {
+ var container, button, menu, links, subMenus;
+
+ container = document.getElementById( 'menu' );
+ if ( ! container ) {
+ return;
+ }
+
+ button = container.getElementsByTagName( 'button' )[0];
+ if ( 'undefined' === typeof button ) {
+ return;
+ }
+
+ menu = container.getElementsByTagName( 'ul' )[0];
+
+ // Hide menu toggle button if menu is empty and return early.
+ if ( 'undefined' === typeof menu ) {
+ button.style.display = 'none';
+ return;
+ }
+
+ menu.setAttribute( 'aria-expanded', 'false' );
+ if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
+ menu.className += ' nav-menu';
+ }
+
+ button.onclick = function() {
+ if ( -1 !== container.className.indexOf( 'toggled' ) ) {
+ container.className = container.className.replace( ' toggled', '' );
+ button.setAttribute( 'aria-expanded', 'false' );
+ menu.setAttribute( 'aria-expanded', 'false' );
+ } else {
+ container.className += ' toggled';
+ button.setAttribute( 'aria-expanded', 'true' );
+ menu.setAttribute( 'aria-expanded', 'true' );
+ }
+ };
+
+ // Get all the link elements within the menu.
+ links = menu.getElementsByTagName( 'a' );
+ subMenus = menu.getElementsByTagName( 'ul' );
+
+ // Set menu items with submenus to aria-haspopup="true".
+ for ( var i = 0, len = subMenus.length; i < len; i++ ) {
+ subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
+ }
+
+ // Each time a menu link is focused or blurred, toggle focus.
+ for ( i = 0, len = links.length; i < len; i++ ) {
+ links[i].addEventListener( 'focus', toggleFocus, true );
+ links[i].addEventListener( 'blur', toggleFocus, true );
+ }
+ }
+
+ /**
+ * Sets or removes .focus class on an element.
+ */
+ function toggleFocus() {
+ var self = this;
+
+ // Move up through the ancestors of the current link until we hit .nav-menu.
+ while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
+
+ // On li elements toggle the class .focus.
+ if ( 'li' === self.tagName.toLowerCase() ) {
+ if ( -1 !== self.className.indexOf( 'focus' ) ) {
+ self.className = self.className.replace( ' focus', '' );
+ } else {
+ self.className += ' focus';
+ }
+ }
+
+ self = self.parentElement;
+ }
+ }
+
+ /*
+ * Reveal public methods
+ */
+ return {
+ init : init
+ };
+} )();
+
+WordPressTV.init();
Index: sidebar.php
===================================================================
--- sidebar.php (revision 1549)
+++ sidebar.php (working copy)
@@ -1,6 +1,6 @@
\ No newline at end of file
+
Index: style.css
===================================================================
--- style.css (revision 1558)
+++ style.css (working copy)
@@ -209,7 +209,6 @@
#header {
margin-top: 10px;
- height: 57px;
}
#header h1 {
@@ -218,10 +217,19 @@
}
#header .sleeve {
- width: 942px;
+ max-width: 942px;
margin: 0 auto;
}
+.menu-toggle {
+ display: none;
+ margin: 0 auto;
+}
+
+#menu {
+ clear: both;
+}
+
#menu ul {
float: right;
height: 57px;;
@@ -253,11 +261,6 @@
color: #000 !important;
}
-#searchform {
- float: right;
- margin-left: 15px;
-}
-
#searchform #searchbox,
#searchform input#s {
box-sizing: content-box;
@@ -282,6 +285,8 @@
margin-top: 15px;
}
+/* Forms */
+
input[type=submit], button, .button {
text-decoration: none;
-moz-border-radius: 5px;
@@ -356,6 +361,8 @@
);
}
+/* Intro */
+
.intro {
font-size: 30px;
height: 64px;
@@ -1424,11 +1431,6 @@
display: none;
}
-#content {
- width: 630px;
- float: left;
-}
-
#content .post {
margin-bottom: 20px;
clear: both;
@@ -1511,7 +1513,7 @@
}
#commentform textarea {
- width: 600px;
+ width: 96%;
height: 100px;
margin-bottom: 5px;
}
@@ -1576,22 +1578,10 @@
font-size: 10px;
}
-#footer {
- clear: both;
- height: 3.5em;
- margin-bottom: 15px;
- color: #888;
-}
-
#footer .automattic {
- width: 400px;
- float: right;
- text-align: right;
font-size: 11px;
letter-spacing: 0.2em;
- line-height: 3em;
- padding-top: 13px;
- padding-right: 2px;
+ padding: 13px 2px 0 0;
text-transform: uppercase;
line-height: 28px;
}
@@ -1604,10 +1594,6 @@
margin-bottom: 0;
}
-.menu-footer-container li {
- display: inline-block;
-}
-
.menu-footer-container li:last-of-type .dot {
display: none;
}
@@ -1785,20 +1771,16 @@
}
.container {
- width: 940px;
+ max-width: 940px;
margin: auto;
}
.primary-content {
- float: left;
- width: 700px;
margin: 0;
}
.secondary-content {
- float: right;
- width: 170px;
- margin: 0 0 50px 0;
+ margin: 0 30px;
}
.tag-count {
@@ -1867,10 +1849,6 @@
/* Menu */
-#menu {
- margin-right: 5px;
-}
-
#menu li {
font-size: 14px;
}
@@ -1913,7 +1891,7 @@
}
.page-title {
- width: 940px;
+ max-width: 940px;
margin: auto;
}
@@ -2007,7 +1985,7 @@
.wptv-hero {
clear: both;
- margin: 10px auto 30px auto;
+ margin: 20px auto 30px auto;
padding: 30px 0 10px 0;
background: #F0F0F0;
@@ -2016,14 +1994,10 @@
.wptv-hero .main-video {
background: #2f2f2f;
clear: both;
-
- float: left;
- width: 575px;
}
.wptv-hero .main-video .video-player {
width: 100% !important;
- height: 323px !important;
margin: 0 !important;
}
@@ -2040,7 +2014,7 @@
}
.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;
}
@@ -2080,11 +2054,6 @@
display: none;
}
-.wptv-hero .secondary-videos {
- float: right;
- width: 345px;
-}
-
.wptv-hero .secondary-videos h3 {
font-size: 18px;
font-weight: bold;
@@ -2097,11 +2066,11 @@
.wptv-hero .secondary-videos li {
font-size: 13px;
- min-height: 75px;
+ min-height: 78px;
position: relative;
margin: 0 auto 23px 0;
- padding: 0 0 0 142px;
+ padding: 0 0 0 142px; /* todo pushes title outside container at 450px wide */
}
.wptv-hero .secondary-videos img {
@@ -2124,8 +2093,6 @@
}
.video-list li {
- float: left;
- min-height: 220px;
margin-bottom: 20px;
}
@@ -2137,7 +2104,6 @@
.video-list li .video-thumbnail {
display: block;
width: 100%;
- height: 100px;
margin: 0 0 8px 0;
@@ -2145,15 +2111,6 @@
position: relative;
}
-.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;
@@ -2188,27 +2145,11 @@
position: relative;
}
-.archive.video-list .video-thumbnail {
- position: absolute;
- top: 0;
- left: 0;
-
- width: 220px;
- height: 120px;
-
- margin: 0 20px 0 0;
-}
-
.archive.video-list .video-title {
font-size: 16px;
margin: 4px 0 8px;
}
-.archive.video-list .video-description {
- display: block;
- padding-left: 240px;
-}
-
.archive.video-list .video-date {
color: #aaa;
display: block;
@@ -2265,15 +2206,6 @@
}
/* Video Player and Placeholder */
-
-.single .video-player {
- float: left;
- width: 940px !important;
- height: 529px !important;
-
- overflow: hidden;
-}
-
.videopress-placeholder,
.video-player object {
width: 100% !important;
@@ -2414,16 +2346,6 @@
margin: 3px 0 20px 0;
}
-.category-wordcamptv .secondary-content {
- float: left;
- width: 170px;
-}
-
-.category-wordcamptv .primary-content {
- float: right;
- margin: 0;
-}
-
/* WordCamp Individual Page
============================================================= */
@@ -2461,7 +2383,7 @@
============================================================= */
.error404 .primary-content {
- width: 940px;
+ max-width: 940px;
}
.error404 h2 {
@@ -2497,9 +2419,9 @@
#footer {
background: #F0F0F0;
-
+ color: #888;
margin: 10px 0 0 0;
- padding: 10px 0;
+ padding: 10px 30px 20px;
}
#footer .dot {
@@ -2511,3 +2433,293 @@
top: 2px;
margin: 0 7px;
}
+
+/* Media Queries
+============================================================= */
+
+@media screen and ( min-width:941px ) {
+ .wptv-hero .main-video {
+ width: 575px;
+ }
+
+ .wptv-hero .main-video .video-player {
+ height: 323px !important;
+ }
+
+ .primary-content {
+ float: left;
+ max-width: 700px;
+ }
+
+ .secondary-content {
+ float: right;
+ width: 170px;
+ margin: 0 0 50px 0;
+ }
+
+ .container {
+ overflow: hidden;
+ }
+
+ .category-wordcamptv .secondary-content {
+ float: left;
+ width: 170px;
+ }
+
+ .category-wordcamptv .primary-content {
+ float: right;
+ margin: 0;
+ }
+
+ .video-list.four-col {
+ width: 860px;
+ }
+
+ .wptv-hero .main-video {
+ float: left;
+ }
+
+ .wptv-hero .secondary-videos {
+ float: right;
+ width: 345px;
+ }
+
+ .single .video-player {
+ float: left;
+ width: 940px !important;
+ height: 529px !important;
+ overflow: hidden;
+ }
+}
+
+@media screen and ( max-width:940px ) {
+ #header {
+ padding: 0 30px;
+ }
+
+ .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 */
+ }
+
+ .primary-content {
+ padding: 0 30px;
+ }
+
+ .wptv-hero {
+ padding: 30px 30px 10px;
+ }
+
+ .wptv-hero .secondary-videos {
+ margin-top: 20px;
+ }
+
+ .wptv-hero .secondary-videos li {
+ display: inline-block;
+ width: 150px;
+ vertical-align: top;
+ padding-right: 20px;
+ }
+
+ .secondary-content {
+ clear: both;
+ }
+
+ .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:921px ) {
+ #footer {
+ clear: both;
+ height: 3.5em;
+
+ }
+
+ .automattic {
+ width: 380px;
+ float: right;
+ text-align: right;
+ }
+}
+
+@media screen and ( max-width:920px ) {
+ .menu-footer-container {
+ float: none;
+ text-align: center;
+ }
+
+ .automattic {
+ width: 100%;
+ clear: both;
+ text-align: center;
+ }
+}
+
+@media screen and ( max-width: 700px ) {
+ .wptv-hero .secondary-videos li {
+ display: block;
+ width: 100%;
+ padding-right: 0;
+ }
+}
+
+@media screen and ( min-width:621px ) {
+ .menu-footer-container li {
+ display: inline-block;
+ }
+}
+
+@media screen and ( max-width:620px ) {
+ .dot {
+ display: none;
+ }
+}
+
+@media screen and ( min-width:620px ) and ( max-width:940px ) {
+
+}
+
+@media screen and ( min-width:601px ) {
+ #header {
+ height: 57px;
+ }
+}
+
+@media screen and ( max-width:600px ) {
+ /* Menu */
+ .menu-toggle {
+ display: block;
+ }
+
+ .menu-primary-container {
+ display: none;
+ margin-top: 20px;
+ }
+
+ #menu.toggled .menu-primary-container {
+ display: block;
+ }
+
+ #menu ul {
+ float: none;
+ height: auto;
+ margin-left: -30px; /* offset margins on #header, to achieve 100% viewport width */
+ margin-right: -30px;
+ background-color: #2698CF;
+ text-align: center;
+ }
+
+ #menu li {
+ float: none;
+ margin-left: 0;
+ padding: 10px 0 8px;
+ line-height: 2em;
+ border-bottom: 1px solid white;
+ }
+
+ #menu li:last-child {
+ border-bottom: none;
+ }
+
+ #menu li a,
+ #menu li a:link,
+ #menu li a:visited {
+ color: white;
+ }
+
+ #menu .current-menu-item > a,
+ #menu .current-menu-ancestor > a,
+ #menu .current_page_item > a,
+ #menu .current_page_ancestor > a {
+ color: white !important;
+ }
+
+ /* Footer */
+ .menu-footer-container {
+ float: none;
+ }
+
+ #menu-footer {
+ text-align: center;
+ }
+
+ #menu-footer li {
+ display: block;
+ }
+}
+
+@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 ( min-width:401px ) {
+ #searchform {
+ float: right;
+ margin-left: 15px;
+ }
+}
+
+@media screen and ( max-width: 500px ) {
+ .secondary-content li.widget {
+ width: auto;
+ display: block;
+ margin-right: 0;
+ padding-right: 0;
+ text-align: center;
+ }
+}
+
+@media screen and ( max-width:400px ) {
+ #searchform #searchbox,
+ #searchform input#s {
+ width: 95%;
+ }
+
+ .entry .contact-form textarea {
+ width: 98%;
+ }
+}
+
+@media screen and ( min-width:395px ) {
+ .video-list li {
+ float: left;
+ min-height: 220px;
+ }
+
+ .video-list.four-col li {
+ width: 160px;
+ margin-right: 20px;
+ }
+}