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

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

@ -112,3 +112,9 @@ module Jekyll
end 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 // Creating our button in JS for smaller screens
var menuElements = document.getElementById('site-nav'); 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 // Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function() { 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 // Navicon lines
@button-size: 1.5rem; @button-size: 1.5rem;
.line() { .navicon-line() {
display: inline-block; display: inline-block;
width: @button-size; width: @button-size;
height: @button-size/7; height: @button-size/7;
@ -90,29 +90,29 @@ body {
border-radius: @button-size/14; border-radius: @button-size/14;
transition: .3s; transition: .3s;
} }
.lines-button { .navicon-lines-button {
padding: @button-size/4 @button-size/2; padding: @button-size/4 @button-size/2;
transition: .3s; transition: .3s;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
border-radius: @button-size/7; border-radius: @button-size/7;
} }
.lines-button:hover { .navicon-lines-button:hover {
opacity: 1; opacity: 1;
} }
.lines-button:active { .navicon-lines-button:active {
transition: 0; transition: 0;
} }
.lines { .navicon-lines {
margin-right: 10px; margin-right: 10px;
margin-bottom: @button-size/5; margin-bottom: @button-size/5;
// create middle line // create middle line
.line(); .navicon-line();
position: relative; position: relative;
// create the upper and lower lines as pseudo-elements of the middle line // create the upper and lower lines as pseudo-elements of the middle line
&:before, &:before,
&:after { &:after {
.line(); .navicon-line();
position: absolute; position: absolute;
left: 0; left: 0;
content: ''; content: '';
@ -122,14 +122,14 @@ body {
&:before { top: @button-size/4; } &:before { top: @button-size/4; }
&:after { top: -@button-size/4; } &:after { top: -@button-size/4; }
} }
.lines-button:hover { .navicon-lines-button:hover {
opacity: 1; opacity: 1;
.lines { .navicon-lines {
&:before { top: @button-size/3.5; } &:before { top: @button-size/3.5; }
&:after { 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 // hide the middle line
background: transparent; background: transparent;
// overlap the lines by setting both their top values to 0 // overlap the lines by setting both their top values to 0