├── .gitignore ├── 404.md ├── README.md ├── _config.yml ├── _layouts ├── default.html ├── page.html └── post.html ├── _posts ├── 2015-08-08-whats-jekyll.md └── 2015-08-09-example-content.md ├── about.md ├── feed.xml ├── index.html └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | Gemfile.lock 4 | -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 404 Not Found 3 | permalink: /404.html 4 | --- 5 | 6 | Sorry, but the page you were trying to view does not exist. 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Kiko 2 | 3 | [Kiko](http://github.com/gfjaru/Kiko) is a theme for [Jekyll](http://jekyllrb.com), the static site generator. It's designed and developed by [@gfjaru](https://twitter.com/gfjaru). 4 | 5 | [See it live](https://kiko.gfjaru.com/) 6 | 7 | ## Kiko-plus 8 | 9 | https://github.com/AWEEKJ/Kiko-plus by. [@AWEEKJ](https://github.com/AWEEKJ) 10 | 11 | ## To do lists 12 | 13 | Next update is new theme based from Kiko. 14 | 15 | ## Get Started 16 | 17 | 1. Fork this repository 18 | 2. Clone the repository to your computer.
`git clone https://github.com/YOURUSERNAME/Kiko` 19 | 3. Run it.
`jekyll serve` 20 | 4. Go to http://127.0.0.1:4000. 21 | 22 | ## Make it yours 23 | 24 | 1. Change name and add/remove nav at `_config.yml`. 25 | 2. Change `about.md`. 26 | 27 | ## License 28 | 29 | This theme is released under MIT License. 30 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # # # # # # # # 2 | # K i k o # 3 | # # # # # # # # 4 | 5 | # Basic 6 | name: "Kiko" 7 | description: "a clean, lightweight and minimalistic blog theme for jekyll" 8 | 9 | # jekyll-seo-tag, see: http://www.rubydoc.info/gems/jekyll-seo-tag/1.2.0 10 | url: "//kiko.gfjaru.com" 11 | author: "gfjaru" 12 | twitter: 13 | username: "gfjaru" 14 | #facebook: 15 | # app_id: 1234 16 | # publisher: 1234 17 | 18 | # URL 19 | baseurl: "" 20 | #baseurl: "" #For Root Domain 21 | permalink: /:year/:month/:day/:title/ 22 | 23 | # Markdown 24 | markdown: kramdown 25 | 26 | # Navigation 27 | nav: 28 | - name: "About" 29 | remote: false 30 | localpath: "about" 31 | - name: "Download" 32 | remote: true 33 | href: "//github.com/gfjaru/Kiko/releases" 34 | 35 | # Sass 36 | sass: 37 | style: :compressed 38 | 39 | # Scopes 40 | defaults: 41 | - 42 | scope: 43 | path: "" 44 | type: "pages" 45 | values: 46 | layout: "page" 47 | - 48 | scope: 49 | path: "" 50 | type: "posts" 51 | values: 52 | layout: "post" 53 | 54 | gems: 55 | - jekyll-seo-tag 56 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %} 7 | 8 | 9 | 10 | {% seo %} 11 | 12 | 13 |
14 | {{ content }} 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |

6 | {{ site.name }} 7 |

8 |
9 |
10 |

{{ page.title }}

11 | {{ content }} 12 |
13 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |

6 | {{ site.name }} 7 |

8 |
9 |
10 |

{{ page.title }}

11 |
12 | 13 |
14 | {{ content }} 15 |
16 | -------------------------------------------------------------------------------- /_posts/2015-08-08-whats-jekyll.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Whats Jekyll? 3 | --- 4 | 5 |

Jekyll is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes.

6 | 7 | From [the project's readme](https://github.com/jekyll/jekyll/blob/master/README.markdown): 8 | 9 | > Jekyll is a simple, blog aware, static site generator. It takes a template directory [...] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub. 10 | 11 | It's an immensely useful tool. Find out more by [visiting the project on GitHub](https://github.com/jekyll/jekyll). 12 | -------------------------------------------------------------------------------- /_posts/2015-08-09-example-content.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Example content" 3 | # jekyll-seo-tag 4 | description: "A short description of the page's content" 5 | image: "http://placehold.it/400x200" 6 | author: "jianjie" 7 | --- 8 | 9 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper est in imperdiet molestie. Curabitur aliquet sem in ante venenatis.

10 | 11 | Morbi ultrices libero imperdiet [lectus](#) dignissim, sit amet bibendum nisl consectetur. Morbi erat purus, pretium at ligula tincidunt, faucibus commodo sem. Etiam vel porttitor est, vitae maximus ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien turpis, cursus non porta ac. 12 | 13 | ## Lorem 14 | Quisque sodales euismod nibh, gravida venenatis nibh dignissim eget. Morbi gravida enim vel lectus aliquet aliquet. 15 | 16 | ### Ipsum 17 | Nunc nec aliquam tellus. Etiam faucibus magna nibh, ut fermentum velit consectetur id. Nullam vehicula iaculis tortor, in cursus enim auctor vitae. Duis semper pulvinar justo, at vestibulum dolor. Cras fermentum nibh quis nisl imperdiet ornare. Sed nisi nunc, dictum sit amet gravida in, finibus rhoncus orci. Donec scelerisque commodo turpis ac venenatis. 18 | 19 | > Nam vitae commodo ex. Nunc vel tellus leo. 20 | 21 | ## Dugem 22 | Nullam vehicula iaculis tortor, in cursus enim auctor vitae. Duis semper pulvinar justo, at vestibulum dolor. Cras fermentum nibh quis nisl imperdiet ornare. Sed nisi nunc, dictum sit amet gravida in, finibus rhoncus orci. Donec scelerisque commodo turpis ac venenatis. 23 | 24 | ``` javascript 25 | function trigger_alert(){ 26 | alert("Lorem Ipsum dolor sit amet"); 27 | } 28 | 29 | trigger_alert(); 30 | ``` 31 | 32 | ### Golem 33 | Quisque sodales euismod nibh, gravida venenatis nibh dignissim eget. Morbi gravida enim vel lectus aliquet aliquet. 34 | 35 | * Praesent commodo cursus magna. 36 | * Donec id elit non mi porta gravida at eget metus. 37 | * Nulla vitae elit libero, a pharetra augue. 38 | 39 | Cras fermentum nibh quis nisl imperdiet ornare. Sed nisi nunc, dictum sit amet gravida in, finibus rhoncus orci. Donec scelerisque commodo turpis ac venenatis. 40 | 41 | 1. Vestibulum id ligula porta felis euismod semper. 42 | 2. Cum sociis natoque penatibus. 43 | 3. Maecenas sed diam eget risus. 44 | 45 | Nam ante lacus, ornare ut lacus in, aliquet gravida orci. Donec non dignissim elit. Integer facilisis lorem sed porttitor elementum. Etiam a eleifend justo. 46 | 47 | kramdown 48 | : A Markdown-superset converter 49 | 50 | Maruku 51 | : Another Markdown-superset converter 52 | 53 | Sed nisi nunc, dictum sit amet gravida in, finibus rhoncus orci. Donec scelerisque commodo turpis ac venenatis. 54 | 55 | ![Large example image](http://placehold.it/800x400 "Large example image") 56 | ![Medium example image](http://placehold.it/400x200 "Medium example image") 57 | ![Small example image](http://placehold.it/200x200 "Small example image") 58 | 59 | Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 60 | 61 | |-----------------+------------+-----------------+----------------| 62 | | Default aligned |Left aligned| Center aligned | Right aligned | 63 | |-----------------|:-----------|:---------------:|---------------:| 64 | | First body part |Second cell | Third cell | fourth cell | 65 | | Second line |foo | **strong** | baz | 66 | | Third line |quux | baz | bar | 67 | |-----------------+------------+-----------------+----------------| 68 | | Second body | | | | 69 | | 2 line | | | | 70 | |=================+============+=================+================| 71 | | Footer row | | | | 72 | |-----------------+------------+-----------------+----------------| 73 | 74 | Nullam quis risus eget urna mollis ornare vel eu leo. 75 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | permalink: /about/ 4 | --- 5 | 6 |

Kiko is a theme for Jekyll, the static site generator.

7 | 8 | Kiko is simple, lightweight theme. It's designed and developed by [@gfjaru](https://twitter.com/gfjaru). 9 | -------------------------------------------------------------------------------- /feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.name | xml_escape }} 8 | {{ site.url }} 9 | 10 | {% for post in site.posts %} 11 | 12 | {{ post.title | xml_escape }} 13 | {{ post.content | xml_escape }} 14 | {{ post.date | date_to_rfc822 }} 15 | {{ site.url }}{{ post.url }} 16 | {{ site.url }}{{ post.url }} 17 | 18 | {% endfor %} 19 | 20 | 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |

6 | {{ site.name }}'s blog 7 |

8 | 17 |
18 |
19 | {% if site.posts.size == 0 %} 20 |

No post found

21 | {% else %} 22 | {% for post in site.posts %} 23 |
24 |

25 | {{ post.title }} 26 |

27 |
28 | 29 |
30 |
31 | {% endfor %} 32 | {% endif %} 33 |
34 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | * { 5 | -webkit-box-sizing: border-box; 6 | -moz-box-sizing: border-box; 7 | box-sizing: border-box; 8 | } 9 | 10 | html, 11 | body { 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | html { 17 | font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; 18 | font-size: 18px; 19 | font-weight: 300; 20 | line-height: 1.6; 21 | 22 | @media (min-width: 38em) { 23 | font-size: 20px; 24 | } 25 | } 26 | 27 | body { 28 | color: #515151; 29 | background-color: #fff; 30 | -webkit-text-size-adjust: 100%; 31 | -ms-text-size-adjust: 100%; 32 | } 33 | 34 | a { 35 | color: #268bd2; 36 | text-decoration: none; 37 | 38 | &:hover, 39 | &:focus { 40 | text-decoration: underline; 41 | } 42 | } 43 | 44 | h1, h2, h3, h4, h5, h6 { 45 | margin-top: 0; 46 | margin-bottom: .5rem; 47 | font-weight: 600; 48 | line-height: 1.1; 49 | color: #333; 50 | letter-spacing: -.025rem; 51 | } 52 | 53 | h1 { 54 | font-size: 2rem; 55 | } 56 | 57 | h2 { 58 | font-size: 1.6rem; 59 | } 60 | 61 | h3 { 62 | font-size: 1.3rem; 63 | } 64 | 65 | h4, h5, h6 { 66 | font-size: 1rem; 67 | } 68 | 69 | p { 70 | margin: 0 0 1rem; 71 | } 72 | 73 | ul, ol, dl { 74 | margin-top: 0; 75 | margin-bottom: 1rem; 76 | } 77 | 78 | dt { 79 | font-weight: bold; 80 | } 81 | 82 | dd { 83 | margin-bottom: .5rem; 84 | } 85 | 86 | ul { 87 | list-style: inside circle; 88 | padding-left: 0; 89 | 90 | li { 91 | margin-bottom: .25rem; 92 | } 93 | 94 | ul, 95 | ol { 96 | margin-top: .25rem; 97 | margin-bottom: .5rem; 98 | } 99 | } 100 | 101 | ol { 102 | list-style: inside decimal; 103 | padding-left: 0; 104 | 105 | li { 106 | margin-bottom: .25rem; 107 | } 108 | 109 | ul, 110 | ol { 111 | margin-top: .25rem; 112 | margin-bottom: .5rem; 113 | } 114 | } 115 | 116 | p + h1, 117 | p + h2, 118 | p + h3, 119 | ul + h1, 120 | ul + h2, 121 | ul + h3, 122 | ol + h1, 123 | ol + h2, 124 | ol + h3 { 125 | margin-top: 1.5rem; 126 | } 127 | 128 | hr { 129 | border: 0; 130 | border-top: .5px solid #eee; 131 | border-bottom: .5px solid #eee; 132 | margin: 1.5rem auto; 133 | } 134 | 135 | strong { 136 | color: #333; 137 | font-weight: 600; 138 | } 139 | 140 | abbr { 141 | font-size: 85%; 142 | font-weight: bold; 143 | color: #555; 144 | text-transform: uppercase; 145 | } 146 | 147 | abbr[title] { 148 | cursor: help; 149 | border-bottom: 1px dotted #e5e5e5; 150 | } 151 | 152 | blockquote { 153 | padding: 0 0 0 1.5rem; 154 | margin: 0 2rem 1rem 0; 155 | color: #999; 156 | border-left: .5rem solid #e5e5e5; 157 | 158 | p:last-child { 159 | margin-bottom: 0; 160 | } 161 | } 162 | 163 | code, 164 | pre { 165 | font-family: Menlo, Monaco, "Courier New", monospace; 166 | } 167 | 168 | code { 169 | padding: .25em .5em; 170 | font-size: 85%; 171 | color: #bf616a; 172 | background-color: #f9f9f9; 173 | border-radius: 3px; 174 | } 175 | 176 | pre { 177 | display: block; 178 | margin-top: 0; 179 | margin-bottom: 1rem; 180 | padding: 1rem; 181 | font-size: .8rem; 182 | line-height: 1.4; 183 | white-space: pre; 184 | white-space: pre-wrap; 185 | word-break: break-all; 186 | // word-wrap: break-word; 187 | background-color: #f9f9f9; 188 | } 189 | 190 | pre code { 191 | padding: 0; 192 | font-size: 100%; 193 | color: inherit; 194 | background-color: transparent; 195 | } 196 | 197 | .highlight { 198 | margin-bottom: 1rem; 199 | border-radius: 4px; 200 | } 201 | 202 | .highlight pre { 203 | margin-bottom: 0; 204 | } 205 | 206 | .gist .gist-file { 207 | font-family: Menlo, Monaco, "Courier New", monospace !important; 208 | } 209 | 210 | .gist .markdown-body { 211 | padding: 15px; 212 | } 213 | 214 | .gist pre { 215 | padding: 0; 216 | background-color: transparent; 217 | } 218 | 219 | .gist .gist-file .gist-data { 220 | font-size: .8rem !important; 221 | line-height: 1.4; 222 | } 223 | 224 | .gist code { 225 | padding: 0; 226 | color: inherit; 227 | background-color: transparent; 228 | border-radius: 0; 229 | } 230 | 231 | img { 232 | display: block; 233 | max-width: 100%; 234 | margin: 0 0 1rem; 235 | border-radius: 5px; 236 | } 237 | 238 | table { 239 | margin-bottom: 1rem; 240 | width: 100%; 241 | border: 1px solid #e5e5e5; 242 | border-collapse: collapse; 243 | } 244 | 245 | td, 246 | th { 247 | padding: .25rem .5rem; 248 | border: 1px solid #e5e5e5; 249 | } 250 | 251 | tbody tr:nth-child(odd) td, 252 | tbody tr:nth-child(odd) th { 253 | background-color: #f9f9f9; 254 | } 255 | 256 | .lead { 257 | font-size: 1.25rem; 258 | } 259 | 260 | .container { 261 | max-width: 38rem; 262 | padding: 2rem 1.5rem; 263 | margin-left: auto; 264 | margin-right: auto; 265 | 266 | @media (min-width: 38rem){ 267 | padding: 5rem 1rem; 268 | } 269 | } 270 | 271 | .masthead { 272 | 273 | &-title { 274 | font-weight: 300; 275 | 276 | a { 277 | color: #333; 278 | 279 | &:hover, 280 | &:focus { 281 | text-decoration: none; 282 | } 283 | } 284 | 285 | span { 286 | color: #ddd; 287 | } 288 | 289 | } 290 | 291 | &-title--small { 292 | margin-bottom: .75rem; 293 | font-size: .75rem; 294 | font-weight: 600; 295 | text-transform: uppercase; 296 | 297 | a { 298 | color: #333; 299 | 300 | &:hover, 301 | &:focus { 302 | text-decoration: none; 303 | } 304 | } 305 | } 306 | 307 | .masthead-nav { 308 | margin-bottom: 2rem; 309 | 310 | a { 311 | color: #aaa; 312 | font-weight: 300; 313 | text-transform: lowercase; 314 | -webkit-transition: all .2s ease; 315 | -moz-transition: all .2s ease; 316 | transition: all .2s ease; 317 | 318 | &:hover, 319 | &:focus { 320 | color: #333; 321 | text-decoration: none; 322 | } 323 | 324 | + a { 325 | margin-left: .25rem; 326 | } 327 | } 328 | } 329 | 330 | } 331 | 332 | .page { 333 | &-title { 334 | margin-bottom: 2rem; 335 | } 336 | } 337 | 338 | .post { 339 | &-title { 340 | margin-bottom: .25rem; 341 | } 342 | &-date { 343 | margin-bottom: 2rem; 344 | font-size: .75rem; 345 | text-transform: uppercase; 346 | } 347 | } 348 | 349 | .list { 350 | &-post-title { 351 | margin-bottom: .25rem; 352 | 353 | a { 354 | color: #333; 355 | 356 | &:hover, 357 | &:focus { 358 | text-decoration: none; 359 | } 360 | } 361 | } 362 | &-post-date { 363 | margin-bottom: 1rem; 364 | font-size: .75rem; 365 | text-transform: uppercase; 366 | } 367 | } 368 | 369 | .projects-list { 370 | a { 371 | color: #333; 372 | } 373 | } 374 | 375 | .highlight .hll { background-color: #ffffcc } 376 | .highlight .c { color: #999988; font-style: italic } /* Comment */ 377 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 378 | .highlight .k { color: #000000; font-weight: bold } /* Keyword */ 379 | .highlight .o { color: #000000; font-weight: bold } /* Operator */ 380 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 381 | .highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ 382 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ 383 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 384 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 385 | .highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */ 386 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 387 | .highlight .gh { color: #999999 } /* Generic.Heading */ 388 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 389 | .highlight .go { color: #888888 } /* Generic.Output */ 390 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 391 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 392 | .highlight .gu { color: #aaaaaa } /* Generic.Subheading */ 393 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 394 | .highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ 395 | .highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ 396 | .highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ 397 | .highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ 398 | .highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ 399 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 400 | .highlight .m { color: #009999 } /* Literal.Number */ 401 | .highlight .s { color: #d01040 } /* Literal.String */ 402 | .highlight .na { color: #008080 } /* Name.Attribute */ 403 | .highlight .nb { color: #0086B3 } /* Name.Builtin */ 404 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ 405 | .highlight .no { color: #008080 } /* Name.Constant */ 406 | .highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ 407 | .highlight .ni { color: #800080 } /* Name.Entity */ 408 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ 409 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ 410 | .highlight .nl { color: #990000; font-weight: bold } /* Name.Label */ 411 | .highlight .nn { color: #555555 } /* Name.Namespace */ 412 | .highlight .nt { color: #000080 } /* Name.Tag */ 413 | .highlight .nv { color: #008080 } /* Name.Variable */ 414 | .highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ 415 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 416 | .highlight .mf { color: #009999 } /* Literal.Number.Float */ 417 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */ 418 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */ 419 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */ 420 | .highlight .sb { color: #d01040 } /* Literal.String.Backtick */ 421 | .highlight .sc { color: #d01040 } /* Literal.String.Char */ 422 | .highlight .sd { color: #d01040 } /* Literal.String.Doc */ 423 | .highlight .s2 { color: #d01040 } /* Literal.String.Double */ 424 | .highlight .se { color: #d01040 } /* Literal.String.Escape */ 425 | .highlight .sh { color: #d01040 } /* Literal.String.Heredoc */ 426 | .highlight .si { color: #d01040 } /* Literal.String.Interpol */ 427 | .highlight .sx { color: #d01040 } /* Literal.String.Other */ 428 | .highlight .sr { color: #009926 } /* Literal.String.Regex */ 429 | .highlight .s1 { color: #d01040 } /* Literal.String.Single */ 430 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */ 431 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ 432 | .highlight .vc { color: #008080 } /* Name.Variable.Class */ 433 | .highlight .vg { color: #008080 } /* Name.Variable.Global */ 434 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */ 435 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ 436 | --------------------------------------------------------------------------------