rijn

├── README.md ├── .gitignore ├── LICENSE ├── index.html └── style.less /README.md: -------------------------------------------------------------------------------- 1 | # navigation 2 | A navigation page for personal website. 3 | 4 | ## Link 5 | 6 | [rijnx.com](http://rijnx.com/) 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | *.css 40 | fonts/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Rijn Bian 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | rijn 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

20 |

21 | 40 |

41 |

42 | 48 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /style.less: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @font-face { 3 | font-family: 'NotoSans-Regular'; 4 | src: url('fonts/NotoSans-Regular-webfont.eot'); 5 | src: url('fonts/NotoSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/NotoSans-Regular-webfont.woff') format('woff'), url('fonts/NotoSans-Regular-webfont.ttf') format('truetype'), url('fonts/NotoSans-Regular-webfont.svg#noto_sansregular') format('svg'); 6 | font-weight: normal; 7 | font-style: normal; 8 | } 9 | 10 | @color_trans_a: #f68ba9; 11 | @color_trans_b: #ffa4be; 12 | 13 | * { 14 | margin: 0; 15 | padding: 0; 16 | outline: 0; 17 | z-index: 2; 18 | } 19 | 20 | html, 21 | body { 22 | height: 100%; 23 | width: 100%; 24 | font-family: 'NotoSans-Regular'; 25 | color: #3c3d3f; 26 | background: #49505f; 27 | font-size: 12px 28 | } 29 | 30 | a { 31 | text-decoration: none; 32 | color: #3c3d3f; 33 | } 34 | 35 | @menu-height: 25px; 36 | 37 | .top-container { 38 | width: 100%; 39 | position: absolute; 40 | top: 50%; 41 | // margin: -@menu-height/2 0 0 0; 42 | 43 | @media screen and (max-width: 568px) { 44 | position: relative; 45 | top: auto; 46 | width: auto; 47 | margin: 10px; 48 | overflow: hidden; 49 | } 50 | } 51 | 52 | .row-container { 53 | display: table; 54 | margin: auto; 55 | @media screen and (max-width: 568px) { 56 | margin: 0; 57 | } 58 | } 59 | 60 | .menu-countainer { 61 | position: relative; 62 | display: inline-block; 63 | height: @menu-height; 64 | 65 | @media screen and (max-width: 568px) { 66 | overflow: hidden; 67 | height: auto; 68 | } 69 | 70 | & > * { 71 | display: block; 72 | position: relative; 73 | float: left; 74 | } 75 | } 76 | 77 | @margin-trans-t: 0.15s; 78 | @height-trans-t: 0.2s; 79 | 80 | .menu-item { 81 | 82 | @media screen and (max-width: 568px) { 83 | float: none; 84 | } 85 | 86 | margin: 0; 87 | padding: 0; 88 | 89 | @media screen and (max-width: 568px) { 90 | margin: 15px 3px; 91 | height: auto; 92 | 93 | text-align: center; 94 | } 95 | 96 | display: flex; 97 | 98 | span { 99 | display: inline-block; 100 | vertical-align: middle; 101 | 102 | @media screen and (max-width: 568px) { 103 | display: block; 104 | } 105 | } 106 | 107 | span.title { 108 | padding: 0 15px; 109 | line-height: @menu-height; 110 | color: #3b3e47; 111 | 112 | transition: padding @margin-trans-t ease; 113 | 114 | @media screen and (max-width: 568px) { 115 | font-size: 2em; 116 | line-height: @menu-height * 2; 117 | } 118 | } 119 | 120 | span.triangle { 121 | width: 0; 122 | height: 0; 123 | border-style: solid; 124 | border-width: 12.5px 0 12.5px 13px; 125 | 126 | @media screen and (max-width: 568px) { 127 | display: none; 128 | } 129 | } 130 | 131 | &.level-1 { 132 | span.title { 133 | background: #efb8cb; 134 | } 135 | 136 | span.triangle { 137 | border-color: #f4ced9 #f4ced9 #f4ced9 #efb8cb; 138 | } 139 | } 140 | 141 | &.level-2 { 142 | span.title { 143 | background: #f4ced9; 144 | } 145 | 146 | span.triangle { 147 | border-color: #f9dae0 #f9dae0 #f9dae0 #f4ced9; 148 | } 149 | } 150 | 151 | &.level-3 { 152 | span.title { 153 | background: #f9dae0; 154 | } 155 | 156 | span.triangle { 157 | border-color: #fce9eb #fce9eb #fce9eb #f9dae0; 158 | } 159 | } 160 | 161 | &.level-4 { 162 | span.title { 163 | background: #fce9eb; 164 | } 165 | 166 | span.triangle { 167 | border-color: transparent transparent transparent #fce9eb; 168 | } 169 | } 170 | 171 | &:hover { 172 | cursor: pointer; 173 | 174 | span.title { 175 | padding: 0 20px; 176 | } 177 | } 178 | 179 | } 180 | 181 | .lodash { 182 | &.active { 183 | border-bottom: solid 2px #fff; 184 | } 185 | height: @menu-height - 1px; 186 | width: 12px; 187 | 188 | margin-left: 12px; 189 | 190 | @media screen and (max-width: 568px) { 191 | display: none; 192 | } 193 | } 194 | 195 | footer { 196 | 197 | position: absolute; 198 | bottom: 5px; 199 | left: 0; 200 | right: 0; 201 | 202 | text-align: center; 203 | 204 | .copyright { 205 | font-size: 0.7rem; 206 | color: #bcbdbf; 207 | 208 | margin-top: 10px; 209 | 210 | a { 211 | color: #bcbdbf; 212 | } 213 | } 214 | } 215 | --------------------------------------------------------------------------------