/* ============================================================ * * 23 JUL 2018 @ 1442H * * Combining all CSS style sheet styles into this style sheet. * Wish me well. * * ============================================================ */ /* ================================================================================================== * * 23 JULY 2018 * * Following styles are from the home.css style sheet * * There WILL be a lot of DUPLICATE code that will have to be removed. * * ================================================================================================== */ /* === UNIVERSAL box-border settings === */ html { box-sizing: border-box; } *, *:after, *:before { box-sizing: inherit; } /* ===================================================================== 1 1 BODY STYLES 1 * ===================================================================== */ /* body.home-page-container { original code */ #home-page-container { background-image: url(../images/wwbydesign_final@50.jpg); background-repeat: no-repeat; background-size: 100% auto; background-color: black; margin: 0; padding: 0; } /* * When primary navigation is visible, * the content in the background won't scroll * --------------------------------------------------------------------- */ body.overflow-hidden { overflow: hidden; } /* ===================================================================== 2 2 HEADER STYLES 2 * ===================================================================== */ .welcomeHeader h1 { font-family: 'Playfair Display', serif; font-size: 2.5em; /* orig was 2.5em */ color: #F0F0F0; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2%; margin-left: 17%; margin-right: 17%; padding-bottom: 0.5%; border-bottom: 1px solid red; } .welcomeHeader h2 { font-family: 'Playfair Display', serif; font-size: 1.1em; font-style: normal; margin-top: 0.9%; margin-left: 17%; /* orig was 23.5% */ color: #FF0033; text-transform: uppercase; letter-spacing: 0.3em; } /* ===================================================================== 3 3 CONTENT STYLES 3 * ===================================================================== */ .welcome-content { font-size: 1.0em; font-family: 'Playfair Display', serif; font-style: normal; font-weight: 100; letter-spacing: 1px; color: #F0F0F0; /* Grayish color */ line-height: 1.3em; width: 80%; /* This style made the content too narrow */ max-width: 90%; /* New 8 MAR 2019 Work? Much better and now responsive left-right. */ /* max-width: 1000px; 8MAR19 why are we using this fixed width??? */ margin: 2% auto; /* NEW! 10JUN2018 Makes lines much more readable. */ max-width: 78ch; /*padding: 2%;*/ text-align: justify; } /* * The following rules are used to style internal links * * ------------------------------------------------------------------ */ a.internal-link { color: white; /* original was white */ text-decoration: underline; padding-left: 10px; padding-right: 10px; font-style: italic; border-radius: 3px; } a.internal-link:hover { color: red; } /* original was red */ /* Adding the following to style different internal links 30 MAR 2021 the folowing stying replaced the in-line style I had done to the link in the veneering.php webpage. the problem was that the in-line cascade ignored the hover styling of the original internal-link styling so I marked up the following styles. */ a.internal-link-xtra { color: blue; text-decoration: none; padding-left: 10px; padding-right: 10px; font-style: italic; border-radius: 3px; } a.internal-link-xtra:hover { color: red; text-decoration: underline; } /* original was red */ /* * The following two rules are used to style links to external sources * --------------------------------------------------------------------- */ a.external-link { color: red; text-decoration: none; /* 14 SEP 2017. I removed the following style because it forces caps and that may not be what I want. We can capitalize any words that we need with caps. 7text-transform: capitalize; */ } a.external-link:hover { color: black; background-color:rgba(0,255,0,0.3); } /* * 5 AUG 2018 * Just added this style from the NO-NAV-majorStyle.css style sheet. * When user taps the blue arrow she is sent to top of page. * This was missing in this style sheet. * * -------------------------------------------------------------------- */ a.up-arrow { padding-left: 90%; /* this works to position hoarizongtally */ padding-top: 0%; margin-top: -5%; /* this worked to move icon up */ /*border: 1px solid black;*/ display: inline-block; } /* ===== END OF CONTENT STYLES =================================================== /* ===================================================================== * * CONTENT = TITLE = STYLES * * ===================================================================== */ .welcome-title { font-family: 'Playfair Display', serif; text-align: center; margin-bottom: 1%; color: #FFFFFF; font-size: 1.0em; letter-spacing: 0.2em; text-transform: uppercase; } /* this spaces the p {element} nicely */ .welcome-content p { margin: 1.0em 0; } .make-a-point { font-family: 'Playfair Display', sans-serif; font-style: italic; font-size: 1.2rem; text-align: center; padding: 2% 0% 2% 0%; color: black; } .just-a-list { width: 80%; margin-left: 5%; list-style-type: decimal; } /* ========================================================================== * * NEW! 14 OCT 2018 * * I have need for styling that styles a list of items without any fanfare. * I hope this will serve that purpose * * ========================================================================== */ .plain-list { text-decoration: none; list-style-type: disc; color: green; margin-left: 5.1111111%; /* New 28 MAR 2021. changed from 13.11111% */ /* padding-left: 5%; */ /* New 5 AUG 2020 want to change veneering.php webpage */ width: 80%; } /* ========================================================================== * * NEW! 5 AUG 2020 * * Wanted to have a numeric list so this is it. * * ========================================================================== */ .numeric-list { text-decoration: none; list-style-type: decimal; color: green; padding-left: 5%; /* new for testing purposes only */ margin-left: 15%; /* changed from 13.1111111% to 15% */ width: 80%; /* changed from 80% */ /* border: 1px solid rgb(169,169,169); */ } /* =================================================================== * NEW! 12 MAY 2019 * * This style came from minorStyle.css, but is very ugly. A lot of the * styling was commented out. Will tune it up for our purposes. * Will be used first in the necklace-jewelry-box.php webpage. * * The following class .note is used to create 'Notes' in our content * to point out important concepts or warn of potential danger * ------------------------------------------------------------------- */ .just-a-note { color: black; width: 80%; /* this does not work?? */ 7border: 3px solid rgb(169,169,169); border-left: 4px solid rgb(169,169,169); border-bottom: 4px solid rgb(169,169,169); background-color: rgb(255, 255, 204); margin: 10px 10px 20px 10px; padding: 5%; /* orig was 20px */ } /* ========================================================================= * 12 SEP 2018 * * Copied this styling from minorStyle.css style sheet. * Used in the Joiner.html webpage. * * Ok, now have the correct styling that we want. * * ========================================================================= */ .will-be-covering a { text-decoration: none; color: green; } /* orig was blue */ .will-be-covering a:hover { /*background-color: blue;*/ color: red; } .will-be-covering li { list-style-type: none; /* was disc */ /* * Note. 12 OCT 2018 * I just changed the following styling back to 13.1111111% because this was needed * to bring the list on the inca-710-bandsaw.html webpage back in line with the * comentary. Not certain how this will affect other webpages at the moment. * Must take the time to finish all of these styling changes. *find **************************************************************************** */ margin-left: 13.1111111%; /* was 13.1111% which was too much */ width: 80%; /* NEW 14SEP2017. This worked fine. */ } /* ===== //END CONTENT = TITLE = STYLES ========================================== /* ======== FOOTER STYLES FOLLOW ============================= * * modified 13FEB2016. * Now much cleaner and increased height of background banner. * * 15FEB2016 * removed the background-color because we do not need it on this page. * we do need it on the rest of the pages to block out the background text. * * ----------------------------------------------------------------- */ footer { font-family: "Source Sans Pro", sans-serif; /* === DUPLICATE STYLING =========================================== */ position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 1440px; line-height: 1.5em; /* this adjust the height of the line */ background-color: rgba(20, 20, 20, 0.6); /* same background color as the menu drop down */ color: white; text-transform: none; /* 13 jun 21 changed from capatalize to none do not like By want by */ font-size: 1.0em; font-weight: 400; text-align: center; } /* ==== END OF FOOTER MARKUP ============================================== */ /* === END OF HOME.CSS STYLES =========================================================================== */ /* * * Image styles * * --------------------------------------- */ /* ------------------------------------------------------------------- * * 27 FEB 2016 NEW! * * I added the following markup following Ethan Marcotte's lead in * his book 'Responsive Web Design'. (see p48) * I should have been following his advice from day one!!! * * THE FOLLOWING LINE IS VERY IMPORTANT AND MUST NOT BE REMOVED!!!! * * ------------------------------------------------------------------- */ img { max-width: 100%; } /* NEW! 16JAN2017 */ /* img.figure {} was here */ .fig-caption { width: 70%; margin-left: 2rem; margin-bottom: 2rem; color: black; } /* NEW 14 JAN 2017 * * Added the following four FIGURE styles * * ---------------------------------------------------------------- */ figure.topFigure { max-width: 100%; /* -- was 100%-- */ padding: 2.000000%; /* 18 / 900 */ /* 9 SEP 2018 for some reason the following style was commented out. When I converted to the new styles.css style sheet the images are now full-width. I will uncomment this style and see how it affects the images. Update! I think I now prefer the first image to be full-width if used without any fig caption. So am going to leave this styling commented out for the the time being. */ /*margin-left: 13.1111111%; */ /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-top: 1em; /* testing to see if this rule affects ALL
tags?? */ margin-bottom: 2em; background-color: #FFFFFF; box-shadow: 4px 4px 8px rgba(0,0,0,0.75); } figure.otherFigure { max-width: 100%; /* -- was 100%-- */ padding: 2.000000%; /* 18 / 900 */ /* 9 SEP 2018 Following style was also commented out. Not sure why I did this???? Will uncomment this style. */ margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-top: 2em; margin-bottom: 2em; background-color: #FFFFFF; /* was $FFFFFF did not work???? */ box-shadow: 4px 4px 8px rgba(0,0,0,0.75); } /* this style is for DRAWINGS ONLY which have pure white backgrounds and will not show any white border */ figure.realFigure { max-width: 100%; /* -- was 100%-- */ padding: 2.000000%; /* 18 / 900 */ margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-top: 3em; margin-bottom: 2em; background-color: #FFFFFF; /* changed from above line - 13JUL2016 */ box-shadow: 4px 4px 8px rgba(0,0,0,0.75); } figcaption.spacing { padding-top: 1em; padding-bottom: 1em; padding-left: 0.5em; padding-right: 0.5em; color: black; /* darker shade of black */ background-color: #D3D3D3; /* was #D3D3D3 */ font-family: 'Poppins', sans-serif; font-style: normal; } /* ==================================================== * * * BEGIN THE MAJOR BODY STYLING * * ==================================================== */ #major-page-container { height: 100%; /* NEW! 23 JULY 2018 */ /* color: white; commented out 14 AUG 2018 */ background-repeat: repeat-x; /* NEW! 23 JULY 2018 ??? */ /*background-color: #000033; */ /* Note. Have been using #000033 (blue) for the upper color. Nice. */ /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C0C0C0), to(#101010)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #101010, #C0C0C0); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #101010, #C0C0C0); /* IE 10 */ background: -ms-linear-gradient(top, #101010, #C0C0C0); /* Opera 11.10+ */ background: -o-linear-gradient(top, #101010, #C0C0C0); } /* NOTE! 20 AUG 2018 @ 1247H * * MAJOR TITLE HOVER ISSUE - FIXED! * * I have spent a lot of time trying to figure out why when hovering the mouse over the * h1 title behaved so strangley as follows: * * Problem: Moving the mouse over the h1 title would only trigger the hover state if the * cursor was BELOW the title text. It would not trigger if the cursor was over the * actual text. * * Hovering over the minor h1 title behaved normally, that is, when the cursor was run * over the title text, the hover would trigger as one would expect. * * I commented out all of the .majorTitle h1 styles, one by one, and could not isolate * the hover issue. So, I replaced all of the .majorTitle h1 {...} styles with the * .minorTitle h1 { ... } styles and Voila!, the hover issue vanished. * * I have no idea what was causing this but as best as I can tell the problem is solved. * * So what is seen below is the .minorTitle h1 { ... } styling with some color changes. * * ------------------------------------------------------------------------------------ */ /* .majorTitle{ } */ /* MY NEW STYLING ====================================== */ h1{ font-family: "Raleway", sans-serif; font-weight: 300; letter-spacing: 0.2rem; text-transform: uppercase; width: 45%; display: flex; align-items: center; /* aligns element to VERTICAL center */ justify-content: center; /* aligns element to HORIZONTAL center */ color: white; font-size: 2rem; padding: 2% 0 1% 0; border-bottom: 1px solid red; margin: 0 auto; } h1 a{ text-decoration: none; color: white; } h1 a:hover{ color: rgb(95, 247, 95); } h6{ font-family: "Raleway", sans-serif; font-weight: 300; letter-spacing: 0.2rem; text-transform: uppercase; width: 45%; display: flex; align-items: center; /* aligns element to VERTICAL center */ justify-content: center; /* aligns element to HORIZONTAL center */ color: white; font-size: 2rem; padding: 2% 0 1% 0; /* border-bottom: 1px solid red; */ margin: 0 auto; } h6 a{ text-decoration: none; color: white; } h6 a:hover{ color: rgb(95, 247, 95); } /* .majorTitle h1{ -webkit-font-smoothing: antialiased; font-family: "Copperplate"; width: 63%; max-width: 1170px; margin-top: 5%; margin-left: 50%; padding-top: 0%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); text-transform: uppercase; text-shadow: 4px 4px 4px rgba(24, 0, 0, 1.0); letter-spacing: 0.1rem; font-size: 3.0em; font-weight: bold; border-bottom: 1px solid red; background-color: blue; } .majorTitle h1 a { color: rgb(255,0,0); text-decoration: none; } .majorTitle a:hover { color: #66CC00; } */ /* .majorTitle h2 { width: 63%; max-width: 1170px; font-family: 'Playfair Display', serif; margin-top: -1.0%; margin-bottom: 8%; margin-left: 18.8%; color: #D8D8D8; text-transform: uppercase; text-shadow: 3px 3px 3px rgba(24, 0, 0, 1.0); letter-spacing: 0.5em; padding: 0; background-color: red; } */ /* === MY H2 CSS STYLING ========================= */ h2{ font-family: 'Montserrat', sans-serif; font-weight: 300; text-transform: uppercase; width: 30%; display: flex; align-items: center; /* aligns element to VERTICAL center */ justify-content: center; /* aligns element to HORIZONTAL center */ color: white; font-size: 1rem; margin: 0 auto; padding-top: 1%; } .majorContent { font-family: 'Montserrat', sans-serif; font-size: 1.0em; font-style: normal; font-weight: 300; word-spacing: 0.1em; letter-spacing: 1px; line-height: 1.3em; color: #585858; width: 90%; max-width: 900px; background-color: #D8D8D8; margin: 0 auto; margin-top: 5%; padding: 2% 5% 5% 5%; text-align: justify; border: 10px solid #C0C0C0; } /* * 15 AUG 2018. Copied this style from the NO-NAV-majorStyle.css style sheet */ .majorContent h3 { margin: 0; padding: 0; margin-top: 1em; /* following code used to pull

down closer to

element below */ margin-bottom: -0.5em; font-size: 1.2em; text-transform: uppercase; font-weight: 400; /* orig was 600 */ letter-spacing: 0.0em; } /* * 15 AUG 2018. Copied this style from the NO-NAV-majorStyle.css style sheet */ .majorContent h4 { margin: 0; padding: 0; margin-top: 1.0em; color: #585858; /* new 16 APR 2016 */ text-transform: uppercase; margin-bottom: 1.0em; font-size: 1.0em; font-weight: 600; letter-spacing: 0.0em; } /* * 15 AUG 2018. Copied this style from the NO-NAV-majorStyle.css style sheet */ .majorContent h5 { color: red; text-transform: uppercase; margin-top: 1em; } .majorContent p { margin: 1.0em 0; } /* END OF MAJOR STYLING ======================================================================== */ /* * * GENERAL STYLING * * * ================================================================================================= */ .just-a-list { width: 80%; margin-left: 5%; list-style-type: decimal; } /* ================================================================================================== * * 23 JULY 2018 * * Following styles are from the navStyle.css style sheet * * There WILL be a lot of DUPLICATE code that will have to be removed. * * ================================================================================================== */ /* ======= MINOR STYLES FOLLOW ============================================= * * minor styles from minorStyles.css style sheet follow. * * ============================================================================== */ /* === NEW! 8 AUG 2018 Created to keep the minor styling separate from the major syling. === */ #minor-page-container { font-size: 100%; /* Following style colors the text */ /* color: blue; */ /* was white 12 AUG 2018 */ background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A0A0A0), to(#303030)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #303030, #A0A0A0); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #303030, #A0A0A0); /* IE 10 */ background: -ms-linear-gradient(top, #303030, #A0A0A0); /* Opera 11.10+ */ background: -o-linear-gradient(top, #303030, #A0A0A0); } .minorContent { font-family: 'Poppins', sans-serif; font-size: 1.0em; font-style: normal; font-weight: 300; word-spacing: 0.1em; color: #585858; /* Dark grey color for text. new 28feb2016 */ letter-spacing: 1px; line-height: 1.3em; width: 90%; max-width: 900px; background-color: #D8D8D8; margin: 0 auto; padding: 2% 5% 5% 5%; margin-top: -4%; text-align: justify; border: 10px solid #C0C0C0; } /* * NOTE!!! 21 AUG 2018 @ 1405H * * The following four (4) styles have ".minor" as the leading descriptor. * I am removing that as I do not think it is required. * Will upload to the server and know more then. * * @1629H. Just added "#minor-page-container" descriptor to the following style. * * ----------------------------------------------------------------------------------- */ #minor-page-container .minorContent p { margin-left: 13.1111111%; /* orig was 100px > 100 / 900 */ margin-right: 5.555555%; /* 50 / 900 */ margin-bottom: 10px; /* orig was 10px */ } .minorContent h3 { font-family: 'Poppins', sans-serif; font-weight: 700; margin-right: 6%; border-bottom: 2px solid #ffaf1a; /* test only */ font-style: normal; font-size: 1.5em; color: orange; text-transform: uppercase; margin-top: 1em; padding-bottom: 0.3em; margin-bottom: 1.0em; } .minorContent h4 { font-family: 'Poppins', sans-serif; font-weight: 400; font-style: normal; font-size: 1.4em; margin-left: 13.1111111%; margin-top: 2em; /* changed from 2em */ margin-bottom: 1em; /* NEW 5 AUG 2020 */ color: orange; /* changed from orange for testing purposes */ /* Note 5AUoG20 In designing the Tool Inventory minor pages the following style causes problems. Do not know how much ripple trouble this is going to cause. Will know more later. */ 7margin-bottom: -10px; /* reduce space between

title and

elements */ text-transform: uppercase; /* border: 3px solid rgb(169,169,169);*/ /* testing only */ } /* * NOTE. 17 NOV 2019 * * About the following 'h5' styling. * I changed the font-size and color to 1.0em and color: orange; * Was styling the veneering tools and techniques page and felt this would work better. * May have to change or modify this later. * * Note. Changed the color back to what it originally was. * Commented out 'text-transformation' allowing me flexibility. */ .minorContent h5 { font-family: 'Poppins', sans-serif; font-weight: 400; font-style: normal; font-size: 1.0em; /* was 1.1em */ margin-left: 13.1111111%; margin-top: 1em; color: #0d0d0c; /* was #6A6562 */ /* * NEW!! 16 JAN 2017 * * Am changing the following style because the negative margin makes no sense when * it is used ie, in the 'Dominoed Cabinet Door' webpage. * Not sure what will look good at this moment. * OK, the 0px value works fine, so I may just removed the style entirely. * This change may pose a problem we have no discovered at this time. * * NOTE. This style - as is, works perfectly for dating contents such as text. A good * example would the in the delta jointer page where I note the date - 17 AUGUST 2017 - * that this particular contents was written. This lets browsers know when the article was * written which is important. * ---------------------------------------------------------------------------------- */ margin-bottom: 0px; /* reduce space between

title and

elements */ } /* NEW! 6 AUG 2020 Following is style test for power-tool.php webpage only. Does NOT work????? Added .minorContent to style. Work??? NO! Removed same. PaulOB / sitepoint forum chimed in with this solution: .minorContent h4.margin-adjustment{...} I will try it and see how it goes. 9 AUG 20. Now have this working correctly. Using for power-tools.php only. */ .minorContent h5.pwr-tool-style { color: rgb(80,80,80); /* was (128,128,128) */ font-size: 1.1em; border-bottom: 2px solid rgb(169,169,169); text-transform: uppercase; padding-top: 15px; padding-bottom: 5px; margin-bottom: 10px; } /* * Following code affects 'Chisels' text =================== */ /*.toolTitle h1 { */ .minorTitle h1{ -webkit-font-smoothing: antialiased; font-family: "Copperplate"; width: 63%; max-width: 1170px; margin-top: 6%; margin-left: 50%; padding-top: 0%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); /*color: rgba(255, 255, 255, 0.5); *//* White text color */ text-transform: uppercase; /* -- my code -- */ text-shadow: 4px 4px 4px rgba(24, 0, 0, 1.0); letter-spacing: 0.1rem; /* -- my code -- */ font-size: 3.0em; /* orig was 5.0rem */ font-weight: bold; border-bottom: 1px solid red; /* background-color: red; */ /* 17 AUG 2018. Style for test purposes only. */ } .minorTitle a { text-decoration: none; color: rgba(255, 255, 255, 0.8); /* gray color */ } .minorTitle a:hover { color: #66CC00; /* minty green color */ } /* * Following code affects 'Wood Working By Design' text ==================== */ .minorTitle h2 { width: 54%; max-width: 1170px; font: bold 1.1em "Hoefler Text", Garamond, Times, serif; margin-top: -1.0%; /* original was -2.0% */ margin-bottom: 8%; margin-left: 19%; color: #F00000; /* Red text color */ text-shadow: 3px 3px 3px rgba(24, 0, 0, 1.0); text-transform: uppercase; letter-spacing: 0.5em; padding: 0; } /* ================================================== * * 13 SEP 2018 * Created this to give paragraphs

some upper margin when necessary. * Found this necessary in the case of the about-me.html wegpage. After the book list, the * following paragraph followed after the last list item. This styling separates the list * from the paragraph. * May have to create a minor-list in the future. 28 OCT 19, love this styling. * * ================================================== */ .margin-top { margin-top: 2%; } /* === END OF MINOR STYLES ============================================= */ /* ============================================================ * * NOTE! 28 NOV 2015 * * This is the nav styling from the minorStyle.css sheet. * It is slightly different from the majorStyle.css sheet. * * ============================================================ */ .nav-bar { position: absolute; display: flex; align-items: center; justify-content: right; top: 0; left: 0; margin: 0 0 0 75%; width: 20%; z-index: 3; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #F00000: } /* ========================================================================= * * The nav-trigger = TEXT + ICON * * Following styles both of those elements * * ========================================================================= */ .nav-trigger { position: absolute; /* without this the nav HB icon goes away 23JUL2018 */ /* right: 200px; */ /* Original */ /* positions the nav trigger all the way to the right side */ right: 20px; /* my code 23JUL2018. This DOES MOVE the icon to left. */ height: 100%; width: 50px; /* orig was 50px */ } /* ======================================================= * * Following styles the nav menu TEXT only * * NOTE. Added the first two styles. Menu text now has space between it and the icon. * But, the hamburger icon acts weird if it is tapped instead of the text. * Will leave it as it is for now. * * 23 JULY 2018 @ 1519H * Just combined the home and navStyle.css sheets into this style sheet and lost the nav menu text in the process. * Will tweak the following styles and see if we can bring it back. * * * * ======================================================= */ .nav-trigger .menu-text { position: relative; /* was relative */ /* 23 JULY 2018 @ 1128H. Add like CD nav system has */ right: 10px; /* 23 JULY 2018 @ 1128H. Add like CD nav system has */ /* position: absolute; */ color: white; /* -- orig = white -- */ font-family: 'Roboto', sans-serif; text-transform: uppercase; font-weight: 400; /* orig was 700 */ display: none; } /* * Following is our rule * Used to change font color of nav text 'MENU' on hover * * -------------------------------------------------------- */ .nav-trigger .menu-text:hover { color: red; } .nav-trigger .menu-icon:hover { display: inline-block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 18px; height: 2px; background-color: white; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s; } /* ------------------------------------------------------ * * this is the MIDDLE HORIZONTAL LINE of the menu ICON * * ------------------------------------------------------ */ .nav-trigger .menu-icon { display: inline-block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 18px; height: 2px; background-color: red; /* orig was white */ -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s; } /* ------------------------------------------------------------------------ * * This is styling for the UPPER & LOWER HORIZONTAL LINES of the menu icon * * ------------------------------------------------------------------------ */ .nav-trigger .menu-icon::before, .nav-trigger .menu-icon:after { content: ''; width: 100%; height: 100%; position: absolute; background-color: white; right: 0; -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s; -moz-transition: -moz-transform .3s, top .3s, background-color 0s; transition: transform .3s, top .3s, background-color 0s; } .nav-trigger .menu-icon::before { top: -5px; } .nav-trigger .menu-icon::after { top: 5px; } /* * this makes the nav button an 'X' when clicked. * ------------------------------------------------------ */ .nav-trigger .menu-icon.is-clicked { background-color: rgba(255, 255, 255, 0); } .nav-trigger .menu-icon.is-clicked::before, .nav-trigger .menu-icon.is-clicked::after { background-color: white; } .nav-trigger .menu-icon.is-clicked::before { top: 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .nav-trigger .menu-icon.is-clicked::after { top: 0; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } /* ========================================================================== * * The primary-nav is all of our menu items which appear when menu is opened * * this hides the hav bar by default above the viewport * * ========================================================================== */ .primary-nav { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background: rgba(20, 20, 20, 0.9); z-index: 2; text-align: center; padding: 50px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: auto; /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */ -webkit-overflow-scrolling: touch; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } .primary-nav li { font-size: 22px; font-size: 1.4rem; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: .2em 0; } .primary-nav a { display: inline-block; padding: .4em 1em; border-radius: 0.25em; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; color: #FFFFFF; text-decoration: none; text-transform: capitalize; /* Note the following - 700 - is less bold than 'bold'. Nice!! */ font-weight: 500; border: 1px solid transparent; /* ronpat's code */ } /* ==================================================================== * * Following places radiused-green border around menu itmes on hover * * ==================================================================== */ .primary-nav a:hover { border: 1px solid #00FF00; } /* ============================================================================== * * FOLLOWING RULE : * MAKES THE MENU ITEMS DROP DOWN ( VISIBLE ) AFTER CLICKING THE NAV MENU ICON * * ============================================================================== */ .primary-nav.is-visible { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } /* * Following affects the color of the HOME main menu item in pre-hover state * -------------------------------------------------------------------------- */ .primary-nav .home { color: #00FF00; } /* ==================================================================== * * Following rule styles font green color in pre-hover state * * Green indicates 'go back' from where you came * * ==================================================================== */ .primary-nav .goBack { color: #00FF00; } /* === END OF navStyle.CSS STYLES ============================================================================== */ /* ================================================================================== * * * BEGIN THE MEDIA QUERIES * * * ---------------------------------------------------------------- */ @media only screen and (min-width: 768px) { .nav-trigger { width: 100px; padding-left: 1em; background-color: transparent; height: 30px; line-height: 30px; right: 2.2em; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .nav-trigger .menu-text { display: inline-block; } .nav-trigger .menu-icon { left: auto; right: 1em; -webkit-transform: translateX(0) translateY(-50%); -moz-transform: translateX(0) translateY(-50%); -ms-transform: translateX(0) translateY(-50%); -o-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); } } /* # 2 * -------------------------------------------------------------- a I think we can do without this * -------------------------------------------------------------- */ @media only screen and (min-width: 768px) { .nav-bar { height: 80px; background: transparent; box-shadow: none; } } @media only screen and (min-width: 1170px) { .nav-bar { -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } } @media only screen and (min-width: 768px) { .primary-nav { padding: 80px 0; } } /* * Following is the FONT SIZE of the main nav menu items ============================== */ @media only screen and (min-width: 1170px) { .primary-nav li { font-size: 30px; font-size: 1.4rem; } } /* ===================================================================== * * MY === @MEDIA QUERIES === FOLLOW * * ===================================================================== */ @media only screen and (max-width: 1024px) { .welcomeContent { margin-top: 7%; font-size: 1em; } .introContent { margin-top: 23%; font-size: 1em; } .introTitle h2 { display: none; } .welcomeHeader h1 { font-size: 2.0rem; margin-left: 10%; } .welcomeHeader h2 { font-size: 1rem; margin-left: 13%; } } @media only screen and (max-width: 768px) { .welcomeContent { margin-top: 23%; font-size: 1em; } .introContent { margin-top: 23%; font-size: 1em; } .introTitle h2 { display: none; } .welcomeHeader h1 { font-size: 2.0rem; margin-left: 10%; } .welcomeHeader h2 { font-size: 1rem; margin-left: 13%; } } @media only screen and (max-width: 320px) { .primary-nav li { font-size: 22px; font-size: 1.0rem; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: .2em 0; text-transform: uppercase; } /* Following rule works correctly */ .welcomeContent { margin-top: 27%; font-size: 1em; } .introContent { margin-top: 27%; font-size: 1em; } .introTitle h1 { font-size: 1.8em; margin-left: 12%; } .introTitle h2 { display: none; } footer { background-color: rgba(20, 20, 20, 0.0); } footer .copyright { opacity: 0; } } /* === END OF MEDIA QUERIES ========================================= */