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

2025-09-13 12:21:19 -07:00
parent cf147b8ffa
commit c36bb1f351
3 changed files with 87 additions and 132 deletions
--- a/public/_index.sass
+++ b/public/_index.sass
@@ -36,14 +36,14 @@ body
 	max-width: 950px
 	min-width: 250px
 	margin: 0 auto
-#page
+.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
@@ -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,14 +125,14 @@ body

 /* Large(r) Devices (tablets and full computers) */
@media(min-width: 550px)
-	#head
+	.head
 		margin: 0 auto
 		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
@@ -147,11 +147,11 @@ body
 		margin: 0 auto
 		padding: 30px 20px
 		position: relative
-	#menuBackground
+	.menuBackground
 		height: 5rem
 		max-width: 950px
 		background: #DDE1D5
-	#menu
+	.menu
 		white-space: nowrap
 		position: absolute
 		height: 2.5rem
@@ -163,7 +163,7 @@ body
 		display: flex
 		justify-content: space-between
 		margin-left: 10%
-	#menu a
+	.menu a
 		margin: 0 auto
 		margin-top: .325rem
 		white-space: nowrap
@@ -177,57 +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: #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
 	#links
 		white-space: nowrap
 		position: absolute
@@ -348,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
@@ -369,7 +341,7 @@ sup, sub
 		-moz-column-fill: balance
 		column-fill: balance
 	.columnContent
-		height:15rem
+		height: 15rem
 		text-align: center
 		cursor: pointer
 		margin: 4px 15px 4px 15px
@@ -476,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
--- a/public/index.html
+++ b/public/index.html
@@ -25,37 +25,22 @@
 	<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. 
+		<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 href="#!/animals">Animals</a><!--
-				--<a href="#!/services">Services</a><!--
 					--><a class="blogLink" style="display: inline" 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;-->
-<!--&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 class="menuBackground"></div>
+				<div class="head">
 					<div id="logo" onclick="window.location.hash='#!/farm'"></div>
 				</div>
 				<div id="content" bs-view="main-view">
@@ -69,10 +54,8 @@
 					<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="">-->
-<!--			Web Site By: <a href="http://de22.com" style="font-weight: normal" target="_blank">Declarative Engineering LLC</a>-->
-<!--		</div>-->
+			<div class="footer">&copy; 2009,2023 Petit Teton LLC | Farm Email <a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a></div>
+		</div>
 	</div>
 </body>
 </html>
--- a/public/js/main.js
+++ b/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';
@@ -41,22 +41,22 @@ $(document).ready(function($) {
 		// 	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')"
-		}
+		// 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.
@@ -68,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();