Giter Site home page Giter Site logo

a0er.github.io's Introduction

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

a0er.github.io's People

Contributors

a0er avatar

Watchers

 avatar

a0er.github.io's Issues

Consider adding your blog to diff.blog

Hello ๐Ÿ‘‹ ๐Ÿ‘‹

Over the past decade, we have seen the rise of centralized publishing platforms like Medium. A lot of self hosted blogs were migrated to these platforms in hope of a bigger audience. Sadly, most of these blogs lost their unique identity and became just another page on them.

Our mission is to fight back against monopolies like Medium and promote independent self hosted blogs like yours. We think the best way to make this happen is by improving the visibility and reach of self hosted blogs. And that's why we built diff.blog.

diff.blog is an aggregator of developer blogs. It was started in 2019 to improve the visibility of self hosted blogs. Whenever you publish a new blog post on your blog, it would automatically appear in the diff.blog news feed. The title and summary of the post would be visible to the users of diff.blog and they can click on the post to read the full post on your blog.

We also have a weekly email digest, which would email the most popular blog posts in our index to all diff.blog users.

diff.blog index over 613 blogs at the moment. And our network is growing steadily every day. And we would like to invite you to include your blog in diff.blog as well.

Adding your blog to diff.blog is super easy and takes less than a minute.

We are looking forward to have your blog in diff.blog. Let us know if you have any questions. Happy to answer.

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.