A bunch of changes to kick off remaking the website.

.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
 
@@ -37,16 +37,16 @@ body
 	min-width: 250px
 	margin: 0 auto
 #page
-	/*background: url('images/GrassBackground_v1.jpg') repeat
+	/*background: url('images/GrassBackground_v1.jpg') repeat*/
-	background: #F6F6F6*/
+	//background: #F6F6F6
-	background: #FDFDFD
+	background: #DDE1D5
 
 /* Small Devices (phones) */
 @media(max-width: 549px)
 	#head
 		margin: 0 auto
-		/*background: url(images/Header_v2.jpg) no-repeat top center
+		//background: url(images/Header_v2.jpg) no-repeat top center
-		height: 171px*/
+		//height: 171px
 		height: 0
 	#logo
 		position: absolute
@@ -127,7 +127,7 @@ body
 @media(min-width: 550px)
 	#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
@@ -136,8 +136,8 @@ body
 		height: 342px
 	#logo
 		position: absolute
-		right: 10px
+		left: 10px
-		top: 10px
+		top: 90px
 		width: 120px
 		height: 120px
 		background: url(images/PetitTetonLogo_v2.png) no-repeat top center
@@ -148,20 +148,25 @@ body
 		padding: 30px 20px
 		position: relative
 	#menuBackground
-		height: 31px
+		height: 5rem
 		max-width: 950px
-		background: #FFF
+		background: #DDE1D5
 	#menu
 		white-space: nowrap
 		position: absolute
-		height: 30px
+		height: 2.5rem
-		margin-bottom: 1px
+		width: 80%
 		z-index: 200
 		font-family: "Open Sans", Arial, Helvetica, sans-serif
 		font-weight: 600
-		font-size: 1em
+		font-size: 1.25rem
+		display: flex
+		justify-content: space-between
+		margin-left: 10%
 	#menu a
-		margin: 0 0 0 16px
+		margin: 0 auto
+		margin-top: .325rem
+		white-space: nowrap
 		text-decoration: none
 		color: black
 		line-height: 30px
@@ -186,9 +191,43 @@ body
 		vertical-align: top
 	#menu a:hover
 		opacity: 1
-		color: black
+		color: #9E8200
+		background: transparent
+		border-bottom: 3px solid #9E8200
+	.menu2
+		white-space: nowrap
+		background-color: #9E8200
+		position: absolute
+		top: 2.75rem
+		height: 2rem
+		width: 80%
+		z-index: 200
+		font-family: "Open Sans", Arial, Helvetica, sans-serif
+		font-weight: 600
+		font-size: 1.25rem
+		display: flex
+		justify-content: space-between
+		margin-left: 10%
+	.menu2.hidden
+		display: none
+	.menu2 a
+		margin: 0 auto
+		margin-top: .325rem
+		white-space: nowrap
+		text-decoration: none
+		color: black
+		line-height: 30px
+		display: inline-block
+		height: 30px
+		border-bottom: 3px solid transparent
+		/* Force the browser to include padding and border as part of the size of the block. */
+		-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
+		-moz-box-sizing: border-box    /* Firefox, other Gecko */
+		box-sizing: border-box         /* Opera/IE 8+ */
+	.menu2 a:hover
+		opacity: 1
+		color: blue
 		background: transparent
-		border-bottom: 3px solid #a20010
 	#links
 		white-space: nowrap
 		position: absolute
@@ -268,13 +307,13 @@ h1:after
 	margin-bottom: 10px
 	content: ""
 	display: block
-/* bar in the middle
+// bar in the middle
-	content: ""
+//	content: ""
-	display: table-cell
+//	display: table-cell
-	width: 100%
+//	width: 100%
-	border-left: 100% solid black
+//	border-left: 100% solid black
-	background-image: linear-gradient(transparent 47%, #dddddd 48%, #dddddd 52%, transparent 52%)
+//	background-image: linear-gradient(transparent 47%, #dddddd 48%, #dddddd 52%, transparent 52%)
- */
+ 
 h2
 	display: inline
 	color: #333
@@ -330,6 +369,7 @@ sup, sub
 		-moz-column-fill: balance
 		column-fill: balance
 	.columnContent
+		height:15rem
 		text-align: center
 		cursor: pointer
 		margin: 4px 15px 4px 15px
@@ -539,4 +579,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
+#aphome
+    

public/canned.html

@@ -1,5 +1,5 @@
-<div id="farm-made-fare" class="page">
+<div id="canned" class="page">
-	<h1>FARM-MADE FARE</h1>
+	<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'">
+			<div class="columnContent" onclick="window.location.hash='#!/food'">
-				<h2>Our Land</h2>
+				<h2>Food</h2>
-				<img class="shadow" src="images/Farm_Land_v1.jpg" alt="" border="0" align="left"/>
+				<img class="shadow" src="images/FoodFMF_v2_CropTest.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>
+				<p style="text-align: center;"></p>
 			</div>
-			<div class="columnContent" onclick="window.location.hash='#!/us'">
+			<div class="columnContent" onclick="window.location.hash='#!/land'">
-				<h2>About Us</h2>
+				<h2>Our Story</h2>
-				<img class="shadow" src="images/Farm_AboutUs_v1.jpg" alt="" border="0" align="left"/>
+				<img class="shadow" src="images/Farm_Land_v1.jpg" alt="" border="0" align="left"/>
-				<p>Our jobs on the farm and our backgrounds...</p>
+				<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"/>
+				<img class="shadow" src="images/Farmers_Market_1_CropTest.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>
+				<p style="text-align: center;"></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>
 			</div>
 			<div class="columnContent" onclick="window.location.hash='#!/animals'">
-				<h2>Animals</h2>
+				<h2>Blog</h2>
-				<img class="shadow" src="images/FoodBeef_v1.jpg" alt="" border="0" align="left"/>
+				<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="columned">
-			<div class="columnContent" onclick="window.location.hash='#!/farm-made-fare'">
+			<div class="columnContent" onclick="window.location.hash='#!/canned'">
-				<h2>Farm-Made Fare</h2>
+				<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

@@ -33,15 +33,21 @@
 	<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="#!/farm">Home</a><!--
 				--><a href="#!/food">Food</a><!--
+				--><a href="#!/markets">Markets</a><!--
+				--><a href="#!/us">About Us</a><!--
 				--<a href="#!/animals">Animals</a><!--
 				--<a href="#!/services">Services</a><!--
-				--><a href="#!/visiting">Contact / Visit</a><!--
+				--><a class="blogLink" style="display: inline" target="_blank" href="//blog.petitteton.com">Blog</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="submenu-home" class="menu2 hidden"></div>
+			<div id="submenu-food" class="menu2 hidden"><!-- Note: Comment out spacing between the elements since the browser will interpret the spaces as characters to be displayed. 
+				--><a href="#!/canned">Canned</a><!--
+				--><a href="#!/produce">Produce</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;-->
@@ -50,12 +56,18 @@
 <!--			</div>-->
 			<div id="menuBackground"></div>
 			<div id="head">
-				<div id="logo" onclick="window.location.hash='#!/grow-and-can'"></div>
+				<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 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="">-->

public/js/main.js

@@ -23,16 +23,39 @@ $(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: {
+		// home: {
-			load: "element.data('scroller', new ItemScroller($('div.scrollViewport'), 142, scrollerScrollTime, scrollerInitialDelay, scrollerTransitionTime, false));", 
+		// 	load: "$('#head').addClass('tall');",
-			unload:"element.data('scroller').release(); element.data('scroller', undefined);"
+		// 	unload: "$('#head').removeClass('tall')"
+		// },
+		farm: {
+			load: "$('#submenu-home').removeClass('hidden')",
+			unload: "$('#submenu-home').addClass('hidden')"
 		},
-		home: {
+		food: {
-			load: "$('#head').addClass('tall')",
+			load: "$('#submenu-food').removeClass('hidden')",
-			unload: "$('#head').removeClass('tall')"
+			unload: "$('#submenu-food').addClass('hidden')"
-			//load: "$('#head, #links').css({display: 'none'})",
+		},
-			//unload: "$('#head, #links').css({display: 'block'})"
+		canned: {
+			load: "$('#submenu-food').removeClass('hidden')",
+			unload: "$('#submenu-food').addClass('hidden')"
+		},
+		produce: {
+			load: "$('#submenu-food').removeClass('hidden')",
+			unload: "$('#submenu-food').addClass('hidden')"
 		}
 	};
 	

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">