├── .gitignore ├── 404.md ├── CNAME ├── LICENSE.txt ├── README.md ├── _config.yml ├── _includes ├── analytics.html ├── disqus.html ├── meta.html └── svg-icons.html ├── _layouts ├── blog.html ├── default.html ├── page.html └── post.html ├── _posts ├── 2016-03-06-Eternal-Lorem-Ipsum.md └── 2016-03-08-Eternal-Lorem-Ipsum.md ├── _sass ├── _highlights.scss ├── _jekyll-mono.scss ├── _reset.scss └── _variables.scss ├── about.md ├── images ├── 404.jpg ├── avatar.jpg ├── bg.jpg ├── post.PNG ├── ss-color.png └── ss.png ├── index.html ├── projects.md └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .DS_Store 3 | .jekyll 4 | .jekyll-metadata 5 | .bundle 6 | .sass-cache 7 | Gemfile 8 | Gemfile.lock 9 | node_modules 10 | package.json -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: 404 - Page not found 4 | --- 5 | 6 | Sorry, we can't find that page that you're looking for. You can try again by going [back to the homepage]({{ site.baseurl }}/). 7 | 8 | [Constructocat by https://github.com/jasoncostello]({{ site.baseurl }}/) 9 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2016 Akshay Agarwal 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jekyll-Mono 2 | 3 | **Jekyll-Mono** is a simple and elegant GitHub Profile cum Blog theme based on Barry Clark's [Jekyll-Now](https://github.com/barryclark/jekyll-now). It's a result of my attempt to learn **Jekyll** and create a minimalistic theme to put up my CV alongwith some blog posts. 4 | 5 | It is crafted with 💙 by [Akshay Agarwal](https://github.com/AkshayAgarwal007). 6 | 7 | ![Jekyll-Mono Home Page](/images/ss.png) 8 | 9 | 10 | ## What is Jekyll? 11 | 12 | It is a static site generator. It takes your content written in Markdown, passes it through your templates and spits it out as a complete static website, ready to be served using GitHub pages for free. 13 | Because your entire blog is static it serves and perform faster. It consumes less web resources namely memory and I/O. 14 | 15 | ## Getting Started 16 | 17 | Let's quickly set up your new blog in a matter of minutes. 18 | 19 | ### Fork this repository 20 | 21 | Hit the “Fork” button in the top-right corner of the repository to fork a copy of this theme to your GitHub account and rename it to **yourusername.github.io** and then visit https://yourusername.github.io and you'll be able to see your newly created blog using Jekyll-Mono. 22 | 23 | ### Customise Jekyll-Mono 24 | 25 | So now your blog is live with its default settings. Let's customise it now. 26 | 27 | Edit the _config.yml and enter your site name and description. You can easily turn on Google Analytics tracking, Disqus commenting and cool loking social icons here too. 28 | 29 | Jekyll-Mono also comes with the option of setting up the color scheme of your blog. You can do this by editing _variables.scss that lies inside the _sass folder. You can change the main theme color by simply replacing the current hex color value of `$mono` with the one of your choice. A few main theme sample colors are included in there as comments. Apart from the main theme color you can also change the header link color, navbar hover color, hyperlink color as well as the color of the various headings. 30 | 31 | A look at the customisations you can do with _variable.scss 32 | 33 | ``` 34 | // Main theme colors 35 | // Some cool main theme colors(violet:#8476ad;blue:#5cacee;red:#ff7373,#ff6f69;green:#6acf64,#2ddbb3;orange:#ffa268) 36 | 37 | $mono-color:#8476ad; // main theme color(header, links, footer icons, buttons, post-title) 38 | $hl-color: $darkGray; // header link color (author name and posted on date) for blog post meta 39 | $navbar-hover-color:$gray; // navbar hover color (site name and navbar links hover color) 40 | $link-color: $darkerGray; // normal hyperlink color other than the ones above. 41 | 42 | 43 | // Heading colors 44 | // You can play around with these too! 45 | $h1-color: $mono-color; 46 | $h2-color: $mono-color; 47 | $h3-color: $darkerGray; 48 | $h4-color: $gray; 49 | ``` 50 | Have a look at Jekyll-Mono with four different main theme colors. 51 | 52 | ![Jekyll Mono in 4 different colors](/images/ss-color.png) 53 | 54 | Finally you need to set up your avatar. Pick up your avatar, resize it to 220x220px simply using paint or any editor of your choice and upload it to the images folder. Now open _variables.scss, you'll see something like this `$avatar: "/images/avatar.jpg";`. Here change the avatar.jpg to what you have uploaded just now. 55 | 56 | 57 | ### Start Blogging 58 | 59 | Publish your first blog post by editing /_posts/2016-03-06-Eternal-Lorem-Ipsum.md. [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) might come in handy while writing your blog posts in Markdown. If you are not comfortable with writing in Markdown you can use [Prose](http://prose.io/) for writing your blog posts. [This](https://developmentseed.org/blog/2012/june/25/prose-a-content-editor-for-github/s) will help you in setting up prose. 60 | 61 | ![Post](/images/post.PNG) 62 | 63 | To create a post just click on create new file button in /_posts/. Create a new file with the following naming convention: **year-month-day-title.md**. Also make sure to include the front-matter at the top of each new blog post. 64 | 65 | You can see the front matter at the top of /_posts/2016-03-06-Eternal-Lorem-Ipsum.md. It looks something like this. You have to change the title and author according to your post. The layout will remain the same. 66 | 67 | ``` 68 | --- 69 | layout: post 70 | title: The Eternal Lorem Ipsum Placeholder Text Here 71 | author: Author Name 72 | --- 73 | 74 | ``` 75 | 76 | ### About and Projects Page 77 | 78 | In the parent folder you'll find about.md and projects.md. These are templates for helping you to set up your biodata/CV and projects that will be available at yourusername.github.io/about and yourusername.github.io/projects respectively. Again you can edit it in Markdown on GitHub or using Prose as per your choice. 79 | 80 | 81 | ## Demo 82 | 83 | You can see the live demo of this theme at http://akshayagarwal007.github.io/Jekyll-Mono/ 84 | 85 | ## Local Development 86 | 87 | For setting up your development environment you can follow the official Jekyll [Documentation](https://jekyllrb.com/docs/installation/). It's a little bit complicated for Windows users. Let's see how it's done on windows: 88 | 89 | 1. **Install Chocolatey**. **[Chocolatey](https://chocolatey.org)** is a package manager for windows. It's awesome. 90 | Open a command propmt with administrator access. Paste this. Hit Enter and restart the command prompt. 91 | 92 | ``` 93 | @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin 94 | 95 | ``` 96 | 97 | 2. **Install Ruby** : In your command prompt type `choco install ruby -y`. 98 | Hit Enter. After installation restart the cmd with administrator privileges. 99 | 100 | 3. **Install Jekyll/Sass (plug-ins used by GitHub Pages)**: `gem install github-pages` 101 | 102 | 4. **Clone your fork of Jekyll-Mono** `git clone https://github.com/yourusername/yourusername.github.io.git` 103 | 104 | 5. **Serve the site** by `jekyll serve`. It regenerates itself after any changes has been made. 105 | 106 | 6. **View your site** at http://127.0.0.1:4000/ 107 | 108 | 7. If you make any changes to _config.yml you'll need to rebuild the site using `jekyll build` and then again a `jekyll serve` to serve it. You'll need to do a rebuild only if you want to see the changes locally, else you can simply commit your changes and push them to your GitHub repo, GitHub pages will rebuild and serve your website. 109 | 110 | ## Credits 111 | 112 | * [Barry Clark](https://github.com/barryclark) for creating [Jekyll-Now](https://github.com/barryclark/jekyll-now) on which this theme is based. 113 | * [Manoela Ilic](https://github.com/crnacura) of Codrops for writing awesome articles on web design. 114 | * [David Miller](https://github.com/davidtmiller) of Blackrock Digital for making awesome open source themes. 115 | * [Jekyll](https://github.com/jekyll/jekyll) - Thanks to its creator and contributors. 116 | * [Font-Awesome](http://fontawesome.io) - Thanks to its creator and contributors. 117 | 118 | ## Contributing 119 | 120 | * Found a bug? Report it on GitHub [Issues](https://github.com/AkshayAgarwal007/Jekyll-Mono/issues) and include a code sample. 121 | * [Fork](https://github.com/AkshayAgarwal007/Jekyll-Mono/fork) the repository and start your own blog using it and let me know about it so that I can include a reference to it here. Probably the best way you can contribute :) 122 | * If you find anything that's wrong or want to talk to me about anything related to this theme or want to contribute in any way, please feel free to [mail me](mailto:agarwal.akshay.akshay8@gmail.com). 123 | 124 | ## License 125 | 126 | Jekyll-Mono is licensed under [MIT](https://github.com/AkshayAgarwal007/Jekyll-Mono/blob/master/LICENSE.txt). 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # 2 | # This file contains configuration flags to customize your site 3 | # 4 | 5 | # Name of your site (displayed in the header) 6 | name: Your Username 7 | 8 | # Short bio or description (displayed in the header) 9 | description: Programmer From Somewhere On Earth 10 | 11 | 12 | # 13 | # Flags below are optional 14 | # 15 | 16 | # Includes an icon in the footer for each username you enter 17 | footer-links: 18 | dribbble: 19 | email: agarwal.akshay.akshay8@gmail.com 20 | facebook: 21 | flickr: 22 | github: AkshayAgarwal007 23 | instagram: 24 | linkedin: akshay-agarwal-782018a4 25 | pinterest: 26 | rss: # just type anything here for a working RSS icon 27 | twitter: 28 | stackoverflow: # your stackoverflow profile, e.g. "users/3807565/akshay" 29 | youtube: # channel/ or user/ 30 | googleplus: # anything in your profile username that comes after plus.google.com/ 31 | 32 | 33 | # Enter your Disqus shortname (not your username) to enable commenting on posts 34 | # You can find your shortname on the Settings page of your Disqus account 35 | disqus: 36 | 37 | # Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking 38 | google_analytics: 39 | 40 | # Your website URL (e.g. http://akshayagarwal007.github.io) 41 | # Used for Sitemap.xml and your RSS feed 42 | url: 43 | 44 | # If you're hosting your site at a Project repository on GitHub pages 45 | # (http://yourusername.github.io/repository-name) 46 | # and NOT your User repository (http://yourusername.github.io) 47 | # then add in the baseurl here, like this: "/repository-name" 48 | baseurl: "" 49 | 50 | # 51 | # !! You don't need to change any of the configuration flags below !! 52 | # 53 | 54 | permalink: /:title/ 55 | 56 | # Jekyll 3 now only supports Kramdown for Markdown 57 | kramdown: 58 | # Use GitHub flavored markdown, including triple backtick fenced code blocks 59 | input: GFM 60 | # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting 61 | syntax_highlighter: rouge 62 | syntax_highlighter_opts: 63 | # Use existing pygments syntax highlighting css 64 | css_class: 'highlight' 65 | 66 | # Set the Sass partials directory, as we're using @imports 67 | sass: 68 | style: :expanded # You might prefer to minify using :compressed 69 | 70 | # Use the following plug-ins 71 | gems: 72 | - jekyll-sitemap # Create a sitemap using the official Jekyll sitemap gem 73 | - jekyll-feed # Create an Atom feed using the official Jekyll feed gem 74 | 75 | # Exclude these files from your production _site 76 | exclude: 77 | - Gemfile 78 | - Gemfile.lock 79 | - LICENSE 80 | - README.md 81 | - CNAME -------------------------------------------------------------------------------- /_includes/analytics.html: -------------------------------------------------------------------------------- 1 | {% if site.google_analytics %} 2 | 3 | 15 | 16 | {% endif %} 17 | -------------------------------------------------------------------------------- /_includes/disqus.html: -------------------------------------------------------------------------------- 1 | {% if site.disqus %} 2 |
3 |
4 | 15 | 16 |
17 | {% endif %} -------------------------------------------------------------------------------- /_includes/meta.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.excerpt %} 7 | 8 | 9 | {% else %} 10 | 11 | 12 | {% endif %} 13 | 14 | 15 | {% if page.title %} 16 | 17 | 18 | {% endif %} -------------------------------------------------------------------------------- /_includes/svg-icons.html: -------------------------------------------------------------------------------- 1 | {% if site.footer-links.dribbble %}{% endif %} 2 | {% if site.footer-links.email %}{% endif %} 3 | {% if site.footer-links.facebook %}{% endif %} 4 | {% if site.footer-links.flickr %}{% endif %} 5 | {% if site.footer-links.github %}{% endif %} 6 | {% if site.footer-links.instagram %}{% endif %} 7 | {% if site.footer-links.linkedin %}{% endif %} 8 | {% if site.footer-links.pinterest %}{% endif %} 9 | {% if site.footer-links.rss %}{% endif %} 10 | {% if site.footer-links.twitter %}{% endif %} 11 | {% if site.footer-links.stackoverflow %}{% endif %} 12 | {% if site.footer-links.youtube %}{% endif %} 13 | {% if site.footer-links.googleplus %}{% endif %} 14 | -------------------------------------------------------------------------------- /_layouts/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% if page.title %}{{ page.title }} – {% endif %}{{ site.name }} – {{ site.description }} 5 | 6 | {% include meta.html %} 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |

{{page.title}}

26 | Posted by {{page.author}} 27 | on {{ page.date | date: "%B %e, %Y" }} 28 | { Return to Blog } 29 | 30 |
31 | 32 |
33 |
34 | 35 | 36 |
37 | {{ content }} 38 |
39 | 40 | 49 | 50 | 51 | {% include analytics.html %} 52 | 53 | 54 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% if page.title %}{{ page.title }} – {% endif %}{{ site.name }} – {{ site.description }} 5 | 6 | {% include meta.html %} 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 |
25 |
26 |

{{ site.name }}

27 |

{{ site.description }}

28 |
29 | 34 |
35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
    43 |
  • 44 |
    45 |
    46 |
    47 |
    48 |
    49 |

    {{site.name}}

    50 |


    View on LinkedIn

    51 |
    52 |
    53 |
    54 |
    55 |
  • 56 |
57 |
58 | 59 |
60 | 61 |
62 |
63 | 64 |
65 | {{ content }} 66 |
67 | 68 | 77 | 78 | {% include analytics.html %} 79 | 80 | 81 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | 7 |

{{ page.title }}

8 | 9 |
10 | {{ content }} 11 |
12 |
13 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: blog 3 | --- 4 | 5 |
6 |
7 |
8 | 9 |
10 | {{ content }} 11 |
12 | 13 | {% include disqus.html %} 14 |
15 | 16 | -------------------------------------------------------------------------------- /_posts/2016-03-06-Eternal-Lorem-Ipsum.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: The Eternal Lorem Ipsum Placeholder Text Here 4 | author: Author Name 5 | --- 6 | 7 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. 8 | 9 | ## The Eternal Lorem Ipsum? 10 | ----- 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 13 | 14 | Nam maximus tempor feugiat. Mauris tristique imperdiet nulla id egestas. Proin eget lobortis magna. Duis consectetur nibh at elit viverra congue. Ut eu turpis enim. Suspendisse laoreet, diam sed consequat sodales, felis dolor accumsan justo, nec scelerisque mi sem quis dolor. Etiam ornare venenatis massa, a suscipit ex. Ut quis lectus id nibh mattis rutrum. Nunc vel cursus eros, at blandit mi. Vivamus ac posuere libero. 15 | 16 | -------------------------------------------------------------------------------- /_posts/2016-03-08-Eternal-Lorem-Ipsum.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: The Eternal Lorem Ipsum Placeholder Text Here 4 | author: Author Name 5 | --- 6 | 7 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. 8 | 9 | ## The Eternal Lorem Ipsum? 10 | ----- 11 | 12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 13 | 14 | Nam maximus tempor feugiat. Mauris tristique imperdiet nulla id egestas. Proin eget lobortis magna. Duis consectetur nibh at elit viverra congue. Ut eu turpis enim. Suspendisse laoreet, diam sed consequat sodales, felis dolor accumsan justo, nec scelerisque mi sem quis dolor. Etiam ornare venenatis massa, a suscipit ex. Ut quis lectus id nibh mattis rutrum. Nunc vel cursus eros, at blandit mi. Vivamus ac posuere libero. 15 | 16 | -------------------------------------------------------------------------------- /_sass/_highlights.scss: -------------------------------------------------------------------------------- 1 | 2 | .highlight { 3 | background-color: #efefef; 4 | padding: 7px 7px 7px 10px; 5 | border: 1px solid #ddd; 6 | -moz-box-shadow: 3px 3px rgba(0,0,0,0.1); 7 | -webkit-box-shadow: 3px 3px rgba(0,0,0,0.1); 8 | box-shadow: 3px 3px rgba(0,0,0,0.1); 9 | margin: 20px 0 20px 0; 10 | overflow: scroll; 11 | } 12 | 13 | code { 14 | font-family:'Bitstream Vera Sans Mono','Courier', monospace; 15 | } 16 | 17 | .highlight .c { color: #586E75 } /* Comment */ 18 | .highlight .err { color: #93A1A1 } /* Error */ 19 | .highlight .g { color: #93A1A1 } /* Generic */ 20 | .highlight .k { color: #859900 } /* Keyword */ 21 | .highlight .l { color: #93A1A1 } /* Literal */ 22 | .highlight .n { color: #93A1A1 } /* Name */ 23 | .highlight .o { color: #859900 } /* Operator */ 24 | .highlight .x { color: #CB4B16 } /* Other */ 25 | .highlight .p { color: #93A1A1 } /* Punctuation */ 26 | .highlight .cm { color: #586E75 } /* Comment.Multiline */ 27 | .highlight .cp { color: #859900 } /* Comment.Preproc */ 28 | .highlight .c1 { color: #586E75 } /* Comment.Single */ 29 | .highlight .cs { color: #859900 } /* Comment.Special */ 30 | .highlight .gd { color: #2AA198 } /* Generic.Deleted */ 31 | .highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */ 32 | .highlight .gr { color: #DC322F } /* Generic.Error */ 33 | .highlight .gh { color: #CB4B16 } /* Generic.Heading */ 34 | .highlight .gi { color: #859900 } /* Generic.Inserted */ 35 | .highlight .go { color: #93A1A1 } /* Generic.Output */ 36 | .highlight .gp { color: #93A1A1 } /* Generic.Prompt */ 37 | .highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */ 38 | .highlight .gu { color: #CB4B16 } /* Generic.Subheading */ 39 | .highlight .gt { color: #93A1A1 } /* Generic.Traceback */ 40 | .highlight .kc { color: #CB4B16 } /* Keyword.Constant */ 41 | .highlight .kd { color: #268BD2 } /* Keyword.Declaration */ 42 | .highlight .kn { color: #859900 } /* Keyword.Namespace */ 43 | .highlight .kp { color: #859900 } /* Keyword.Pseudo */ 44 | .highlight .kr { color: #268BD2 } /* Keyword.Reserved */ 45 | .highlight .kt { color: #DC322F } /* Keyword.Type */ 46 | .highlight .ld { color: #93A1A1 } /* Literal.Date */ 47 | .highlight .m { color: #2AA198 } /* Literal.Number */ 48 | .highlight .s { color: #2AA198 } /* Literal.String */ 49 | .highlight .na { color: #93A1A1 } /* Name.Attribute */ 50 | .highlight .nb { color: #B58900 } /* Name.Builtin */ 51 | .highlight .nc { color: #268BD2 } /* Name.Class */ 52 | .highlight .no { color: #CB4B16 } /* Name.Constant */ 53 | .highlight .nd { color: #268BD2 } /* Name.Decorator */ 54 | .highlight .ni { color: #CB4B16 } /* Name.Entity */ 55 | .highlight .ne { color: #CB4B16 } /* Name.Exception */ 56 | .highlight .nf { color: #268BD2 } /* Name.Function */ 57 | .highlight .nl { color: #93A1A1 } /* Name.Label */ 58 | .highlight .nn { color: #93A1A1 } /* Name.Namespace */ 59 | .highlight .nx { color: #555 } /* Name.Other */ 60 | .highlight .py { color: #93A1A1 } /* Name.Property */ 61 | .highlight .nt { color: #268BD2 } /* Name.Tag */ 62 | .highlight .nv { color: #268BD2 } /* Name.Variable */ 63 | .highlight .ow { color: #859900 } /* Operator.Word */ 64 | .highlight .w { color: #93A1A1 } /* Text.Whitespace */ 65 | .highlight .mf { color: #2AA198 } /* Literal.Number.Float */ 66 | .highlight .mh { color: #2AA198 } /* Literal.Number.Hex */ 67 | .highlight .mi { color: #2AA198 } /* Literal.Number.Integer */ 68 | .highlight .mo { color: #2AA198 } /* Literal.Number.Oct */ 69 | .highlight .sb { color: #586E75 } /* Literal.String.Backtick */ 70 | .highlight .sc { color: #2AA198 } /* Literal.String.Char */ 71 | .highlight .sd { color: #93A1A1 } /* Literal.String.Doc */ 72 | .highlight .s2 { color: #2AA198 } /* Literal.String.Double */ 73 | .highlight .se { color: #CB4B16 } /* Literal.String.Escape */ 74 | .highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */ 75 | .highlight .si { color: #2AA198 } /* Literal.String.Interpol */ 76 | .highlight .sx { color: #2AA198 } /* Literal.String.Other */ 77 | .highlight .sr { color: #DC322F } /* Literal.String.Regex */ 78 | .highlight .s1 { color: #2AA198 } /* Literal.String.Single */ 79 | .highlight .ss { color: #2AA198 } /* Literal.String.Symbol */ 80 | .highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */ 81 | .highlight .vc { color: #268BD2 } /* Name.Variable.Class */ 82 | .highlight .vg { color: #268BD2 } /* Name.Variable.Global */ 83 | .highlight .vi { color: #268BD2 } /* Name.Variable.Instance */ 84 | .highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */ -------------------------------------------------------------------------------- /_sass/_jekyll-mono.scss: -------------------------------------------------------------------------------- 1 | /****************************/ 2 | /* JEKYLL-mono-color */ 3 | /***************************/ 4 | 5 | 6 | /* 7 | *Title 8 | */ 9 | 10 | .site-name { 11 | a { 12 | color: $white; 13 | text-decoration: none; 14 | cursor: pointer; 15 | &:hover{ 16 | color: darken($navbar-hover-color,20); 17 | } 18 | } 19 | } 20 | 21 | .post { 22 | a { 23 | color: $mono-color; 24 | &:hover{ 25 | color: darken($mono-color,20); 26 | } 27 | } 28 | } 29 | 30 | .post-heading { 31 | a { 32 | color: $hl-color; 33 | &:hover{ 34 | color: darken($hl-color,20); 35 | } 36 | } 37 | } 38 | 39 | /* 40 | *Buttons 41 | */ 42 | 43 | .button, 44 | button, { 45 | display: inline-block; 46 | height: 38px; 47 | padding: 0 30px; 48 | color: #555; 49 | text-align: center; 50 | font-size: 13px; 51 | font-weight: 600; 52 | line-height: 38px; 53 | letter-spacing: .1rem; 54 | text-decoration: none; 55 | white-space: nowrap; 56 | background-color: transparent; 57 | border-radius: 4px; 58 | border: 1px solid #bbb; 59 | cursor: pointer; 60 | box-sizing: border-box; 61 | } 62 | 63 | .button:hover, 64 | button:hover, 65 | .button:focus, 66 | button:focus,{ 67 | color: #333; 68 | border-color: #888; 69 | outline: 0; } 70 | 71 | .button.button-primary, 72 | button.button-primary, { 73 | color: $mono-color; 74 | background-color: transparent; 75 | border-color: $mono-color; 76 | } 77 | 78 | .button.button-primary:hover, 79 | button.button-primary:hover, 80 | .button.button-primary:focus, 81 | button.button-primary:focus { 82 | color: #FFF; 83 | background-color: $mono-color; 84 | border-color: $mono-color; 85 | } 86 | 87 | /* 88 | *Header 89 | */ 90 | 91 | .intro-header { 92 | border-top: 5px solid white; 93 | background-color:$mono-color; 94 | } 95 | 96 | .intro-header .post-heading { 97 | padding: 100px 0 50px; 98 | color: $white; 99 | 100 | } 101 | 102 | .intro-header .post-heading h1 { 103 | color:$white; 104 | font-size: 36px; 105 | line-height: 1.5; 106 | font-family:$raleway ; 107 | } 108 | 109 | @media only screen and (min-width: 768px) { 110 | .intro-header .post-heading{ 111 | padding: 150px 0; 112 | } 113 | } 114 | 115 | /* 116 | *empty spaces 117 | */ 118 | 119 | .space-medium { 120 | padding: 100px 0 50px; 121 | } 122 | 123 | .space-small { 124 | padding: 50px 0 25px; 125 | } 126 | 127 | .space-extra-small { 128 | padding: 30px 0 15px; 129 | } 130 | 131 | /* 132 | *svg-icons 133 | 134 | */ 135 | 136 | .svg-icon { 137 | a { 138 | color:darken($mono-color,10); 139 | cursor: pointer; 140 | &:hover { 141 | color: darken($mono-color,20); 142 | } 143 | } 144 | } 145 | 146 | /* 147 | *Image Hover Effects 148 | */ 149 | 150 | .centered { 151 | margin-left: auto; 152 | margin-right: auto; 153 | } 154 | 155 | .ch-grid { 156 | 157 | padding: 0; 158 | list-style: none; 159 | display: block; 160 | text-align: center; 161 | width: 100%; 162 | 163 | } 164 | 165 | .ch-grid:after, 166 | .ch-item:before { 167 | content: ''; 168 | display: table; 169 | } 170 | 171 | .ch-grid:after { 172 | clear: both; 173 | } 174 | 175 | .ch-grid li { 176 | width: 220px; 177 | height: 220px; 178 | display: inline-block; 179 | } 180 | 181 | .ch-item { 182 | width: 100%; 183 | height: 100%; 184 | border-radius: 50%; 185 | position: relative; 186 | box-shadow: 0 1px 2px rgba(0,0,0,0.1); 187 | cursor: default; 188 | } 189 | 190 | .ch-info-wrap, 191 | .ch-info{ 192 | position: absolute; 193 | width: 180px; 194 | height: 180px; 195 | border-radius: 50%; 196 | } 197 | 198 | .ch-info-wrap { 199 | top: 20px; 200 | left: 20px; 201 | background: #fff url(/images/bg.jpg); 202 | box-shadow: 203 | 0 0 0 20px rgba(255,255,255,0.2), 204 | inset 0 0 3px rgba(115,114, 23, 0.8); 205 | } 206 | 207 | .ch-info > div { 208 | display: block; 209 | position: absolute; 210 | width: 100%; 211 | height: 100%; 212 | border-radius: 50%; 213 | background-position: center center; 214 | -webkit-backface-visibility: hidden; 215 | } 216 | 217 | .ch-info .ch-info-front { 218 | -webkit-transition: all 0.6s ease-in-out; 219 | -moz-transition: all 0.6s ease-in-out; 220 | -o-transition: all 0.6s ease-in-out; 221 | -ms-transition: all 0.6s ease-in-out; 222 | transition: all 0.6s ease-in-out; 223 | } 224 | 225 | .ch-info .ch-info-back { 226 | opacity: 0; 227 | background: #fff; 228 | pointer-events: none; 229 | -webkit-transform: scale(1.5); 230 | -moz-transform: scale(1.5); 231 | -o-transform: scale(1.5); 232 | -ms-transform: scale(1.5); 233 | transform: scale(1.5); 234 | -webkit-transition: all 0.4s ease-in-out 0.2s; 235 | -moz-transition: all 0.4s ease-in-out 0.2s; 236 | -o-transition: all 0.4s ease-in-out 0.2s; 237 | -ms-transition: all 0.4s ease-in-out 0.2s; 238 | transition: all 0.4s ease-in-out 0.2s; 239 | } 240 | 241 | .ch-img-1 { 242 | background-image: url(#{$avatar}); 243 | } 244 | 245 | .ch-info h3 { 246 | color: #000; 247 | text-transform: uppercase; 248 | letter-spacing: 2px; 249 | font-size: 18px; 250 | margin: 0 15px; 251 | padding: 40px 0 0 0; 252 | height: 80px; 253 | font-family: 'Open Sans', Arial, sans-serif; 254 | text-shadow: 255 | 0 0 1px #fff, 256 | 0 1px 2px rgba(0,0,0,0.3); 257 | } 258 | 259 | .ch-info p { 260 | color: #fff; 261 | padding: 10px 5px 0; 262 | font-style: italic; 263 | margin: 0 30px; 264 | font-size: 12px; 265 | 266 | } 267 | 268 | .ch-info p a { 269 | display: block; 270 | color: $mono-color; 271 | font-style: normal; 272 | font-weight: 700; 273 | text-transform: uppercase; 274 | font-size: 9px; 275 | letter-spacing: 1px; 276 | padding-top: 4px; 277 | font-family: 'Open Sans', Arial, sans-serif; 278 | } 279 | 280 | .ch-info p a:hover { 281 | color: darken($mono-color,10%); 282 | } 283 | 284 | .ch-item:hover .ch-info-front { 285 | -webkit-transform: scale(0); 286 | -moz-transform: scale(0); 287 | -o-transform: scale(0); 288 | -ms-transform: scale(0); 289 | transform: scale(0); 290 | opacity: 0; 291 | } 292 | 293 | .ch-item:hover .ch-info-back { 294 | -webkit-transform: scale(1); 295 | -moz-transform: scale(1); 296 | -o-transform: scale(1); 297 | -ms-transform: scale(1); 298 | transform: scale(1); 299 | opacity: 1; 300 | pointer-events: auto; 301 | } 302 | 303 | -------------------------------------------------------------------------------- /_sass/_reset.scss: -------------------------------------------------------------------------------- 1 | 2 | /***************/ 3 | /* MEYER RESET */ 4 | /***************/ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | // HTML5 display-role reset for older browsers 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | *, *:before, *:after { 51 | -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 52 | } 53 | -------------------------------------------------------------------------------- /_sass/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // 3 | // VARIABLES 4 | // 5 | 6 | 7 | // Colors 8 | 9 | $black: #000; 10 | $darkerGray: #222; 11 | $darkGray: #333; 12 | $gray: #666; 13 | $lightGray: #eee; 14 | $white: #fff; 15 | $blue: #4183C4; 16 | 17 | 18 | // Main theme colors 19 | // Some cool main theme colors(violet:#8476ad;blue:#5cacee;red:#ff7373,#ff6f69;green:#6acf64,#2ddbb3;orange:#ffa268) 20 | 21 | $mono-color:#8476ad; // main theme color(header, links, footer icons, buttons, post-title) 22 | $hl-color: $darkGray; // header link color (author name and posted on date) for blog post meta 23 | $navbar-hover-color:$gray; // navbar hover color (site name and navbar links hover color) 24 | $link-color: $darkerGray; // normal hyperlink color other than the ones above. 25 | 26 | 27 | // Heading colors 28 | // You can play around with these too! 29 | $h1-color: $mono-color; 30 | $h2-color: $mono-color; 31 | $h3-color: $darkerGray; 32 | $h4-color: $gray; 33 | 34 | // Your avatar 35 | 36 | $avatar: "/images/avatar.jpg"; 37 | 38 | 39 | // Font stacks 40 | $helvetica: Helvetica, Arial, sans-serif; 41 | $helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif; 42 | $raleway: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; 43 | $georgia: Georgia, serif; 44 | 45 | // Mobile breakpoints 46 | @mixin mobile { 47 | @media screen and (max-width: 640px) { 48 | @content; 49 | } 50 | } -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | --- 6 | 7 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 8 | 9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 10 | 11 | Sed faucibus felis purus, sed convallis leo dictum vehicula. 12 | 13 | ## Education 14 | 15 | * ABC degree from XYZ University. 16 | * ABC degree from XYZ University. 17 | * ABC degree from XYZ University. 18 | 19 | ## Roles 20 | 21 | Founder, ABC Organisation 22 | 23 | ## Skills 24 | 25 | * **Skill 1** - `Skill` / `Skill` / `Skill` / `Skill` 26 | * **Skill 2** - `Skill` / `Skill` / `Skill` / `Skill` / `Skill` / `Skill` / `Skill` 27 | * **Skill 3** - `Skill` / `Skill` / `Skill` 28 | * **Skill 4** - `Skill` / `Skill` / `Skill` 29 | * **Skill 5** - `Skill` 30 | * **Skill 6** - `Skill` / `Skill` 31 | 32 | 33 | ## Achievements 34 | 35 | 36 | * [**This is my first achievement**](#) 37 | 38 | Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 39 | 40 | *** 41 | 42 | * [**This is my second achievement**](#) 43 | 44 | Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 45 | 46 | *** 47 | 48 | * [**This is my third achievement**](#) 49 | 50 | Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula 51 | 52 | 53 | ## Contact me 54 | 55 | [agarwal.akshay.akshay8@gmail.com](mailto:agarwal.akshay.akshay8@gmail.com) -------------------------------------------------------------------------------- /images/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AkshayAgarwal007/Jekyll-Mono/b95d8cd77c82f7f6fb990175058d83a2cb46145c/images/404.jpg -------------------------------------------------------------------------------- /images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AkshayAgarwal007/Jekyll-Mono/b95d8cd77c82f7f6fb990175058d83a2cb46145c/images/avatar.jpg -------------------------------------------------------------------------------- /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AkshayAgarwal007/Jekyll-Mono/b95d8cd77c82f7f6fb990175058d83a2cb46145c/images/bg.jpg -------------------------------------------------------------------------------- /images/post.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AkshayAgarwal007/Jekyll-Mono/b95d8cd77c82f7f6fb990175058d83a2cb46145c/images/post.PNG -------------------------------------------------------------------------------- /images/ss-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AkshayAgarwal007/Jekyll-Mono/b95d8cd77c82f7f6fb990175058d83a2cb46145c/images/ss-color.png -------------------------------------------------------------------------------- /images/ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AkshayAgarwal007/Jekyll-Mono/b95d8cd77c82f7f6fb990175058d83a2cb46145c/images/ss.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | {% for post in site.posts %} 7 | 17 | {% endfor %} 18 |
-------------------------------------------------------------------------------- /projects.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Projects 4 | permalink: /projects/ 5 | --- 6 | 7 | ### [Project 1](https://github.com/tux4kids/tuxmania) 8 | Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 9 | 10 | *** 11 | 12 | ### [Project 2](https://github.com/AkshayAgarwal007/Moodly) 13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 14 | 15 | Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 16 | 17 | *** 18 | 19 | ## Other Projects 20 | 21 | ### This Could Be Another Project Name 22 | 23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 24 | 25 | ### This Could Be Yet Another Project Name 26 | 27 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet urna eu dolor placerat varius. Vivamus eros augue, consequat id scelerisque nec, fringilla in est. Proin pellentesque malesuada mauris, quis aliquam augue vestibulum ac. Vestibulum ut feugiat nibh. Sed faucibus felis purus, sed convallis leo dictum vehicula. 28 | 29 | 30 | ## Contact me 31 | 32 | [agarwal.akshay.akshay8@gmail.com](mailto:agarwal.akshay.akshay8@gmail.com) 33 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | // 5 | // IMPORTS 6 | // 7 | 8 | @import "reset"; 9 | @import "variables"; 10 | 11 | 12 | /**************/ 13 | /* BASE RULES */ 14 | /**************/ 15 | 16 | html { 17 | font-size: 100%; 18 | } 19 | 20 | body { 21 | background: $white; 22 | font: 18px/1.4 $helvetica; 23 | color: $darkGray; 24 | } 25 | 26 | .container { 27 | margin: 0 auto; 28 | max-width: 740px; 29 | padding: 0 10px; 30 | width: 100%; 31 | } 32 | 33 | h1, h2, h3, h4, h5, h6 { 34 | font-family: $helveticaNeue; 35 | color: $darkerGray; 36 | font-weight: bold; 37 | 38 | line-height: 1.7; 39 | margin: 1em 0 15px; 40 | padding: 0; 41 | 42 | @include mobile { 43 | line-height: 1.4; 44 | } 45 | } 46 | 47 | h1 { 48 | font-size: 30px; 49 | color: $h1-color; 50 | a { 51 | color: inherit; 52 | } 53 | } 54 | 55 | h2 { 56 | font-size: 24px; 57 | color: $h2-color; 58 | } 59 | 60 | h3 { 61 | font-size: 20px; 62 | color: $h3-color; 63 | } 64 | 65 | h4 { 66 | font-size: 18px; 67 | color: $h4-color; 68 | } 69 | 70 | p { 71 | margin: 15px 0; 72 | } 73 | 74 | a { 75 | color: $link-color; 76 | text-decoration: none; 77 | cursor: pointer; 78 | &:hover, &:active { 79 | color: darken($link-color,20); 80 | } 81 | } 82 | 83 | ul, ol { 84 | margin: 15px 0; 85 | padding-left: 30px; 86 | } 87 | 88 | ul { 89 | list-style-type: disc; 90 | } 91 | 92 | ol { 93 | list-style-type: decimal; 94 | } 95 | 96 | ol ul, ul ol, ul ul, ol ol { 97 | margin: 0; 98 | } 99 | 100 | ul ul, ol ul { 101 | list-style-type: circle; 102 | } 103 | 104 | em, i { 105 | font-style: italic; 106 | } 107 | 108 | strong, b { 109 | font-weight: bold; 110 | } 111 | 112 | img { 113 | max-width: 100%; 114 | } 115 | 116 | // Fixes images in popup boxes from Google Translate 117 | .gmnoprint img { 118 | max-width: none; 119 | } 120 | 121 | .date { 122 | font-style: italic; 123 | color: $gray; 124 | } 125 | 126 | // Specify the color of the selection 127 | ::-moz-selection { 128 | color: $black; 129 | background: $lightGray; 130 | } 131 | ::selection { 132 | color: $black; 133 | background: $lightGray; 134 | } 135 | 136 | .clearfix:before, 137 | .clearfix:after { 138 | content: " "; 139 | display: table; 140 | } 141 | 142 | .clearfix:after { 143 | clear: both; 144 | } 145 | 146 | /*********************/ 147 | /* LAYOUT / SECTIONS */ 148 | /*********************/ 149 | 150 | // 151 | // .masthead 152 | // 153 | 154 | .wrapper-masthead { 155 | margin-bottom: 50px; 156 | } 157 | 158 | .masthead { 159 | padding: 20px 0; 160 | border-bottom: 1px solid $lightGray; 161 | 162 | @include mobile { 163 | text-align: center; 164 | } 165 | } 166 | 167 | .site-avatar { 168 | float: left; 169 | width: 70px; 170 | height: 70px; 171 | margin-right: 15px; 172 | 173 | @include mobile { 174 | float: none; 175 | display: block; 176 | margin: 0 auto; 177 | } 178 | 179 | img { 180 | border-radius: 5px; 181 | } 182 | } 183 | 184 | .site-info { 185 | float: left; 186 | 187 | @include mobile { 188 | float: none; 189 | display: block; 190 | margin: 0 auto; 191 | } 192 | } 193 | 194 | .site-name { 195 | margin: 0; 196 | color: $darkGray; 197 | cursor: pointer; 198 | font-family: $helveticaNeue; 199 | font-weight: 300; 200 | font-size: 28px; 201 | letter-spacing: 1px; 202 | } 203 | 204 | .site-description { 205 | margin: -5px 0 0 0; 206 | color: $white; 207 | font-size: 16px; 208 | 209 | @include mobile { 210 | margin: 3px 0; 211 | } 212 | } 213 | 214 | nav { 215 | float: right; 216 | margin-top: 23px; 217 | font-family: $helveticaNeue; 218 | font-size: 18px; 219 | 220 | @include mobile { 221 | float: none; 222 | margin-top: 9px; 223 | display: block; 224 | font-size: 16px; 225 | } 226 | 227 | a { 228 | margin-left: 20px; 229 | color: $white; 230 | text-align: right; 231 | font-weight: 300; 232 | letter-spacing: 1px; 233 | 234 | &:hover, &:active { 235 | color: darken($navbar-hover-color,20); 236 | } 237 | 238 | @include mobile { 239 | margin: 0 10px; 240 | color: $white; 241 | } 242 | } 243 | } 244 | 245 | // 246 | // .main 247 | // 248 | 249 | .posts > .post { 250 | padding-bottom: 2em; 251 | border-bottom: 1px solid $lightGray; 252 | } 253 | 254 | .posts > .post:last-child { 255 | padding-bottom: 1em; 256 | border-bottom: none; 257 | } 258 | 259 | .post { 260 | blockquote { 261 | margin: 1.8em .8em; 262 | border-left: 2px solid $gray; 263 | padding: 0.1em 1em; 264 | color: $gray; 265 | font-size: 22px; 266 | font-style: italic; 267 | } 268 | 269 | .comments { 270 | margin-top: 10px; 271 | } 272 | 273 | .read-more { 274 | text-transform: uppercase; 275 | font-size: 15px; 276 | } 277 | } 278 | 279 | .wrapper-footer { 280 | margin-top: 50px; 281 | border-top: 1px solid #ddd; 282 | border-bottom: 1px solid #ddd; 283 | background-color: $lightGray; 284 | } 285 | 286 | footer { 287 | padding: 20px 0; 288 | text-align: center; 289 | } 290 | 291 | @import "highlights"; 292 | @import "jekyll-mono"; --------------------------------------------------------------------------------