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

This commit is contained in:
2025-09-13 12:21:19 -07:00
parent cf147b8ffa
commit c36bb1f351
3 changed files with 87 additions and 132 deletions

View File

@@ -36,14 +36,14 @@ body
max-width: 950px max-width: 950px
min-width: 250px min-width: 250px
margin: 0 auto margin: 0 auto
#page .page
/*background: url('images/GrassBackground_v1.jpg') repeat*/ /*background: url('images/GrassBackground_v1.jpg') repeat*/
//background: #F6F6F6 //background: #F6F6F6
background: #DDE1D5 background: #DDE1D5
/* Small Devices (phones) */ /* Small Devices (phones) */
@media(max-width: 549px) @media(max-width: 549px)
#head .head
margin: 0 auto 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
@@ -61,11 +61,11 @@ body
margin: 0 auto margin: 0 auto
padding: 6px 4px padding: 6px 4px
position: relative position: relative
#menuBackground .menuBackground
height: 20px height: 20px
max-width: 950px max-width: 950px
background: #FFF background: #FFF
#menu .menu
white-space: nowrap white-space: nowrap
position: absolute position: absolute
height: 20px height: 20px
@@ -73,7 +73,7 @@ body
font-family: "Open Sans", Arial, Helvetica, sans-serif font-family: "Open Sans", Arial, Helvetica, sans-serif
font-weight: 600 font-weight: 600
font-size: .8em font-size: .8em
#menu a .menu a
margin: 0 0 0 5px margin: 0 0 0 5px
text-decoration: none text-decoration: none
color: black color: black
@@ -85,7 +85,7 @@ body
-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */ -webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box /* Firefox, other Gecko */ -moz-box-sizing: border-box /* Firefox, other Gecko */
box-sizing: border-box /* Opera/IE 8+ */ box-sizing: border-box /* Opera/IE 8+ */
#menu a:hover .menu a:hover
opacity: .7 opacity: .7
color: black color: black
border-bottom: 1px solid red border-bottom: 1px solid red
@@ -125,14 +125,14 @@ body
/* Large(r) Devices (tablets and full computers) */ /* Large(r) Devices (tablets and full computers) */
@media(min-width: 550px) @media(min-width: 550px)
#head .head
margin: 0 auto margin: 0 auto
background: url(images/HeaderTall_v1test.jpg) no-repeat top center background: url(images/HeaderTall_v1test.jpg) no-repeat top center
background-size: 100% background-size: 100%
background-position: bottom left background-position: bottom left
max-width: 950px max-width: 950px
height: 171px height: 171px
#head.tall .head.tall
height: 342px height: 342px
#logo #logo
position: absolute position: absolute
@@ -147,11 +147,11 @@ body
margin: 0 auto margin: 0 auto
padding: 30px 20px padding: 30px 20px
position: relative position: relative
#menuBackground .menuBackground
height: 5rem height: 5rem
max-width: 950px max-width: 950px
background: #DDE1D5 background: #DDE1D5
#menu .menu
white-space: nowrap white-space: nowrap
position: absolute position: absolute
height: 2.5rem height: 2.5rem
@@ -163,7 +163,7 @@ body
display: flex display: flex
justify-content: space-between justify-content: space-between
margin-left: 10% margin-left: 10%
#menu a .menu a
margin: 0 auto margin: 0 auto
margin-top: .325rem margin-top: .325rem
white-space: nowrap white-space: nowrap
@@ -177,57 +177,23 @@ body
-webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */ -webkit-box-sizing: border-box /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box /* Firefox, other Gecko */ -moz-box-sizing: border-box /* Firefox, other Gecko */
box-sizing: border-box /* Opera/IE 8+ */ box-sizing: border-box /* Opera/IE 8+ */
#menu a.holidayMenuItem .menu a.holidayMenuItem
font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif
font-weight: 400 font-weight: 400
font-size: 1.3em font-size: 1.3em
letter-spacing: 1px letter-spacing: 1px
vertical-align: top vertical-align: top
#menu a.shippingMenuItem .menu a.shippingMenuItem
font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif
font-weight: 400 font-weight: 400
font-size: 1.3em font-size: 1.3em
letter-spacing: 1px letter-spacing: 1px
vertical-align: top vertical-align: top
#menu a:hover .menu a:hover
opacity: 1 opacity: 1
color: #9E8200 color: #9E8200
background: transparent background: transparent
border-bottom: 3px solid #9E8200 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 #links
white-space: nowrap white-space: nowrap
position: absolute position: absolute
@@ -348,6 +314,12 @@ li
sup, sub sup, sub
line-height: 0.1em line-height: 0.1em
.pageBorder
background-color: blue
padding: 40px 10px 10px 10px
margin-bottom: 20px
margin-top: 10px
.submenu .submenu
h2:after h2:after
border-bottom: 1px solid gray border-bottom: 1px solid gray
@@ -476,17 +448,17 @@ sup, sub
//background: url(images/Chicken-Egg.gif) no-repeat center top //background: url(images/Chicken-Egg.gif) no-repeat center top
/* Footer Lines */ /* Footer Lines */
#footer .footer
margin-top: 6px margin-top: 6px
color: #666 color: #666
font-family: verdana, arial, helvetica, sans-serif font-family: verdana, arial, helvetica, sans-serif
font-size: 0.7em font-size: 0.7em
text-align: left text-align: left
#footer a .footer a
color: #666 color: #666
font-family: verdana, arial, helvetica, sans-serif font-family: verdana, arial, helvetica, sans-serif
text-decoration: none text-decoration: none
#footer a:hover .footer a:hover
color: #00a55d color: #00a55d
#designedBy #designedBy

View File

@@ -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.cycle2.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.shadow.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/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> <script type="text/javascript" language="JavaScript" src="js/main.js"></script>
</head> </head>
<body> <body>
<div id="overall"> <div id="overall">
<div id="page"> <div class="pageBorder">
<div id="menu"><!-- Note: Comment out spacing between the elements since the browser will interpret the spaces as characters to be displayed. <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="#!/farm">Home</a><!--
--><a href="#!/food">Food</a><!-- --><a href="#!/food">Food</a><!--
--><a href="#!/markets">Markets</a><!-- --><a href="#!/markets">Markets</a><!--
--><a href="#!/us">About Us</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 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>
<div id="submenu-home" class="menu2 hidden"></div> <div class="menuBackground"></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. <div class="head">
--><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 id="logo" onclick="window.location.hash='#!/farm'"></div> <div id="logo" onclick="window.location.hash='#!/farm'"></div>
</div> </div>
<div id="content" bs-view="main-view"> <div id="content" bs-view="main-view">
@@ -69,10 +54,8 @@
<br><a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a> <br><a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a>
</p></div> </p></div>
<!-- footer lines --> <!-- 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 class="footer">&copy; 2009,2023 Petit Teton LLC | Farm Email <a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a></div>
<!-- <div id="designedBy" style="">--> </div>
<!-- Web Site By: <a href="http://de22.com" style="font-weight: normal" target="_blank">Declarative Engineering LLC</a>-->
<!-- </div>-->
</div> </div>
</body> </body>
</html> </html>

View File

@@ -1,21 +1,21 @@
var slideShowIndex = 0; let slideShowIndex = 0;
var slideShowSlides = []; //An array of arrays - each sub-array contains the image path, title, description, width, and height.// let slideShowSlides = []; //An array of arrays - each sub-array contains the image path, title, description, width, and height.//
var scrollerScrollTime = 3500; let scrollerScrollTime = 3500;
var scrollerInitialDelay = 5000; let scrollerInitialDelay = 5000;
var scrollerTransitionTime = 1000; let scrollerTransitionTime = 1000;
window.status=""; window.status="";
//Handle the document ready event which is where any initialization code goes. //Handle the document ready event which is where any initialization code goes.
$(document).ready(function($) { $(document).ready(function($) {
var contentDiv = $('#content'); let contentDiv = $('#content');
//var viewName = "main-view"; //let viewName = "main-view";
//var view = $('[bs-view="' + viewName + '"]'); //let view = $('[bs-view="' + viewName + '"]');
//if(!view || view.length != 1) { //if(!view || view.length != 1) {
// throw "View with name: '" + viewName + "' not found"; // throw "View with name: '" + viewName + "' not found";
//} //}
//var layoutManager = new LayoutManager("main-view"); //let layoutManager = new LayoutManager("main-view");
var layoutManager = new LayoutManager(contentDiv); let layoutManager = new LayoutManager(contentDiv);
//layoutManager.defaultUrl = '!/holidays'; //layoutManager.defaultUrl = '!/holidays';
layoutManager.defaultUrl = '!/home'; layoutManager.defaultUrl = '!/home';
@@ -41,22 +41,22 @@ $(document).ready(function($) {
// load: "$('#head').addClass('tall');", // load: "$('#head').addClass('tall');",
// unload: "$('#head').removeClass('tall')" // unload: "$('#head').removeClass('tall')"
// }, // },
farm: { // farm: {
load: "$('#submenu-home').removeClass('hidden')", // load: "$('#submenu-home').removeClass('hidden')",
unload: "$('#submenu-home').addClass('hidden')" // unload: "$('#submenu-home').addClass('hidden')"
}, // },
food: { // food: {
load: "$('#submenu-food').removeClass('hidden')", // load: "$('#submenu-food').removeClass('hidden')",
unload: "$('#submenu-food').addClass('hidden')" // unload: "$('#submenu-food').addClass('hidden')"
}, // },
canned: { // canned: {
load: "$('#submenu-food').removeClass('hidden')", // load: "$('#submenu-food').removeClass('hidden')",
unload: "$('#submenu-food').addClass('hidden')" // unload: "$('#submenu-food').addClass('hidden')"
}, // },
produce: { // produce: {
load: "$('#submenu-food').removeClass('hidden')", // load: "$('#submenu-food').removeClass('hidden')",
unload: "$('#submenu-food').addClass('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. //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); layoutManager.show(url);
}); });
/* /*
var websocket = new WebSocket('ws://petitteton.com/'); let websocket = new WebSocket('ws://petitteton.com/');
websocket.onopen = function() { websocket.onopen = function() {
websocket.ping(); websocket.ping();