gwtd3 v1.0.3

Fixed css rules Added responsive css Added Off-Canvas Menu Added Scroll-To-Top Added SmoothScroll
wppolyglots · Jul 25, 2017 · c9ba408 · c9ba408
1 parent 1bfd47a
commit c9ba408
Show file tree

Hide file tree

Showing 12 changed files with 1,056 additions and 64 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,5 +5,6 @@
 !.gitignore
 !wp-content/
 !gwtd3.sql
+!dev.gwtd3.sql
 !LICENSE
 !README.md
diff --git a/README.md b/README.md
@@ -1,2 +1,22 @@
 # wptranslationday.org
-Theme and custom plugins for wptranslationday.org
+**Theme and custom plugins for wptranslationday.org**
+
+---
+
+## gwtd3 theme
+
+**Landing Page ( to be continued as a theme :D ) based on _s.**
+
+Latest stable: **v1.0.3**
+
+Currently includes:
+
+* Responsive design
+* Off-Canvas mobile menu
+* Scroll-to-top
+* Smooth Scroll on # links.
+* Customizer - Main Header
+* Extra custom header for the non-landing page posts.
+* Dev stuff: .sql export (latest: dev.gwtd3.sql) for easy setup, wp-content folder with all the uploaded files.
+
+Tested on latest: Chrome, Firefox, Edge, IE11
diff --git a/dev.gwtd3.sql b/dev.gwtd3.sql
diff --git a/wp-content/themes/gwtd3/footer.php b/wp-content/themes/gwtd3/footer.php
@@ -10,24 +10,27 @@
  */
 
 ?>
-
-<div class="section footer">
-	<div class="container">
-		<div class="row">
-			<div class="six columns">
-				<h2 class="value-multiplier">Stay tuned!</h2>
-			</div>
-			<div class="six columns text-right">
-				<?php if ( is_active_sidebar( 'footer-social' ) ) : ?>
-					<div id="footer-social">
-						<?php dynamic_sidebar( 'footer-social' ); ?>
+		<div class="section footer">
+			<div class="container">
+				<div class="row">
+					<div class="six columns">
+						<h2 class="value-multiplier">Stay tuned!</h2>
+					</div>
+					<div class="six columns text-right">
+						<?php if ( is_active_sidebar( 'footer-social' ) ) : ?>
+							<div id="footer-social">
+								<?php dynamic_sidebar( 'footer-social' ); ?>
+							</div>
+						<?php endif; ?>
 					</div>
-				<?php endif; ?>
+				</div>
 			</div>
 		</div>
 	</div>
 </div>
-
+<div id="to-top">
+	<a href="#top" id="smoothup" title="Back to top"><img src="<?php echo get_template_directory_uri(); ?>/img/backtotop.png"/></a>
+</div>
 <?php wp_footer(); ?>
 </body>
 </html>
diff --git a/wp-content/themes/gwtd3/functions.php b/wp-content/themes/gwtd3/functions.php
@@ -132,12 +132,16 @@ function gwtd3_scripts() {
 
 	wp_enqueue_style( 'gwtd3-style', get_stylesheet_uri() );
 
+	wp_enqueue_style( 'dashicons' );
+
 	wp_enqueue_style( 'gwtd3-fonts', 'https://fonts.googleapis.com/css?family=Changa:400,700|Open+Sans:400,400i,600,700' );
 
 	wp_enqueue_script( 'gwtd3-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20170725', true );
 
 	wp_enqueue_script( 'gwtd3-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20170725', true );
 
+	wp_enqueue_script( 'jquery' );
+
 	wp_enqueue_script( 'gwtd3-custom-scripts', get_template_directory_uri() . '/js/scripts.js', array(), '20170725', true );
 
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {

diff --git a/wp-content/themes/gwtd3/header.php b/wp-content/themes/gwtd3/header.php
@@ -21,52 +21,68 @@
 </head>
 
 <body <?php body_class(); ?>>
-<?php if ( is_front_page() ) { ?>
-	<div class="section hero">
-		<div class="container">
-			<div class="row">
-				<div class="twelve columns text-center">
-					<?php the_header_image_tag(); ?>
+<div id="site-wrapper">
+	<div id="site-canvas">
+		<div id="mobile-menu-trigger">
+			<span class="dashicons dashicons-menu"></span>
+		</div>
+		<div id="site-menu">
+			<?php
+			wp_nav_menu( array(
+				'theme_location' => 'primary-menu',
+				'menu_id' => 'primary-menu',
+			) );
+
+			wp_nav_menu( array(
+				'theme_location' => 'gwtd-menu',
+				'menu_id' => 'gwtd-menu',
+			) );
+			?>
+		</div>
+		<?php if ( is_front_page() ) { ?>
+		<div class="section hero">
+			<div class="container">
+				<div class="row">
+					<div class="twelve columns text-center">
+						<?php the_header_image_tag(); ?>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-<?php } else { ?>
-	<div class="section hero header">
-		<div class="container">
-			<div class="row">
-				<div class="twelve columns text-center">
-					<?php
-					$post = get_page_by_title( 'Internal Banner' );
-					the_post_thumbnail();
-					?>
+		<?php } else { ?>
+		<div class="section hero header">
+			<div class="container">
+				<div class="row">
+					<div class="twelve columns text-center">
+						<?php
+						$post = get_page_by_title( 'Internal Banner' );
+						the_post_thumbnail();
+						?>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-<?php } ?>
-<div class="section primary-menus">
-	<div class="container">
-		<div class="row">
-			<!--	<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">-->
-			<?php //esc_html_e( 'Primary Menu', 'gwtd3' ); ?><!--</button>-->
-			<div class="five columns text-left">
-				<?php
-				wp_nav_menu( array(
-					'theme_location' => 'gwtd-menu',
-					'menu_id' => 'gwtd-menu',
-				) );
-				?>
-			</div>
-			<div class="seven columns text-right">
-				<?php
-				wp_nav_menu( array(
-					'theme_location' => 'primary-menu',
-					'menu_id' => 'primary-menu',
-				) );
-				?>
+		<?php } ?>
+		<div class="section primary-menus">
+			<div class="container">
+				<div class="row">
+					<div class="five columns text-left">
+						<?php
+						wp_nav_menu( array(
+							'theme_location' => 'gwtd-menu',
+							'menu_id' => 'gwtd-menu',
+						) );
+						?>
+					</div>
+					<div class="seven columns text-right">
+						<?php
+						wp_nav_menu( array(
+							'theme_location' => 'primary-menu',
+							'menu_id' => 'primary-menu',
+						) );
+						?>
+					</div>
+				</div>
 			</div>
 		</div>
-	</div>
-</div>
 
diff --git a/wp-content/themes/gwtd3/img/backtotop.png b/wp-content/themes/gwtd3/img/backtotop.png
diff --git a/wp-content/themes/gwtd3/img/globe.png b/wp-content/themes/gwtd3/img/globe.png
diff --git a/wp-content/themes/gwtd3/img/rocket.png b/wp-content/themes/gwtd3/img/rocket.png
diff --git a/wp-content/themes/gwtd3/js/scripts.js b/wp-content/themes/gwtd3/js/scripts.js
@@ -1 +1,44 @@
-// Scripting goes here!
+(function( $ ) {
+	$( document ).ready( function( $ ) {
+
+		$( '#mobile-menu-trigger' ).click( function() {
+			toggleNav();
+		});
+
+		function toggleNav() {
+			if ( $( '#site-wrapper' ).hasClass( 'show-nav' ) ) {
+				$( '#site-wrapper' ).removeClass( 'show-nav' );
+			} else {
+				$( '#site-wrapper' ).addClass( 'show-nav' );
+			}
+		}
+
+
+		$( window ).scroll( function() {
+			if ( $( this ).scrollTop() < 400 ) {
+				$( '#to-top' ).fadeOut();
+			} else {
+				$( '#to-top' ).fadeIn();
+			}
+		} );
+
+		$( 'a[href*=\\#]' ).on( 'click', function( event ) {
+			if ( $( this ).attr( 'id' ) === 'smoothup' ) {
+				$( 'html, body' ).animate( {
+					scrollTop: 0
+				}, 500 );
+				return false;
+			} else {
+				if ( $( this ).parent().parent().parent().parent().attr( 'id' ) === 'site-menu' ) {
+					toggleNav();
+				}
+				event.preventDefault();
+				$( 'html,body' ).animate( {
+					scrollTop: $( this.hash ).offset().top
+				}, 500 );
+				return false;
+			}
+		} );
+
+	} );
+})( jQuery );
diff --git a/wp-content/themes/gwtd3/landing-page.php b/wp-content/themes/gwtd3/landing-page.php
@@ -6,10 +6,13 @@
 	get_header();
 
 ?>
-	<div class="section lp-what-it-is">
+	<div id="what" class="section lp-what-it-is">
 		<div class="container">
 			<div class="row">
 				<div class="twelve columns">
+					<div class="questionmark">
+						<img src="<?php echo get_template_directory_uri(); ?>/img/questionmark.png">
+					</div>
 					<?php
 						$page = get_page_by_title( 'What is GWTD3?' );
 						$title = $page->post_title;
@@ -25,10 +28,13 @@
 		</div>
 	</div>
 
-	<div class="section lp-where-it-is">
+	<div id="where" class="section lp-where-it-is">
 		<div class="container">
 			<div class="row">
 				<div class="twelve columns">
+					<div class="globe">
+						<img src="<?php echo get_template_directory_uri(); ?>/img/globe.png">
+					</div>
 					<?php
 						$page = get_page_by_title( 'Where is GWTD3?' );
 						$title = $page->post_title;
@@ -44,10 +50,13 @@
 		</div>
 	</div>
 
-	<div class="section lp-how-to-get-involved">
+	<div id="how" class="section lp-how-to-get-involved">
 		<div class="container">
 			<div class="row">
 				<div class="twelve columns">
+					<div class="rocket">
+						<img src="<?php echo get_template_directory_uri(); ?>/img/rocket.png">
+					</div>
 					<?php
 						$page = get_page_by_title( 'Cool! How do I get involved?' );
 						$title = $page->post_title;