From 275f5ba33dd6442909cbcc3a9ea8394862940dbc Mon Sep 17 00:00:00 2001 From: Paul Clarke Date: Mon, 8 Oct 2012 17:02:34 +1300 Subject: [PATCH] ENHANCEMENT basic updates to enhance usability and appearance of theme Minor clean-up of consistency for tablet main menu styles Added multilevel subnavigation in sidebar for internal pages Updated search styling and positioning Changed header color and link color to provide more consistency for the theme Footer links to red on hover and site name to link to homepage Search results page styling updated --- css/layout.css | 150 ++++++++++++++++++------------ css/typography.css | 8 +- templates/Includes/Footer.ss | 4 +- templates/Includes/SideBar.ss | 8 +- templates/Includes/SidebarMenu.ss | 18 ++++ templates/Layout/Page_results.ss | 22 +++-- 6 files changed, 134 insertions(+), 76 deletions(-) create mode 100644 templates/Includes/SidebarMenu.ss diff --git a/css/layout.css b/css/layout.css index 62d82da..203e60c 100644 --- a/css/layout.css +++ b/css/layout.css @@ -62,7 +62,7 @@ body { } /* Brand */ - .brand, .brand:hover { + header .brand, header .brand:hover { float: left; color: #fff; display: inline-block; @@ -82,34 +82,30 @@ body { margin-bottom: 22px; } - /* Search form */ /* TODO: make sure this is not double up from form.css */ + /* Search form */ .search-bar { position: absolute; - right: 30px; - top: 34px; + right: 28px; + top: 32px; } - .search-bar form fieldset { - position: relative; - padding: 0; - margin: 0; + .search-bar #Search { + margin: 0; + padding: 0; } .search-bar form input.text { width: 155px; - padding:6px 35px 6px 10px; + padding: 5px 34px 5px 10px; color: #888; margin: 0; border: none; - border-radius: 20px; + border-radius: 14px; background: #fff; - font-family: Arial, Helvetica, sans-serif; - } - .search-bar form input.active { - color: #000 } + .search-bar form input.action { - font-size: 15px; + font-size: 14px; position: absolute; - right: 3px; + right: 0; top: -1px; cursor: pointer; border: none; @@ -117,9 +113,10 @@ body { background: none; font-family: 'WebSymbolsRegular'; color: #848484; - border-radius:0; - margin-top:0; + border-radius: 0; + margin: 0; } + .search-bar form input.active, .search-bar form input.action:hover { color: #000 } @@ -127,14 +124,12 @@ body { .header textarea:focus { outline: none } - #Search { - padding:0; - } .search-dropdown-icon { display: none } + /* NAVIGATION */ /* Primary navigation */ @@ -143,7 +138,7 @@ body { } .header .primary li { float: left; - padding-bottom: 17px; + padding-bottom: 14px; margin: 0 5px; position: relative; white-space: nowrap; @@ -190,13 +185,11 @@ body { float: left; clear: both; position: relative; - margin: 20px 0 4px -12px; + margin: 20px 0 0 -13px; white-space: nowrap; right: auto; } .tablet-nav .header .primary ul li { - margin-bottom: 10px; - padding-bottom: 0; white-space: nowrap; } .tablet-nav .header .primary ul li a { @@ -204,15 +197,6 @@ body { -webkit-transition: none; transition: none; } - .tablet-nav .header .primary ul li.current a, - .tablet-nav .header .primary ul li.section a { - background-color: #525252; - border-radius: 4px; - } - .tablet-nav .header .primary li.section:after, - .tablet-nav .header .primary li.current:after { - display: none - } .tablet-nav .footer .right { float: left; width: 100%; @@ -252,13 +236,12 @@ body { -webkit-transition: 0.2s; transition: 0.2s; } - .main .secondary li:hover .arrow { + .main .secondary li a:hover .arrow { left: 6px } .main .secondary li a { padding: 10px 0; display: block; - width: 100%; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; @@ -271,9 +254,12 @@ body { padding-left: 28px; display: block; } + .main .secondary li.current a.current { + color: #b80000; + } .main .secondary li.section, .main .secondary li.current { - background-color: #f7f7f7 + background-color: #f1f1f1 } .main .secondary li.section a, .main .secondary li.current a { @@ -283,6 +269,41 @@ body { color: #aaa; } + /* Secondary navigation 2-5 levels deep */ + .main .secondary ul ul { + display: none; + } + .secondary ul li.current ul, + .secondary ul li.section ul { /* Only show child pages from selected parent */ + display: block; + } + .secondary li.current ul ul { + display: none; + } + .main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/ + .main .secondary ul ul li a .arrow { left: 12px; } + .main .secondary ul ul li a:hover .arrow { left: 16px; } + + .main .secondary ul ul ul li a { padding-left: 20px; } + .main .secondary ul ul ul li a .arrow { left: 22px; } + .main .secondary ul ul ul li a:hover .arrow { left: 26px; } + + .main .secondary ul ul ul ul li a { padding-left: 30px; } + .main .secondary ul ul ul ul li a .arrow { left: 32px; } + .main .secondary ul ul ul ul li a:hover .arrow { left: 36px; } + + .main .secondary ul ul ul ul ul li a { padding-left: 40px; } + .main .secondary ul ul ul ul ul li a .arrow { left: 32px; } + .main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; } + + .main .secondary li a:hover, + .main .secondary li.section a:hover, + .main .secondary li.current a:hover { + color: #b80000; + } + + + /* MIXED */ header:after, @@ -304,6 +325,8 @@ footer:after { -webkit-transition: color 0.2s; transition: color 0.2s; } +.footer a.brand { color: #333; margin-left: 0; } +.footer a.brand:hover { color: #B80000; } body h1 span.amp { font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; font-style: italic; @@ -313,17 +336,21 @@ body h1 span.amp { /* PAGE SPECIFIC LAYOUT */ /* Homepage */ - /* Search Results */ /* TODO: Test search results styles */ - .searchResults h1 { - font-size: 36px; - margin-bottom: 15px; - } + /* Search Results */ + .typography .searchResults h1 { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } /* TODO: Test search results styles */ .searchResults p.searchQuery { - color: #333; margin-bottom: 10px; + font-size: 15px; + font-weight: bold; } .searchResults ul#SearchResults { - padding: 0 + padding: 0; + margin-left: 0; + border-bottom: 1px solid #e5e5e5; } .searchResults ul#SearchResults li { border-top: 1px solid #e5e5e5; @@ -331,18 +358,12 @@ body h1 span.amp { list-style-type: none; } .searchResults ul#SearchResults p { - margin-bottom: 12px + margin-bottom: 10px } - .searchResults ul#SearchResults a.searchResultHeader { - font-size: 16px; - font-weight: bold; - margin-bottom: 6px; - display: block; + .searchResults #PageNumbers { + border-top: 1px solid #e5e5e5; + padding-top: 20px; } - .searchResults #PageNumbers { - border-top: 1px solid #e5e5e5; - padding-top: 20px; - } .searchResults #PageNumbers a { padding: 0 5px } @@ -373,10 +394,10 @@ body h1 span.amp { line-height: 22px; } .footer a { - color: #999 + color: #999; } .footer a:hover { - color: #000 + color: #B90000 } .footer .left { float: left; @@ -534,6 +555,13 @@ body h1 span.amp { .header .primary ul li a:hover { color: inherit } + .header .primary li.section:after, + .header .primary li.current:after { + display: none; + } + .tablet-nav .header nav.primary ul li { + padding: 0; + } /* Search Form */ .search-bar { @@ -543,7 +571,7 @@ body h1 span.amp { right: 0; display: none; padding: 20px 0; - margin: 0; + margin: 80px 0 0; background-color: #E7E7E7; } .search-dropdown-icon { @@ -693,7 +721,11 @@ body h1 span.amp { /* Simple theme custom print styles */ .header, - .footer { - display: none + .footer, + .nav-open-button, + .search-bar, + .search-dropdown-icon, + nav.primary { + display: none; } } \ No newline at end of file diff --git a/css/typography.css b/css/typography.css index bbe31cb..fa953af 100644 --- a/css/typography.css +++ b/css/typography.css @@ -53,8 +53,8 @@ body { .typography h6 { font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; font-weight: normal; - color: #b80000; margin-bottom: 10px; + color: #444; } .typography h1 { font-size: 36px; line-height: 45px; @@ -95,9 +95,11 @@ body { .typography a.intro { color: #B80000; text-decoration: none; - border-bottom: 1px dashed #B80000; } - .typography a:hover { color: #D80000; } + .typography a:hover { + color: #D80000; + border-bottom: 1px dashed #B80000; + } .typography a:focus { } diff --git a/templates/Includes/Footer.ss b/templates/Includes/Footer.ss index 81bdbaf..435798c 100644 --- a/templates/Includes/Footer.ss +++ b/templates/Includes/Footer.ss @@ -1,6 +1,8 @@ \ No newline at end of file diff --git a/templates/Includes/SideBar.ss b/templates/Includes/SideBar.ss index 1662846..77d632b 100644 --- a/templates/Includes/SideBar.ss +++ b/templates/Includes/SideBar.ss @@ -3,14 +3,14 @@ <% end_if %> - + \ No newline at end of file diff --git a/templates/Includes/SidebarMenu.ss b/templates/Includes/SidebarMenu.ss new file mode 100644 index 0000000..d8aa76b --- /dev/null +++ b/templates/Includes/SidebarMenu.ss @@ -0,0 +1,18 @@ + +<% if Children %> + <% loop Children %> +
  • + + → + $MenuTitle.XML + + + <% if Children %> + + <% end_if %> + +
    • + <% end_loop %> +<% end_if %> \ No newline at end of file diff --git a/templates/Layout/Page_results.ss b/templates/Layout/Page_results.ss index 8a0b176..a1f2686 100644 --- a/templates/Layout/Page_results.ss +++ b/templates/Layout/Page_results.ss @@ -2,21 +2,25 @@

    $Title

    <% if Query %> -

    You searched for "{$Query}"

    +

    You searched for "{$Query}"

    <% end_if %> <% if Results %>