tryghost / casper Goto Github PK

From an email;

There is just one thing though, if I uploaded a picture for the Cover with a lot of white color, the blog title and description can't be read. I advice it is best if both the title and description have tiny shadows on them.

Related to #11

I actually meant to raise a naming issue about this - potentially better as "blog" rather than "settings" ? as in blog.title or blog.logo or blog.globalthingrelatingtotheblog

Rename "settings" to "blog". We may have other types of setting exposed to the frontend soon.

Casper was never intended to have the concept of featured posts, but the first post on the homepage should always be displayed in full.

At the moment we have 2 different templates (partials) for displaying a post, the list one you see on the homepage, and the the "feature" one which you see when you click through to a post

As per http://john.onolan.org/, it was intended that the first post on the home page would be displayed in full.

Originally, I interpreted this as a post marked as a feature. But this is incorrect. Rather, it should just be the very first post in the list.

• - Remove the concept of features, including renaming the feature template to something else
• - Always display the first post on the homepage in full, using what is currently the "feature" partial template.

From @aboutte:

Summary of Issue

Really long post title does not display correctly
  

Steps to reproduce

• crate a new post

• Title it: "a REALLY LOOOooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo title!"
    
  Observed result

Desired result

Smaller font size?

Additional Information

Client OS: Mac OS X 10.8.4
Server OS: CentOS 6
Node Version: 0.10.16
Ghost Build Number: 0.2.1
Latest Commit: e765af4
Browser: Chrome 28.0.1500.95

After setting user location, it is ugly in small size screen such as iphone. You can just resize your browser to test. I think the location shoud be in the middle of the line which will be better. See the image!

Then I dig into the css code, at line 687 of the assets/css/screen.css, I found the code below:

.author-meta li {
    float: left;
    margin-left: 10px; /* space to the left of the bullet */
}

After I detele float: left, everything is ok. I wonder anyone has the same feeling.

I thought it might be helpful if I add in a "tag.hbs" file and a "package.json".

I've just styled the tag archive page to look much like the single post page.

I've also set the version number to 0.2.0 but I'm not sure if that's correct?

Will submit a pull request shortly.

Not sure if this is an issue but when running Casper 1.0.0 and you're in a post there is a link to 'Home' but there is also an emoji to the left of this. I did take a screenshot but can't seem to attach it from my iPhone.

Found by @AJ-Acevedo

The Ghost text in the header with the class blog-logo looks different on a post page than it does on a static page.

The header of static pages look like this:

The header of post page looks like this:

Mac OS X 10.9.1
node 0.10.24
ruby 2.0.0p353
Sass 3.2.12
Dev Mode
DB: SQLite

I think this is pretty much done, but needs double checking after #112 - make sure that the title, description, and any other data used to render the frontend is definitely what is expected

This was originally raised on Ghost.

In 0efa582 @JohnONolan added a new feature to Casper, where images break out and become wider than the text.

However, that only seems to be happening on refresh, or second load, it never happens the first time. I have reproduced this on Firefox, so it doesn't seem to be part of the same issue as the big-font rendering issue which happens in Chrome/Safari?

For an example, visit hannah.wf and click on 'Spring Reflections'. Here it is in gif form:

It breaks out after I hit Cmd + R.

It would be nice if large images could break outside the width of the post content, but small images stayed centered, and all images went full-bleed on smaller screens. BUT CAN IT BE DONE?

Originally reported by @andyboutte here: TryGhost/Ghost#3514

Summary of Issue

With a long Website the link and link icon fall on separate lines

Steps to reproduce

• go to http://127.0.0.1:2368/ghost/settings/users/
• fill in a long URL for website
• go to some post

Observed result

The link icon stays on the line with the Location but the URL falls to the next line

Desired result

The link and the link icon should stay together

Additional Information

Client OS: Mac OS X 10.9.4
Server OS: Mac OS X 10.9.4
Node Version: v0.10.21
Ghost Build Number: 0.5.0 rc1
Latest Commit:
Ghost Database: SQLite3
Browser: Chrome 36.0.1985.125

very weird but sometimes text becomes invisible... when i inspect elements and change some style causing browser to redraw then it appears. still many people end up seeing blank page when they visit 😿

On mobile devices, embedded images in blog posts may not be "centered", like they do on desktop PC/Mac browsers.

Here's a screenshot of the "image center" issue.

What is shown on my desktop PC:

What is shown on my smartphone (Nexus 4):

This line has role="pagination" for

https://github.com/TryGhost/Casper/blob/master/index.hbs#L37

Output is incorrect, gives error in W3C validation of homepage.

You can change it to role="navigation"

http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example:The_.3Cnav.3E_element

Casper currently has quite a few bits and pieces in it which don't work, these should be removed so that deployed blogs don't look weird or act broken.

Please hide (comment out) the following, and anything else you can find

• - Post footer content
• - Picture of John

Originally raised as TryGhost/Ghost#3668 by @dbalders

Issue Summary

If you have a really long tag, the whole header is messed up and bleeds in with the rss feed making it un-clickable.

Steps to Reproduce

1. Create a really long tag on a post
2. Go to that tag's page

Technical details:

• Ghost Version: 0.5.0-rc2
• Client OS: Mac 10.9
• Server OS: Mac 10.9
• Browser: Chrome
• Database: SQLite
• Local

I believe this can be fixed with .post-meta {display:inline} rather than inline-block. Needs testing

I downloaded the repo directly and made some changes on the post.hbs. After the compressed zip file is uploaded, the rendered page shows an error for the asset path of CSS/JS files:

<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />

=>

<link rel="stylesheet" type="text/css" href="&lt;link rel=" stylesheet"="">

First of all, I wanted to say that I absolutely love Ghost, it is swesome! I also really like Casper theme, but it uses Droid Serif font, which does not support all the letters in my language (e.g, ā, ē, ī). I replaced it with Noto Serif, which is very similar, but I wanted to address this issue, because Casper is the default theme.

I have to think about which items on the page might be links. They might be more noticeable on better monitors, but it makes for bad UX for everyone else.

Reported by Sven Seebek

In my opinion ;)

Standard code blocks look really nice.

Casper does not make any use of author.website - it probably could/should

As per TryGhost/Ghost#381

{{paginate}} => {{pagination}}

{{dateFormat}} => {{date}}

Needs to be done on Casper else master is broke :)

Droid Serif doesn't support cyrillic, may be need to replace this font?

My blog has two pages. When I navigate to the second page I see an error in the console that the request to http://local.tryghost.org/page/2/assets/js/index.js returned "400 not found".

Ghost v0.3.2

screen.css

321 line. not correct hierarchy:
table.plain {
tbody > tr:nth-child(odd) > td,
tbody > tr:nth-child(odd) > th {
background: transparent;
}
}

and 414 line. Invalid value:
break-word

On file post.hbs the title variable passed to http://twitter.com/share must be URL-encoded otherwise a # character will truncate the string.

For example try to create a post with title "Foo #bar".

Casper is currently using the Google Font API in order to retrieve fonts. Due to the fact that these fonts are hosted on Google's servers, this presents a privacy risk to all viewers of blogs that use this theme and could cause additional downtime.

The fonts in question, Open Sans and Noto Serif, are both under the Apache License version 2.0 meaning that it would be acceptable to include them with Casper.

This is a follow up on TryGhost/Ghost#1577 to make Casper ready for sub directory support.

Assets like CSS/JS should use the asset helper to generate correct paths.

The height of blog cover is smaller on page 2, etc. compared to the homepage.

Screenshot of blog cover on homepage (in the latest Firefox):

Screenshot of blog cover on page 2:

You can see a "live" version of this bug on my blog here. Please note that I tweaked the capser theme so that the blog cover height is 38% instead of 60%, but I checked and this does not affect the bug in any way.

Upon further investigation, I have found that on blog homepage, the html source contains:

<body class="home-template">

But on page 2, page 3, etc., the html source contains this instead:

<body class="archive-template">

If you look in "content/themes/casper/assets/css/screen.css", search for "archive-template" yields the following:

.archive-template .site-head {
    height: auto; 
    padding-bottom: 5rem;
}

Note that the height is "auto". If you look at the main theme section, however, you will see:

.site-head {
    position: relative;
    display: table;
    width: 100%;
    height: 60%; 
    ... ...
}

And you see the height is "60%" here. This explains why the blog cover is much less in height on page 2. Is this "by design"? Or is the "archive-template" incorrectly used on page 2, etc.?

Thank you for looking into this.

@TryGhost You could add {{date format="YYYY"}} to the bottom of the default.hbs theme file. This will keep the year up to date.

https://twitter.com/eclarian/status/390935095218929664

The currently used version of fitvids can break layouts in Chrome 33.

See: davatron5000/FitVids.js#159

When you try to share a post on facebook and your blog is using the the Casper theme, the result is the below. I think with a few meta tags we could clean that up real nice.

Currently the typography on posts could use some love.

• Headings are not clearly relating to their correct content (closer to the paragraph above or simply sitting in the middle with no clear relation)
• Line-height could use some adjusting, perhaps with a baseline grid to make sure a reading experience isn't tiring

Some helpful posts to better the typography overall beyond just the above:
Grids from typography
Between the lines
Fluid Type

On line 5:
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />

should be:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Should add microdata properties on the elements to make it friendly for the search engines.

Right now Casper doesn't seem to have any tags that let social media sites such as Facebook or Twitter easily parse the content for their previews; thus sharing Ghost articles requires manual work to provide as much information as possible at a glance. (See this forum post for a user reporting problems with Facebook sharing and pre-filled information)

Implementation of these tags would improve sharing and encourage theme developers to include them as well.

Information on various tags:
Open Graph Protocol (Facebook)
Twitter Cards

Someone on twitter has reported that the styles of embedded gists look a little wonky.

You can include this tag in a post to test it out for yourself.

<script src="https://gist.github.com/jgable/6598091.js"></script>

When you are on tags template and dont have a {{blog.logo}} you cant go back to home page, because the {{blog.title}} doesn`t have a link on it.

https://github.com/TryGhost/Casper/blob/master/post.hbs#L42

See if you can do something.

https://ghost.org/forum/installation/4063-why-share-this-post-is-not-working-on-my-blog/3/

Replace all instances of created_at with published_at

Please see screenshot.

Any id's such as #ghost need to be removed or scoped to the part of the page they apply to

Line 18,

<a class="blog-logo" href="{{@blog.url}}"> doesn't include the subdomain, if the blog is hosted on a subdomain

Should this be href='/'? I notice in index.hbs that the URLs are absolute from /

Same behaviour appears in the footer

Live example: http://blog.echoplex.us/2014/01/25/firefox-applications-are-easy/

I just got this comment on my blog using Ghost 0.3.3-azure.

"Your blog's theme is not dark-background-friendly at all. Apparently the text is defined as gray, but the background is not defined. My default background is gray so it looks... not great!"

This seems to cause some issue on Firefox where you can set the preferred background color to e.g. dark. Probably other browsers have the same features too.

Use the pagination helper from TryGhost/Ghost#196 along with the additional work to wire it up in TryGhost/Ghost#197 to output working pagination on the homepage, and subsequent pages of posts.

I think the responsive theme hides edit/settings when displaying a warning message on the iPhone5 when holding the phone in portrait mode.