James Peret's blog. Built with Jekyll and the Mikey theme.

_nav.scss 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. //
  2. // Navigation
  3. // --------------------------------------------------
  4. //
  5. // Credit: Sidebar Toggle inspired by Lanyon theme by @mdo
  6. // Sidebar nav
  7. .sidebar {
  8. width: 14rem;
  9. visibility: hidden;
  10. padding: 30px 20px;
  11. font-family: $title-secondary-font;
  12. font-size: $font-S;
  13. background-color: $gray-darker;
  14. z-index: $zIndex-9--sidebar;
  15. overflow-x: hidden;
  16. overflow-y: scroll;
  17. -webkit-transition: all .3s ease-in-out;
  18. transition: all .3s ease-in-out;
  19. -moz-user-select: -moz-none;
  20. -webkit-user-select: none;
  21. -ms-user-select: none;
  22. -o-user-select: none;
  23. user-select: none;
  24. -webkit-overflow-scrolling: touch !important;
  25. &::-webkit-scrollbar {
  26. width: 12px;
  27. }
  28. &::-webkit-scrollbar-track {
  29. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  30. border-radius: 10px;
  31. }
  32. &::-webkit-scrollbar-thumb {
  33. border-radius: 10px;
  34. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  35. }
  36. }
  37. .sidebar--left {
  38. position: fixed;
  39. top: 0;
  40. bottom: 0;
  41. left: -14rem;
  42. }
  43. .sidebar--right {
  44. position: fixed;
  45. top: 0;
  46. bottom: 0;
  47. right: -14rem;
  48. }
  49. .postWrapper,
  50. .sidebar,
  51. .sidebar-toggle {
  52. -webkit-backface-visibility: hidden;
  53. -ms-backface-visibility: hidden;
  54. backface-visibility: hidden;
  55. }
  56. .sidebar-checkbox {
  57. display: none;
  58. }
  59. .sidebar-toggle-wrapper {
  60. position: fixed;
  61. z-index: $zIndex-5--sidebar-toggle-wrapper;
  62. top: 30px;
  63. right: 3%;
  64. width: 44px;
  65. height: 44px;
  66. overflow: hidden;
  67. text-indent: 100%;
  68. white-space: nowrap;
  69. cursor: pointer;
  70. border-radius: 99px;
  71. background-color: $white;
  72. }
  73. .sidebar-toggle-wrapper:hover .sidebar-toggle {
  74. background-color: #666;
  75. }
  76. // Sidebar toggle
  77. .sidebar-toggle {
  78. position: absolute;
  79. z-index: $zIndex-6--sidebar-toggle;
  80. top: 48%;
  81. left: 50%;
  82. margin-left: -10px;
  83. display: block;
  84. width: 20px;
  85. height: 2px;
  86. background: $black;
  87. /* background-color: transparent;
  88. border-radius: 4px; */
  89. -webkit-transition: background 0.3s;
  90. -moz-transition: background 0.3s;
  91. transition: background 0.3s;
  92. &:before,
  93. &:after {
  94. content: '';
  95. position: absolute;
  96. left: 0;
  97. background: inherit;
  98. width: 100%;
  99. height: 100%;
  100. -webkit-transform: translateZ(0);
  101. -moz-transform: translateZ(0);
  102. -ms-transform: translateZ(0);
  103. -o-transform: translateZ(0);
  104. transform: translateZ(0);
  105. -webkit-backface-visibility: hidden;
  106. backface-visibility: hidden;
  107. -webkit-transition: -webkit-transform 0.5s, background 0s;
  108. -moz-transition: -moz-transform 0.5s, background 0s;
  109. transition: transform 0.5s, background 0s;
  110. }
  111. &:before {
  112. top: -6px;
  113. -webkit-transform: rotate(0);
  114. -moz-transform: rotate(0);
  115. -ms-transform: rotate(0);
  116. -o-transform: rotate(0);
  117. transform: rotate(0);
  118. }
  119. &:after {
  120. bottom: -6px;
  121. -webkit-transform: rotate(0);
  122. -moz-transform: rotate(0);
  123. -ms-transform: rotate(0);
  124. -o-transform: rotate(0);
  125. transform: rotate(0);
  126. }
  127. }
  128. /* .sidebar-toggle--black {
  129. background: $black;
  130. } */
  131. // sidebar toggle behavior
  132. /* #sidebar-checkbox:checked ~ .postWrapper, */
  133. #sidebar-checkbox:checked ~ .sidebar,
  134. #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper {
  135. -webkit-transform: translateX(-14rem);
  136. -ms-transform: translateX(-14rem);
  137. transform: translateX(-14rem);
  138. }
  139. .sidebar-toggle:active,
  140. #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper {
  141. position: fixed;
  142. background-color: rgba($black,0.8);
  143. }
  144. #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper .sidebar-toggle {
  145. background: transparent;
  146. &:before,
  147. &:after {
  148. background: $white;
  149. }
  150. &:before {
  151. top: 0;
  152. -webkit-transform: rotate(135deg);
  153. -moz-transform: rotate(135deg);
  154. -ms-transform: rotate(135deg);
  155. -o-transform: rotate(135deg);
  156. transform: rotate(135deg);
  157. }
  158. &:after {
  159. bottom: 0;
  160. -webkit-transform: rotate(225deg);
  161. -moz-transform: rotate(225deg);
  162. -ms-transform: rotate(225deg);
  163. -o-transform: rotate(225deg);
  164. transform: rotate(225deg);
  165. }
  166. }
  167. #sidebar-checkbox:checked ~ .sidebar {
  168. visibility: visible;
  169. }
  170. .postWrapper,
  171. .sidebar-toggle-wrapper {
  172. -webkit-transition: -webkit-transform .3s ease-in-out;
  173. transition: transform .3s ease-in-out;
  174. }
  175. // Sidebar content
  176. .sidebar-recentPosts {
  177. list-style: none;
  178. margin: $leading 0 0;
  179. padding: 0;
  180. font-size: $font-XS;
  181. a,
  182. a:hover {
  183. text-decoration: none;
  184. background-image: none;
  185. }
  186. a {
  187. display: block;
  188. letter-spacing: 0.05rem;
  189. font-weight: 700;
  190. line-height: 1.5;
  191. color: rgba($white,.8);
  192. }
  193. a:hover {
  194. color: rgba($white,1);
  195. }
  196. li {
  197. list-style: none;
  198. margin-bottom: $leading;
  199. }
  200. .postMeta {
  201. font-size: $font-XS;
  202. color: rgba($white,.4);
  203. }
  204. }
  205. .sidebar-recentPosts-image-wrapper {
  206. display: block;
  207. width: 100%;
  208. height: 3 * $leading;
  209. background: #333;
  210. overflow: hidden;
  211. margin-bottom: 15px;
  212. img {
  213. min-height: 3 * $leading;
  214. width: 150%;
  215. height: auto;
  216. position: relative;
  217. left: 50%;
  218. transform: translateX(-50%);
  219. }
  220. }
  221. // Left side menu
  222. .menuWrapper {
  223. position: absolute;
  224. z-index: $zIndex-5--sidebar-toggle-wrapper;
  225. top: 30px;
  226. left: 3%;
  227. }
  228. .menuWrapper ul {
  229. list-style: none;
  230. position: relative;
  231. float: left;
  232. margin: 0;
  233. padding: 0;
  234. li {
  235. position: relative;
  236. float: left;
  237. list-style: none;
  238. margin: 0;
  239. padding: 0;
  240. }
  241. a {
  242. display: block;
  243. color: #333;
  244. text-decoration: none;
  245. padding: 0 15px;
  246. }
  247. ul {
  248. display: none;
  249. position: absolute;
  250. top: 100%;
  251. left: 0;
  252. background: #fff;
  253. padding: 0;
  254. }
  255. }
  256. .menuWrapper ul li:hover {
  257. // display: block;
  258. opacity: 0.8;
  259. > ul {
  260. display: block;
  261. }
  262. }
  263. .list--avatarMenu {
  264. .list-item {
  265. float: none;
  266. width: 200px;
  267. }
  268. a {
  269. padding: 10px 15px;
  270. }
  271. }