jekyll/minima

Minima is a one-size-fits-all Jekyll theme for writers.

Jekyll

Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories.

Philosophy

Jekyll does what you tell it to do — no more, no less. It doesn't try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content.

See: https://jekyllrb.com/philosophy

Getting Started

• Install the gem
• Read up about its Usage and Configuration
• Take a gander at some existing Sites
• Fork and Contribute your own modifications
• Have questions? Check out our official forum community Jekyll Talk and #jekyll Channel on Libera IRC

Diving In

• Migrate from your previous system
• Learn how Front Matter works
• Put information on your site with Variables
• Customize the Permalinks your posts are generated with
• Use the built-in Liquid Extensions to make your life easier
• Use custom Plugins to generate content specific to your site
• Watch video tutorials from Giraffe Academy

Need help?

If you don't find the answer to your problem in our docs, or in the troubleshooting section, ask the community for help.

Code of Conduct

In order to have a more open and welcoming community, Jekyll adheres to a code of conduct adapted from the Ruby on Rails code of conduct.

Please adhere to this code of conduct in any interactions you have in the Jekyll community. It is strictly enforced on all official Jekyll repositories, websites, and resources. If you encounter someone violating these terms, please let one of our core team members know and we will address it as soon as possible.

Credits

Sponsors

Support this project by becoming a sponsor. Your logo will show up in this README with a link to your website. Become a sponsor!

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 Become a backer

License

See the LICENSE file.

minima's Issues

Quickstart instructions result in unstyled page.

I followed the quickstart instructions.

When I view the default site generated by jekyll new, it's trying to fetch the css from http://example.com/css/main.css instead of my local main.css file.

I can set my _config.yml to have url: "" and that fixes the issue, but possibly it's something that should be fixed in the minima theme?

HTML code generated to include a SVG is broken

Expected Behavior

I'm trying to add a SVG image from creativecommons.org. I want to have this SVG image inserted with a link to the website.

Current Behavior

The HTML code generated by jekyll adds 2 tags at the wrong place (</a></p>) and break the HTML code consistency: a </a> appear and the link doesn't work.

Possible Solution

Don't know. I'm new to Jekyll. Perhaps it's my bad, perhaps it's the SVG, perhaps a bug related to minima template, or perhaps it's the HTML generator used by Jekyll.

Steps to reproduce

• Download the svg file in _includes folder
• create a snippet icon-cc-by-nc-sa_bug.html in the _includesfolder with following code:

<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/fr/">{% include by-nc-sa.svg %}</a>

• create a post with the following code:

---
layout: post
title:  "Test du bug SVG"
date:   2016-09-18 00:12:00 +0000
categories: bug

---
{% include icon-cc-by-nc-sa_bug.html %}

• build with jekyll

Your environment

GEM
  remote: https://rubygems.org/
  specs:
    colorator (1.1.0)
    ffi (1.9.14)
    forwardable-extended (2.6.0)
    jekyll (3.2.1)
      colorator (~> 1.0)
      jekyll-sass-converter (~> 1.0)
      jekyll-watch (~> 1.1)
      kramdown (~> 1.3)
      liquid (~> 3.0)
      mercenary (~> 0.3.3)
      pathutil (~> 0.9)
      rouge (~> 1.7)
      safe_yaml (~> 1.0)
    jekyll-sass-converter (1.4.0)
      sass (~> 3.4)
    jekyll-watch (1.5.0)
      listen (~> 3.0, < 3.1)
    kramdown (1.12.0)
    liquid (3.0.6)
    listen (3.0.8)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
    mercenary (0.3.6)
    minima (1.2.0)
    pathutil (0.14.0)
      forwardable-extended (~> 2.6)
    rb-fsevent (0.9.7)
    rb-inotify (0.9.7)
      ffi (>= 0.5.0)
    rouge (1.11.1)
    safe_yaml (1.0.4)
    sass (3.4.22)

PLATFORMS
  ruby

DEPENDENCIES
  jekyll (= 3.2.1)
  minima

RUBY VERSION
   ruby 2.3.1p112

BUNDLED WITH
   1.13.0

Add Support For Meta Descriptions From Front Matter

Currently the meta description either truncates the page excerpt at 160 characters or defaults to the site description. It is good SEO practice to hand write meta descriptions, rather than just using the first 160 characters of the post. I propose the meta description first check if there is a "description" set in the front matter and, first and foremost, prioritize that. Happy to submit a PR if the maintainers are on board.

Broken link to /feed.xml out-of-the-box.

Out of the box, minima produces a broken link to /feed.xml, because it requires jekyll-feed. Minima should either depend on jekyll-feed or not output the link to the feed.

h1 font-size not specified

I noticed the font-size for h1 headers is not set anywhere.
I thought this was an odd choice but maybe it was intentional?
Is the idea to enforce the use of .post-title, rather than using an h1 within .post-content?

Hamburger was coded out for desktops - why?

If I'm reading blame right, this change was introduced in commit e4c9d1e — and if I'm reading the CSS right, the hamburger is only enabled for palm-sized (phone) screens. Was there a reason for this change?

I'm running a modified main.scss to restore the hamburger for desktops right now, and it looks a lot better than the run-on links at the top of the page.

Blockquote hard-codes font size

The blockquote tag hard-codes the font-size to 18px. Shouldn't it scale relative to $base-font-size instead, e.g. $base-font-size * 1.125?

A better experience for GitHub Enterprise users?

In jekyll/jekyll#4918 a user reported that the theme doesn't work well with Enterprise on account of how it handles linking usernames.

Is there a simple way to improve this (and other parts of the jekyll experience) on GitHub Enterprise?

Opening here for discussion and tracking.

Add option to anonymize IP in Google Analytics

Google provides the option to anonymize the IP of tracked user. This is required in different countrys to allow a legal tracking (e.g. in germany).
It would be nice, if this feature could be optional in minima.

ga('set', 'anonymizeIp', true);

Is therer anyway to include mathjax since there is no layout folder in minima?

I have learn that to add mathjax, I have to include mathjax scrpit in " layouts" folder. "http://stackoverflow.com/questions/10987992/using-mathjax-with-jekyll"

In minima version, there is no "layout"folder.
http://stackoverflow.com/questions/38891463/jekyll-default-installation-doesnt-have-layouts-directory

Is there any way to include mathjax in minima?

Documentation does not instruct users to create a `css/main.scss` file

Is anyone from the @jekyll/ecosystem team interested in creating a pull request to update the documentation in the README to instruct users to create a css/main.scss file? Currently, the documentation references "development" but the file is necessary for any use beyond jekyll new.

Theme hardcodes CSS path to `css/main.css`

That means that if I'm adding minima to a site, I have to create an entire CSS folder, even if I only have one CSS file.

Instead, it should be assets/style.scss(or similar) where the downstream users may have a use for storing other assets in that folder.

Need to flesh out README

Ability to specify Pages in Header

It's awesome that the theme auto-includes a list of pages in the header, but once you get above a certain number of pages, it gets a bit unwieldy.

It also be cool to be able to set the order of the pages. Thinking maybe some sort of array in the config of page paths to include, falling back to all pages if not set.

a11y: unstyled SVGs can render site unusable

When, due to problems with unreliable bandwidth/connectivity, main.css is not loaded properly, the three SVG icons (hamburger, github, and twitter) use up 100% of the port's width. The site should be usable even for users in low-connectivity environments.

The page build failed in github.io

I made a push to the repository, but mail me with this:
Your SCSS file css/main.scss has an error on line 36: File to import not found or unreadable: minima.

In local I don't have any error...

Document how to overwrite default templates

it seems that due to the new packaging, now the previously available files in _includes and _layouts are not available anymore. some guidance somewhere suggested to create these directories and place modified copies in there, if you want to change anything.
the problem with this is that for this to work, you would need to have access to the originals so that you can copy and change them. i tried to locate them, but couldn't find them in my newly installed jekyll site.
https://github.com/dret/RegMan is the site that i generated and that is missing the layouts and includes.
https://github.com/dret/webconcepts is one i set up recently which still had the directories, and thus was much easier to customize.
how is the new process to customize the minima theme? it's not as easy as it used to be (just change the files in your site directory), so a bit of documentation would be very helpful.

duplicate lines

Hi!

this is not a bug and does not affect operation

custom_url and full_base_url are defined in the "head" then, these lines are duplicated in "home" and "header"

{% assign custom_url = site.url | append: site.baseurl %}
{% assign full_base_url = custom_url | default: site.github.url %}

Bye!

Use different syntax highlighting style

How do I change the syntax highlighting style when using minima as a theme gem?

I tried to define my own _sass/minima/syntax-highlighting.scss but it doesn't seem to get picked up by Jekyll. I could define my own stylesheet to @import in assets/main.scss but then I'd have to undo all of minima's syntax highlighting theme, which quickly gets tedious.

What's the recommended way here?

Demo

Thank you so much for this great theme!

How about a demo for the always latest version of the theme?

Hamburger menu doesn't work on Edge on Windows Mobile 10

Are there any known issues with the hamburger menu not working on iOS? It works fine from Android and iOS, but not Microsoft Edge from Windows 10 Mobile for my site.

Ship 1.0

• Add code
• Update jekyll to use Gemfile and specify this theme
• Test
• Release as https://rubygems.org/gems/minima

/cc @jglovier @benbalter

Hamburger menu doesn't work on iOS

I'm using minima for http://www.lunaryorn.com and just noticed that the hamburger menu doesn't work on iPhone/iOS: When I tap the icon the menu doesn't pop up. I went through a couple of phones on browerstack and could reproduce the problem with Safari on iPhones, whereas the menu works fine on Android devices with Google Chrome. Note the issues does also not appear in the "responsive" design modes of Safari and Chrome on desktop.

I'm not so familiar with CSS, and don't really understand how the menu's implemented in Minima, so I'm at a loss. I don't even know how to debug the issue given that it only occurs on the real phone.

Would really appreciate any help :)

disqus url ignore baseurl

this.page.url and this.page.identifier should use url + baseurl instead of only url.

[Question] Release of new minima version

Hi devs,

Thanks a bunch for awesome work which you are doing! I just wanted to ask when are you planning to release new version of theme? Looking forward to disqus support in minima!

Cheers.

h2 has a larger font than h1 in Chrome

I see in layout.scss that Minima is forcing .post-content h2 to 32px. However, I don't see a similar rule for .post-content h1. This means that by default, in Chrome, h2 elements are larger than h1s, because Chrome's default size for h1 is 24px. Is this intentional?

Add a quick test to ensure the site actually builds

E.g., a script/cibuild file, which we could hook up to Travis, which would build the example folder.

`/example/index.html` contains "layout: page" instead of "layout: default"

when the site is built, it generates tags "header" and "h1" empty before "post-content"

  <header class="post-header">
    <h1 class="post-title"></h1>
  </header>

  <div class="post-content">
    <div class="home">

  <h1 class="page-heading">Posts</h1>

role=banner attribute on <header>

The <header> tag includes a role=banner attribute. Since <header>'s implicit ARIA semantics is actually role=banner and <header> is not used as a descendant of either an <article> or a <section> element in the theme (see the ARIA documentation), I think the role can be removed.

Improve loading time

There are some optimization identified by Google insights

Is it possible to improve the score ?

Currently:

• Mobile
• loading time 90/100
• user experience 90/100
• PC 96/100

code uses fixed font size

i am wondering if it might make more sense to define the CSS style for <code> to not use a fixed font size (it is defined as font-size: 15px; right now). it is legal HTML to use <code> in places other than just regular text (for example in headings), and defining it with a fixed font size makes these usages appear rather badly formatted.

Configuring time format

I notice that the time format in _layouts/home.html and _layouts/post.html is hardcoded. Is it possible/would it make sense to make this configurable in _config.yml?

Am I correct that right now my main option to change the format is to make a copy of those files and edit those copies?

Clicking Mobile NavBar icon doesn't close it

1. Open https://divyanshugrover.github.io/
2. Open Developer console and toggle to Mobile View.
3. Click on the "3-lines button" to open the nav menu.
4. Click it again to close it.

Expected: Step 4 should close the menu.
Actual: Step 4 doesn't do anything.
Comments: Clicking outside the nav overflow box closes the menu. Still I want it to work by clicking on the menu icon.

Site should look to `site.github.url` if it exists, and if not, fall back to `baseurl`

This would allow project pages to work out of the box on GitHub Pages without requiring additional configuration (and wouldn't upset the local development experience or the experience of those using Jekyll outside of GitHub Pages).

Inline SVG v SVG files

Is it not better to use SVG files instead of inline SVG in the light of HTTP/2?

Add `relative_url` filter to minima

I think we should update relevant files to use the new relative_url as a live example of its usage. I'm not opening a PR as I'm not sure regarding the site.github.url bit.

/cc @jekyll/minima

So, how can I change the $brand-color

I'm sure this is a user error. Any help appreciated.

What I want to do is change the link color from blue to teal.

I figure it's coming from $brand-color in minima.scss.

So, I tried copying minima.scss into a _sass directory on the root of my project and changing the $brand-color. I changed it from $brand-color: #2a7ae2 !default; to $brand-color: #008080 !default; No joy.

Next, I read "The site's default CSS has now moved to a new place within the gem itself, assets/main.scss. To override the default CSS, the file has to exist at your site source." So I made myself an assets/main.scss and copied the goodies in there from github. No joy.

So, what? Does the minima.scss file have to be in there with the assets? I copied my _sass/minima.scss file to assets/minima.scss. No joy.

What do I have to do to get the brand name to change? Or modify any css for that matter?

Here's the site: https://andnotafraid.github.io/
Here's the repo: https://github.com/andnotafraid/andnotafraid.github.io

icon-twitter.svg not being shown

I'm just beginning to setup​ Jekyll (3.4.2) with the default minima theme (2.1.0) on a fresh archlinux. I installed Ruby (2.4.0) and followed the quick start guide at jekyllrb.com - [gem install jekyll bundler && jekyll new ...]
However, the resulting page on localhost does not show the twitter icon in the footer. GitHub icon is there. Any ideas, please?

Restore ability to style YAML

The escape filter recently added at various points breaks the ability to use HTML in post titles and so forth, as the tag is now shown verbatim. If it is necessary to use this, could it perhaps be used in conjunction with markdownify?

Content of index should be in an index layout, not in an `index.html` file

That way, jekyll new can just create an index.md file with:

---
layout: home

---

And we avoid hard-coding theme-specific HTML in the theme index (and I assume other themes will follow this theme's design pattern, since it's the default).

Missing the minima files in my Jekyll folders.

I created a new Jekyll "project", and the default theme is minima. But I cannot see any minima specific files (like footer, header etc.). How can I adjust the footer, header and general structure in this theme? Can I somehow get all the necessary files and build it my own?

Development instructions should describe how to use the theme

e.g., you must create a css/main.scss file, with front matter and @import 'minima';.

Social Media Icons / Links

The footer templates comes with only two links (github and twitter). It would be nice to generalise and this should not be too hard to do. One way is Font Awesome which supports almost every conceivable icon. A subset of these could be added or this could probably be done dynamically too.

Currently, SVGs are used instead, so creating more of these would actually require effort (unless these were actually just borrowed from somewhere). On the other hand, abandoning SVG in favour of FA or another solution may lead to backward compatibility problems. The only one I can think of is the discrepancy in appearance unless this is actually done dynamically. Then it is also important to avoid duplicating github and twitter links.

I am not too sure if backward compatibility is actually important in this case, especially given that both github and twitter have identical names in FA.

Finally, all of this can obviously be overridden or solved by another theme but hardcoding these two links does not seem like a favourable or a necessary solution.

P.S. I read all other open issues to make sure I am doing this correctly and suitably but nevertheless this is my first github issue (in fact this is my first real public mark on github) so please react appropriately 😇

feed is broken

out of the box it seems that the feed is broken. https://validator.w3.org/feed reports a missing author element.

Add screenshot

It'd be nice to have a screenshot at /screenshot.png and in the readme so visitors can see what it looks like (the /screenshot.png design pattern is in the theme spec, and can be used by galleries and such).

Trouble with disqus

I m starting to create a simple github page on my github name like https://skahrz.github.io

I m using your minimalist (but really cool) theme.

Actually, I m having some troubles dealing with the disqus integration. For now, here's my _config.yml config :

title: On parle de code :)
email: [email protected]
description: Javascript & Clean Code :O
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: skahrn
github_username:  skahrz
disqus:
  shortname: skahrz-github
google_analytics: ANALYTICS_ID
# Build settings
markdown: kramdown
theme: minima
gems:
  - jekyll-feed
exclude:
  - Gemfile
  - Gemfile.lock

When I m trying to load disqus on my website, it doesn't load and ask me to follow some troubleshooting guides (what I did) but it doesn't work as expected, without throwing some weird errors :

https://skahrz.github.io/jekyll/update/2017/01/30/welcome-to-jekyll.html

My configuration on disqus are the following :

But nothing happens... Am I missing something in my config file ?

Gemspec file doesn't include entire theme

The following line:
spec.files = git ls-files -z.split("\x0").select { |f| f.match(%r{^(_includes|_layouts|_sass|LICENSE|README)/i}) }
causes the gem to only package the files:
_includes/icon-github.html
_includes/icon-github.svg
_includes/icon-twitter.html
_includes/icon-twitter.svg

Hyperlink in "description" _config.yml?

Dear all,

Is it possible to support hyperlinks in the "description" of the _config.yml file?

explain layout usage

it would be helpful to explain which layout to use for what kind of content/page in the README document. it is not quite clear what the four defined layouts are supposed to be used for, and if/how they relate.

Hamburger not working on iOS

Are there any known issues with the hamburger menu not working on iOS? It works fine from Android, but not iOS for my site.