bourbon files are missing about ghost-caffeine-theme HOT 11 CLOSED

Thanks for reporting this issue! I'll take a look at this over the weekend and try to get a fix in for the short term.

As for the refactor, you are 100% correct. I've been meaning to refactor and do an overhaul of the entire codebase when I had some free time (i.e. integrate ES6, get off bower, fix the build-tooling, etc). Been working on other projects so time has been a little harder to find recently :( I'll see what I can do.

from ghost-caffeine-theme.

So @kelyvin, is there any way to compile modified theme? (Basically, I changed only fonts).

from ghost-caffeine-theme.

Hi @Prochitaem,

Huge apologies for the super late reply, finally have a moment to take a look at this.

I actually did a fresh checkout and didn't run into any compile/build issues. Which version of nodejs are you running?

Unfortunately, this project is fairly old and still uses bower, which is responsible for bringing in the bourbon assets. Can you also make sure you have bower installed globally and try running bower install? It should auto run when you run npm install, but run it separately just in case.

For context, on my machine I am running on the following:

node v8.9.4
bower v1.8.2
npm v5.6.0

from ghost-caffeine-theme.

Hi @kelyvin My config is:
node v6.13.1
bower v1.8.2
npm 3.10.10

I was able to compile it by manually providing required files - but that broke the resulting css and js.
Had to roll back to the original files.

from ghost-caffeine-theme.

@Prochitaem when you say "broke the resulting css and js", what do you mean by that?

I'm guessing you're trying to run the compiled assets as a theme against Ghost, what kind of errors are you seeing on your browser tools? Also what version of Ghost are you running?

from ghost-caffeine-theme.

Uncaught TypeError: w.FontFaceObserver is not a constructor
at caffeine-theme.js?v=0db24c18ba:8
at caffeine-theme.js?v=0db24c18ba:8
It shows site header part but no posts are visible :(

from ghost-caffeine-theme.

These are with your font changes? or without?

from ghost-caffeine-theme.

This is with them:
_fonts.scss:

// Optimize css delivery
// @import url(https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto+Slab:300,400);
// @import '../../vendor/font-awesome/scss/font-awesome';
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);
@import url(https://fonts.googleapis.com/css?family=Kurale|Roboto);
 
and in _variables.scss


$sans-font             : 'Kurale', sans-serif;
$sans-font-fallback    : Geneva, sans-serif;
$serif-font            : 'Roboto', Georgia, serif;


Those are the only changes I`ve made. I am a little bit suspicious about font-awesome part.

from ghost-caffeine-theme.

Okay perfect thanks for sending me that! I definitely know the issue.

You are correct, the issue lies within the following line:
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

If you go to that CSS file directly, you'll see that it's trying to load the web fonts directly through lines of code that look like this: url(../webfonts/fa-solid-900.woff). However, the problem with this is that the browser tries to resolve this path and expects the font to exist within this path (which it doesn't).

So how can you fix this? There are many ways to do this. Probably the most straightforward way is to do the following: you can download Font Awesome 5 directly from their website, add the font faces to the fonts directory (which you'll see that I did the same for font awesome 4), and follow the instructions detailed here: https://fontawesome.com/how-to-use/web-fonts-with-css#less-and-sass. That should resolve your font face issue. Can you give that a try?

from ghost-caffeine-theme.

No luck :(
What I did:

• changed _font.scss to
  -- @import '../../vendor/font-awesome/scss/fontawesome.scss';
  -- @import '../../vendor/font-awesome/scss/fa-solid.scss';
  (prior to that, copied sccs directory from fa distribution to that location)
• added $fa-font-path: "../webfonts"; to the theme _variables.scss
• added fonts to the webfonts dir

from ghost-caffeine-theme.

Closing due to my own inactivity and because I want to redo the entire build system so that this is no longer an issue. See #62

from ghost-caffeine-theme.