Code Monkey home page Code Monkey logo

Dark Poole

Dark Poole

Dark Poole is a permanent dark theme of the Poole theme by @mdo. I made the theme darker, inspired by Derek Kedziora's site. Unlike default Poole that utilizes CSS media queries to activate dark mode, the theme will stay dark regardless of the user's preference.

  • I added a navbar that is easily customizable. Check out Development to see how.
  • I also got rid of the "tagline" in the navbar. I think it looks cleaner without it.
  • Finally, I changed the default font size to 20px. I have 20/20 vision and still thought the original font size was too small.

That's it! I tried to be least intrusive as possible to the Poole code base.

I noticed that Poole's documentation is slightly outdated and misleading. This documentation will try to address most, if not all, of these issues.


Contents

Usage

1. Install dependencies

Poole is built on Jekyll and uses its built-in SCSS compiler to generate our CSS. Before getting started, you'll need to install the Jekyll gem and related dependencies:

$ gem install jekyll jekyll-gist jekyll-sitemap jekyll-seo-tag

2. Install bundler

You must have bundler installed. If you already have bundler installed, please skip this step.

# Update Rubygems
$ gem update --system
# Update bundler
$ gem install bundler

3. Running locally

To see your Jekyll site with Poole applied, start a Jekyll server. In Terminal, from /dark-poole (or whatever your Jekyll site's root directory is named):

$ bundle exec jekyll serve

Open http://localhost:4000 in your browser, and voilà.

4. Serving it up

If you host your code on GitHub, you can use GitHub Pages to host your project.

  1. Fork this repo and switch to the gh-pages branch.
  2. If you're using a custom domain name, modify the CNAME file to point to your new domain.
  3. If you're not using a custom domain name, modify the url in _config.yml to point to your GitHub Pages URL. Example: for a site hosted at username.github.io, use http://username.github.io.
  4. If you want to use your repo name as a base url, set the url to your repo link and set the baseurl to your repo name in _config.yml. Example: for site hosted on https://username.github.io/dark-poole, set url as https://username.github.io/dark-poole and baseurl as /dark-poole.
  5. Done! Head to your GitHub Pages URL or custom domain.

No matter your production or hosting setup, be sure to verify the baseurl option file and CNAME settings. Not applying this correctly can mean broken styles on your site.

5. Pagination for sites with base urls

If you are using a base url for your site, (for example, hosted on https://username.github.io/dark-poole) you have to make some changes to get jekyll-pagination to work correctly:

In _config.yml, add this line:

paginate_path: "/baseurl/page:num/"

In archive.md, add {{ site.baseurl }} before {{ post.url }}

<!-- Add "{{ site.baseurl }}" -->
<li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>

In index.html, remove the prepend::

<!-- Remove "prepend:" in "prepend: relative_url" -->
<a
  class="pagination-item newer"
  href="{{ paginator.previous_page_path | relative_url }}"
  >Newer</a
>

Development

Poole has two branches, but only one is used for active development.

  • master for development. All pull requests should be to submitted against master.
  • gh-pages for hosted demo Please avoid using this branch.

CSS is handled via Jeykll's built-in Sass compiler. Source Sass files are located in _sass/, included into styles.scss, and compile to styles.css.

Customize Navbar

You can easily customize the navbar by tweaking the _config.yml file. Simply change the title and url of each of the nav elements, or add more. The order will be preserved in the site.

nav:
  - title: Blog
    url: /archive

  - title: About
    url: /about

Author

Mark Otto

License

Open sourced under the MIT license.

<3

ByungTak's Projects

android-oss icon android-oss

Kickstarter for Android. Bring new ideas to life, anywhere.

beerviewer_mvvm icon beerviewer_mvvm

android kotlin toyproject / mvvm, retrofit2, rxjava2, rxkotlin2, dagger2, aac, repository pattern / PR 환영

doguendoguen icon doguendoguen

2017.05.08 ~ 2017.06.23 T아카데미 안드로이드 개발자 과정 '도근도근' 프로젝트

flutter_svg icon flutter_svg

SVG parsing, rendering, and widget library for Flutter

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.