Currently the content is designed to display the features of the theme and some example posts. It would be better if the example site looked more like a real site, one that this theme would work best for.

Currently the logo is squashed if the logo is wider than the default

People are going to need this if they want to contribute, so they know a bit more about what happens here. Just seen this project and it could be useful https://github.com/WeAllJS/weallbehave

Also https://github.com/WeAllJS/weallcontribute

Features

• Tested in all current browsers, that includes IE as well as Edge
• Extensive set of shortcodes to include various elements; such as buttons, icons, figure images and more
• Solid typographic framework from Sassline
• Configurable navigation via a single file
• Modular Jekyll components
• Easily interchangeable sidebar
• Contact form built in
• Works on GitHub Pages out of the box
• Built with Jekyll 3.2
• Designed with Siteleaf in mind
• Has documentation

As discovered by @sskylar, the only gem that the theme needs to have is jekyll-seo-tag. This can cause problematic errors, find a way to check if the gem has been set in the config.

Summary

The blog page view uses the site title and description instead of the page title and description.

Reference

See line 13 in _layouts/blog.html, lines 11 and 14 in _layouts/default.html

page.collection should be page.collectionpage

Additionally to this the meta information of the page is getting affected, take a look at https://github.com/daviddarnes/joelcagedesign.com/blob/6bca7bd2c6ea4b157acec00578548ac0ac990f0e/_layouts/default.html#L11-L21

When you use jekyll new in Jekyll 3.3 the index.md has a front matter setting of layout: home. This is due to the minima default theme having a home layout.

Simply by changing one of the layouts to home it'll make the theme switching process a little easier.

In Firefox, the aside sticks to the top of the viewport while scrolling down the page. This doesn't happen in Chrome, where the aside is stuck at top. See screenshots for illustration, first one is FF showing correct behavior, second is Chrome failing.

Allow theme users to add as many, or as few, sharing options as they like. CloudCannon have put a pretty comprehensive tutorial for this http://cloudcannon.com/tutorials/2017/02/01/lightweight-social-share-buttons/

This will need to be controlled via the config file though, in a similar fashion to the other navigation data

Now that CSS custom properties are becoming more widespread, it's probably worth looking into combining all the variables that matter to users into one file. There's already a _colors.scss file and sassline has a _variables.scss file, so maybe we just abstract the typographic settings into a _fonts.scss file? Or combine them into a _settings.scss file.

After this has been worked out we can then look into using CSS custom property overrides

• Sassline: For handling typography and type setting in general
• Normalize: Because browser still don't quite see eye to eye
• More? Please share

Sassline has a layouts file which is not being used inside alembic, if anything it's causing problems by clashing with generic class names

Edit: This is also apparent in garth theme https://github.com/daviddarnes/garth

If a page hasn't got a layout selected it'll look awful. Maybe just move the header, footer and sidebar into the default layout?

Due to the nature of most CMSs, paragraph items will often be rendered inside a list item. For example:

<ul>
  <li><p>Item</p></li>
</ul>

or

<ol>
  <li><p>Item</p></li>
</ol>

There needs to be some precise styling to stop paragraph items padding out so much when inside a list item, using something like li > p. The only issue with this is that sassline is dealing with most of the typographic styling, so it'll need to be overwritten

Hi David, Thank you for the awesome theme (And thanking all those who contributed)!

I am setting up Alembic to my blog site from scratch and I'm facing an issue where I don't see scroll-bars for code snippets. I also installed kramdown rouge and I have set the following properties in my _config.yml:

markdown: kramdown

kramdown:
  input: GFM
  syntax_highlighter: rouge

But I still couldn't get the scroll bars for the code-snippets -- lengthy lines are wrapping into the next line. Here is how it looks:

Please guide me on how I can get the scroll-bars there. Thank you!

Going to need to change the sample content to working content to allow the demo to work properly

Hello,

First, thanks a lot for what you've done, it's really helpful for a newcomer to jekyll ! Especially for typography and vertical rythm.

Now, I find that the maximum font size is too big (it's like 30px line height) : I want to show some code, and I think it requires too much scrolling for the reader.

I would like to use the second biggest font size. I figured out it has something to do with the breakpoint properties but I cannot find how you configure it.

Could you help me ?

Thank you ;)

Really sorry for missing this everyone! Language support is really important for a theme that is going to be used all over the world. Will implement with the following:

1. <html lang="{{ site.lang | default: "en-US" }}"> Allow the user to set the lang, default being US english (most common)
2. I'll set a in the config as an example, plus I need to use en-GB as I'm in the UK 👍

Something like this https://www.youtube.com/watch?v=y4gZMJKAeWs

Just need to create a .json template to output all pages and posts, as well as place some js into an include. I'm guessing this will be quite a popular request as Jekyll requires a bit of work to add search functionality

Hi,

I noticed this theme is set up to work assuming a user/group has a single github.io domain. For example if the domain is:
https://name.github.io/repo/
instead of:
https://name.github.io/
things seem to break, navigation, posts, blog, image links, etc. Is there any way around this. I could change the navigation_header setting for example:
navigation_header:
Home: /repo/
instead of
Home: /

however this does not seem to work for "Search", also if running locally paths have to be reset or paths break again. I am new to jekyll, maybe I am missing something simple? Any help or advice you can give is appreciated, great theme!

• Exclude 404 from default nav
• Exclude blog pagination pages from default nav
• Check that default nav has a working current state for items
• Check navigation all over really
• readme contents needs indentation to match heading levels
• Make sure gemfile configs are all ok
• Scan over CSS to make sure it's in a logical manner
• More bugs to follow

Logo image is just for schema and not the actual image on the page, should just be a regular img as SVG or png

Hi @venuthatikonda and @hrkeni,

I noticed that you are all using Alembic in your own individual ways after I did a quick search on GitHub. This is awesome to see, so thank you all for using my theme 😄

I'd like to list these example sites in the documentation to show what's possible with Alembic. I've listed the urls below, if you'd not like your site to be listed then let me know:

• http://hrkeni.me/
• https://venuthatikonda.github.io/

Probably better off calling them assets/logo.svg and default-social-image.png, then people can change them without changing any code. Also make a note in the docs of this, along with how to change the logo image path in the config

• Add a contact form (see #3)
• Add Disqus comments
• Add full width page layout
  • Check full width figures on full width pages
• Add sidebar left page layout
• Test creating a feature page (image and text alternating)
• Test Google maps
• Test an audio player
• Test a video player
• Add left aligned figures
• Add right aligned figures
• Setup url for theme, subdomain like alembic.darn.es would work
• Basic icons? Social and basic navigational ones?
  • Twitter
  • Facebook
  • Instagram
  • LinkedIn
  • Dribbble
  • GitHub
  • Email octicons.github.com/icon/mail
  • Link icon
  • RSS

When I include the MathJax snippet to enable LaTeX in _layouts/post.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>, my equations are all colored green. This must be a setting in the CSS in Alembic that is overriding MathJax. Do you know what I need to change to allow the equations to be black, same color as the blog post text? Thanks.

EDIT:

Here is an example.

Something like this https://codinfox.github.io/dev/2015/03/06/use-tags-and-categories-in-your-jekyll-based-github-pages/

This is my favourite technique that I've seen. Category labels link to an anchor point on a single page, and that page lists every post but in category grouping. I'd leave tags out for the initial version

TODO:

• Create gemspec file
• Test theme out
• Allow easy way to create new config file
• Write up installation and usage in README
• Submit RubyGems.org
• Test if users of theme can customise files

The process for installing via gem is a bit clunky (an upstream Jekyll problem, of course). I had better luck installing with Bundler (adding the alembic-jekyll-theme to my gem file). When running without, I got this error:
jekyll 3.3.0 | Error: The alembic-jekyll-theme theme could not be found.

I wonder if, in addition to the set ups you have now (boilerplate, gem theme), you had a hybrid, where someone needs to download the entire Jekyll install (or clone a branch), run bundler, or something that updates the theme etc. That is to say, a download that has everything you need to run the gem-based theme. Hope that makes sense!

I thought Sassline applied it for me? Guess not, needs testing.

Propose to add this http://danklammer.com/bytesize-icons/

Allows for stylistic changes for more variation, however the twitter and github icons have been added? Will ask

Currently there is only one sidebar file, with tons of conditionals in there. This could be better managed with different files brought into different layouts

Following code is to style the colour inputs, however they aren't needed in the main theme:

input[type="color"] {
  padding: 0;
  height: 2.4rem;
  &::-webkit-color-swatch-wrapper {
  	padding: 0;
    &:after {
      content: "Color";
    }
  }
  &::-webkit-color-swatch {
  	border: none;
  }
}

Best to just add them to the styling page and not the main codebase

Feature section element should probably just be a div within the header element. It's just an additional element to it, not a section unto itself.

Thanks, best Jekyll theme I've seen!

I desire to make a list of publications with two columns e.g.
http://yaghi.berkeley.edu/publications.html

How can I do so in this theme while allowing the width to scale automatically with different devices/browser settings? [And also work on Github pages.]

Thanks. Sorry if this is a newbie Jekyll question...

They're frowned upon in 90% of cases, see the following https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/ Basically the text of a link should explain the link, either that or the alt attribute to the containing image should. Anchors need text, not titles

Here's a brief search of all the occurrences https://github.com/daviddarnes/alembic/search?l=HTML&q=title%3D&type=&utf8=%E2%9C%93

Summary

In some cases people may want to style a single page without disrupting other pages or their layouts. By adding a class to the body that is generated from the page title (and page layout?) people could utilise this and style pages individually

Example code

<body class="layout-{{ page.layout }}  {{ page.title | slugify }}">
   ...
</body>

This looks like a good library to use http://bafs.github.io/Gutenberg/ Should make print-outs from a page more presentable

Hi,

I noticed that if one of your posts contains the text "\n" the search functionality breaks and is unable to find anything.

For example if I add the text \n (not an actual carriage return but the text) to 2016-08-27-example-post-one.md the search is not able to find anything.

I am guessing that when the search feature parses these pages it incorrectly interprets the "\n" as a new line instead of plain text and halts the search pre maturely. Not sure if this is true though or if it's easy to fix, though i'm happy to try.

Summary

Just some small updates to the theme and content, highlighted upon testing locally.

To dos

• Update bundler and dependants
• Update LinkedIn url to https://www.linkedin.com/in/daviddarnes/
• Add an alt option to images to allow people to have valid image elements when using the figure.html include
• Take off http://katiesimonemusic.com off examples as it is no longer live
• Test sharing buttons when content of page isn't regular text content, can cause unexpected results with video and image embeds

Currently theres:

• fetch() polyfill
• sassline
• flexbox prefixer
• normalise
• a code syntax highlighter

…that should all be managed with something like npm & gulp. This would also improve the documentation on external sources that don't want to get confused with what has been created in this project

variables.scss could be easily edited by a dev, or replaced by a theme user

Hi @YaManicKill, @case2111, @pizzapgh and @bawejakunal!

I noticed that you are all using Alembic in your own individual ways after I did a quick search on GitHub. This is awesome to see, so thank you all for using my theme 😄

I'd like to list a few example sites in the documentation to show what's possible with Alembic. I've listed the urls below, if you'd not like your site to be listed then let me know:

• http://katiesimonemusic.com/
• https://bawejakunal.github.io/
• http://case2111.github.io/
• http://www.10people.co.uk

Dear @daviddarnes,
I would like to change the fontsizes, but changes in rootsizes (in file _variables.scss) seem to affect only the line-height, not the fontsizes.

E.g.:

$rootsizes: (
  rootsize-0: 5,   // 24px line-height body text
  rootsize-1: 5,   // 28px line-height body text
  rootsize-2: 5,   // 30px line-height body text
  rootsize-3: 5,   // 34px line-height body text
  rootsize-4: 5    // 38px line-height body text
) !default;

• Favicon control isn't exposed in the UI (config could handle this)
• Blog page content isn't exposed in the UI (collection data could handle this)
  • {{ site.collections.posts.title }}
  • {{ site.collections.posts.description }}
• Sharing buttons need to be wrapped in a clearing div

Summary

Centring images is a desirable option for people. Having a setting for for this in the <figure> element include would allow this with little effort

How to

1. So the good thing about this addition is that you only really need to add some CSS. Pop on over to the main CSS file and you'll see .figure with alignment options. Add a &--center with your styles in (US spelling because I dunno, color is spelt wrong too 🙃)
2. Next you'll want to tell us how to use it, which you can do in the README.md (should be real simple to add here)
3. Final step is to let me know when you're done with a new pull request! Then I can bump the gem version, then is 🚀 time

Gasps throughout the room

The colors import doesn't need the .scss at the end https://github.com/daviddarnes/alembic/blob/master/assets/styles.scss#L8

Currently checks for 5+ items in the main nav, this isn't worth checking for and just causes additional bugs

forked. installed. run command jekyll serve and got this error:

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/styles.scss':
                   Invalid US-ASCII character "\xE2" on line 27