diff --git a/lib/modules/apostrophe-assets/public/css/bootstrap.css b/lib/modules/apostrophe-assets/public/css/bootstrap.css index e461d3f..ec868a9 100644 --- a/lib/modules/apostrophe-assets/public/css/bootstrap.css +++ b/lib/modules/apostrophe-assets/public/css/bootstrap.css @@ -541,8 +541,8 @@ pre code { .container { width: 100%; - padding-right: 15px; - padding-left: 15px; + //padding-right: 15px; + //padding-left: 15px; margin-right: auto; margin-left: auto; } diff --git a/lib/modules/apostrophe-assets/public/css/main.css b/lib/modules/apostrophe-assets/public/css/main.css index 04ce9b9..f1a4055 100644 --- a/lib/modules/apostrophe-assets/public/css/main.css +++ b/lib/modules/apostrophe-assets/public/css/main.css @@ -45,7 +45,7 @@ p { text-indent: 0; margin: 0.3rem 0 0.7rem 0 !important; padding: 0 !important; - font-family: "Merriweather", "serif"; + font-family: Merriweather; font-size: 1.1rem; line-height: 1.4rem; } @@ -58,7 +58,7 @@ p.indent { text-indent: 0; margin: 0.3rem 0 0.7rem 0; padding: 0.25rem 0; - font-family: "Merriweather", "serif"; + font-family: Merriweather; font-size: 1.1rem; line-height: 1.4rem; } @@ -70,12 +70,12 @@ p.indent { padding-left: 1rem; } .apos-rich-text th { - font-family: "MerriweatherSans", "sans-serif"; + font-family: MerriweatherSans; font-weight: 700; } h2.h2, h3.h3, h4.h4 { - font-family: "MerriweatherSans", "sans-serif"; + font-family: MerriweatherSans; margin-bottom: 1rem; } @@ -90,27 +90,27 @@ p + h2.h2, p + h3.h3, p + h4.h4, ul + h2.h2, ul + h3.h3, ul + h4.h4, ol + h2.h2, h2.h2 { font-size: 2.2rem; line-height: 2.8rem; - font-family: "MerriweatherSans", "sans-serif"; + font-family: MerriweatherSans; font-weight: 700; } h3.h3 { font-size: 1.5rem; line-height: 2rem; - font-family: "MerriweatherSans", "sans-serif"; + font-family: MerriweatherSans; font-weight: 700; } h4.h4 { font-size: 1.2rem; line-height: 1.5rem; - font-family: "MerriweatherSans", "sans-serif"; + font-family: MerriweatherSans; font-weight: 900; } div[data-apos-widget=apostrophe-files] a, .apos-rich-text a { margin: 0.3rem 0 0.7rem 0 !important; - font-family: "MerriweatherSans", "sans-serif"; + font-family: MerriweatherSans; font-size: 1.4rem; line-height: 1.6rem; color: #1c1cc4; @@ -169,7 +169,7 @@ h5 { margin: 0.3rem 0 0.7rem 2rem; text-indent: -1.5rem; padding: 0; - font-family: "Merriweather", "serif"; + font-family: Merriweather; font-size: 1.1rem; line-height: 1.4rem; } @@ -187,7 +187,7 @@ h5 { margin: 0.3rem 0 0.7rem 2rem; text-indent: -1.5rem; padding: 0; - font-family: "Merriweather", "serif"; + font-family: Merriweather; font-size: 1.1rem; line-height: 1.4rem; } @@ -200,7 +200,7 @@ h5 { } blockquote { - font-family: AlexBrush, Serif; + font-family: AlexBrush; font-size: 1.2rem; line-height: 1.3rem; margin: 0.2rem 0; @@ -219,7 +219,7 @@ blockquote:after, blockquote:before { color: #666666; } blockquote p { - font-family: AlexBrush, Serif; + font-family: AlexBrush; font-size: 2rem; line-height: 2rem; display: inline; @@ -248,10 +248,10 @@ blockquote p { } .alert { - margin: 0; - padding: 0.4rem 0 0.4rem 1rem; + margin: 1.4rem 0; + padding: 0.4rem 0 0.4rem 0; font-size: 1.3rem; - font-family: "Montserrat-ExtraBold", "sans-serif"; + font-family: Montserrat-ExtraBold; line-height: 1.4rem; font-weight: 700; color: #000; diff --git a/lib/modules/apostrophe-assets/public/css/main.sass b/lib/modules/apostrophe-assets/public/css/main.sass index b6a8f28..00940ea 100644 --- a/lib/modules/apostrophe-assets/public/css/main.sass +++ b/lib/modules/apostrophe-assets/public/css/main.sass @@ -22,7 +22,7 @@ p // Remove !important if we can figure out how to remove the style CKEditor outputs. margin: 0.3rem 0 0.7rem 0 !important padding: 0 !important - font-family: "Merriweather", "serif" + font-family: Merriweather font-size: 1.1rem line-height: 1.4rem p.indent @@ -33,7 +33,7 @@ p.indent text-indent: 0 margin: 0.3rem 0 0.7rem 0 padding: 0.25rem 0 - font-family: "Merriweather", "serif" + font-family: Merriweather font-size: 1.1rem line-height: 1.4rem p @@ -42,11 +42,11 @@ p.indent td + td, th + th // All table data elements following another table data element should have a bit of space between element contents. padding-left: 1rem th - font-family: "MerriweatherSans", "sans-serif" + font-family: MerriweatherSans font-weight: 700 h2.h2, h3.h3, h4.h4 - font-family: "MerriweatherSans", "sans-serif" + font-family: MerriweatherSans margin-bottom: 1rem // Remove the margin-top from the paragraphs that follow a heading. Make !important because we have to override the styles set by CKEditor. h2.h2 + p, h3.h3 + p, h4.h4 + p @@ -57,24 +57,24 @@ p + h2.h2, p + h3.h3, p + h4.h4, ul + h2.h2, ul + h3.h3, ul + h4.h4, ol + h2.h2, h2.h2 font-size: 2.2rem line-height: 2.8rem - font-family: "MerriweatherSans", "sans-serif" + font-family: MerriweatherSans font-weight: 700 h3.h3 font-size: 1.5rem line-height: 2rem - font-family: "MerriweatherSans", "sans-serif" + font-family: MerriweatherSans font-weight: 700 h4.h4 font-size: 1.2rem line-height: 1.5rem - font-family: "MerriweatherSans", "sans-serif" + font-family: MerriweatherSans font-weight: 900 //Links using Apostrophe Files or Rich Text Widgets div[data-apos-widget='apostrophe-files'], .apos-rich-text a margin: 0.3rem 0 0.7rem 0 !important - font-family: "MerriweatherSans", 'sans-serif' + font-family: MerriweatherSans font-size: 1.4rem line-height: 1.6rem color: #1c1cc4 @@ -123,7 +123,7 @@ h5 margin: 0.3rem 0 0.7rem 2rem text-indent: -1.5rem padding: 0 - font-family: "Merriweather", "serif" + font-family: Merriweather font-size: 1.1rem line-height: 1.4rem .apos-rich-text ul ul @@ -138,7 +138,7 @@ h5 margin: 0.3rem 0 0.7rem 2rem text-indent: -1.5rem padding: 0 - font-family: "Merriweather", "serif" + font-family: Merriweather font-size: 1.1rem line-height: 1.4rem .apos-rich-text ol ol @@ -148,7 +148,7 @@ h5 list-style-position: inside blockquote - font-family: AlexBrush, Serif + font-family: AlexBrush font-size: 1.2rem line-height: 1.3rem margin: .2rem 0 @@ -163,7 +163,7 @@ blockquote top: 0.5rem color: lighten(#000, 40%) p - font-family: AlexBrush, Serif + font-family: AlexBrush font-size: 2rem line-height: 2rem display: inline @@ -189,10 +189,10 @@ blockquote .alert //background: #581d17 - margin: 0 - padding: 0.4rem 0 0.4rem 1rem + margin: 1.4rem 0 + padding: 0.4rem 0 0.4rem 0 font-size: 1.3rem - font-family: "Montserrat-ExtraBold", "sans-serif" + font-family: Montserrat-ExtraBold line-height: 1.4rem font-weight: 700 color: #000 diff --git a/lib/modules/apostrophe-assets/public/css/menu.css b/lib/modules/apostrophe-assets/public/css/menu.css index beaa3c2..e4fcea2 100644 --- a/lib/modules/apostrophe-assets/public/css/menu.css +++ b/lib/modules/apostrophe-assets/public/css/menu.css @@ -24,6 +24,22 @@ font-family: "OpenSans"; src: url("/modules/theme/fonts/OpenSans-Regular.ttf") format("truetype"); } +@font-face { + font-family: "OpenSansLight"; + src: url("/modules/theme/fonts/OpenSans-Light.ttf") format("truetype"); +} +@font-face { + font-family: "OpenSansSemiBold"; + src: url("/modules/theme/fonts/OpenSans-SemiBold.ttf") format("truetype"); +} +@font-face { + font-family: "OpenSansBold"; + src: url("/modules/theme/fonts/OpenSans-Bold.ttf") format("truetype"); +} +@font-face { + font-family: "OpenSansExtraBold"; + src: url("/modules/theme/fonts/OpenSans-ExtraBold.ttf") format("truetype"); +} .navbar { overflow: visible; background-color: #333; @@ -120,16 +136,20 @@ border-top: white 1rem solid; } .navbar .dropdown-content h1 { - font-size: 3rem; - font-family: Roboto Arial sans-serif; + font-family: OpenSansBold; + font-size: 2rem; + letter-spacing: 0.1rem; + text-transform: uppercase; margin: 0.6rem 0 0.6rem 0; color: #c2e09d; border-bottom: 2px solid grey; width: 100%; } .navbar .dropdown-content h2 { - font-size: 1.5rem; - font-family: Roboto Arial sans-serif; + font-family: OpenSansSemiBold; + font-size: 1.2rem; + letter-spacing: 0.1rem; + text-transform: uppercase; margin: 0.6rem 0 0.4rem 0; border-bottom: #656565 1.5px dashed; color: #CCC; @@ -138,8 +158,9 @@ width: 100%; } .navbar .dropdown-content a { - font-size: 1rem; - font-family: Roboto Arial sans-serif; + font-size: 0.9rem; + font-family: OpenSans; + letter-spacing: 0.05rem; color: white; text-decoration: none; margin: 0.5rem 0 0.5rem 0.6rem; @@ -149,6 +170,12 @@ color: #ff7700; text-decoration: underline; } +.navbar .dropdown-content a sup { + font-size: 0.6rem; + font-family: OpenSansLight; + letter-spacing: 0.05rem; + top: -0.6rem; +} @media only screen and (max-width: 500px) { .navbar { diff --git a/lib/modules/apostrophe-assets/public/css/menu.css.map b/lib/modules/apostrophe-assets/public/css/menu.css.map index e46909a..f1dd054 100644 --- a/lib/modules/apostrophe-assets/public/css/menu.css.map +++ b/lib/modules/apostrophe-assets/public/css/menu.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["common.sass","menu.sass"],"names":[],"mappings":"AAAA;EACC;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;;ACdD;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AACD;EACC;EACA;;AACD;EACC;;AAGD;EACC;EACA;EACA;;AACD;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;EACA;EACA;EAEA;EACA;;AACD;EACC;EACA;EACA;EACA;EACA;;AACD;EACC;;AACD;EAEC;EACA;EACA;EACA;EACA;EACA;;AACD;EACC;EACA;;;AAiBH;EACC;IACC;;EAEC;IACC;;EACD;IACC;;EACD;IACC","file":"menu.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["common.sass","menu.sass"],"names":[],"mappings":"AAAA;EACC;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;;ACdD;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;AACD;EACC;EACA;;AACD;EACC;;AAGD;EACC;EACA;EACA;;AACD;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAGC;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACD;EAGC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC;;AACD;EAEC;EAEA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;EACA;;;AAiBJ;EACC;IACC;;EAEC;IACC;;EACD;IACC;;EACD;IACC","file":"menu.css"} \ No newline at end of file diff --git a/lib/modules/apostrophe-assets/public/css/menu.sass b/lib/modules/apostrophe-assets/public/css/menu.sass index 336f110..b8c19a5 100644 --- a/lib/modules/apostrophe-assets/public/css/menu.sass +++ b/lib/modules/apostrophe-assets/public/css/menu.sass @@ -3,6 +3,18 @@ @font-face font-family: "OpenSans" src: url('/modules/theme/fonts/OpenSans-Regular.ttf') format("truetype") +@font-face + font-family: "OpenSansLight" + src: url('/modules/theme/fonts/OpenSans-Light.ttf') format("truetype") +@font-face + font-family: "OpenSansSemiBold" + src: url('/modules/theme/fonts/OpenSans-SemiBold.ttf') format("truetype") +@font-face + font-family: "OpenSansBold" + src: url('/modules/theme/fonts/OpenSans-Bold.ttf') format("truetype") +@font-face + font-family: "OpenSansExtraBold" + src: url('/modules/theme/fonts/OpenSans-ExtraBold.ttf') format("truetype") .navbar overflow: visible @@ -95,16 +107,24 @@ border-top: white 1rem solid .dropdown-content h1 - font-size: 3rem - font-family: Roboto Arial sans-serif + //font-size: 3rem + //font-family: Roboto Arial sans-serif + font-family: OpenSansBold + font-size: 2rem + letter-spacing: .1rem + text-transform: uppercase margin: .6rem 0 .6rem 0 color: #c2e09d //background-color: #555 border-bottom: 2px solid grey width: 100% h2 - font-size: 1.5rem - font-family: Roboto Arial sans-serif + //font-size: 1.5rem + //font-family: Roboto Arial sans-serif + font-family: OpenSansSemiBold + font-size: 1.2rem + letter-spacing: .1rem + text-transform: uppercase margin: .6rem 0 .4rem 0 border-bottom: #656565 1.5px dashed color: #CCC @@ -112,15 +132,22 @@ width: 100% a @extend .noselect - font-size: 1rem - font-family: Roboto Arial sans-serif + font-size: 0.9rem + //font-family: Roboto + font-family: OpenSans + letter-spacing: 0.05rem color: white text-decoration: none margin: .5rem 0 .5rem .6rem display: block - a:hover - color: #ff7700 - text-decoration: underline + &:hover + color: #ff7700 + text-decoration: underline + sup + font-size: 0.6rem + font-family: OpenSansLight + letter-spacing: 0.05rem + top: -0.6rem // //@media only screen and (max-width: 950px) diff --git a/lib/modules/apostrophe-assets/public/js/site.js b/lib/modules/apostrophe-assets/public/js/site.js index bbe1779..62a6c7c 100644 --- a/lib/modules/apostrophe-assets/public/js/site.js +++ b/lib/modules/apostrophe-assets/public/js/site.js @@ -11,32 +11,73 @@ $(function() { // let $topMenuItems = $("nav.navbar ul > li"); - let $topMenuContent = $("nav.navbar ul > li > div.dropdown-content"); - - // Handle the menu losing focus. This should remove visibility of the menu normally, but not when the click will result in one of the menus from displaying or hiding (clicking the same menu button). - $topMenuContent.focusout(function(event) { - let currentTarget = $(event.currentTarget); - // Get the element that focus is switching to. This is held by the focus event that caused the focusout event to fire. - let focused = event.originalEvent.target; - // Test whether the newly focused element is one of the navigation elements. - let isNav = $(focused).parents("nav.navbar ul > li").length > 0; + // let $topMenuContent = $("nav.navbar ul > li > div.dropdown-content"); - // Hide the menu if the newly focused element isn't one of the menu elements. - if(!isNav) { - currentTarget.parent().removeClass('display'); - } - }); + // function focusLost(event) { + // let currentTarget = $(event.currentTarget); + // // Get the element that focus is switching to. This is held by the focus event that caused the focusout event to fire. + // //let focused = event.originalEvent ? event.originalEvent.target : null; + // // Test whether the newly focused element is one of the navigation elements. + // //let isNav = focused ? $(focused).parents("nav.navbar ul > li").length > 0 : false; + // + // // Hide the menu if the newly focused element isn't one of the menu elements. + // //if(!isNav) { + // //currentTarget.parent().removeClass('display'); + // //} + // + // //When clicking the same link (to close the menu) there is a race condition where the focusLost event might happen before the click event, in which case the menu flashes. + // //To fix this we will detect the special case of the user clicking the same link that is open, and ignoring the focus out in that event. + // + // if(currentTarget.is("li")) { + // setTimeout(() => currentTarget.removeClass('display'), 200); + // } + // } + + // Handle the menu losing focus. This should remove visibility of the menu normally, but not when the click will result in one of the menus from displaying or hiding (clicking the same menu button). + //$topMenuContent.focusout(function(event) { + // focusLost(event); + //}); + //$topMenuItems.focusout(function(event) { + // focusLost(event); + //}); // Handle one of the top level menu items being clicked. This normally shows the mega menu div and chevron by applying a "display" class to the li element for the menu. // If the menu already is open then the menu should close. If another menu was already open then close it here so that there is a nice smooth transition. $topMenuItems.click((event) => { let $clickedMenuItem = $(event.currentTarget); if($clickedMenuItem.hasClass('display')) { - $clickedMenuItem.removeClass('display'); + $topMenuItems.removeClass('display'); } else { $topMenuItems.removeClass('display'); $clickedMenuItem.addClass('display'); + + //My attempts to set a specific handler. HTML just sucks at navigation management. + + // let $menuContent = $clickedMenuItem.children('div.dropdown-content'); + // function eventHandler(event) { + // lostFocus(event, eventHandler, $clickedMenuItem); + // } + // //$menuContent.find(':focusable').first().focus(); + // $(document).focusout(eventHandler); } }); + + // + // I have been forced to use this general focusout handle to detect when the user leaves the menu so we can close it. + // Originally I tried to register a focusout handler on the menu when it opened, but ultimately it wasn't possible. + // I then tried to setup a background div that would capture clicks outside the menu, but that was not working and would have not been great anyway. + // + $(document).focusout(function(event) { + //Give time for the focus event to complete first. This way we can call document.activeElement and actually get it. + setTimeout(() => { + // Find the active menu (if there is one). + let $content = $('li.display div.dropdown-content'); + + // If there is an active menu, check to see if the active element is a child of the menu. If not then close the menu. + if($content.length && !$.contains($content[0], document.activeElement)) { + $content.parents('li.display').removeClass('display'); + } + }, 50); + }); }); diff --git a/lib/modules/theme/public/fonts/OpenSans-Bold.ttf b/lib/modules/theme/public/fonts/OpenSans-Bold.ttf new file mode 100644 index 0000000..efdd5e8 Binary files /dev/null and b/lib/modules/theme/public/fonts/OpenSans-Bold.ttf differ diff --git a/lib/modules/theme/public/fonts/OpenSans-ExtraBold.ttf b/lib/modules/theme/public/fonts/OpenSans-ExtraBold.ttf new file mode 100644 index 0000000..67fcf0f Binary files /dev/null and b/lib/modules/theme/public/fonts/OpenSans-ExtraBold.ttf differ diff --git a/lib/modules/theme/public/fonts/OpenSans-Light.ttf b/lib/modules/theme/public/fonts/OpenSans-Light.ttf new file mode 100644 index 0000000..6580d3a Binary files /dev/null and b/lib/modules/theme/public/fonts/OpenSans-Light.ttf differ diff --git a/lib/modules/theme/public/fonts/OpenSans-SemiBold.ttf b/lib/modules/theme/public/fonts/OpenSans-SemiBold.ttf new file mode 100644 index 0000000..54e7059 Binary files /dev/null and b/lib/modules/theme/public/fonts/OpenSans-SemiBold.ttf differ diff --git a/views/layout.html b/views/layout.html index 208cec0..c3462c8 100644 --- a/views/layout.html +++ b/views/layout.html @@ -40,39 +40,41 @@