Changes that did not get committed. Not sure why.

imports/ui/Admin/PageEditor.js

@@ -156,7 +156,7 @@ Template.PageEditor.onRendered(function() {
 			borderCollapse: "collapse"
 		},
 		insert_toolbar: 'quicktable',  //image
-		selection_toolbar: 'bold italic | h1 h2 h3 | blockquote quicklink',
+		selection_toolbar: 'bold italic | h1 h2 h3 | blockquote link',
 		contextmenu: 'InsertImage | inserttable | cell row column deletetable',  //image
 		contextmenu_never_use_native: false,
 		

imports/ui/Home.html

@@ -1,46 +1,64 @@
 <template name="Home">
 	<div id="homePage">
-		<img class="pageHeader" src="/images/header_v2.jpg"/>
+		<div class="pageHeader"><img src="/images/header_v2.jpg"/></div>
 		<div class="blockContainer">
-			<a class="menuTile grantMenu" href="{{pathFor 'Grants'}}">
-				<div class="menuHeaderBackground"></div>
-				<div class="menuHeader">Grants</div>
-			</a>
-			<a class="menuTile internshipsMenu" href="{{pathFor 'Internships'}}">
-				<div class="menuHeaderBackground"></div>
-				<div class="menuHeader">Internships</div>
-				<!--<a style="display: none" href="#!/internship">internship</a>-->
-			</a>
-			<a class="menuTile scholarshipsMenu" href="{{pathFor 'Scholarships'}}">
-				<div class="menuHeaderBackground"></div>
-				<div class="menuHeader">Scholarships</div>
-				<!--<a style="display: none" href="#!/scholarship">scholarship</a>-->
-			</a>
-			<a class="menuTile fellowshipsMenu" href="{{pathFor 'Fellowships'}}">
-				<div class="menuHeaderBackground"></div>
-				<div class="menuHeader">Fellowships</div>
-				<!--<a style="display: none" href="#!/fellowship">fellowship</a>-->
-			</a>
-			<a class="menuTile newsMenu" href="{{pathFor 'News'}}">
-				<div class="menuHeaderBackground"></div>
-				<div class="menuHeader">News &amp; Notices</div>
-				<div id="newsHeaderTimestampDiv" class="menuHeaderTimestamp">{{newsDate}}</div>  <!--03/13/18-->
-				<!--<a style="display: none" href="#!/news">news</a>-->
-			</a>
-			<a class="menuTile photoGalleryMenu" href="{{pathFor 'PhotoGallery'}}">
-				<div class="menuHeaderBackground"></div>
-				<div class="menuHeader">Photo Gallery</div>
-				<!--<a style="display: none" href="#!/gallery">gallery</a>-->
-			</a>
-			<a class="menuTile jrHighSummerMenu" href="{{pathFor 'JrHighSummer'}}">
-				<div class="menuHeaderBackground"></div>
-				<div class="menuHeader">Jr High Summer</div>
-			</a>
-			<a class="menuTile howCanYouHelpMenu" href="{{pathFor 'HowCanYouHelp'}}">
-				<div class="menuHeaderBackground"></div>
-				<div class="menuHeader">How You Can Help</div>
-				<!--<a style="display: none" href="#!/support">support</a>-->
-			</a>
+			<div class="column column1">
+				<div class="cellTile">
+					<div class="cellContent">
+						<div class="menuText">Grants</div>
+						<a href="{{pathFor 'Grants'}}"><img src='./images/apple_seed_v2.jpg'/></a>
+					</div>
+				</div>
+				<div class="cellTile">
+					<div class="cellContent">
+						<div class="menuText">News &amp; Notices</div>
+						<div id="newsHeaderTimestampDiv" class="menuTimestamp">{{newsDate}}</div>  <!--03/13/18-->
+						<a href="{{pathFor 'News'}}"><img src='./images/redwood_seed_v2.jpg'/></a>
+					</div>
+				</div>
+			</div>
+			<div class="column column2">
+				<div class="cellTile">
+					<div class="cellContent">
+						<div class="menuText internshipsMenu">Internships</div>
+						<a href="{{pathFor 'Internships'}}"><img src='./images/oak_seed_v2.jpg'/></a>
+					</div>
+				</div>
+				<div class="cellTile">
+					<div class="cellContent">
+						<div class="menuText">Photo Gallery</div>
+						<a href="{{pathFor 'PhotoGallery'}}"><img src='./images/buckeye_seed_v2.jpg'/></a>
+					</div>
+				</div>
+			</div>
+			<div class="column column3">
+				<div class="cellTile">
+					<div class="cellContent">
+						<div class="menuText scholarshipsMenu">Scholarships</div>
+						<a href="{{pathFor 'Scholarships'}}"><img src='./images/maple_seed_v2.jpg'/></a>
+					</div>
+				</div>
+				<div class="cellTile">
+					<div class="cellContent">
+						<div class="menuText">Jr High Summer</div>
+						<a href="{{pathFor 'JrHighSummer'}}"><img src='./images/bay_seed_v2.jpg'/></a>
+					</div>
+				</div>
+			</div>
+			<div class="column column4">
+				<div class="cellTile">
+					<div class="cellContent">
+						<div class="menuText">Fellowships</div>
+						<a href="{{pathFor 'Fellowships'}}"><img src='./images/fir_seed_v2.jpg'/></a>
+					</div>
+				</div>
+				<div class="cellTile">
+					<div class="cellContent">
+						<div class="menuText">How You Can Help</div>
+						<a href="{{pathFor 'HowCanYouHelp'}}"><img src='./images/madrone_seed_v2.jpg'/></a>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>

imports/ui/Home.import.styl

@@ -4,10 +4,12 @@
 
 	.pageHeader
 		margin-bottom: 30px
-		width: 100%
-		-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75)
-		-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75)
-		box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75)
+		margin-right: 10px
+		img
+			width: 100%
+			-webkit-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75)
+			-moz-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75)
+			box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75)
 	.blockContainer
 		position: relative
 		height: 350px
@@ -20,81 +22,85 @@
 		min-width: 200px
 		margin: 0 auto
 		position: relative
-	.menuTile
-		width: 225px
-		height: 140px
-		position: absolute
-		top: 0
-		margin: 0
-		background-repeat: no-repeat
-		background-origin: content-box
-		background-clip: content-box
-		background-position: center center
-		background-size: cover
-		-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75)
-		-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75)
-		box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75)
-	.menuHeader
-		font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif
-		font-weight: 800
-		font-size: 15px
-		color: black
+	.column
 		position: absolute
+		width: 25%
+		.cellTile
+			max-width: 240px
+			//max-height: 140px
+			position: relative
+			.cellContent
+				margin: 0 12px 20px 4px
+				-webkit-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75)
+				-moz-box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75)
+				box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75)
+				a
+					img
+						width: 100%
+						vertical-align: top
+				.menuText
+					position: absolute
+					left: 12px
+					top: -1px
+					font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif
+					font-weight: 800
+					font-size: 15px
+					color: black
+					line-height: 27px
+					height: 0
+					overflow: visible
+					pointer-events: none
+					background: none !important
+					margin: 0
+					padding: 0
+				.menuTimestamp
+					font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif
+					font-weight: 800
+					font-size: 15px
+					color: white
+					letter-spacing: -2px
+					position: absolute
+					bottom: 30px
+					right: 16px
+					line-height: 27px
+					height: 0
+					overflow: visible
+					pointer-events: none
+					background: none !important
+					margin: 0
+					padding: 0
+	.column1
 		left: 0
-		top: -1px
-		right: 0
-		height: 27px
-		margin: 0
-		padding: 0 0 0 6px
-	.menuHeaderBackground
-		display: none
-		position: absolute
-		left: 0
-		right: 0
-		top: 0
-		height: 24px
-		opacity: 0.25
-		/* filter: alpha(opacity=25); For IE8 and earlier */
-		background-color: white
-	.menuHeaderTimestamp
-		font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif
-		font-weight: 800
-		font-size: 15px
-		color: white
-		letter-spacing: -2px
-		text-align: right
-		position: absolute
-		left: 0px
-		top: -1px
-		right: 16px
-		height: 27px
-		margin: 0
-		padding: 0
-	.grantMenu
-		left: 0
-		background-image: url('./images/apple_seed_v2.jpg')
-	.internshipsMenu
-		left: 245px
-		background-image: url('./images/oak_seed_v2.jpg')
-	.scholarshipsMenu
-		left: 490px
-		background-image: url('./images/maple_seed_v2.jpg')
-	.fellowshipsMenu
-		left: 735px
-		background-image: url('./images/fir_seed_v2.jpg')
-	.newsMenu
-		left: 0px
-		top: 160px
-		background-image: url('./images/redwood_seed_v2.jpg')
-	.photoGalleryMenu
-		left: 245px
-		top: 160px
-		background-image: url('./images/buckeye_seed_v2.jpg')
-	.jrHighSummerMenu
-		left: 490px
-		top: 160px
-		background-image: url('./images/bay_seed_v2.jpg')
-	.howCanYouHelpMenu
-		left: 735px
-		top: 160px
-		background-image: url('./images/madrone_seed_v2.jpg')
+	.column2
+		left: 25%
+	.column3
+		left: 50%
+	.column4
+		left: 75%
+
+	@media(max-width: 800px)
+		.column .cellTile .cellContent
+			.menuText
+				font-size: 12px
+			.menuTimestamp
+				font-size: 12px
+	@media(max-width: 650px)
+		.column .cellTile .cellContent
+			.menuText
+				font-size: 10px
+			.menuTimestamp
+				font-size: 10px
+	@media(max-width: 550px)
+		.column .cellTile .cellContent
+			.menuText
+				font-size: 10px
+				letter-spacing: -1px
+			.menuTimestamp
+				font-size: 10px
+	@media(max-width: 500px)
+		.column .cellTile .cellContent
+			.menuText
+				font-size: 9px
+				letter-spacing: -1px
+			.menuTimestamp
+				font-size: 9px

imports/ui/layouts/Public.html

@@ -8,15 +8,27 @@
 				<div class="menuBar">
 					<div onmousedown="return false">
 						<a href="{{pathFor 'InternshipsEditor'}}"><li class="fa fa-key theKey" aria-hidden="true"></li></a>
-						<li class="barButton"><a href="#"><i class="fa fa-bars"></i></a></li>
-						<li><a id="datesMenu" class="{{isActiveRoute 'ImportantDates'}}" href="{{pathFor 'ImportantDates'}}">Important Dates</a></li>
-						<li><a id="supportMenu" class="{{isActiveRoute 'Support'}}" href="{{pathFor 'Support'}}">Support &nbsp;</a></li>
-						<li><a id="programsMenu" class="{{isActiveRoute 'Programs'}}" href="{{pathFor 'Programs'}}">Programs &nbsp;</a></li>
-						<li><a id="contactMenu" class="{{isActiveRoute 'Contact'}}" href="{{pathFor 'Contact'}}">Contact &nbsp;</a></li>
-						<li><a id="aboutMenu" class="{{isActiveRoute 'About'}}" href="{{pathFor 'About'}}">About &nbsp;</a></li>
+						<li><a class="barButton" href="javascript: "><i class="fa fa-bars"></i></a></li>
+						<li><a id="datesMenu" class="level2 {{isActiveRoute 'ImportantDates'}}" href="{{pathFor 'ImportantDates'}}">Important Dates</a></li>
+						<li><a id="supportMenu" class="level2 {{isActiveRoute 'Support'}}" href="{{pathFor 'Support'}}">Support &nbsp;</a></li>
+						<li><a id="programsMenu" class="level2 {{isActiveRoute 'Programs'}}" href="{{pathFor 'Programs'}}">Programs &nbsp;</a></li>
+						<li><a id="contactMenu" class="level2 {{isActiveRoute 'Contact'}}" href="{{pathFor 'Contact'}}">Contact &nbsp;</a></li>
+						<li><a id="aboutMenu" class="level2 {{isActiveRoute 'About'}}" href="{{pathFor 'About'}}">About &nbsp;</a></li>
 						<li><a id="homeMenu" class="{{isActiveRoute 'Home'}}" href="{{pathFor 'Home'}}">Home &nbsp;</a></li>
 					</div>
 				</div>
+				<div class="dropMenu">
+					<div class="leftMenu">
+						<div class="hiddenMenuElementLeft"><a href="#!/about">About<p>find out who Anderson Valley Education Foundation is</p></a></div>
+						<div class="hiddenMenuElementLeft"><a href="#!/programs">Programs<p>view the various services we offer</p></a></div>
+						<div class="hiddenMenuElementLeft"><a href="#!/dates">Important Dates<p>check the calendar to ensure nothing is missed</p></a></div>
+					</div>
+					<div class="rightMenu">
+						<div class="hiddenMenuElementRight"><a href="#!/contact">Contact<p>provide us with your feedback</p></a></div>
+						<div class="hiddenMenuElementRight"><a href="#!/support">Support<p>help us educate the next generation</p></a></div>
+						<!--<div class="hiddenMenuElementRight"><a href="#/">Community<p>learn more about the community</p></a></div>-->
+					</div>
+				</div>
 			</div>
 			<div id="content">
 				{{> Template.dynamic template=content}}

imports/ui/layouts/Public.import.styl

@@ -8,6 +8,7 @@
 		background: #FDFDFD
 
 		.topBar
+			display: relative
 			.logoLeft
 				cursor: pointer
 				z-index: 1
@@ -23,7 +24,8 @@
 			.menuBar
 				list-style-type:none
 				margin: 15px 0 0 0
-				padding:0
+				padding: 0
+				margin-right: 10px
 				overflow:hidden
 				display: inline-block
 				float: right
@@ -43,10 +45,58 @@
 					a.active
 						color: #777777
 						cursor: default
+			.dropMenu
+				display: none
+				position: absolute
+				width: 100%
+				z-index: 9999
+				background: #d8e3f6
+				height: 104px
+				margin: 0 0 10px 0
+				padding-top: 2px
+				color: white
+				a
+					display: block
+					color: #226699
+					font-family: Corbel, "Helvetica Neue", Helvetica, Arial, sans-serif
+					font-size: 18px
+					font-weight: 800
+					line-height: 19px
+					text-align: left
+					text-decoration: none
+					padding: 2px 0 2px 6px
+					margin: 2px 0
+				a:hover
+					color: white
+					background-color: #226699
+				a:active
+					color: #AAA
+				p
+					color: #DDF
+					font-family: Georgia, serif
+					font-size: 10px
+					text-indent: 0
+					text-wrap: none
+					line-height: 10px
+					margin: 0 0 2px 0
+					padding: 0
+				.leftMenu
+					position: absolute
+					left:0
+					width: 50%
+					div
+						max-height: 30px
+				.rightMenu
+					position: absolute
+					left:50%
+					right:0
+					div
+						max-height: 30px
 
 	.theKey
 		color: #269
-
+		margin-top: 2px
+		margin-left: 4px
 	.footer
 		text-align: center
 		padding-bottom: 40px
@@ -67,7 +117,11 @@
 		text-transform: uppercase
 		font-size: 10px
 
-	@media(max-width: 549px)
+	// Some media settings for the MENU
+	// Small Screens
+	@media(max-width: 699px)
+		.dropMenu
+			visibility: visible
 		.level1, .level2
 			display: none
 		#page
@@ -109,19 +163,11 @@
 				opacity: .7
 				color: black
 				border-bottom: 1px solid red
-		.copyright
-			font-size: 7px
-		.byline
-			float: left
-			clear: both
-			text-align: left
-			font-size: 7px
-		.footer
-			font-size: 7px
-			text-align: left
-
-	// Large Screens
-	@media(min-width: 550px)
+	// Large Screens (MENU)
+	@media(min-width: 700px)
+		.dropMenu
+			display: none
+			visibility: hidden
 		.barButton
 			display: none
 		#page
@@ -169,4 +215,39 @@
 				opacity: 1
 				color: black
 				background: transparent
-				border-bottom: 3px solid #a20010
+				border-bottom: 3px solid #a20010
+
+		//Some settings for the FOOTER
+	@media(max-width: 800px)
+		.copyright
+			font-size: 10px
+		.byline
+			float: left
+			clear: both
+			text-align: left
+			font-size: 10px
+		.footer
+			font-size: 10px
+			text-align: left
+	@media(max-width: 600px)
+		.copyright
+			font-size: 8px
+		.byline
+			float: left
+			clear: both
+			text-align: left
+			font-size: 8px
+		.footer
+			font-size: 8px
+			text-align: left
+	@media(max-width: 500px)
+		.copyright
+			font-size: 7px
+		.byline
+			float: left
+			clear: both
+			text-align: left
+			font-size: 7px
+		.footer
+			font-size: 7px
+			text-align: left

imports/ui/layouts/Public.js

@@ -2,5 +2,7 @@ import { Template } from 'meteor/templating';
 import './Public.html';
 
 Template.Public.events({
-
+	'click .barButton': function(event, template) {
+		template.$('.dropMenu').toggle();
+	}
 });