Merge pull request #15 from clarkepaul/forms-type
FIX basic updates to enhance usability and appearance of theme
This commit is contained in:
Will Rossiter
commit
037eac159e
150
css/layout.css
150
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 { }
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<footer class="footer" role="contentinfo">
|
||||
<div class="inner copy">
|
||||
<div class="left">$SiteConfig.Title <span class="arrow">→</span> <% include Navigation %></div>
|
||||
<div class="left">
|
||||
<a href="$BaseHref" class="brand" rel="home">$SiteConfig.Title</a>
|
||||
<span class="arrow">→</span> <% include Navigation %></div>
|
||||
<small class="right"><a href="http://simple.innovatif.com/about/">Theme</a> by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -3,14 +3,14 @@
|
|||
<nav class="secondary">
|
||||
<h3>
|
||||
<% loop Level(1) %>
|
||||
$Title
|
||||
$Title
|
||||
<% end_loop %>
|
||||
</h3>
|
||||
<ul>
|
||||
<% loop Menu(2) %>
|
||||
<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span class="arrow">→</span><span class="text">$MenuTitle.XML</span></a></li>
|
||||
<% loop Menu(1) %>
|
||||
<% include SidebarMenu %>
|
||||
<% end_loop %>
|
||||
</ul>
|
||||
</nav>
|
||||
<% end_if %>
|
||||
</aside>
|
||||
</aside>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!--Include SidebarMenu recursively /-->
|
||||
<% if Children %>
|
||||
<% loop Children %>
|
||||
<li class="$LinkingMode">
|
||||
<a href="$Link" class="$LinkingMode" title="Go to the $Title.XML page">
|
||||
<span class="arrow">→</span>
|
||||
<span class="text">$MenuTitle.XML</span>
|
||||
</a>
|
||||
|
||||
<% if Children %>
|
||||
<ul>
|
||||
<% include SidebarMenu %>
|
||||
</ul>
|
||||
<% end_if %>
|
||||
|
||||
</li>
|
||||
<% end_loop %>
|
||||
<% end_if %>
|
||||
|
|
@ -2,21 +2,25 @@
|
|||
<h1>$Title</h1>
|
||||
|
||||
<% if Query %>
|
||||
<p class="searchQuery"><strong>You searched for "{$Query}"</strong></p>
|
||||
<p class="searchQuery">You searched for "{$Query}"</p>
|
||||
<% end_if %>
|
||||
|
||||
<% if Results %>
|
||||
<ul id="SearchResults">
|
||||
<% control Results %>
|
||||
<li>
|
||||
<a class="searchResultHeader" href="$Link">
|
||||
<% if MenuTitle %>
|
||||
$MenuTitle
|
||||
<% else %>
|
||||
$Title
|
||||
<% end_if %>
|
||||
</a>
|
||||
<p>$Content.LimitWordCountXML</p>
|
||||
<h4>
|
||||
<a href="$Link">
|
||||
<% if MenuTitle %>
|
||||
$MenuTitle
|
||||
<% else %>
|
||||
$Title
|
||||
<% end_if %>
|
||||
</a>
|
||||
</h4>
|
||||
<% if Content %>
|
||||
<p>$Content.LimitWordCountXML</p>
|
||||
<% end_if %>
|
||||
<a class="readMoreLink" href="$Link" title="Read more about "{$Title}"">Read more about "{$Title}"...</a>
|
||||
</li>
|
||||
<% end_control %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue