N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Remove style conflict between Gist lines and navicon-lines.

Browse source 
Fixes #49
This commit is contained in:
Michael Rose 2014-04-15 15:42:38 -04:00
parent f3e6d5e53c
commit 33d5d966f3
5 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_posts/2013-08-16-code-highlighting-post.md
View file

@ -111,4 +111,10 @@ module Jekyll
end
end
end
~~~
~~~
### GitHub Gist Embed
An example of a Gist embed below.
{% gist mmistakes/6589546 %}

2
assets/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
assets/js/_main.js
View file

@ -13,7 +13,7 @@ var changeClass = function (r,className1,className2) {
};
// Creating our button in JS for smaller screens
var menuElements = document.getElementById('site-nav');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" role="button" id="menutoggle" class="navtoogle lines-button x" aria-hidden="true"><span class="lines"></span>menu</button>');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" role="button" id="menutoggle" class="navtoogle navicon-lines-button x" aria-hidden="true"><span class="navicon-lines"></span>menu</button>');
// Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function() {

2
assets/js/scripts.min.js vendored
View file

File diff suppressed because one or more lines are too long

20
assets/less/page.less
View file

@ -81,7 +81,7 @@ body {
}
// Navicon lines
@button-size: 1.5rem;
.line() {
.navicon-line() {
display: inline-block;
width: @button-size;
height: @button-size/7;
@ -90,29 +90,29 @@ body {
border-radius: @button-size/14;
transition: .3s;
}
.lines-button {
.navicon-lines-button {
padding: @button-size/4 @button-size/2;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: @button-size/7;
}
.lines-button:hover {
.navicon-lines-button:hover {
opacity: 1;
}
.lines-button:active {
.navicon-lines-button:active {
transition: 0;
}
.lines {
.navicon-lines {
margin-right: 10px;
margin-bottom: @button-size/5;
// create middle line
.line();
.navicon-line();
position: relative;
// create the upper and lower lines as pseudo-elements of the middle line
&:before,
&:after {
.line();
.navicon-line();
position: absolute;
left: 0;
content: '';
@ -122,14 +122,14 @@ body {
&:before { top: @button-size/4; }
&:after { top: -@button-size/4; }
}
.lines-button:hover {
.navicon-lines-button:hover {
opacity: 1;
.lines {
.navicon-lines {
&:before { top: @button-size/3.5; }
&:after { top: -@button-size/3.5; }
}
}
.lines-button.x.active .lines {
.navicon-lines-button.x.active .navicon-lines {
// hide the middle line
background: transparent;
// overlap the lines by setting both their top values to 0