asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Improved the compatibility in Firefox.

Browse source
This commit is contained in:
Cotes Chung 2019-10-16 23:20:51 +08:00
parent 63f665525e
commit a589831812
2 changed files with 47 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_includes/sidebar.html
View file

@ -43,7 +43,6 @@
</li> <!-- .nav-item --> </li> <!-- .nav-item -->
{% endfor %} {% endfor %}
<span class="cursor"></span>
</ul> <!-- ul.nav.flex-column --> </ul> <!-- ul.nav.flex-column -->
</div><!-- #nav-wrap --> </div><!-- #nav-wrap -->

88
assets/css/_src/main.scss
View file

@ -1,4 +1,3 @@
/*! /*!
* The main styles. * The main styles.
* © 2018-2019 Cotes Chung * © 2018-2019 Cotes Chung
@ -7,6 +6,7 @@
html, body { html, body {
height: 100%; height: 100%;
font-size: 16px;
} }
/* Solved jumping scrollbar */ /* Solved jumping scrollbar */
@ -46,7 +46,6 @@ body {
#sidebar .nav-item { #sidebar .nav-item {
height: 20%; height: 20%;
padding: 0 2rem;
} }
#sidebar .nav-link { #sidebar .nav-link {
@ -70,47 +69,53 @@ body {
display: -ms-flexbox; display: -ms-flexbox;
} }
.cursor { #sidebar ul > li.active:nth-child(1) ~ li:last-child::after,
background: #fcfcfc; #sidebar ul > li.nav-item:nth-child(1):hover ~ li:last-child::after {
top: calc(-400% + (26px / 2));
visibility: visible;
}
#sidebar ul > li.active:nth-child(2) ~ li:last-child::after,
#sidebar ul > li.nav-item:nth-child(2):hover ~ li:last-child::after {
top: calc(-300% + (26px / 2));
visibility: visible;
}
#sidebar ul > li.active:nth-child(3) ~ li:last-child::after,
#sidebar ul > li.nav-item:nth-child(3):hover ~ li:last-child::after {
top: calc(-200% + (26px / 2));
visibility: visible;
}
#sidebar ul > li.active:nth-child(4) ~ li:last-child::after,
#sidebar ul > li.nav-item:nth-child(4):hover ~ li:last-child::after {
top: calc(-100% + (26px / 2));
visibility: visible;
}
#sidebar ul > li.active:nth-child(5):last-child::after,
#sidebar ul > li.nav-item:nth-child(5):last-child:hover::after {
top: calc(26px / 2);
visibility: visible;
}
#sidebar ul > li:last-child > a {
margin-right: -3px;
max-width: calc(100% - 3px);
}
#sidebar ul > li:last-child::after {
visibility: hidden;
content: "";
position: relative; position: relative;
display: none;
top: 0;
left: 98.5%;
width: 3px; width: 3px;
height: 10%; height: 26px;
-webkit-transition: top 0.5s ease; background: #fcfcfc;;
-moz-transition: top 0.5s ease; pointer-events: none;
transition: top 0.5s ease; -webkit-transition: top .5s ease;
} -moz-transition: top .5s ease;
-o-transition: top .5s ease;
#sidebar ul>li.active:nth-child(1)~.cursor, transition: top .5s ease;
#sidebar ul>li.nav-item:nth-child(1):hover~.cursor {
top: -95%;
display: block;
}
#sidebar ul>li.active:nth-child(2)~.cursor,
#sidebar ul>li.nav-item:nth-child(2):hover~.cursor {
top: -75%;
display: block;
}
#sidebar ul>li.active:nth-child(3)~.cursor,
#sidebar ul>li.nav-item:nth-child(3):hover~.cursor {
top: -55%;
display: block;
}
#sidebar ul>li.active:nth-child(4)~.cursor,
#sidebar ul>li.nav-item:nth-child(4):hover~.cursor {
top: -35%;
display: block;
}
#sidebar ul>li.active:nth-child(5)~.cursor,
#sidebar ul>li.nav-item:nth-child(5):hover~.cursor {
top: -15%;
display: block;
} }
#nav-wrap { #nav-wrap {
@ -996,6 +1001,7 @@ a.tag:hover {
} }
#archives .date { #archives .date {
white-space: nowrap;
display: inline-block; display: inline-block;
} }