Removed submenu; Added border div around everything; Replaced ID's with Classes in index.html

.gitignore

@@ -10,3 +10,4 @@ config/db.js
 # Don't include the .idea folder which is used by the Webstorm IDE
 .idea/workspace.xml
 .idea/
+*.map

.theia/launch.json

@@ -0,0 +1,6 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  "version": "0.2.0",
+  "configurations": []
+}

public/_canned.sass

@@ -1,4 +1,4 @@
-#farm-made-fare
+#canned
 	.mainTextBlock
 
 	.secondaryTextBlock

public/_index.sass

@@ -12,7 +12,7 @@ html, body, #archives ul, #overall-footer, #content ul
 	margin: 0 0 0 0
 	padding: 0 0 0 0
 body
-	background: #F6F6F6
+	background: #84916E
 	font-family: verdana, arial, helvetica, sans-serif
 	font-size: 1.0em
 
@@ -36,17 +36,17 @@ body
 	max-width: 950px
 	min-width: 250px
 	margin: 0 auto
-#page
-	/*background: url('images/GrassBackground_v1.jpg') repeat
-	background: #F6F6F6*/
-	background: #FDFDFD
+.page
+	/*background: url('images/GrassBackground_v1.jpg') repeat*/
+	//background: #F6F6F6
+	background: #DDE1D5
 
 /* Small Devices (phones) */
 @media(max-width: 549px)
-	#head
+	.head
 		margin: 0 auto
-		/*background: url(images/Header_v2.jpg) no-repeat top center
-		height: 171px*/
+		//background: url(images/Header_v2.jpg) no-repeat top center
+		//height: 171px
 		height: 0
 	#logo
 		position: absolute
@@ -61,11 +61,11 @@ body
 		margin: 0 auto
 		padding: 6px 4px
 		position: relative
-	#menuBackground
+	.menuBackground
 		height: 20px
 		max-width: 950px
 		background: #FFF
-	#menu
+	.menu
 		white-space: nowrap
 		position: absolute
 		height: 20px
@@ -73,7 +73,7 @@ body
 		font-family: "Open Sans", Arial, Helvetica, sans-serif
 		font-weight: 600
 		font-size: .8em
-	#menu a
+	.menu a
 		margin: 0 0 0 5px
 		text-decoration: none
 		color: black
@@ -85,7 +85,7 @@ body
 		-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
 		-moz-box-sizing: border-box    /* Firefox, other Gecko */
 		box-sizing: border-box         /* Opera/IE 8+ */
-	#menu a:hover
+	.menu a:hover
 		opacity: .7
 		color: black
 		border-bottom: 1px solid red
@@ -125,19 +125,19 @@ body
 
 /* Large(r) Devices (tablets and full computers) */
 @media(min-width: 550px)
-	#head
+	.head
 		margin: 0 auto
-		background: url(images/HeaderTall_v1.jpg) no-repeat top center
+		background: url(images/HeaderTall_v1test.jpg) no-repeat top center
 		background-size: 100%
 		background-position: bottom left
 		max-width: 950px
 		height: 171px
-	#head.tall
+	.head.tall
 		height: 342px
 	#logo
 		position: absolute
-		right: 10px
-		top: 10px
+		left: 10px
+		top: 90px
 		width: 120px
 		height: 120px
 		background: url(images/PetitTetonLogo_v2.png) no-repeat top center
@@ -147,21 +147,26 @@ body
 		margin: 0 auto
 		padding: 30px 20px
 		position: relative
-	#menuBackground
-		height: 31px
+	.menuBackground
+		height: 5rem
 		max-width: 950px
-		background: #FFF
-	#menu
+		background: #DDE1D5
+	.menu
 		white-space: nowrap
 		position: absolute
-		height: 30px
-		margin-bottom: 1px
+		height: 2.5rem
+		width: 80%
 		z-index: 200
 		font-family: "Open Sans", Arial, Helvetica, sans-serif
 		font-weight: 600
-		font-size: 1em
-	#menu a
-		margin: 0 0 0 16px
+		font-size: 1.25rem
+		display: flex
+		justify-content: space-between
+		margin-left: 10%
+	.menu a
+		margin: 0 auto
+		margin-top: .325rem
+		white-space: nowrap
 		text-decoration: none
 		color: black
 		line-height: 30px
@@ -172,23 +177,23 @@ body
 		-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
 		-moz-box-sizing: border-box    /* Firefox, other Gecko */
 		box-sizing: border-box         /* Opera/IE 8+ */
-	#menu a.holidayMenuItem
+	.menu a.holidayMenuItem
 		font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif
 		font-weight: 400
 		font-size: 1.3em
 		letter-spacing: 1px
 		vertical-align: top
-	#menu a.shippingMenuItem
+	.menu a.shippingMenuItem
 		font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif
 		font-weight: 400
 		font-size: 1.3em
 		letter-spacing: 1px
 		vertical-align: top
-	#menu a:hover
+	.menu a:hover
 		opacity: 1
-		color: black
+		color: #9E8200
 		background: transparent
-		border-bottom: 3px solid #a20010
+		border-bottom: 3px solid #9E8200
 	#links
 		white-space: nowrap
 		position: absolute
@@ -268,13 +273,13 @@ h1:after
 	margin-bottom: 10px
 	content: ""
 	display: block
-/* bar in the middle
-	content: ""
-	display: table-cell
-	width: 100%
-	border-left: 100% solid black
-	background-image: linear-gradient(transparent 47%, #dddddd 48%, #dddddd 52%, transparent 52%)
- */
+// bar in the middle
+//	content: ""
+//	display: table-cell
+//	width: 100%
+//	border-left: 100% solid black
+//	background-image: linear-gradient(transparent 47%, #dddddd 48%, #dddddd 52%, transparent 52%)
+
 h2
 	display: inline
 	color: #333
@@ -309,6 +314,12 @@ li
 sup, sub
 	line-height: 0.1em
 
+.pageBorder
+	background-color: blue
+	padding: 40px 10px 10px 10px
+	margin-bottom: 20px
+	margin-top: 10px
+
 .submenu
 	h2:after
 		border-bottom: 1px solid gray
@@ -330,6 +341,7 @@ sup, sub
 		-moz-column-fill: balance
 		column-fill: balance
 	.columnContent
+		height: 15rem
 		text-align: center
 		cursor: pointer
 		margin: 4px 15px 4px 15px
@@ -436,17 +448,17 @@ sup, sub
 	//background: url(images/Chicken-Egg.gif) no-repeat center top
 
 /* Footer Lines */
-#footer
+.footer
 	margin-top: 6px
 	color: #666
 	font-family: verdana, arial, helvetica, sans-serif
 	font-size: 0.7em
 	text-align: left
-#footer a
+.footer a
 	color: #666
 	font-family: verdana, arial, helvetica, sans-serif
 	text-decoration: none
-#footer a:hover
+.footer a:hover
 	color: #00a55d
 
 #designedBy
@@ -539,4 +551,4 @@ sup, sub
 	float: left
 	margin: 4px 10px 10px 0
 .blogLink
-	color: #e40329 !important
+	//color: #e40329 !important

public/_produce.sass

@@ -1,4 +1,4 @@
-#veggies
+#produce
 	.produceTable
 		min-width: 200px
 		float: left

public/ap/_aphome.sass

@@ -1 +1,2 @@
 #aphome
+    

public/canned.html

@@ -1,5 +1,5 @@
-<div id="farm-made-fare" class="page">
-	<h1>FARM-MADE FARE</h1>
+<div id="canned" class="page">
+	<h1>Canned Goods</h1>
 	<!--<div class="secondaryTextBlock">-->
 		<!--<img class="shipImage" src="images/WeShip_v1.jpg"/>-->
 		<!--<p>We now ship our farm made fare.  For those who cannot visit the farm or come to a farmers' market, there is now the option to call <b>707.684.4146</b> or email <a href="mailto:farmer@petitteton.com"><b>farmer@petitteton.com</b></a> with an order.  Download the latest product list below, choose what interests you, then let us know.  If emailing, include your mailing address and payment preference.  We will check availability and give you a total, then you can send a check, call with your credit card number or have us send a PayPal bill to your email address.  We will ship as soon as we have payment. -->

public/eggs.html

@@ -1,5 +1,5 @@
 <div id="eggs" class="page">
-	<h1>Chickens &amp; EGGS</h1>
+	<h1>Eggs &amp; Meat</h1>
 	<p><img class="shadow floatLeft" style="width:160px;height:120px;" src="images/Eggs1_v1.jpg" alt="" border="0" align="left"/>
 	The eggs in our cartons look as though they've come from an Easter basket - many shades of brown and green, and different sizes!
 	It's the result of our wide variety of hens, including Rhode Island Red & White, Plymouth Rock, Sexlink, Buff Orpington, Araucana, Barred Rock, Cochin, Maran, and Australorp.

public/farm.html

@@ -1,38 +1,40 @@
 
 <div id="farm" class="page submenu">
 	<div class="columnContainer">
-		<h1>Farm</h1>
+		<!--<h1>Petit Teton Farm</h1>
+		<-->
 		<div class="columned">
 			<!--<div class="columnContent" onclick="window.location.hash='#!/farm-made-fare'">-->
 				<!--<h2>Now Shipping</h2>-->
 				<!--<img class="shadow" src="images/WeShip_v1.jpg" alt="" border="0" align="left"/>-->
 				<!--<p>We now ship our farm-made fare.</p>-->
 			<!--</div>-->
-			<div class="columnContent" onclick="window.location.hash='#!/land'">
-				<h2>Our Land</h2>
-				<img class="shadow" src="images/Farm_Land_v1.jpg" alt="" border="0" align="left"/>
-				<p>The land we own had been a ranch for generations, part of a much larger spread, and was still a small sheep ranch when we bought it in 2004.  In 2011 we bought the neighboring property...</p>
+			<div class="columnContent" onclick="window.location.hash='#!/food'">
+				<h2>Food</h2>
+				<img class="shadow" src="images/FoodFMF_v2_CropTest.jpg" alt="" border="0" align="left"/>
+				<p style="text-align: center;"></p>
 			</div>
-			<div class="columnContent" onclick="window.location.hash='#!/us'">
-				<h2>About Us</h2>
-				<img class="shadow" src="images/Farm_AboutUs_v1.jpg" alt="" border="0" align="left"/>
-				<p>Our jobs on the farm and our backgrounds...</p>
+			<div class="columnContent" onclick="window.location.hash='#!/land'">
+				<h2>Our Story</h2>
+				<img class="shadow" src="images/Farm_Land_v1.jpg" alt="" border="0" align="left"/>
+				<p style="text-align: center;"></p>
 			</div>
 			<div class="columnContent" onclick="window.location.hash='#!/markets'">
 				<h2>Markets</h2>
-				<img class="shadow" src="images/Farm_Markets_v1.jpg" alt="" border="0" align="left"/>
-				<p>For many years now we've sold our produce at farmers' markets. Currently you'll find us...</p>
-			</div>
-			<div class="columnContent" onclick="window.location.hash='#!/aquaponics'">
-				<h2>Aquaponics</h2>
-				<img class="shadow" src="images/Farm_Aquaponics_v1.jpg" alt="" border="0" align="left"/>
-				<p>Aquaponics is a system of growing crops and fish in tandem. The water is recycled continuously and the fish...</p>
+				<img class="shadow" src="images/Farmers_Market_1_CropTest.jpg" alt="" border="0" align="left"/>
+				<p style="text-align: center;"></p>
 			</div>
 			<div class="columnContent" onclick="window.location.hash='#!/animals'">
-				<h2>Animals</h2>
-				<img class="shadow" src="images/FoodBeef_v1.jpg" alt="" border="0" align="left"/>
+				<h2>Blog</h2>
+				<img class="shadow" src="images/Farm_AboutUs_v1.jpg" alt="" border="0" align="left"/>
 				<p>...</p>
 			</div>
+			<div class="columnContent" onclick="window.location.hash='#!/us'">
+				<h2>About Us</h2>
+				<img class="shadow" src="images/Visit4_v1_CropTest.jpg" alt="" border="0" align="left"/>
+				<p style="text-align: center;"></pstyle></p>
+			</div>
+			
 			<!--<div class="columnContent" onclick="window.location.hash='#!/visiting'">-->
 				<!--<h2>Contact &amp; Visit</h2>-->
 				<!--<img class="shadow" src="images/Driveway2_v2.jpg" alt="" border="0" align="left"/>-->

public/food.html

@@ -1,14 +1,14 @@
 <div id="food" class="page submenu">
 	<div class="columnContainer">
 		<h1>Food</h1>
-		<div class="columned">
-			<div class="columnContent" onclick="window.location.hash='#!/farm-made-fare'">
-				<h2>Farm-Made Fare</h2>
+			<div class="columned">
+			<div class="columnContent" onclick="window.location.hash='#!/canned'">
+				<h2>Canned Goods</h2>
 				<img class="shadow" src="images/FoodFMF_v1.jpg" alt="" border="0" align="left"/>
 				<p>Check out what we are cooking in the kitchen!</p>
 			</div>
 			<div class="columnContent" onclick="window.location.hash='#!/eggs'">
-				<h2>Meat &amp; Eggs</h2>
+				<h2>Eggs &amp; Meat</h2>
 				<img class="shadow" src="images/FoodEggs_v1.jpg" alt="" border="0" align="left"/>
 				<p>Eggs from our truly free range chickens are provided in a colorful array and sold by the dozen.</p>
 			</div>
@@ -32,7 +32,7 @@
 				<!--<img class="shadow" src="images/FoodChicken_v1.jpg" alt="" border="0" align="left"/>-->
 				<!--<p>We have over 100 laying hens spread across several areas of the farm, and we sell the spent laying hens as organic fed chicken.</p>-->
 			<!--</div>-->
-			<div class="columnContent" onclick="window.location.hash='#!/veggies'">
+			<div class="columnContent" onclick="window.location.hash='#!/produce'">
 				<h2>Produce</h2>
 				<img class="shadow" src="images/FoodVeggies_v1.jpg" alt="" border="0" align="left"/>
 				<p>We grow and sell a very wide variety of freshly picked produce.</p>

public/index.html

@@ -25,42 +25,37 @@
 	<script type="text/javascript" language="JavaScript" src="js/jquery.cycle2.min.js"></script>
 	<script type="text/javascript" language="JavaScript" src="js/jquery.shadow.js"></script>
 	<script type="text/javascript" language="JavaScript" src="js/scroller.js"></script>
-	<!--<script type="text/javascript" language="JavaScript" src="js/framework.js"></script>-->
 	<script type="text/javascript" language="JavaScript" src="js/main.js"></script>
 </head>
 
 <body>
 	<div id="overall">
-		<div id="page">
-			<div id="menu"><!-- Note: Comment out spacing between the elements since the browser will interpret the spaces as characters to be displayed. 
-				--><a href="#!/farm">Farm</a><!--
-				--><a href="#!/food">Food</a><!--
-				--<a href="#!/animals">Animals</a><!--
-				--<a href="#!/services">Services</a><!--
-				--><a href="#!/visiting">Contact / Visit</a><!--
-				--><a class="blogLink" style="display: none" target="_blank" href="//blog.petitteton.com">Blog</a><!--
-				--><!--<a href="#!/holidays" class="holidayMenuItem">Holidays</a>--><!--
-				--><!--<a href="#!/shipping" class="shippingMenuItem">Shipping</a>--><!--
-			--></div>
-<!--			<div id="links">-->
-<!--				&lt;!&ndash; Note: Comment out spacing between the elements since the browser will interpret the spaces as characters to be displayed. &ndash;&gt;-->
-<!--&lt;!&ndash;				<a id="linkFacebook" href="http://www.facebook.com/pages/Petit-Teton-Farm/229690830390080?sk=wall#" target='_blank' rel="nofollow"></a>&lt;!&ndash;&ndash;&gt;-->
-<!--&lt;!&ndash;				&ndash;&gt;<a id="linkGoogle" href="https://plus.google.com/104893482629844050636/about" target='_blank' rel="nofollow"></a>&lt;!&ndash;&ndash;&gt;-->
-<!--&lt;!&ndash;				&ndash;&gt;<a id="linkTwitter" style="display: none" href="https://twitter.com/PetitTeton" target='_blank' rel="nofollow"></a>&ndash;&gt;-->
-<!--			</div>-->
-			<div id="menuBackground"></div>
-			<div id="head">
-				<div id="logo" onclick="window.location.hash='#!/grow-and-can'"></div>
-			</div>
-			<div id="content" bs-view="main-view">
-				<!--CONTENT:main-->
+		<div class="pageBorder">
+			<div class="page">
+				<div class="menu"><!-- Note: Comment out spacing between the elements since the browser will interpret the spaces as characters to be displayed.
+					--><a href="#!/farm">Home</a><!--
+					--><a href="#!/food">Food</a><!--
+					--><a href="#!/markets">Markets</a><!--
+					--><a href="#!/us">About Us</a><!--
+					--><a class="blogLink" style="display: inline" target="_blank" href="//blog.petitteton.com">Blog</a><!--
+				--></div>
+				<div class="menuBackground"></div>
+				<div class="head">
+					<div id="logo" onclick="window.location.hash='#!/farm'"></div>
+				</div>
+				<div id="content" bs-view="main-view">
+					<!--CONTENT:main-->
+				</div>
 			</div>
+			<div>
+				<p style="text-align: center;"><strong>Petit Teton Farm</strong>
+					<br>18501 Hwy 128, Yorkville, CA 95494
+					<br>707-123-4567
+					<br><a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a>
+				</p></div>
+			<!-- footer lines -->
+			<div class="footer">&copy; 2009,2023 Petit Teton LLC | Farm Email <a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a></div>
 		</div>
-		<!-- footer lines -->
-		<div id="footer">&copy; 2009,2023 Petit Teton LLC | Farm Email <a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a></div>
-<!--		<div id="designedBy" style="">-->
-<!--			Web Site By: <a href="http://de22.com" style="font-weight: normal" target="_blank">Declarative Engineering LLC</a>-->
-<!--		</div>-->
 	</div>
 </body>
 </html>

public/js/main.js

@@ -1,21 +1,21 @@
-var slideShowIndex = 0;
-var slideShowSlides = [];  //An array of arrays - each sub-array contains the image path, title, description, width, and height.//
-var scrollerScrollTime = 3500;
-var scrollerInitialDelay = 5000;
-var scrollerTransitionTime = 1000;
+let slideShowIndex = 0;
+let slideShowSlides = [];  //An array of arrays - each sub-array contains the image path, title, description, width, and height.//
+let scrollerScrollTime = 3500;
+let scrollerInitialDelay = 5000;
+let scrollerTransitionTime = 1000;
 
 window.status="";
 
 //Handle the document ready event which is where any initialization code goes.
 $(document).ready(function($) {
-	var contentDiv = $('#content');
-	//var viewName = "main-view";
-	//var view = $('[bs-view="' + viewName + '"]');
+	let contentDiv = $('#content');
+	//let viewName = "main-view";
+	//let view = $('[bs-view="' + viewName + '"]');
 	//if(!view || view.length != 1) {
 	//	throw "View with name: '" + viewName + "' not found";
 	//}
-	//var layoutManager = new LayoutManager("main-view");
-	var layoutManager = new LayoutManager(contentDiv);
+	//let layoutManager = new LayoutManager("main-view");
+	let layoutManager = new LayoutManager(contentDiv);
 
 	//layoutManager.defaultUrl = '!/holidays';
 	layoutManager.defaultUrl = '!/home';
@@ -23,17 +23,40 @@ $(document).ready(function($) {
 		{cls: 'full', fadeIn: null, fadeOut: null}
 	];
 	layoutManager.viewMetadataDefaults = {classes: 'full'};
+	// layoutManager.viewMetadata = {
+	// 	weddings: {
+	// 		load: "element.data('scroller', new ItemScroller($('div.scrollViewport'), 142, scrollerScrollTime, scrollerInitialDelay, scrollerTransitionTime, false));",
+	// 		unload:"element.data('scroller').release(); element.data('scroller', undefined);"
+	// 	},
+	// 	home: {
+	// 		load: "$('#head').addClass('tall')",
+	// 		unload: "$('#head').removeClass('tall')"
+	// 		//load: "$('#head, #links').css({display: 'none'})",
+	// 		//unload: "$('#head, #links').css({display: 'block'})"
+	// 	}
+	// };
+
 	layoutManager.viewMetadata = {
-		weddings: {
-			load: "element.data('scroller', new ItemScroller($('div.scrollViewport'), 142, scrollerScrollTime, scrollerInitialDelay, scrollerTransitionTime, false));", 
-			unload:"element.data('scroller').release(); element.data('scroller', undefined);"
-		},
-		home: {
-			load: "$('#head').addClass('tall')",
-			unload: "$('#head').removeClass('tall')"
-			//load: "$('#head, #links').css({display: 'none'})",
-			//unload: "$('#head, #links').css({display: 'block'})"
-		}
+		// home: {
+		// 	load: "$('#head').addClass('tall');",
+		// 	unload: "$('#head').removeClass('tall')"
+		// },
+		// farm: {
+		// 	load: "$('#submenu-home').removeClass('hidden')",
+		// 	unload: "$('#submenu-home').addClass('hidden')"
+		// },
+		// food: {
+		// 	load: "$('#submenu-food').removeClass('hidden')",
+		// 	unload: "$('#submenu-food').addClass('hidden')"
+		// },
+		// canned: {
+		// 	load: "$('#submenu-food').removeClass('hidden')",
+		// 	unload: "$('#submenu-food').addClass('hidden')"
+		// },
+		// produce: {
+		// 	load: "$('#submenu-food').removeClass('hidden')",
+		// 	unload: "$('#submenu-food').addClass('hidden')"
+		// }
 	};
 
 	//Associate a function with the history jquery addon that will load the url content after the history is updated.
@@ -45,7 +68,7 @@ $(document).ready(function($) {
 		layoutManager.show(url);
 	});
 	/*
-	var websocket = new WebSocket('ws://petitteton.com/');
+	let websocket = new WebSocket('ws://petitteton.com/');
 
 	websocket.onopen = function() {
 		websocket.ping();

public/main.sass

@@ -0,0 +1,27 @@
+@use 'index'
+
+@use "clearfix"
+@use "home"
+@use "farm"
+@use "food"
+@use "animals"
+@use "services"
+@use "holidays"
+@use "produce"
+@use "grow-and-can"
+@use "eggs"
+@use "beef"
+@use "pigs"
+@use "chicken"
+@use "markets"
+@use "slideshow"
+@use "visiting"
+@use "weddings"
+@use "community"
+@use "yaks"
+@use "us"
+@use "canned"
+@use "aquaponics"
+@use "shipping"
+@use "ap/aphome"
+@use "ap/airlift"

public/main.scss

@@ -1,28 +0,0 @@
-@use 'basic';
-
-@use "clearfix";
-@use "home";
-@use "farm";
-@use "food";
-@use "animals";
-@use "services";
-@use "holidays";
-@use "farm-made-fare";
-@use "grow-and-can";
-@use "eggs";
-@use "beef";
-@use "pigs";
-@use "chicken";
-@use "markets";
-@use "slideshow";
-@use "visiting";
-@use "weddings";
-@use "yaks";
-@use "community";
-@use "yaks";
-@use "us";
-@use "veggies";
-@use "aquaponics";
-@use "shipping";
-@use "ap/aphome";
-@use "ap/airlift";

public/produce.html

@@ -1,4 +1,4 @@
-<div id="veggies" class="page">
+<div id="produce" class="page">
 	<h1>PRODUCE</h1>
 	<p>We grow a cornucopia of fruits and vegetables at <b>Petit Teton</b>. Below is a listing of the things we have grown over the years. We do not use chemicals, and we use organic seed where possible (never GMO). To bring the best quality product to you, we practice biodiversity, make our own compost from crop and animal waste, and rotate crops. We grow our crops a lot like family farms 100 years ago did, before corporations took over the business of farming.</p>
 	<span class="produceTable">