landing page wrapped up

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-material
+material
+package-lock.json

assets/js/scripts.js

@@ -1 +1,16 @@
-
+jQuery(document).ready(function($) {
+  var archive, title, years;
+  title = $('nav .title');
+  archive = $('nav .archive');
+  years = $('nav .years');
+  archive.find('a').on('click', function(e) {
+    return years.toggleClass('show');
+  });
+  return $(window).resize(function() {
+    if (title.find('.label').innerHeight() > archive.find('.label').innerHeight()) {
+      return years.addClass('static');
+    } else {
+      return years.removeClass('static');
+    }
+  }).resize();
+});

content-events.php

@@ -6,12 +6,12 @@
 
 	<?php
 	if( has_post_thumbnail(get_the_ID()) ): 
-		echo '<a href="'.get_the_permalink().'" class="event-thumb">';
-			the_post_thumbnail( get_the_ID(), 'custom' );
-		echo '</a>';
+		echo '<div class="event-thumb">';
+			the_post_thumbnail( 'custom' );
+		echo '</div>';
 	else:
 		echo '<div class="event-content">';
-			echo '<a href="'.get_the_permalink().'">'.get_the_title().'</a>';
+			echo get_the_title();
 			the_excerpt();
 		echo '</div>';
 	endif;
@@ -24,7 +24,7 @@
 			<div class="partner"><?= $partner ?></div>
 		<?php endif; ?>
 		<?php if( $register = get_field('register') ): ?>
-			<div class="register"><a href="<?= $register ?>"><span>Register</span></a></div>
+			<div class="register"><a href="<?= $register ?>" target="_blank"><span>Register</span></a></div>
 		<?php endif; ?>
 	</div>
 </article>

functions.php

@@ -1,7 +1,8 @@
 <?php
-$ver = '1.0.0';
+$ver = '1.0.2';
 function archtober_scripts() {
     wp_enqueue_style( 'style', get_stylesheet_uri() );
+    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array(), true );
     wp_enqueue_script( 'scripts', get_template_directory_uri() . '/assets/js/scripts.js', array(), $ver, true );
 }
 add_action( 'wp_enqueue_scripts', 'archtober_scripts' );
@@ -32,7 +33,7 @@ function register_navigation() {
 if( function_exists('acf_add_options_page') ) {
   acf_add_options_page(); 
 }
-add_theme_support( 'post-thumbnails', array( 'post', 'page', 'event' ) ); 
+add_theme_support( 'post-thumbnails', array( 'post', 'page', 'events' ) ); 
 add_image_size( 'custom', 800, 533, true );
 add_filter('show_admin_bar', 'false');
 define( 'WP_DEBUG', true );

gulpfile.js

@@ -19,7 +19,8 @@ var paths = {
 var dest = {
   css: './',
   js: './assets/js/',
-  images: './assets/images/'
+  images: './assets/images/',
+  fonts: './assets/fonts/'
 }
 
 gulp.task('compile-sass', function() {
@@ -34,6 +35,7 @@ gulp.task('compile-sass', function() {
     .pipe(sass(sassOptions))
     .pipe(autoprefixer(apOptions))
     .pipe(replace('images/', dest.images))
+    .pipe(replace('fonts/', dest.fonts))
     .pipe(gulp.dest(dest.css))
   .on('end', function() {
     log('Sass done');

header.php

@@ -16,16 +16,28 @@
 			<div class="col col col-12 col-sm-3 col-spacer"></div>
 			<div class="col col col-12 col-sm-3 col-utility">
 				<nav class="navigation" role="navigation" aria-label="<?php esc_attr_e( 'Navigation', 'twentysixteen' ); ?>">
-					<h2><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h2>
-					<?php
-					if ( has_nav_menu( 'navigation' ) ) :
-						foreach( wp_get_nav_menu_items( 'navigation' ) as $menu_item ):
-							echo '<h2><a href="'.$menu_item->url.'">'.$menu_item->title.'</a></h2>';
-						endforeach;
-					endif;
-					?>
+					<ul>
+						<li class="title">
+							<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
+								<h2 class="label">Archtober 2018</h2>
+							</a>
+							<div class="years">
+								<ol>
+									<?php for($year = 2017; $year >= 2011; $year--) {
+										echo '<li><h2><a href="https://archtober.org/'.$year.'" target="_blank">'.$year.'</h2></li>';
+									} ?>
+								</ol>
+							</div>
+						</li>
+						<li class="archive">
+							<a><h2 class="label">Archive</h2></a>
+						</li>
+					</ul>
 				</nav>
 				<footer class="social">
+					<a href="mailto:<?= get_field( 'email', 'options' ) ?>?subject=<?= get_field( 'email_subject', 'options' ) ?>" class="email social-icon">
+						<?= file_get_contents(get_template_directory_uri().'/assets/images/email.svg'); ?>
+					</a>
 					<a href="<?= get_field( 'facebook', 'options' ) ?>" target="_blank" class="facebook social-icon">
 						<?= file_get_contents(get_template_directory_uri().'/assets/images/facebook.svg'); ?>
 					</a>

index.php

@@ -19,8 +19,8 @@
 query_posts( $events_args );
 echo '<div class="col col-12 col-sm-9">';
 	echo '<div id="identity">';
-		echo file_get_contents(get_template_directory_uri().'/assets/images/identity.svg');
-		echo file_get_contents(get_template_directory_uri().'/assets/images/identity-mobile.svg');
+		echo '<img src="'.get_template_directory_uri().'/assets/images/identity.gif"/>';
+		echo '<img src="'.get_template_directory_uri().'/assets/images/identity.gif"/>';
 	echo '</div>';
 	echo '<header>';
 		echo '<div class="title"><h2>NYCxDESIGN</h2><div class="burger"></div></div>';
@@ -29,7 +29,7 @@
 	echo '<div class="events row">';
 		if ( have_posts() ) :
 			while ( have_posts() ) : the_post();
-				echo '<div class="col col-12 col-md-6 col-lg-6 event">';
+				echo '<div class="col col-12 col-md-6 event">';
 					get_template_part( 'content', 'events' );
 				echo '</div>';
 			endwhile;

source/coffee/scripts.coffee

@@ -0,0 +1,14 @@
+jQuery(document).ready ($) ->
+	title = $('nav .title')
+	archive = $('nav .archive')
+	years = $('nav .years')
+	archive.find('a').on 'click', (e) ->
+		years.toggleClass('show')
+
+	$(window).resize () ->
+		if title.find('.label').innerHeight() > archive.find('.label').innerHeight()
+			years.addClass('static')
+		else
+			years.removeClass('static')
+	.resize()
+

source/sass/style.scss

@@ -30,7 +30,7 @@ h3 {
   line-height: $sm-line-height;
 }
 #identity {
-	svg {
+	svg,img {
 		width: 100%;
 		height: auto;
 		&:last-of-type {
@@ -55,8 +55,8 @@ header {
 		display: flex;
 		justify-content: space-between;
 		.burger {
-			width: $lg-font-size;
-			height: $lg-font-size;
+			width: 30px;
+			height: 30px;
 			background-image: url(images/burger.svg);
 			background-position: top center;
 			background-repeat: no-repeat;
@@ -73,8 +73,44 @@ header {
 		}
 	}
 }
+nav {
+	h2 {
+		display: inline;
+	}
+	ul,ol,li {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	a {
+		border-bottom: 2px solid transparent;
+		&:hover {
+			cursor: pointer;
+			text-decoration: none;
+			border-bottom-color: $white;
+		}
+	}
+	.title {
+		display: table;
+		position: relative;
+		.years {
+			display: none;
+			position: absolute;		
+			right: 0;
+			top: 100%;
+			&.show {
+				display: block;
+			}
+			&.static {
+				position: static;				
+				right: auto;
+				top: auto;
+			}
+		}
+	}
+}
 main {
-	padding: 30px;
+	padding: 0 30px 30px 30px;
 	@include sm {
 		padding: 0 15px;
 	}
@@ -92,13 +128,12 @@ main {
 	justify-content: space-between;
 	footer.social {
 		.social-icon {
-			display: block;
-			height: $sm-font-size;
-			margin: 0 15px 0 0;
-			float: left;
+			display: inline-block;
+			height: 20px;
+			margin: 15px 15px 0 0;
 			svg {
 				width: auto;
-				height: 100%;
+				height: 20px;
 			}
 		}
 	}
@@ -129,9 +164,10 @@ main {
 		padding: 15px 0;
 	}
 	.event-info {
-		color: $pink;
+		color: $white;
 		a {
-			color: $pink;
+			color: $white;
+			text-decoration: none;
 		}
 		.register a::after {
 			width: 1em;
@@ -148,11 +184,19 @@ main {
 }
 
 #about {
+	max-width: 900px;
 	padding: 30px 0;
-	color: $red;
+	color: $white;
+	font-family: $serif;
 	font-size: $lg-font-size;
   line-height: $lg-line-height;
 	a {
-		color: $red;
+		color: $white;
+	}
+	p {
+		margin: 0;
+		&:not(:first-of-type) {
+			text-indent: 1.25em;
+		}
 	}
 }

source/sass/vars.scss

@@ -2,16 +2,25 @@ $orange: #f36b22;
 $white: #ffffff;
 $green: #9bc23b;
 $blue: #00aeef;
-$pink: #ee174e;
-$tan: #cdb182;
-$red: #fa0025;
+$tan: #C0A475;
+$red: #fb0025;
 
 $sm-font-size: 18px;
 $sm-line-height: 24px;
-$md-font-size: 25px;
-$md-line-height: 30px;
-$lg-font-size: 30px;
-$lg-line-height: 35px;
+$md-font-size: 30px;
+$md-line-height: 34px;
+$lg-font-size: 50px;
+$lg-line-height: 55px;
+
+@font-face {
+  font-family: 'Arnhem';
+  src: url('fonts/Arnhem-Bold.woff2') format('woff2'),
+      url('fonts/Arnhem-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+$serif: 'Arnhem', serif;
+$sanSerif: 'Helvetica Neue', Helvetica, sans-serif;
 
 @mixin sm {
 	@media (max-width: 575px) {