jekyllup/jekyll-theme-massively

Preview

Massively Live Preview!

Massively

This is Massively, a text-heavy, article-oriented design built around a huge background image.

See a preview of the Massively Jekyll Theme here: live preview.

Massively was originally designed by HTML5UP and Jekyll was integrated by JekyllUp: Jekyll Themes

How to Use This Theme

Jekyll consumes themes in two flavors; gem-based or spread across multiple folders in the site source. This port is of the second type. Concretely, it means that you can simply grab the zip or clone this repository, run bundle install in the new directory and finally bundle exec jekyll serve. You can now access your brand-new Jekyll site on http://127.0.0.1:4000/. Enjoy!

If you're completely new to Jekyll, check out it's documentation first. It's not too hard, we promise!

Features

Slapform.com Integration

Slapform is supported out of the box! Just add your email to _config.yml and test the form. Every time one of your visitors submits the form, you'll get an email straight to your inbox containing the submission so you can get back to them right away. Slapform is very extendable, including AJAX submissions, webhooks, and more.

Auto-Generating Sitemap

The sitemap is auto generated! Just simply change the sitemap variable in front matter of each page. It looks like so...

sitemap:
  priority: 0.7
  lastmod: 2017-11-02
  changefreq: weekly

Credits

Original README from HTML5 UP

Massively by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)


This is Massively, a text-heavy, article-oriented design built around a huge background
image (with a new parallax implementation I'm testing) and scroll effects (powered by
Scrollex). A *slight* departure from all the one-pagers I've been doing lately, but one
that fulfills a few user requests and makes use of some new techniques I've been wanting
to try out. Enjoy it :)

Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
you can use for pretty much whatever.

(* = not included)

AJ
[email protected] | @ajlkn


Credits:

	Demo Images:
		Unsplash (unsplash.com)

	Icons:
		Font Awesome (fortawesome.github.com/Font-Awesome)

	Other:
		jQuery (jquery.com)
		Misc. Sass functions (@HugoGiraudel)
		Skel (skel.io)
		Scrollex (github.com/ajlkn/jquery.scrollex)

jekyll-theme-massively's Issues

Icon for LinkedIn?

Is there a easy way to add a icon for linkedin like there already is for twitter, facebook etc? Thanks

Some issues in the template

First I should say, I like the theme, modern and beautiful!

Here are some issues found in the template:

1. Paginate, I found there's setting in _config.yml and do plugin needed in Gemfile, but not working after I tried
2. Vulnerability warning from Github after commit, says like Jekyll version is too low to match Github's suggestion (at least to 3.6.3) PS: modify Gemfile and _config.yml, fixed

Hope to hear your answer, thanks.

remove . files

.DSStore in includes

[Question] Broken absolute_url

I'm working on my own web page based on your theme (https://github.com/UWPX/uwpx.github.io).
Locally everything works fine, but as soon as I publish it on GitHub links start to break.
For example:

1. I'm navigating to https://uwpx.github.io => the index page loads just fine
2. I click on "Blog" => it navigates me to https://uwpx.github.io/uwpx.github.io/blog/
3. I click "About" => it navigates me to https://uwpx.github.io/uwpx.github.io/blog/uwpx.github.io/about/

It looks like it's not grabbing the correct absolute_url.

Link to my _config.yml.
Link to my nav.html.

Blog page error

For some reason, when I run the build and serve commands, the index.html inside _site/blog backs to the default one, ignoring my blog.md file

Theme not rendering

As soon as I put this into my own repository the theming breaks and it looks like this: https://rednaxela796.github.io/jekyll-theme-massively/

This is my repo: https://github.com/rednaxela796/jekyll-theme-massively

Pagination not Working

Hello, how do you use pagination in this theme?

Easily only use side (mobile) nav menu?

Hi,
I'm using the Massively theme for a page of mine.
I have too many menu items to use the "top bar" menu for desktop @media dimensions, so I'm trying to use only the mobile slide out menu version on all platforms.

I've removed the @media sections in the #nav and #/.navToggle areas in main.css, and kept their contents.
Mobile menu works fine, yet going over 986px in screen width, the nav links do not appear.

Any quick and easy workaround for this?
Thanks!

images overflow in narrow pages

problem page screenshot :

for a wider page it works fine

also, i found that width of images vary as I scale them, which is a little bit annoying

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://iwiedenm.github.io/jekyll-theme-massively/" and found these accessibility errors:

• Page https://iwiedenm.github.io/jekyll-theme-massively/:
  • Issue f30be2ce-e8a7-41b6-8001-cebdb0d41a22:
    • Type: Error
    • Code: WCAG2AA.Principle2.Guideline2_4.2_4_1.H64.1
    • Message: Iframe element requires a non-empty title attribute that identifies the frame.
    • Selector: #google_osd_static_frame_6184167086690
    • Context: <iframe id="google_osd_static_frame_6184167086690" name="google_osd_static_frame" style="display: none; width: 0px; height: 0px;"></iframe>
  • Issue f6de6a48-5317-4b49-bd76-d5a4f72717e8:
    • Type: Error
    • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
    • Message: Anchor element found with a valid href attribute, but no link content has been supplied.
    • Selector: #navPanel > a
    • Context: <a href="#navPanel" class="close" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></a>
  • Issue 68794d24-5747-46ce-9cc2-9eb0c6841e61:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.05:1. Recommendation: change text colour to #697179.
    • Selector: #footer > section:nth-child(2) > section:nth-child(4) > h3
    • Context: <h3>Social</h3>
  • Issue d4e6f698-3adc-438c-9ae9-d0087c1b9d9d:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.05:1. Recommendation: change text colour to #697179.
    • Selector: #footer > section:nth-child(2) > section:nth-child(3) > p > a
    • Context: <a href="mailto:[email protected]">[email protected]</a>
  • Issue 3ba7c9e9-fef9-47d1-8e3f-c19428a269cb:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.05:1. Recommendation: change text colour to #697179.
    • Selector: #footer > section:nth-child(2) > section:nth-child(3) > h3
    • Context: <h3>Email</h3>
  • Issue 505db25f-e6d1-46d2-bf71-66d6b69e8fd4:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.05:1. Recommendation: change text colour to #697179.
    • Selector: #footer > section:nth-child(2) > section:nth-child(2) > p > a
    • Context: <a href="tel:[phone]">310-318-5555</a>
  • Issue f688e5f4-3c45-42b4-b8e9-7dcd9b9a34ae:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.05:1. Recommendation: change text colour to #697179.
    • Selector: #footer > section:nth-child(2) > section:nth-child(2) > h3
    • Context: <h3>Phone</h3>
  • Issue a2bb813c-bb27-4426-bc5b-838e7bd6d5ac:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.8:1. Recommendation: change text colour to #6d7175.
    • Selector: #footer > section:nth-child(2) > section:nth-child(1) > p
    • Context: <p>Los Angeles, CA</p>
  • Issue 760f4c4c-80fe-485d-8931-ce2003a06c42:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.05:1. Recommendation: change text colour to #697179.
    • Selector: #footer > section:nth-child(2) > section:nth-child(1) > h3
    • Context: <h3>Location</h3>
  • Issue aa17a2fa-9b2e-4bfd-812c-2b09a20ee95e:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.05:1. Recommendation: change text colour to #697179.
    • Selector: #footer > section:nth-child(1) > form > div:nth-child(3) > label
    • Context: <label for="message">Message</label>
  • Issue 01efba59-e1a1-45ab-bac7-8e04a3f097d7:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.05:1. Recommendation: change text colour to #697179.
    • Selector: #footer > section:nth-child(1) > form > div:nth-child(2) > label
    • Context: <label for="email">Email</label>
  • Issue c9007389-b622-49f1-a508-bc1df4c76aa3:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.05:1. Recommendation: change text colour to #697179.
    • Selector: #footer > section:nth-child(1) > form > div:nth-child(1) > label
    • Context: <label for="name">Name</label>
  • Issue 89d7dece-5ac6-4587-b33c-282bef9b867b:
    • Type: Error
    • Code: WCAG2AA.Principle2.Guideline2_4.2_4_1.H64.1
    • Message: Iframe element requires a non-empty title attribute that identifies the frame.
    • Selector: #aswift_1
    • Context: <iframe width="295" height="185" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp...
  • Issue 500dd08d-0e9e-4ed1-8be7-02b29c88c9c5:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
    • Message: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
    • Selector: #main > section > article:nth-child(3) > a
    • Context: <a href="https://iwiedenm.github.io/jekyll-theme-massively/blog/welcome-to-massively-the-jekyll-theme/" class="image fit"><img src="https://iwiedenm.gith...</a>
  • Issue 465d5609-6411-48b3-ac8c-cf3d9dbac7bf:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
    • Message: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
    • Selector: #main > section > article:nth-child(2) > a
    • Context: <a href="https://iwiedenm.github.io/jekyll-theme-massively/blog/good-content-is-the-key-to-good-business/" class="image fit"><img src="https://iwiedenm.gith...</a>
  • Issue 082105ea-a4a5-4306-8deb-186969d16d93:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
    • Message: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
    • Selector: #main > section > article:nth-child(1) > a
    • Context: <a href="https://iwiedenm.github.io/jekyll-theme-massively/blog/creating-a-strong-social-media-presence/" class="image fit"><img src="https://iwiedenm.gith...</a>
  • Issue a657c3ee-3859-43d7-a6e9-6fc4cec513ec:
    • Type: Error
    • Code: WCAG2AA.Principle2.Guideline2_4.2_4_1.H64.1
    • Message: Iframe element requires a non-empty title attribute that identifies the frame.
    • Selector: #aswift_0
    • Context: <iframe width="624" height="60" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;...
  • Issue b1cb4d8a-6cf3-444b-8e3f-5b408d6ae0fe:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_1.1_1_1.H30.2
    • Message: Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
    • Selector: #main > article > a
    • Context: <a href="#" class="image main"><img src="https://iwiedenm.gith...</a>
  • Issue 97838cd8-3da7-4b30-a141-39b3eea73701:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1:1. Recommendation: change text colour to #767676.
    • Selector: #nav > ul:nth-child(1) > li:nth-child(4) > a
    • Context: <a href="https://iwiedenm.github.io/jekyll-theme-massively/elements/">Elements Reference</a>
  • Issue 8b9a0bde-3585-4af2-b380-1a120a0da54b:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1:1. Recommendation: change text colour to #767676.
    • Selector: #nav > ul:nth-child(1) > li:nth-child(3) > a
    • Context: <a href="https://iwiedenm.github.io/jekyll-theme-massively/blog/">Blog</a>
  • Issue 67ad0461-18e4-4ccc-af19-a1691a00214f:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1:1. Recommendation: change text colour to #767676.
    • Selector: #nav > ul:nth-child(1) > li:nth-child(2) > a
    • Context: <a href="https://iwiedenm.github.io/jekyll-theme-massively/about/">About</a>
  • Issue 6058d642-b578-4291-b160-d05370604623:
    • Type: Error
    • Code: WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2
    • Message: The html element should have a lang or xml:lang attribute which describes the language of the document.
    • Selector: html
    • Context: <html><head> <meta http-equiv="Conten...</html>

You can check these accessibility errors using pa11y.
You can view the full validation results in our website.

Vulnerability found in dependencies

Hello, Github just warned me about security issues with some dependencies in this template:

You may want to update.