andrewbanchich / forty-jekyll-theme

A Jekyll version of the "Forty" theme by HTML5 UP.

Forty - Jekyll Theme

A Jekyll version of the "Forty" theme by HTML5 UP.

How to Use

For those unfamiliar with how Jekyll works, check out jekyllrb.com for all the details, or read up on just the basics of front matter, writing posts, and creating pages.

Simply fork this repository and start editing the _config.yml file!

NOTE: GitHub Actions is required to deploy to GitHub Pages because GitHub refuses to update their version of Jekyll.

Added Features

• Formspree.io contact form integration - just add your email to the _config.yml and it works!
• Use _config.yml to set whether the homepage tiles should pull pages or posts, as well as how many to display.
• Add your social profiles easily in _config.yml. Only social profiles buttons you enter in config.yml show up on the site footer!
• Set featured images in front matter.

Credits

Original README from HTML5 UP:

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


This is Forty, my latest and greatest addition to HTML5 UP and, per its incredibly
creative name, my 40th (woohoo)! It's built around a grid of "image tiles" that are
set up to smoothly transition to secondary landing pages (for which a separate page
template is provided), and includes a number of neat effects (check out the menu!),
extra features, and all the usual stuff you'd expect. Hope you dig 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)
		html5shiv.js (@afarkas @jdalton @jon_neal @rem)
		background-size polyfill (github.com/louisremi)
		Misc. Sass functions (@HugoGiraudel)
		Respond.js (j.mp/respondjs)
		Skel (skel.io)

Repository Jekyll logo icon licensed under a Creative Commons Attribution 4.0 International License.

forty-jekyll-theme's Issues

Web design elements not showing up

Hi, I am beginner to everything web development. I have been trying to set up a github pages personal website using this theme but I can't seem to get the website to show up like the live demo. I have no idea what I could be doing incorrectly.

Steps I have taken:

1. Forked theme in personal repo
2. Added the line target_branch: 'gh-pages' to the workflow yml files as shown below. This allowed the github actions to run without error
   • uses: helaili/jekyll-action@v2
     with:
     token: ${{ secrets.GITHUB_TOKEN }}
     target_branch: 'gh-pages'
3. I used Inspect Elements to check if the .css files were somehow not being translated properly

Here is how the page keeps showing

Can anyone please help me figure out what I could be missing or offer some support?

Scale post image size

This theme is just... fantastic. Thank you for taking the time to make it. I'm not terribly good at HTML and was wondering if there is a way to scale the image of posts to a certain size, like the banner on the home page?

Google analytics not supported?

Hi, Thank you for the great work here!

I could not find any information regarding google analytics in config?

how can i render it locally?

that theme was awesome but i don't know how to render it locally.
it doesn't have a Gemfile so i don't know what dependencies does it need.

I found a solution: install whatever it warns when i run "jekyll serve" and it succeed.
but i don't know if I'm doing this right.
hope you can help me with that. im really new to ruby and jekyll.

Thx:)

There is problem with the post title

Hi Andrew,

In a post page, I cannot seem to wrap a long title into a new line. Instead, the title runs on leaving the edge of the visible window.

Do you have a solution for this?

May be better to start all the image paths with ../assets to specify the parent directory

Like

<img src="../assets/images/pic09.jpg" alt="" />

instead of

<img src="assets/images/pic09.jpg" alt="" />

because the latter does seem to work on my local build, although I see it works fine on GitHub Pages.

Setting up a personal access token

Dear Andrewbanchich, I am using github to manage the repository. Following the readme, I tried to set up a Personal Access Token. In the instruction(https://jekyllrb.com/docs/continuous-integration/github-actions/#providing-permissions), I met trouble in step 5:
5. Create a token named GITHUB_TOKEN (important). Give it a value using the value copied above.
The problem is that I cannot name token with "GITHUB_TOKEN". Could you please tell me how to solve it?

Error with ffi dependencies when running 'jekyll serve'

When running 'jekyll serve', following error appears:

Bundler could not find compatible versions for gem "ffi":
  In snapshot (Gemfile.lock):
    ffi (= 1.9.17) x64-mingw32

  In Gemfile:
    jekyll (~> 3.3) x64-mingw32 was resolved to 3.3.1, which depends on
      jekyll-watch (~> 1.1) was resolved to 1.5.0, which depends on
        listen (< 3.1, ~> 3.0) x64-mingw32 was resolved to 3.0.8, which depends on
          rb-inotify (>= 0.9.7, ~> 0.9) was resolved to 0.9.7, which depends on
            ffi (>= 0.5.0) x64-mingw32

    jekyll (~> 3.3) x64-mingw32 was resolved to 3.3.1, which depends on
      jekyll-watch (~> 1.1) was resolved to 1.5.0, which depends on
        listen (< 3.1, ~> 3.0) x64-mingw32 was resolved to 3.0.8, which depends on
          rb-inotify (>= 0.9.7, ~> 0.9) was resolved to 0.9.7, which depends on
            ffi (>= 0.5.0)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

ffi version 1.9.17 is installed, however there are dependency errors. When running 'bundle update', the following appears, but does not solve the issue:

Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Resolving dependencies...
Installing rake 10.5.0 (was 12.0.0)
Using public_suffix 2.0.5
Using bundler 1.14.1
Using colorator 1.1.0
Using ffi 1.9.17 (x64-mingw32)
Using forty_jekyll_theme 0.2.2 from source at `.`
Using forwardable-extended 2.6.0
Using sass 3.4.23
Using rb-fsevent 0.9.8
Using kramdown 1.13.2
Using liquid 3.0.6
Using mercenary 0.3.6
Using rouge 1.11.1
Using safe_yaml 1.0.4
Using addressable 2.5.0
Using rb-inotify 0.9.7
Using pathutil 0.14.0
Using jekyll-sass-converter 1.5.0
Using listen 3.0.8
Using jekyll-watch 1.5.0
Using jekyll 3.3.1
Bundle updated!

Documentation on setting up forks (github actions)

I've forked the repo and I honestly don't know how the whole github actions and github pages stuff works with each other, that's why I'm using it and a theme.

I feel like it's probably just a few clicks after the fork to get the actions working properly and it's probably super simple to document and will help other people figure out how to host the site. :)

After click 'Go Back' animation class 'is-loading' does not remove from body

After click on Go back from browser, the class 'is-loading' was not removed from body.

So, I found where is removed class 'is-loading' and changed this part:

$window.on('load pageshow', function() {
  window.setTimeout(function() {
	  $body.removeClass('is-loading');
  }, 100);
});

to this:

window.setTimeout(function() {
  $body.removeClass('is-loading');
}, 200);

Because it's always adding 'is-loading' but not always removing.

Locally is working, after this change, but I don't if this change can break something, I will test more!

😄

Margins broken

I'm experimenting with adapting this theme for a classroom website. Current (very in progress) site at:

http://f18rwda.ryancordell.org/course-description.html
https://github.com/rccordell/f18rwda/tree/gh-pages

I've done something that seems to have broken the styling for pages, however. My pages don't seem to have any margin/padding between the edge of the browser and the page text, as here:

http://f18rwda.ryancordell.org/course-description.html
http://f18rwda.ryancordell.org/schedule.html

The only major thing I believe I changed in the theme was removing the phone contact section from the footer, as I don't typically include my phone number on course websites. Any idea what's going on?

A side issue, but if I'm using pages for the landing page tiles, is there a way to exclude the 404 page? I do want to have a 404 page but it's a bit strange appearing as a tile.

Older posts?

Hi,

I am new to jekyll and really like this theme, but one thing I am not sure about is how to find older blog posts. For example, if I have configure it for six tiles and have 10 posts, it is not clear to me how to find the four older posts. Can you clarify this for me? Thanks.

Google Lighthouse warns that jQuery 1.x is deprecated/insecure

Is this is something that would be in scope as a fix?

What's the best way to eliminate the fade-in transitions on the main page menu, banner, and logo?

I've tried to adjust this in multiple places, without success.

status 404 () js

Hello, I made a fork of the main branch and I tried to see how the page works, but all of a sudden I get all these errors:

Note: I have not made any modifications

main.css:1 Failed to load resource: the server responded with a status of 404 ()
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 ()
jquery.scrolly.min.js:1 Failed to load resource: the server responded with a status of 404 ()
util.js:1 Failed to load resource: the server responded with a status of 404 ()
skel.min.js:1 Failed to load resource: the server responded with a status of 404 ()
jquery.scrollex.min.js:1 Failed to load resource: the server responded with a status of 404 ()
main.js:1 Failed to load resource: the server responded with a status of 404 ()
skel.min.js:1 Failed to load resource: the server responded with a status of 404 ()
util.js:1 Failed to load resource: the server responded with a status of 404 ()
main.js:1 Failed to load resource: the server responded with a status of 404 ()
landing.html:1 Failed to load resource: the server responded with a status of 404 ()
main.css:1 Failed to load resource: the server responded with a status of 404 ()

How could I solve this error, or why it happens?

Script that shows/hides the header as you scroll down the page sometimes doesn't run

Sometimes on loading a "landing" page, the header does not show/hide as you scroll up/down. It gets stuck with class="alt style2" and never updates to style2 reveal.

CSS doesn't seem to be working!

I think I'm doing something wrong, it displays the content, but no styling!

_palette

I am looking for this in the repo I forked from forty-jekyll-theme. Curious if you could help me as I am trying to change some css. https://github.com/BrandonKlotz/website

Exposed .css hyperlinks in /#menu

While testing out a /404.md, I noticed a bug in the #menu that causes hyperlinks to pages that aren't supposed to be exposed (e.g. 404.html, main.css, style.css). This bug is reproducible in Internet Explorer 11, Firefox 52 ESR, and Chrome 59.

commit 7f3d42b3444b78b seems to break my build.

I'm using the docker image like this:

docker run -v${PWD}:/srv/jekyll jekyll/builder:latest jekyll build -d public --trace --verbose

anything after that commit gives me:

Rendering: assets/css/main.scss Pre-Render Hooks: assets/css/main.scss Rendering Markup: assets/css/main.scss /usr/local/bundle/gems/sass-3.5.6/lib/sass/script/value/base.rb:23:in==': stack level too deep (SystemStackError)
from /usr/local/bundle/gems/sass-3.5.6/lib/sass/script/value/base.rb:23:in initialize' from /usr/local/bundle/gems/sass-3.5.6/lib/sass/script/value/number.rb:73:in initialize'
from /usr/local/bundle/gems/sass-3.5.6/lib/sass/script/value/number.rb:368:in new' from /usr/local/bundle/gems/sass-3.5.6/lib/sass/script/value/number.rb:368:in coerce'
from /usr/local/bundle/gems/sass-3.5.6/lib/sass/script/value/number.rb:429:in operate' from /usr/local/bundle/gems/sass-3.5.6/lib/sass/script/value/number.rb:119:in minus'
from /usr/local/bundle/gems/sass-3.5.6/lib/sass/script/tree/operation.rb:85:in _perform' from /usr/local/bundle/gems/sass-3.5.6/lib/sass/script/tree/node.rb:50:in perform'
... 596 levels...
from /usr/local/bundle/gems/mercenary-0.3.6/lib/mercenary.rb:19:in program' from /usr/local/bundle/gems/jekyll-3.8.3/exe/jekyll:15:in <top (required)>'
from /usr/local/bundle/bin/jekyll:29:in load' from /usr/local/bundle/bin/jekyll:29:in

'`

any ideas?

How to size images which behave responsively?

It seems that images need to have certain aspect ratios to behave properly on some layouts such as landing/spotlight. Can you describe/document what constraints need to be met to avoid artefacts such as:

This seems to happen when the image is not square enough.

Image width : Adding image in post markdown

Hi Andrew,

I added image to my post page in the markdown file.
![ViewController2](/assets/images/blog-img/Start-XCode-Without-Storyboard/pic-02.png)

The image does not conform to the max-width as I shrink the width of my browser or switch to a mobile device. The rest of the page shrinks well but the image did not.

Here is my blog post that I am working on.
https://www.projecthacks.xyz/2017/04/30/How-to-start-Xcode-project-without-Storyboard.html

Is there a way for me to add an image to the post markdown file while maintaining the page width?

Unable to change tile height

Probably my stupidity than anything else. Great theme!

So I loved the tiles and wanted to reduce the tile height (because I'm not adding the images).
tiles.html pointed me towards the definition of article in _tiles.scss. However, messing around with the values with the height settings doesn't change the height.

Am I barking up the wrong tree?

Is it a typo??

When I forked your theme, the theme couldn't read CSS file.
So I change this code ".css" into ".scss".
Then Chrome could read CSS file.

So. I want to ask you wheter it is a typo or not.

Add some logic for null street_address

If street_address is null in the _config.yml it causes a blank newline. I am using this theme for my personal blog so I don't mind providing my city/state/country, but do not want to provide my street address. It might make sense to add some logic for null street_address. I provided a potential solution below.

/_includes/footer.html

Before:

    <span>{{ site.street_address }}<br />

After:

    <span>
    {% if site.street_address %}
        {{ site.street_address }}<br />
    {% endif %}

Formspree.io requires contact form verification for every page

Hi, thanks for this great Jekyll port!

The contact form integration with Formspree.io is easy to set up, but since this theme puts a contact form on every page, on the free plan Formspree.io requires verifying my email address repeatedly for the contact form on every single page URL on my site. Not really workable for a production site, and paying Formspree $10/mo is not in my budget.

Any thoughts on how this could be improved, so Formspree only has to be verified once? Or suggestions for an alternate free contact form service? Maybe worst case, a config option to disable the footer for all pages but the homepage, and/or replace the contact form block with other content...

how to sass command to update bg color?

how to sass command to update bg color?

No paging feature

If there are many pages how to show.

Multilingual site?

Hi, is it possible to use Forty with two or more languages?

For example, the home page uses the description field from the _config.yml, instead of using its own description (i.e. inside the same .md file). What steps would be required to use this template to build a multilingual site?

Thanks in advance.

Hi, is there any documentation as to how to use the Forty theme?

I am not familiar with how the arrangement of the files. For instance, how do I edit the top right header name. I would like to add an image into it but not sure where to put it. Any help would be great! I like your theme a lot!

Erase 'LOG IN' and 'GET STARTED' from the menu?

Hi Andrew,

Excellent template, congrats!

How can I delete the menu items 'LOG IN' and 'GET STARTED' easily?

Many greetings,

Marcus

What's the best way to have a standard top menu appear on blog posts and pages, but the standard menu appear on the homepage?

I'm interested in having a standard top menu (as you see on GitHub, for example) but the mobile-style top menu on the homepage and smaller screen sizes. Any recommendations for how to implement this?

Theme not showing up

Hi,
Thank you for making this cool jekyll theme! I cloned the repo, tested if it worked on my machine and then have been trying to set it up on our main github page. So all the code is on the master branch and this is the link to the webpage

https://imcbioinformatics.github.io/

I don't see the theme being used but the basic text is there. What am I doing wrong?

Here is the repo:

https://github.com/IMCBioinformatics/IMCBioinformatics.github.io

Initially I had made a gh-pages branch but the webiste was showing me the readme from the master branch even after switching the to gh-pages as the default branch. Then when I looked at github pages guidelines it seems for the main website I didn't need it so I deleted it and just kept the master.

Any help will be much appreciated!
Hena

Is it allowable to move/change the formatting of the copyright information?

I noted the license said that the copyright stuff can't be removed. However, can we reformat it as we customize the template more?

gitlab repo

What happened to the gitlab repo?

https://gitlab.com/andrewbanchich/forty-jekyll-theme

(I get 404)

Updating fontawesome icons gives me a night mare.

If you add little documentation how to update fontwesome icons I can do that. To update newer fontawesome I simply downloaded the laterst font awesome zip and start replacing others here. I update the assets/css/font-aweome.scss directly to newer version. But after that i came to know that there are more things needs to update and after a few hours of jumping into _sass i update mixins in _sass/libs/_mixins.scss to newer but that doesn't works. making extra sass conversion error.

so finally i created a kit and simply add to my header and it works.

Theme doesn't render

Hello,

I really enjoy the theme you've produced so I followed the readme.md instructions and simply forked the repository to my own such that my hosted website can adopt the theme. However, without touching anything the nice theme doesn't render on my own website. Any idea why?

analytics

How to add google analytics ?

sub pages

Sorry, maybe stupid Q:

is there a way to point to a (3rd-level) page, without this page being shown in the main one?

(e.g. here https://andrewbanchich.github.io/forty-jekyll-theme/landing.html "learn more" to point to a page that is not shown on the main one)

Thanks

Change filter to page.image in post template

I ran into an issue on the posts page where the images were not loaded.

The issue was solved by changing

{% if page.image %}<span class="image main"><img src="{{ site.baseurl }}/{{ page.image }}" alt="" /></span>{% endif %}

to

{% if page.image %}<span class="image main"><img src="{{ page.image | relative_url }}" alt="" /></span>{% endif %}

This changes the output from

<span class="image main"><img src="//assets/images/pic01.jpg" alt="" /></span>

to

<span class="image main"><img src="/assets/images/pic01.jpg" alt="" /></span>

Can I buy an attribution-free license?

Thanks for making this Jekyll integration! My client has asked me to see if I can remove the attribution from the footer, finding it distracting from other interactive elements we have at the bottom of each page. I've bought the Pixelarity license to remove the HTML5 UP attribution – is that possible for yours, too? Or a license to move it to one page, like the About page?

If you do want to keep the attribution, would you like to update the link? It currently links to http://andrewbanchi.ch/, but that website seems to be down.

Your theme is listed in jekyllthemes.ru

Your theme has been listed on http://jekyllthemes.ru

Last tile does not span entire page

I have 9 tiles on the main page, but the last tile does not span the entire page. It only spans 40%, and the remaining 60% for the "10th" tile is displayed as gray. Personally, I don't think that this looks very good.

I have noted that if I remove 2 tiles, so that I have a total of 7, that the last tile will indeed span the entire page. This seems to indicate that a single last tile with a width of 60% will get stretched to span the entire page, but that a single last tile of 40% won't.

It is possible that this is by design, but if it is, I would like to change the tile sizes of the first row to be "60/40" instead of "40/60" to avoid this problem. I have looked through the code, but to the best of my ability, I haven't been able to figure out how the tile sizes are set. Any help would be appreciated!

Add `rel="noopener noreferrer"` to social media tags

Due to the target="_blank" it seems to be a security issue to not have a noreferrer specified. Would that make sense to you? I can submit a pull request if so.

            {% if site.twitter_url %}
            <li><a href="{{ site.twitter_url }}" class="icon alt fa-twitter" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><span class="label">Twitter</span></a></li>
            {% endif %} {% if site.googleplus_url %}

Two other things:

• Do liquid templates support some kind of looping? The duplication for each social media tag seems wasteful.
• How do you feel about the aria-labels that Google is requesting

Theme relies on "url: andrewbanchich.gitlab.io" ?

Great theme! I forked it and tested that my fork looked exactly like yours.

Then I modified the _config.yml file to change the base url to mine:

So, from this: url: "https://andrewbanchich.gitlab.io" # the base hostname & protocol for your site

to this: url: "https://ibkevg.github.io" # the base hostname & protocol for your site

As soon as I did this, the layout was all messed up, white background, etc.
Any ideas why that might be?

How can I ensure the subtitle stays visible on all screen sizes, including mobile?

convert to gem-based Jekyll theme

Convert this Jekyll theme to a Ruby gem theme, which was introduced in Jekyll 3.2.

Tried to create an AMP story HTML website but % link gives build error

Hi. First of all, thanks for creating this amazing Jekyll theme. I cloned the repo and I was successfully able to set it up on my GitHub page. So all the code is on the master branch and this is the link to the webpage: https://rishabhramteke.github.io and my repo: https://github.com/rishabhramteke/rishabhramteke.github.io

Now, I was trying to create an AMP story following the tutorials on this website https://amp.dev. I tried to recreate this example of theirs https://playground.amp.dev/?_gl=1*b9rco5*_ga*YW1wLVNwUFkxMG9GTHVRelRhekZPTThNdVE.&runtime=amp4stories&url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fintroduction%2Fstories_in_amp
as _posts/2023-11-01-amptest.html (on my GitHub repo) but when I deploy it, it gives me 404 error.

Also, in _posts/2019-06-06-blood-in-the-feed.md , I tried to {% link _posts/2023-11-01-amptest.html %} but it gives me a build error saying that this document doesn't exist.
Error:
github-pages 227 | Error: Could not find document '_posts/2023-11-01-amptest.html' in tag 'link'.
Make sure the document exists and the path is correct.

I am not much experienced with HTML and Jekyll so your help would be really appreciated.
Rishabh

Update FontAwesome with missing icons

I'd like to use icons for Telegram, Meetup or Discord on my website. Though there are available on FontAwesome, I don't know how to make them show up on my webpage using Forty as a template.
I would appreciate your help, thanks
Nice work on the template btw, much love!

It would be nice to have a 404 page

The porting from html is excellent, i suggest adding a 404 page for completeness.