How to modify font and highlight colors?

[haichao592]

Thank you for writing this excellent theme.It is very nice ,performs well in other mobile platforms, easy to customize and display Mathjax well in abstract.
As a Chinese user, I added a SinaWeibo icon to the sidebar, added Weixin and Weibo to the share group at the bottom of posted articles, generate table of content automatically for post(but it looks ugly) and take duoshuo instead of disqus for default comments(because of the great fire wall).
Even though I notice there are searching input for page categories and page tags, but I add a swiftype to search entire site according to the content.
But the font and highlight colors makes me feel uncomfortable and tired.The grey font and white background are similar and the background of code-block and the foreground share the same problem.
The following two pictures is the view of my blog in tranquilpeak and jacman. And I think the second picture is more readable and comfortable.And the round square is more beautiful than a simple square.
I want to know how to modify font and highlight colors. I tried to modify css and scss files,but it seems doesn't work. And I am looking forward to a new set of fonts and highlight colors.Thank you~

tranquilpeak


jacman


[LouisBarranqueiro]

Firstly, good to see that the theme please and also that users customize it :).

To modify the font of post content : you have to edit tranquilpeak/source/_css/components/_post.scss and replace font-family: 'Merriweather', serif; with your font. To do things properly, if your font is a custom font, you have to import it in tranquilpeak/source/_css/utils/_fonts.scss. I recommend you to use google font to import it.

To modify simple line code, edit tranquilpeak/source/_css/base/_base.scss :

code {
    display:       inline-block;
    font-family:   'Open Sans';
    font-weight:   400;
    border-radius: 3px;
    background:    #f5f5f5;
    padding:       0 10px;
}

To modify the highlight code block, you can create your own highlight style by editing tranquilpeak/source/_css/utils/_variable.scss to modifiy the main variable of highlighted code :

// Highlight
$highlight: (
    'font-family': Menlo,
    'font-size':   1.3rem,
    'border':      1px solid #d9d9d9,
    'line-height': 1.2em
);
// Highlight colors
$highlight-colors: (
    // Background
    'white':           #fff,
    // General color
    'night-rider':     #333,
    'bondi-blue':      #0086b3,
    'persimmon':       #df5000,
    'asparagus':       #63a35c,
    // Comment
    'pewter':          #969896,
    'cardinal':        #a71d5d,
    'scampi':          #795da3,
    'bahama-blue':     #1d3e81,
    // Deletion color for .diff file
    'free-speech-red': #bd2c00,
    // Deletion background color for .diff file
    'misty-rose':      #ffecec,
    // Addition color for .diff file
    'limeade':         #55a532,
    // Addition background color for .diff file
    'honeydew':        #eaffea
);

and tranquilpeak/source/_css/components/_highlight.scss to change the style of the code block, gutter and line number.

If you have already a css files to stylize highlighted code, erase or comment the content of tranquilpeak/source/_css/components/_highlight.scss from line 73 to end and replace it with the jacman style. For the rest like the background of the code block, gutter, gist, edit this part :

figure.highlight {
    background:    white;
    margin:        10px 0;
    border-radius: 3px;
    line-height:   map-get($highlight, line-height);
    color:         map-get($highlight-colors, night-rider);
    font-family:   map-get($highlight, font-family);
    border:        map-get($highlight, border);
    overflow:      hidden;

    table {
        display:    block;
        width:      100%;
        overflow-y: hidden;
        overflow-x: scroll;
    }
    // Reset for tag `pre` and  for class `.gutter`, `.code`, `.tag`
    pre,
    .gutter,
    .code,
    .tag {
        border:  none;
        padding: 0;
        margin:  0;
        // To override cursor attribute of `.tag` components
        cursor:  text;
    }
    // Meta bar which contains name of the file and his link
    figcaption {
        font-size:     1.3rem;
        padding:       10px 15px;
        margin:        0;
        background:    #f7f7f7;
        border-bottom: map-get($highlight, border);
        color:         #999;

        a {
            float: right;
        }
    }
    // Gutter which contains line numbers
    .gutter {
        background:   white;
        border-right: map-get($highlight, border);
        padding:      0.3em 0.5em;

        .line {
            color: #aaa;
        }
    }
    // Code container
    .code {
        padding: 0.3em 0.3em 0.3em 1em;
    }
    // All lines in gutter and code container
    .line {
        height:    map-get($highlight, line-height);
        font-size: map-get($highlight, font-size);
    }
}

// Gist
.gist {
    .line,
    .line-number {
        font-size:   map-get($highlight, font-family);
        font-family: 1em;
        margin:      0 0 5px 0;
    }
}

Make sure that all tag, class and id of jacman style matches highlight html elements.

Please read Developer documentation to build the theme after changes

[haichao592]

Hey,man.Thanks a lot!
Now I know how to modify highlight colors. And it takes me a relatively long time to go through because I almost know nothing about front-end develop.
And I think you may add ruby & scss required to developer's doc and I also find that grunt build doesn't work while grunt Build does work~
I encountered a problem when I run 'hexo s' and this is different with issue1. But it is solved according to http://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc .
There is another problem that I want to you some other fonts not in google-font, such as xxx.ttf.
So I want to know how to use local font?
thanks~

[LouisBarranqueiro]

Why ruby?

I just create a feature to allow users add local fonts. I will release it in 1.0.1 version, tomorrow. If you want it now :

1. Download tranquilpeak-hexo-theme-1.0.1.
2. Replace tranquilpeak/tasks folder by the new one just downloaded
3. Create a folder _fonts in tranquilpeak/source/ and add your fonts in it
4. Import your fonts in tranquilpeak/source/_css/utils/_fonts.scss with relative path : ../../_fonts/
5. Build the theme with grunt Build or grunt BuildProd
   Your fonts will be synchronized and added in tranquilpeak/source/assets/fontsfolder.

[haichao592]

Because when run grunt Build or grunt sass, it says 'ruby and sass requiredandgrunt-contrib-sassinnode-modulesis not enough. When I rungem install sass, it goes fine. And I add two fieldsline-heightandcolor` to control the height and font color in simple line-block code.
It is getting more and more interesting. Thanks a lot for creating this amazing theme. I will recommend my friends to give it a try. :)

[LouisBarranqueiro]

Interesting point about ruby. Because normally npm should get all dependencies without help from ruby or gem. Please create an issue to reference this problem and comment it with your solution please. I think that It will help many other people. Thank you man :)

[haichao592]

I have opened a new issue about ruby and sass problem.
Thank you so much for your help. I'd be glad to see tranquilpeak getting more and more popular and beautiful!

[LouisBarranqueiro]

yeah, i hope too. :)