serenader2014 / decent Goto Github PK

How to navigate back?

Hi,

first of all let me thank you for your work. This theme is amazing :) I like it very much.

By using it right now, I saw that when I reload the page by clicking the logo on top-left, something this error appears in Console:

Uncaught ReferenceError: ga is not defined

And I think it's because on this line ( https://github.com/serenader2014/decent/blob/master/src/script/index.js#L28 ) there's no check if decentThemeConfig.ga is defined.

Can you please add it?

Thank you in advance,
Julian

How about changing bottom: 30px to top: 30px?
I tested the current design on a mobile and guess there I try to scroll the page? Exactly over the go-to-top button 👎

Please add the ol element css

ol {
    width: 90%;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    word-wrap: break-word;
}

Is it possible to change the font of the title, or replace it entirely with an image?

Remove blue border if button is in focus:

.go-to-top {
    &:focus {
        outline: none;
        opacity: 1;
    }
}

Now with 6-7 js files it could be a good idea to implement fallback.js. You can setup to load the scripts async (not blocking), you can define CDN's and use the local files if the CDN is down. It also seams fairly easy to implement.

This is the link to the documentation

I also read that you can load css files with this library but you should not do this for important files like your screen.css file because some browsers have problems with async loading of css files. But it sill might be an idea for the prism.cssfile

If you have a website on a mobile device the gallery does not resize enough. You can not see the whole image.

Have a look:
https://www.browserstack.com/screenshots/eef6a6439abb3e70d34a20fda268e2b950685654

• Image is missing in source code at /assets/go-to-top.png
• CSS is missing for .go-to-top

If the screen gets to narrow the scroll to top button hides the text.

Not a problem with the current css only that i like the scroll top button more if it is round and have a small opacity. With the current button it feels a little bit to much of an obstical that distracts from the content. Please take a look and decide yourself:

CSS:

.go-to-top {
    background-image: url("../assets/go-to-top.png");
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 30px;
    right: 100px;
    border: none;
    display: none;
    border-radius: 25px;
    opacity: 0.6;
}

I propose the following changes to the author page:

    $(window).scroll(function () {
        var scrolledY = 50 + $(window).scrollTop() / 5;
        if (scrolledY <= 100) {
            $('.author-cover').css('background-position', '50% ' + ((scrolledY)) + '%');
        }
    });

Demo: http://jwillmer.github.io/jekyllDecent/about/

I think the gallery has to much shadows. Does not look that good with the rest of the design.

How about this:

insted of this:

new css (background & border is same as the bg from code tag):

.single-post .album {
    height: 400px;
    white-space: nowrap;
    /* background: rgb(204, 204, 204); */
    padding: 20px;
    background: rgba(250,250,250,0.8);
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    /* -webkit-box-shadow: 0 -2px 5px rgba(0,0,0,0.5) inset,0 2px 5px rgba(0,0,0,0.5) inset; */
    /*  -moz-box-shadow: 0 -2px 5px rgba(0,0,0,0.5) inset,0 2px 5px rgba(0,0,0,0.5) inset; */
    /* box-shadow: 0 -2px 5px rgba(0,0,0,0.5) inset,0 2px 5px rgba(0,0,0,0.5) inset; */
    overflow-x: auto;
    overflow-y: hidden;
    margin: 30px 0;
}

.single-post .album img {
    display: inline-block;
    height: 100%;
    width: auto;
    border: 3px solid rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.5);
    /* box-shadow: 0 3px 5px rgba(0,0,0,0.5); */
    margin: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

Image text is not readable at certain sizes

I implemented a new feature in my form. Maybe you like to have it aswell: Paralax Effect Demo

Usage:

<div class="bg-scroll" style="background-image: url('{{ site.github.url }}/media/img/mountain1.jpg')"></div>

CSS:

.bg-scroll {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    height: 500px;
}

@media only screen and (max-width: 780px) {
    .bg-scroll {
        height: 350px;
    }
}

the js block could also be included into the index.js file

Without a min height it does not know how big it can get and does not get big at all ;)

use:

    iframe {
        min-height: 350px;
    }

I saw at your website that your code is color formated. How is the syntax for this?

Can you please provide a build task inside Gulpfile.js so it's easier to recompile without the need of watch and dev tasks?

Thank you in advance,
Julian

the dl element is missing in this list:

.post-list .post, .pagination, .site-footer, .single-post .post-content > h1, .single-post .post-content > h2, .single-post .post-content > h3, .single-post .post-content > h4, .single-post .post-content > h5, .single-post .post-content > h6, .single-post .post-content > p, .single-post .post-content > ul, .single-post .post-content > ol, .single-post .post-content > blockquote, .single-post .post-content .single-post-header, .single-post .post-content > table, .single-post .post-content > figure, .read-next{
    width: 90%;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    word-wrap: break-word;
}

I have encountered a problem with the borders of the gallery. Sometimes (tested with around 880px width) the border does not allign with the image. I think the js that modifies the shadow does not work every time. I compared the css of a case there it fitted and a case the it did not and there is no difference. Disabling and enabling the shadow property resolves the issue.

Maybe it is a rendering problem of chrome but could you look over your js, maybe you can change how the resizing is made - via wrapper class?

I tested it with different browsers and some have the same problem:
https://www.browserstack.com/screenshots/eef6a6439abb3e70d34a20fda268e2b950685654

Please include css for iframes in posts:

.single-post .post-content {
    iframe {
        min-height: 350px;
    }

    iframe {
        width: 90%;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
        word-wrap: break-word;
    }
}

usage:

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://img.labnol.org/di/PowerPoint.ppt' frameborder='0'></iframe>

Hello,

In the decent theme folder, run npm install, and run gulp js.

But I get a command not found for gulp, so I install gulp by running npm install gulp.
Running gulp js now gives me the following error:

fs.js:808
  return binding.readdir(pathModule._makeLong(path));
                 ^

Error: ENOENT: no such file or directory, scandir '/var/www/ghost/content/themes/decent-v1.1.1/node_modules/gulp-sass/node_modules/node-sass/vendor'
    at Error (native)
    at Object.fs.readdirSync (fs.js:808:18)
    at Object.getInstalledBinaries (/var/www/ghost/content/themes/decent-v1.1.1/node_modules/gulp-sass/node_modules/node-sass/lib/extensions.js:74:13)
    at foundBinariesList (/var/www/ghost/content/themes/decent-v1.1.1/node_modules/gulp-sass/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/var/www/ghost/content/themes/decent-v1.1.1/node_modules/gulp-sass/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/var/www/ghost/content/themes/decent-v1.1.1/node_modules/gulp-sass/node_modules/node-sass/lib/errors.js:45:5)
    at Object.<anonymous> (/var/www/ghost/content/themes/decent-v1.1.1/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:14:28)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)

So what do I do now? I'm kind of a noob at this, apologies if this issue can be trivially solved