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="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{% if page.front == true %}{{ site.description }}{% else %}{{ page.description }}{% endif %}"> <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> <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') }}"> <link rel="stylesheet" href="{{ site.url }}/{{ theme_path('assets/css/styles.css') }}">
</head> </head>
<body{% if page.nav %} class="{{ page.nav }}"{% endif %}> <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"> <nav class="main-menu" role="navigation">
<ul> <ul>
<li><a href="{{ site.url }}"{% if page.nav == 'about' %} class="active"{% endif %}>About</a></li> <li><a href="{{ site.url }}" class="about">About</a></li>
<li><a href="{{ site.url }}/work"{% if page.nav == 'work' %} class="active"{% endif %}>Work</a></li> <li><a href="{{ site.url }}/work" class="work">Work</a></li>
<li><a href="{{ site.url }}/services"{% if page.nav == 'services' %} class="active"{% endif %}>Services</a></li> <li><a href="{{ site.url }}/services" class="services">Services</a></li>
<li><a href="{{ site.url }}/talks"{% if page.nav == 'talks' %} class="active"{% endif %}>Talks</a></li> <li><a href="{{ site.url }}/talks" class="talks">Talks</a></li>
<li><a href="{{ site.url }}/blog"{% if page.nav == 'blog' %} class="active"{% endif %}>Blog</a></li> <li><a href="{{ site.url }}/blog" class="blog">Blog</a></li>
<li><a href="{{ site.url }}/contact"{% if page.nav == 'contact' %} class="active"{% endif %}>Contact</a></li> <li><a href="{{ site.url }}/contact" class="contact">Contact</a></li>
</ul> </ul>
</nav> </nav>

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

@ -117,6 +117,22 @@ header[role="banner"] {
content: " "; content: " ";
display: block; display: block;
clear: both; } } 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 { header[role="banner"] .inner .main-menu a {
border-bottom: 1px solid #064771; border-bottom: 1px solid #064771;
color: white; color: white;
@ -138,22 +154,23 @@ header[role="banner"] {
header[role="banner"] .inner .main-menu a { header[role="banner"] .inner .main-menu a {
margin: 0 0 0 .5em; } } margin: 0 0 0 .5em; } }
.main-menu ul { body.about .main-menu a.about {
margin: 0; border-bottom-color: white; }
padding: 0;
border: 0; body.work .main-menu a.work {
overflow: hidden; border-bottom-color: white; }
*zoom: 1; }
.main-menu ul li { body.services .main-menu a.services {
list-style-image: none; border-bottom-color: white; }
list-style-type: none;
margin-left: 0; body.talks .main-menu a.talks {
display: inline-block; border-bottom-color: white; }
vertical-align: middle;
*vertical-align: auto; body.blog .main-menu a.blog {
*zoom: 1; border-bottom-color: white; }
*display: inline;
white-space: nowrap; } body.contact .main-menu a.contact {
border-bottom-color: white; }
body { body {
font-size: 0.875em; 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); @include container(960px);
} }
.main-menu a { .main-menu {
border-bottom: 1px solid #064771; ul {
color: white; @include inline-block-list;
display: block; }
margin: 0 .5em 0 0;
text-decoration: none;
&.active { a {
border-color: white; 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 { @each $class in about, work, services, talks, blog, contact {
@include inline-block-list; body.#{$class} .main-menu a.#{$class} {
border-bottom-color: white;
}
} }