opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Changed active classes to be done via SASS

Browse source
This commit is contained in:
Oliver Davies 2015-03-24 20:40:53 +00:00
parent ff9b54a369
commit 43b6f16178
4 changed files with 58 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
source/themes/opdavies/opdavies/_layouts/default.html.twig
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% if page.front == true %}{{ site.description }}{% else %}{{ page.description }}{% endif %}">
<title>{% if (page.front == true) and (site.subtitle) %}{{ site.subtitle }}{% else %}{{ page.title }}{% endif %} | {{ site.title }}</title>
<link rel="stylesheet" href="{{ site.url }}/{{ theme_path('assets/css/styles.css') }}">
</head>
<body{% if page.nav %} class="{{ page.nav }}"{% endif %}>

12
source/themes/opdavies/opdavies/_partials/main-menu.html.twig
View file

@ -1,10 +1,10 @@
<nav class="main-menu" role="navigation">
<ul>
<li><a href="{{ site.url }}"{% if page.nav == 'about' %} class="active"{% endif %}>About</a></li>
<li><a href="{{ site.url }}/work"{% if page.nav == 'work' %} class="active"{% endif %}>Work</a></li>
<li><a href="{{ site.url }}/services"{% if page.nav == 'services' %} class="active"{% endif %}>Services</a></li>
<li><a href="{{ site.url }}/talks"{% if page.nav == 'talks' %} class="active"{% endif %}>Talks</a></li>
<li><a href="{{ site.url }}/blog"{% if page.nav == 'blog' %} class="active"{% endif %}>Blog</a></li>
<li><a href="{{ site.url }}/contact"{% if page.nav == 'contact' %} class="active"{% endif %}>Contact</a></li>
<li><a href="{{ site.url }}" class="about">About</a></li>
<li><a href="{{ site.url }}/work" class="work">Work</a></li>
<li><a href="{{ site.url }}/services" class="services">Services</a></li>
<li><a href="{{ site.url }}/talks" class="talks">Talks</a></li>
<li><a href="{{ site.url }}/blog" class="blog">Blog</a></li>
<li><a href="{{ site.url }}/contact" class="contact">Contact</a></li>
</ul>
</nav>

49
source/themes/opdavies/opdavies/assets/css/styles.css
View file

@ -117,6 +117,22 @@ header[role="banner"] {
content: " ";
display: block;
clear: both; } }
header[role="banner"] .inner .main-menu ul {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
*zoom: 1; }
header[role="banner"] .inner .main-menu ul li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
white-space: nowrap; }
header[role="banner"] .inner .main-menu a {
border-bottom: 1px solid #064771;
color: white;
@ -138,22 +154,23 @@ header[role="banner"] {
header[role="banner"] .inner .main-menu a {
margin: 0 0 0 .5em; } }
.main-menu ul {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
*zoom: 1; }
.main-menu ul li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
white-space: nowrap; }
body.about .main-menu a.about {
border-bottom-color: white; }
body.work .main-menu a.work {
border-bottom-color: white; }
body.services .main-menu a.services {
border-bottom-color: white; }
body.talks .main-menu a.talks {
border-bottom-color: white; }
body.blog .main-menu a.blog {
border-bottom-color: white; }
body.contact .main-menu a.contact {
border-bottom-color: white; }
body {
font-size: 0.875em;

28
source/themes/opdavies/opdavies/assets/scss/modules/_header.scss
View file

@ -11,15 +11,21 @@ header[role="banner"] {
@include container(960px);
}
.main-menu a {
border-bottom: 1px solid #064771;
color: white;
display: block;
margin: 0 .5em 0 0;
text-decoration: none;
.main-menu {
ul {
@include inline-block-list;
}
&.active {
border-color: white;
a {
border-bottom: 1px solid #064771;
color: white;
display: block;
margin: 0 .5em 0 0;
text-decoration: none;
&.active {
border-color: white;
}
}
}
@ -40,6 +46,8 @@ header[role="banner"] {
}
}
.main-menu ul {
@include inline-block-list;
@each $class in about, work, services, talks, blog, contact {
body.#{$class} .main-menu a.#{$class} {
border-bottom-color: white;
}
}