daleanthony/uno

Uno - a minimal, responsive theme for Ghost

Uno for Ghost

Uno for Ghost is the result of my first 'mini-project' of 2014. The theme features a minimal, responsive design with a cover page, disqus comment integration, foundation icons and various colour options.

Demo

There's a demo of the theme running on my personal website, daleanthony.com

Features

Cover page The landing page for Uno is a full screen 'cover' featuring your avatar, blog title, mini-bio and cover image.

Built with SASS, using BEM If you know HTML and CSS making modifications to the theme should be super simple.

Responsive Uno looks great on all devices, even those weird phablets that nobody buys.

Disqus comments Disqus integration allows users to comment on your posts.

Foundation icons Uno contains the Foundation icon font by Zurb which means you can easily add icons. A full list of available icons can be found on the Foundation Icon website.

No-JS fallback While JS is widely used, some themes and websites don't provide fallback for when no JS is available (I'm looking at you Squarespace). If for some weird reason a visitor has JS disabled your blog will still be useable.

1 theme, 5 colour options Uno includes 5 different colour options for you to chose from.

Future Ghost is still a work in progress with many features not yet implemented, as Ghost gets updated new features will be added to Uno.

FAQs

Some common questions are answered on the Uno FAQ page

Contact

The best way to contact me is by dropping me an email or my messaging me on Twitter

Licence

Creative Commons Attribution 4.0 International

Development

In order to develop or make changes to the theme you will need to have the sass compiler and bourbon both installed. If you are running a Ghost environment locally then you should already have these installed as those are required to run Ghost.

To check installation run the following commands from a terminal and you should see the > cli output but your version numbers may vary.

** SASS **

sass -v
> Sass 3.3.4 (Maptastic Maple)

If for some reason SASS isn't installed follow the instructions from the Sass install page

** Bourbon **

bourbon help
> Bourbon 3.1.8

If Bourbon isn't installed follow the installation instructions on the Bourbon website

Once installation is verified we will need to go mount the bourbon mixins into the scss folder.

From the project root run bourbon install with the correct path

bourbon install --path assets/scss
> bourbon files installed to assets/scss/bourbon/

Now that we have the bourbon mixins inside of the scss src folder we can now use the sass cli command to watch the scss files for changes and recompile them.

sass --watch assets/scss:assets/css
>>>> Sass is watching for changes. Press Ctrl-C to stop.

** MacOSX Maverick **

Some people may receive this error when trying to run the sass --watch command

> LoadError: cannot load such file -- rb-fsevent
  Use --trace for backtrace.

This is a known issue with the Sass on MaxOS Maverick as indicated install the rb-fsevent gem

gem install rb-fsevent

uno's Issues

Older and Newer Posts buttons on mobile render improperly

Go to a page that has both the Older Posts and Newer Posts buttons and the Older Posts button will wrap around to a newline and overlap the Newer Posts button.

Licensing

Uno's a gorgeous theme, I'm running it on my in-development Ghost blog and love it. What (if any) licensing do you have on the theme? Could they be included in the repository to clarify to anyone interested in forking / contributing etc?

Facebook post preview fix

When posting to Facebook the description currently includes post tags, which it shouldn't: https://twitter.com/julianweisser/status/468747818757144576

Problems running sass --watch

I'm new to sass and bourbon but have gem installed sass and bourbon and have a working Ghost development environment. I grabbed this theme and made the necessary adjustments I wanted. To build the sass I figured I'd just use the watch command

morgan.craft@mcraft:~/ghost-themes/uno/assets (morgancraft)$ sass --watch scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
      error scss/uno.scss (Line 1: File to import not found or unreadable: bourbon.
Load paths:
  ~/ghost-themes/uno/assets
  ~/ghost-themes/uno/assets/scss)

So I though oh maybe I need to do something with bourbon so I looked at those docs and went into the scss/ directory and ran

bourbon install

which added a bourbon/ folder

I went back up to the assets folder and ran the command again to watch and same error.

Not sure if this is the best place to ask, figured you might be able to shed some light on the issue and I was planning to update the readme with instructions on usage for those of us that are unfamiliar with Sass/Bourbon.

Cheers!

RSS icon

Option to add RSS icon that links to Ghost feed from social.hbs

Changing width of the post

Hi, is there an easy way for changing post width? It's pretty common that when i open blog post, i see a big white space on the right side. I could use it , a specially when i put some code into the article.

Previous/Next post buttons

Feature Request

Add buttons at the bottom of posts to allow for navigating to prior or next post on the blog

Demo page not working

The demo page on http://daleanthony.com/ gives me this error:

Welcome to daleanthony.com, a site recently created using our clustered Linux web hosting.

If you're seeing this page instead of your website, please replace or remove the default index.php from your public_html directory.

Featured image in post list

Is there any way to show the first image of a post in the post list?

CSS Flashes While Loading

This screen capture shows an annoying movement of text on the side panel that occurs while switching pages. It doesn't occur all the time and seems to vanish when the pages have been cached, but the flash is still rather unsightly.

I think I've found a potential fix that seems to work for my personal website. After doing some digging, I realized that on page load, the jQuery method removeClass('no-js') is being called on the body element. The only instance of the no-js class in the CSS comes on line 1249 as of this commit, and it appears to modify the panel-main descendant's width to 35%. Removing this CSS declaration has helped.

That would explain the brief flash between 35% and 100% width. Admittedly, I'm not intimately familiar with the Uno codebase, but I believe that this declaration is erroneous altogether; as far as I can tell, the panel-main class is always supposed to take up the entire width of its panel-cover parent.

Thank you!

Author name, image, bio on posts

Feature Request

At the bottom of each post allow for displaying the author's image, bio, and name. I would add it myself since ghost makes this easy but I don't know CSS at all.

Content sliding issue

Content slides in twice when the blog button is pressed twice, which is a little bit annoying.

See screencapture:

Avatar border

On some browsers (including mobile) instead of the white round border around avatars it looks as if there are 4 sides cut off

Feature Request: Ghost Main image per post

Since Ghost version 0.5.3 now posts support a main image. It is possible update the theme with this feature?

side-panel shield the main content

At first, I access http://127.0.0.1:2368/ with Google Chrome in maximized mode, then click button "Blog" to access http://127.0.0.1:2368/#blog. It looks very normal. However, when I resize the browser window, side-panel shield the main content.

After I modified the /assets/js/main.js, it appeared to be normal.

$(document).ready(function() {

  $('body').removeClass('no-js');

  $('a.blog-button').click(function() {
    if ($('.panel-cover').hasClass('panel-cover--collapsed')) return;
    currentWidth = $('.panel-cover').width();
    //if (currentWidth < 960) {
      $('.panel-cover').addClass('panel-cover--collapsed');
      $('.content-wrapper').addClass('animated slideInRight');
    //} else {
    //  $('.panel-cover').css('max-width',currentWidth);
    //  $('.panel-cover').animate({'max-width': '530px', 'width': '40%'}, 400, swing = 'swing', function() {} );
    //}
  });

I'm not sure whether this kind of change could be a robust solution or not.

No Newer Posts button on final page of posts

Affects both Desktop and Mobile. Go to the very last page of a blog's posts and there is no Newer Posts button.

Styling for tables?

Really love this theme, but any tables look awful (no default styling at all). Do you consider adding Uno-specific styles for them or at least copying from Casper theme for now?

Missing package.json

As the builder says :

Warning: Found a theme with no package.json file
Theme name: uno
This will be required in future. Please see http://docs.ghost.org/themes/

No worries though, there's still time. Just a reminder.
see : http://docs.ghost.org/themes/

Syntax higlighting problem

Hello!

Problem:

About using sass partials ?

I may have misunderstood something but why not using partials scss files (prefixing filenames with _) so we don't have so many useless css file generated?

see http://sass-lang.com/guide#topic-4

content inside code box overflows

Especially when rendering mobile layout, source code is likely to overflow the code box.
This causes the layout to not render properly.

Probably an overflow-x: scroll; property for the code tag may solve this problem.
https://github.com/mattmezza/Uno/commit/e500463d744db83da35a1640b17b9286c288d55f

Can't have static page

Post that marked as static page won't show up anywhere.

/tag/ page unnormal

for example: http://daleanthony.com/tag/projects/

PrismJS integration with Uno

I tried adding PrisimJS (syntax code highlighting) to the Uno theme, however, Prism was not able to parse the suggested way of making a code block, eg.

```language-javascript line-numbers
 var syntax = new AwesomeFeature();
```

Instead, I had to explicitly add the pre and code blocks, eg.

<pre class="line-numbers"><code class="language-javascript">
var syntax = new AwesomeFeature();</code></pre>

I am submitting this here to see if someone has found a cleaner approach to using PrismJS with Uno?