Phlow did a fantastic job with this template! I made the following upgrades and changes to suit my needs:
_includes/_masthead.html, I added a new masthead type - two-column, which gives you an image on the left, and a title and text on the right.
To use this masthead, use the following in your frontmatter:
header:
white_space: true
image_left: image-for-left-column.jpg
title: Text for Header
text: Text for your right column. This will go into a div. <br> Use the break tag as before this paragraph for a new line, or: <p>surround each paragraph in paragraph tags.</p> You can use html tags like <a href="https://duckduckgo.com">links</a> in this section, but markdown won't work.
_sass/_07_layout_scss- explains theclass="t## b## r## l##"stuff.
- Instructions for the grid that is used to layout the entire page from Foundation v5
- Kramdown Quick Reference
- feeling-responsive Template source code for documentation pages on Github
- The Templates pages on the live feeling-responsive website.
- The Header examples on the live feeling-responsive website
- General documentation on the live feeling-responsive website.
Unsure if these are actually useful
- https://getbootstrap.com/docs/4.2/layout/grid/ - unsure if we actually use bootstrap, and if this is the version we use.
And the Internet's answers.
What you'll find in this section
If I had to search my question online, and the solution was not immediately obvious in the first link in DuckDuckGo, I try to remember to write it down. This is where I'm writing it down for this website. This will include: * Tools, syntax, and features I should have known, but could not remember for the life of me.Hopefully writing it down helps cement it in my brain for next time. * Things I've never had to do or implement, and had to had to look up. * Bugs, glitches, and other issues that frustrated me. I do this to make these answers accessible in the future for both myself and anyone who (for some strange reason) refers to this project for information. Additionally, I want to explicitly acknowledge that I am learning as I work. I think that's one of my most valuable skills, and that it should be highlighted. And finally, I am a strong supporter of the open-source community, and a proponent of collaboration. I want to cite my sources, and highlight the people and websites that were most helpful to me.-
How do you do multi-paragraph footnotes? (or lists and similar.)
- After the first paragraph, indent all other paragraphs by 4 spaces
-
Source: https://www.hardscrabble.net/2023/multi-paragraph-footnotes-in-markdown/
-
Example:
Some text.[^bignote] --- [^bignote]: Here's one with multiple paragraphs and code. Indent paragraphs by 4 spaces to include them in the footnote. `{ my code }` Add as many paragraphs as you like
-
- After the first paragraph, indent all other paragraphs by 4 spaces
-
How do I include HTML/CSS in my Markdown document, and use Markdown in my HTML elements/documents?
HTML elements work natively in Markdown documents.
**Source:** * [Michael Currin's answer on the Jekyll Forums](https://talk.jekyllrb.com/t/html-in-markdown/4585/2) * And the [original Markdown instruction manual section](https://daringfireball.net/projects/markdown/syntax#html) that he links to **Example:**I am writing a paragraph in Markdown. <h2 style="border-style: solid;">This is a custom header </h2> I used an HTML tag with CSS elements in the tag, and it should just work. <h2 style="border-style: solid;">This **Header** has unparsed _markdown_ styling </h2> This paragraph has markdown styling. **This would show up bold** and _this would show up italic_. I used the same markdown styling in the hdeader - but the header would show the asterisks and underlines, not the styles they represent.Kramdown allows block-level class, style, and ID definitions using `{: .class attribute="value" #givenID} after the block
**Source:** https://kramdown.gettalong.org/quickref.html#block-attributes **Example:** ``` ## A Heading that I want to outline and name {: border-style="solid" #ArbitraryIdentifier}A paragraph that I want in a foundation panel. These classes are introduced by Foundation, which this website uses, but are not universal to HTML/CSS. {: .panel .radius}
</details> <details><summary>Kramdown allows markdown parsing within (most) spans and blocks using the `markdown=` attribute</summary> I knew this one was possible, but I kept running into issues, and finding my source for this knowledge was incredibly difficult while I was trying to troubleshoot. So I've included several explanations and examples in the sources. This has worked fairly consistently for me, using `markdown="span"` or `markdown="block"` in the html tags as needed. **However**, within the YAML headers, this doesn't seem to work. The content in the YAML headers that gets inserted into the page parses as Markdown/Kramdown, and the HTML tags in that content get used as HTML like they would in a .md document. But including the `markdown` attribute in the HTML tag does not allow markdown within the HTML span or block in the YAML header to be parsed as markdown. I hypothesize that this is because the YAML headers are parsed by Liquid, and that the Liquid markdown parser is using a flavor of markdown that does not support the `markdown` attribute, rather than the Kramdown parser that Jekyll is using from my `_config.yaml` settings. **Source:** * https://stackoverflow.com/questions/22291211/jekyll-how-to-get-markdown-parsing-inside-blocks-using-kramdown * https://kramdown.gettalong.org/syntax.html#html-blocks * https://kramdown.gettalong.org/syntax.html#html-spans * https://kylebebak.github.io/post/mixing-markdown-html **Example:**[code stuff]
</details> -
[Question?]
[Short answer]
[Longer description/Explanation] **Source:** [Single Source Link] * [If more than one source link] * [Put them all in a list] **Example:**[Example of how to do the thing]
-
How do I make my photo circular?
[Short answer]
[Longer description/Explanation] **Source:** [Single Source Link] * [If more than one source link] * [Put them all in a list] **Example:**[Example of how to do the thing]
-
Why am I getting some random latin characters on my 404 page when I host my site locally?
This happens when the text is encoded with the Windows-1252 character encoding, and decoded with the ISO-8859-1 character encoding of the characters.
This was a weird bug to figure out. On my live website, built and hosted by Github, everything looked fine. When I hosted the site locally, using `bundle exec jekyll serve` and went to `localhost:4000/404`, it looked fine.However, if hosted the site locally, and went to a page that redirected to the 404 page, some characters like
...and → would get encoded as 3 seemingly arbitrary latin characters or diacritics.I went through a few steps to troubleshoot this.
- First, the UTF-8 Encoding Debug Table made it clear that that my special characters were being encoded using the Windows-1252 character encoding, but being treated as plain UTF-8 or ISO-8559 encoded characters when they were being displayed.
- My code was right - all the configs were set for UTF-8 character encoding (except in SVGs that I wasn't worried about anyway)
- My IDE, Visual Studio Code, was also claiming to be using UTF-8 for encoding and decoding files.
- For a minute I thought that the issue was the template itself
- The template was made by an apparent German-speaker
- Some of the common symbols used suggested they used a non-English keyboard - in fact, I first noticed this issue as I was replacing the
>symbols in some of the files. - However, changing the symbols to english-keyboard equivalents didn't fix the problem, and neither did resaving the markdown files with VSCode (which, again, was claiming to use UTF-8 encoding).
- Because this was only happening on local hosting, it suggested that this was a problem with my computer itself, not with the markdown.
- I was able to identify that, despite VSCode using UTF-8, the PowerShell terminal inside VSCode was using Windows-1252 character encoding with the
[System.Text.Encoding]::Defaultcommand.
- I was able to identify that, despite VSCode using UTF-8, the PowerShell terminal inside VSCode was using Windows-1252 character encoding with the
- I checked
chcp.comin my command line to check that status, but didn't want to mess with my computer too much. - Since the issue was unique to redirects, I went into the
redirect.htmlfile to see if I could fix it there by moving the charset declaration to the top of the<head>declaration. It didn't seem to work. - At this point, I did something smart - I tested my website on a different browser.
- Shockingly, the page was fine on both Microsoft Edge and Google Chrome. And then, it was also fine on a fresh Firefox profile. But it was still wrong on my standard Firefox profile.
- And finally, I cleared the cache on my Firefox profile. I deleted all data related to
localhost:4000, and reloaded the page. And. . . it worked. The errant characters rendered properly. It took me far too long to fix this issue. I probably shouldn't have bothered to fix it, since it did not actually affect the live site and I had actual content to work on. But it did teach me about character encoding and meta tags, and prompted me to set up a quick cache-clear button on my firefox profile.
Source:
- UTF-8 Encoding Debug Table
- Person who talked about the charset page thing and how to tell what section my computer was set to.
- A page about Windows-1252
- A StackOverflow conversation about A Jekyll bug regarding character encoding
- A github issue report about UTF-8 files outputting with incompatible character encodings
- An official page with instructions on declaring encoding as UTF-8
The index uses the frontpage.html layout, and also includes a masthead from _masthead.html if you use a header section in the frontmatter.
If you add a white_space=true to the frontmatter, it will add a small gap between the navigation bar and the masthead.
- Run Locally:
bundle exec jekyll serve --config _config.yml,_config_dev.yml
- Make text wrap on two-column masthead
- Fix Github Pages Build Error:
You like and use this theme? Then support me. Just paypal.me/PhlowMedia :)
If you are a webdesigner interested in Jekyll, the static website generator, this little newsletter is for you. I share tutorials, clever code snippets and information about my own Jekyll Themes called Feeling Responsive and Simplicity. Please don't expect weekly emails :)
Do you want to get to know Feeling Responsive? Than check it out first and have a look on its home at http://phlow.github.io/feeling-responsive/.
To get to know Feeling Responsive check out all the features explained in the documentation.
And what license is Feeling Responsive released under? This one.
Feeling Responsive is heavily customizable.
- Language-Support :)
- Optimized for speed and it's responsive.
- Built on Foundation Framework.
- Six different Headers.
- Customizable navigation, footer,...
Feeling Responsive is in active development. Thank you to everyone who contributed, especially Róbert Papp, Alexandra von Criegern and Juan Jose Amor Iglesias.
Click the image to watch the YouTube-Video-Tutorial.
