Code Monkey home page Code Monkey logo

bleak's Introduction

Bleak

An elegant AJAX driven theme for Ghost. See a demo at: bleak.peteramende.de

If you like this theme, you can buy me a coffee beer.

Screenshots

⭐️Features

  • Responsive layout
  • Automatic code syntax highlight and line numbers
  • Disqus support

🎨 Setup custom color

  1. Go to Code injection.
  2. Add this to Blog Header:
<style>
  :root {
    --color-primary: #D95736;
    --color-primary-active: #BF4526;
  }
</style>

💬 Setup Disqus

  1. Go to Code injection.
  2. Add this to Blog Header:
<script>var disqus = 'YOUR_DISQUS_SHORTNAME';</script>

Sticky Header

You can make the navigation stick to the top by adding the following lines via code injection:

<style>
  #wrapper {
    padding-top: 4em;
  }
  #nav {
    position: fixed;
  }
</style>

Development

Install Grunt:

npm install -g grunt-cli

Install Grunt modules:

npm install

Install Bower:

npm install -g bower

Install Bower components:

bower install

Build Grunt project:

grunt

Distribute Grunt project:

grunt build

Copyright & License

Copyright (C) 2015-2021 Peter Amende - Released under the MIT License.

bleak's People

Contributors

andyindahouse avatar deanwhitehouse avatar dependabot[bot] avatar electricalgorithm avatar joshdholmes avatar jrmd avatar khannurien avatar manuelrauber avatar marvinroger avatar mjamro avatar rgarrigue avatar sopitz avatar zanel1u avatar zutrinken avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bleak's Issues

Green delimiter coloring transparent image

Hi

I linked this image to a post. As you can see, it's a .png with a transparent background. Displaying in my blog's main page with your theme, the image was colored green. Not exactly the same one as the delimiter, but something like 50%-80% of it.

I fixed this cosmetic issue by downloading the image, painting the transparent part in white and upload it to the blog. But I'ld prefer a link ;-)

Thanks & regards

Ability to change the highlight.js theme

It would be nice if it was possible to change the highlight.js theme.

I first tried by adding <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/darkula.min.css"> to the code injection head, but it didn't work exactly (see below).

screen shot 2016-04-13 at 15 59 58

I was hoping it would look something like this.

screen shot 2016-04-13 at 16 01 18

To get it to work i used the developer tools to disable the backgrounds from both pre.codeblock code and pre.codeblock .lines.

Translating Month Names

Hello,

is it possible to translate the Month names like "May" to german "Mai".
If yes, what file I must edit to make it work?

Thanks for your great work!

Code Fonts - local tweaks

Hi,

Inline / Code-blocks - Inconsolata at 0.874em does not render well for me.

Using code-injection, I have tweaked to Roboto+Mono from Google, and change the font-size to 0.80em, which all looks good for in-line comments.

Codeblock font at 1.0em is too large in proportion to the rest of the page - I want to tweak this to 0.90em.

I have naively tried:

    .post-content pre code, .post-content pre tt, .post-content pre.codeblock .lines {
       font-size: 0.90em;      
    }

but the pre.codeblock dark background appears as an uneven heavy border, I think because the child div.lines and code.hljs have differing non-obvious box-models - the div.lines is 1-2px higher than the code.hljs - so the numbering doesn't quite align.

Here's a pic: bleak-codeblock-issue

I've reached the limit of my CSS tweaking - I would love it if it were easier to scale inline and codeblock and div.lines to a different font-style and font-size.

P.S. Love the theme - one of the best there is!

Code injection per post

I think with the current setup of bleak theme, the new code injection per post doesn't seem to work properly.

.kg-bookmark classes are missing from style.css (for Ghost v2.31.1)

Hi!

I was about to migrate my blog (which already used bleak v1.4.0 ) to the newest version, but I got the following errors during the theme compatility checking for Ghost v2.31.1:

    File: styles
    - The .kg-bookmark-card CSS class is required to appear styled in your theme
    - The .kg-bookmark-container CSS class is required to appear styled in your theme
    - The .kg-bookmark-content CSS class is required to appear styled in your theme
    - The .kg-bookmark-title CSS class is required to appear styled in your theme
    - The .kg-bookmark-description CSS class is required to appear styled in your theme
    - The .kg-bookmark-metadata CSS class is required to appear styled in your theme
    - The .kg-bookmark-icon CSS class is required to appear styled in your theme
    - The .kg-bookmark-author CSS class is required to appear styled in your theme
    - The .kg-bookmark-publisher CSS class is required to appear styled in your theme
    - The .kg-bookmark-thumbnail CSS class is required to appear styled in your theme

https://ghost.org/docs/api/v2/handlebars-themes/editor/#bookmark-card

Of course, I can define these by myself, but it would be better if an actual designer does it.

Thanks!

Spacing Disqus

Hello,

when i added <script>var disqus="YOUR_DISQUS_SHORTNAME";</script> to my
Blog the spacing is too large.

Can you fix it or post a workaround?

Bower dependencies install

When I installed this theme to Ghost's themes folder and ran development commands specified in readme bower install gave me error:
ENOENT No bower.json present

After some bug-tracking it looks like that bower searches .bowerrc file and finds Ghost's in upper directory with following contents:
{ "cwd": "core/client/", "directory": "bower_components" }
As you can see, this file sets cwd to core/client which leads bower install to fail in your theme folder which on build results dependencies not being concatenated to the dependencies.js asset. I solved the issue for now with adding the following .bowerrc file in the root of the theme:
{ "cwd": ".", "directory": "bower_components" }

I thought to notify about this here since it confused me a lot. I guess one could solve the issue by adding symbolic link to the theme during the development but in any case, there probably should be a mention about the issue, or a .bowerrc file like I did.

Oh and very nice theme :)

iphone browser

when I have a cover ,iphone browser not work well.

background: no-repeat fixed center 100% / cover;

header font overridden

Hi!
First, thank you for your excellent theme. I found a problem in changing the default font: the font of header-name is overridden by the font of body.
config of header-name:
2016-03-28 12 39 06
config of body:
2016-03-28 12 42 30
font identification in actual webpage:
2016-03-28 12 44 00

Thank you!

no issue - feature request

First of all. Thanks! This is a great theme for Ghost you guys developed. I was looking for an option to show related articles on the article page itself. So you can keep the user engaged and on your page - any tipps on how to move forward on this? i would give it a try myself. Thanks and have a great day.

positions are all wrong ++

Hi

I have installed all the dependencies so that i can run grunt and edit scss to customize my theme.
All of this work perfectly well and I have done most of my customization already.

But when i started adding content to see how my post would look i encounter some weird behavior.

first of all the page number and navigation buttons appear right under the cover picture on top of my first row of posts. secondly the footer bar appear right under the first row of posts and on top of my second row. withe the rest of the post continue under the footer bar. all the post on on row have the same height as the the tallest one instead of tiling them self neatly. and lately my when hitting the menu button it does not show up.

I have been very careful only to edit the style.css file within my theme directory but to my astonishment it all works perfectly when I downloaded a fresh them and loaded the new css over to it.

Because my css apparently works like it should in a fresh theme i assume it's not a problem with my custom scss.

I hope I have described my issues sufficiently and someone can help me with this issue because editing my scss and then copying the css over to a different theme is really slowing down my development.

Thank you in advance for any help!
RikiaR

lightbox

Hello
Is there any way to add a lightbox to this them? I tried 3-4 different lightboxes,
none of them works.

Syntax highlighting ?

Hi

Naive question here, how do you force a specific language for syntax highlighting ? I'm use to stuff like ```python for block code, since I only found 4 spaces indentation in ghost, dunno how to get it to work properly with your theme ?

Regards,

js doesn’t reload

Hello, I use a .js file in order to stick the navbar to the top of screen after scroll, it works fine when the page load, but e.g. when I go to a post and then click on site title to go back to home page, the js doesn't relaod and therefore don't work. how should I reload it? I try to put the script in script.js but nothing changed.

Image hover glitch on Chrome

There is a small glitch when you hover a starred post.

screen shot 2017-05-21 at 13 26 04

This bug only happened with Chome, I tried to reproduce the bug with Firefox and Safari.

Chrome: 58.0.3029.110
OS: macOS 10.12.4

Integrating Google Custom Search

Hi Peter,

In my fork I added Google Custom Search to have a nice search possibility (see it in action at https://manuel-rauber.com).

The Commit for this is: ManuelRauber@9f116d8

As you see, this would include some refactoring as well as a little Introduction to Google Custom Search. Do you think it's useful to integrate this in the "base" (original) bleak template? If yes, I would prepare a Pull Request for it.

Greetings

Searching feature ?

Hi Team,

Thanks for making a nice theme.

I'd like to request a searching feature for this theme, it would be great to have it that makes a lot of easy to search for the post or content.

Thanks a lot.

Icons Problem After In-lining CSS

Hello,

I just wanted to optimize my website load speed so, I inline the CSS as per instructions of Google Optimization tool. After In-lining my website icons not showing and they are looking like a Box. When I re-add the style.css header all icons works perfectly how can I fix this?

Thank you for this amazing theme.

Changing background colour

Hello,

I really like your them but could you please give me a hand?

I'm trying to replace the light gray background everywhere on my website dreets with another color (#B7CEC4) but don't know where to begin.
I tried the CSS I found online to no avail.

Thank you for your help.
Joachim

If I can help :)

I'm the owner of play-with-ghost and one big feature I'm working on is to showcase templates I enjoy like yours.

Let me know if I can help you by hosting a staging environment of your Ghost project(s) or anything related of the backend of hosting Ghost.

Cheers!
Pascal

No transtion effect between pages

Hi,

Firstly, thank you for your elegant themes, it is nice and clean.
Next, I want to talk about my problem.
Basically the problem I met is that there is no transition effect when loading between pages and I am not sure where the problem is.
I have also tried your another theme, innocent , which the transition effect works perfectly.
Additionally , I am running ghost v0.90 so there shouldn't be any jQuery issues according to your readme

Could you help me? I am new to this coding world

Thanks

editing .hbs file help

Hi

I am a novice developer currently setting up a blog for my ecommerce business.
I just need help in indexing the .hbs files like what is where, I am having a lot of trouble, inserting and editing code at the wrong places. I understand the process is too hectic, but if you could just give a brief summary as to basic locations to edit for post, homepage, navigation menu, adding footer content, changing the header/nav menu base colour, and more menial and trivial stuff.

I would also like to add a twitter feed along side the already placed instagram instansive widget.
I also wanted to know if i could customise a tile - when does it take an image? I created 2 test blogs, both had images in the content, but only has an image with the title in the tile on the home page.
I wanted to just create a pure image tile with a link leading to another website, not one of the blog pages.

Please please try to help me, I am trying to do a lot with very little or no knowledge of the coding structure.

Thanks in Advance

Dhaval

Clicking the logo to go back to the blog home page opens it in a different context

Issue summary

Loading a ghost blog with the bleak theme install via its URL (e.g. http://www.my-ghost.blog.com) and clicking on the blog logo on the top left do not have the exact same action.

Issue dependencies

GhostHunter

Reproductibility steps

  1. Install ghost from the latest master
  2. Install Bleak from Github
  3. Add Ghosthunter to the theme
  4. Ghosthunter works when loading the main page, but fails when going back to the main page from a blog post. console.logs show the data is being queried but not displayed for some reason.

Technical notes

Ghosthunter was grafted to the theme by adding files (search.js, search.css) in all places possible.
The only modifications to the theme were in default.hbs where links to the scripts and css were added, and in index.hbs where the "results" section was added.

A live link can be given via PM.

[Question] Few pre-installation questions to the developer...

I really love this theme and it is awesome! This is the right theme I have been searching for. I have a few questions out here.

  1. Is Google Analytics supported? Since this theme is fully powered by AJAX, I am kinda scared, if it breaks the GA - coz it works on normal page-load and not on AJAX right?
  2. What if there are people who have browser that doesn't support AJAX for some reason? Is it possible to disable the AJAX load functionality alone or is there any graceful degradation?
  3. I haven't seen any commenting in the demo. Can I integrate my existing Disqus comments? What would you prefer to be the best one?
  4. I am using Ghost version 0.11.11. Will this theme work for this version?
  5. What is your take on adding a search functionality?
  6. Does it have a light box functionality?
  7. I am using PrismJS for the code / syntax highlighting - so will that be an issue if I change it?

These are the questions I have so far. Would really planning to implement it for this new year. What say?

Problem with RTL languages

I just found a problem with RTL languages like Persian when using this great theme. There is a problem when i want to use numbers to count something, i mean 1. paragraph \n 2. paragraph and so on.

Hide Menubar Icon

I just switched over to Ghost, and absolutely love this theme! However, since my website only has one page, there's no need for a navigation drawer. It'd be awesome if the navigation icon were hidden in cases like this.

Next Release

Hi @zutrinken,

Thanks for this theme. I have seen some updates in the master branch but the last release was made almost 2 years ago. Is it safe to use the master branch commits in production or were still expecting more commits in the master branch for a future release? 😄

RSS Style not working.

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">

Don't know why but when I look at that page in Chrome or Firefox this RSS style is not working properly.

Maybe it's text/xml?
But needs to be text/html?

Https animation failed? My settings file:

Https animation failed? My nginx settings file:

server {
    listen       80;
	server_name  ~^(www\.)?(.+)\.com$;
    return 301 https://$host$request_uri;
}
server {
    listen       443 ssl http2;
    server_name ~^(www\.)?(.+)\.com$;
    ssl_certificate /home/ssl/ofo2.crt;
    ssl_certificate_key /home/ssl/ofo2.key;
    #rewrite ^/(.*) https://ofo2.com/$1 permanent;
access_log  logs/ghost.access.log;


 location ^~ / {
 proxy_pass http://localhost:2368/;
 proxy_set_header   X-Real-IP $remote_addr;
 proxy_set_header   Host      $http_host;
 }


    #error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

Weird footer behavior

First off, Bleak is a really nice template and I've absolutely loved working with it so far!

My problem is that one specific article kind of screws up the footer loading. It doesn't happen with any other article though. As seen with the live examples below, the footer is directly placed over the article, at the bottom of the screen, so that it hovers over the text.

Article it does not happen with, e.g.: http://www.anti-imperialism.ml/2018/06/11/uber-die-europaische-arbeiteraristokratie/

Article it does happen with: http://www.anti-imperialism.ml/2017/11/12/china-ddr/

Originally I thought it might have been a cache problem, but now I've seen it happening on several browsers and PCs as well.
Footer code injection is empty.

I use a lot of HTML that overrides Markup in the articles, because Markup was kind of hard to use for some of the layout stuff I needed, so I have to assume it has to do with the HTML in the article. I'm not sure, if it would be fruitful to post the raw text/code of the article here, though.

Thanks in advance, in either case!

automatic dark mode

it would be awesome to get CSS support with auto detecting dark mode

P.S. this theme is awesome

Display post image in post

The post image is currently only used on the homepage. Would it be possible to display the image on the post as well?

Flattr Code Injection

Hey Peter,

awesome job, thank you so much!

Perhaps you have time: I wish a Flattr Button with Code Injection like the Disqus-thing.

Thanks

Theme Info

Hey, how can I add social media icons?

Add author information in posts

Hello !

This is a great great theme ! Congrats.
Do you think in may possible to add an option for adding author information in posts page ?

Maybe something like gauderkd#7

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.