code and align content

MozillaCommunityTheme/rtl.css

@@ -5,17 +5,19 @@
 }
 #site-title { 
 	padding-left: 0;
-	padding-right: 170px;
+	padding-right: 100px;
 }
 #site-description { 
 	margin: 0;
 	margin-right: 100px;
 }
 #access ul {
 	padding-right: 1.4%;
-	padding-left: 0;
+	padding-left: 20%;
 }
 #branding #searchform {
 	right: auto;
 	left: 5.6%;
 }
+
+code { direction: ltr; }

MozillaCommunityTheme/showcase-mcs.php

@@ -0,0 +1,164 @@
+<?php
+/**
+ * Template Name: Showcase Template mcs
+ * Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts for Mozilla
+ *
+ * The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,
+ * another recent posts area (with the latest post shown in full and the rest as a list)
+ * and a left sidebar holding aside posts.
+ *
+ * We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
+ *
+ * @package WordPress
+ * @subpackage Twenty_Eleven
+ * @since Twenty Eleven 1.0
+ */
+
+// Enqueue showcase script for the slider
+wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
+
+get_header(); ?>
+
+		<div id="primary" class="showcase">
+			<div id="content" role="main">
+
+				<?php
+					/**
+					 * Begin the featured posts section.
+					 *
+					 * See if we have any sticky posts and use them to create our featured posts.
+					 * We limit the featured posts at ten.
+					 */
+					$sticky = get_option( 'sticky_posts' );
+
+					// Proceed only if sticky posts exist.
+					if ( ! empty( $sticky ) ) :
+
+					$featured_args = array(
+						'post__in' => $sticky,
+						'post_status' => 'publish',
+						'posts_per_page' => 10,
+						'no_found_rows' => true,
+					);
+
+					// The Featured Posts query.
+					$featured = new WP_Query( $featured_args );
+
+					// Proceed only if published posts exist
+					if ( $featured->have_posts() ) :
+
+					/**
+					 * We will need to count featured posts starting from zero
+					 * to create the slider navigation.
+					 */
+					$counter_slider = 0;
+
+					?>
+
+				<div class="featured-posts">
+
+				<?php
+					// Let's roll.
+					while ( $featured->have_posts() ) : $featured->the_post();
+
+					// Increase the counter.
+					$counter_slider++;
+
+					/**
+					 * We're going to add a class to our featured post for featured images
+					 * by default it'll have the feature-text class.
+					 */
+					$feature_class = 'feature-text';
+
+					if ( has_post_thumbnail() ) {
+						// ... but if it has a featured image let's add some class
+						$feature_class = 'feature-image small';
+
+						// Hang on. Let's check this here image out.
+						$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) );
+
+						// Is it bigger than or equal to our header?
+						if ( $image[1] >= HEADER_IMAGE_WIDTH ) {
+							// If bigger, let's add a BIGGER class. It's EXTRA classy now.
+							$feature_class = 'feature-image large';
+						}
+					}
+					?>
+
+					<section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
+
+						<?php
+							/**
+							 * If the thumbnail is as big as the header image
+							 * make it a large featured post, otherwise render it small
+							 */
+							if ( has_post_thumbnail() ) {
+								if ( $image[1] >= HEADER_IMAGE_WIDTH )
+									$thumbnail_size = 'large-feature';
+								else
+									$thumbnail_size = 'small-feature';
+								?>
+								<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail( $thumbnail_size ); ?></a>
+								<?php
+							}
+						?>
+						<?php get_template_part( 'content', 'featured' ); ?>
+					</section>
+				<?php endwhile;	?>
+
+				<?php
+					// Show slider only if we have more than one featured post.
+					if ( $featured->post_count > 1 ) :
+				?>
+				<nav class="feature-slider">
+					<ul>
+					<?php
+
+						// Reset the counter so that we end up with matching elements
+				    	$counter_slider = 0;
+
+						// Begin from zero
+				    	rewind_posts();
+
+						// Let's roll again.
+				    	while ( $featured->have_posts() ) : $featured->the_post();
+				    		$counter_slider++;
+							if ( 1 == $counter_slider )
+								$class = 'class="active"';
+							else
+								$class = '';
+				    	?>
+						<li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" <?php echo $class; ?>></a></li>
+					<?php endwhile;	?>
+					</ul>
+				</nav>
+				<?php endif; // End check for more than one sticky post. ?>
+				</div><!-- .featured-posts -->
+				<?php endif; // End check for published posts. ?>
+				<?php endif; // End check for sticky posts. ?>
+
+				<?php the_post(); ?>
+
+				<?php
+					/**
+					 * We are using a heading by rendering the_content
+					 * If we have content for this page, let's display it.
+					 */
+					if ( '' != get_the_content() )
+						get_template_part( 'content', 'intro' );
+				?>
+
+				<div class="widget-area" role="complementary">
+					<?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
+
+						<?php
+						the_widget( 'Twenty_Eleven_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
+						?>
+
+					<?php endif; // end sidebar widget area ?>
+				</div><!-- .widget-area -->
+
+			</div><!-- #content -->
+		</div><!-- #primary -->
+
+<?php get_footer(); ?>

MozillaCommunityTheme/style.css

@@ -30,7 +30,7 @@ body {
 	margin: 0 4.5%
 }
 #site-title {
-	padding-left: 170px;
+	padding-left: 100px;
 	padding-top: 20px;
 }
 #site-title a { font-size: 40px;}
@@ -55,13 +55,6 @@ body {
 
 #access {
     background: #2e89ca;
-
-    background-image: -webkit-linear-gradient(top, #2e88c9, #1c5a9a); 
-    background-image:    -moz-linear-gradient(top, #2e88c9, #1c5a9a);
-    background-image:     -ms-linear-gradient(top, #2e88c9, #1c5a9a);
-    background-image:      -o-linear-gradient(top, #2e88c9, #1c5a9a); 
-    background-image:         linear-gradient(top, #2e88c9, #1c5a9a);
-
     border-radius: 5px;
 /*    box-shadow: none;*/
 	width: 90%;
@@ -74,6 +67,7 @@ body {
 }
 #access ul {
 	padding-left: 1.4%;
+	padding-right:  20%;
 }
 #access a {
 	font-size: 14px;
@@ -113,11 +107,9 @@ html { background: #33559B; }
 }
 
 #main .widget {
-    background: white;
+    background: #CDE6F5;
     border-radius: 10px; 
     padding: 20px;
-    border: #d7d9e8 solid 1px;
-    box-shadow: inset 0 -3px 3px #cde6f5;
 }
 
 .left-sidebar #content {
@@ -136,6 +128,10 @@ html { background: #33559B; }
 .left-sidebar #secondary {
 	margin-left: 4.5%;
 }
+#main .widget {
+	background: rgb(253,253,255);
+	border: gray solid 1px;
+}
 
 .singular .hentry {
     padding: none;