🚀 A responsive Jekyll theme based on my personal internet site
CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit 1e9719b Jul 16, 2018
Permalink
Failed to load latest commit information.
_includes Fix _config.yml Apr 4, 2016
_layouts Theme init commit Apr 4, 2016
_posts Theme init commit Apr 4, 2016
_sass Remove unused vars Apr 4, 2016
assets .DS_Store zzz Apr 4, 2016
css Theme init commit Apr 4, 2016
.gitignore Add git ignore, update Readme Apr 4, 2016
LICENSE Create LICENSE Jul 16, 2018
README.md Update README.md Apr 4, 2016
_config.yml Fix _config.yml Apr 4, 2016
about.md Theme init commit Apr 4, 2016
feed.xml Theme init commit Apr 4, 2016
index.html Theme init commit Apr 4, 2016
params.json Theme init commit Apr 4, 2016

README.md

Captain’s log

live demo

Captain’s log is a minimalistic & responsive theme for Jekyll. It has several color scheme options and is em/rem based, so it's should be easy to customize it to your own taste!

screenshot

This theme is made by Masha Safina for blogging porpoises.

Get Started

Fork repository first 👆 Instal jekyll, clone repo & start jekyll server.

$ gem install jekyll
$ git clone git@github.com:mashlo/captains-log.git
$ cd captains-log

Update _config.yml

Don't forget to update _config.yml file located in the root of the theme (to not have my email and twitter linked)

# Site settings
title:       Captains-log
author:      Masha Safina
description: ":rocket: A responsive Jekyll theme based on my personal internet site"
baseurl:     "" 
url:         "https://your.site" 

# Social Links
email:            your_email@example.com
twitter_username: username
github_username:  username

# Build settings
markdown: kramdown
permalink: pretty

Run Jekyll

$ jekyll serve --watch

View your site localy at localhost:4000

Style Customization

The _default.scss located in the _sass\themes directory contains default variables for the base b/w color scheme.

_sass
  |-- themes
    |-- _default.scss
    |-- _data-dreams.scss
    |-- _sweet-like-will.scss

css
  |-- main.scss

and is imported as partial in main.scss before everything else.

// theme variables go first
@import 'themes/default';

@import 'reset';
@import 'base';
...

To use one of the preset color schemes simply replace _default.scss partial with desired from _sass\themes directory:

// theme variables go first
@import 'themes/sweet-like-will';

@import 'reset';
@import 'base';
...

To customize it further tweak the following vars in _sass\themes\_default.scss (or create a separate file).

$font-size-base:   18px;     // base body font size, the rest are REM based
$line-height-base: 1.5;      // base line height
$font-size-mobile: 14px;     // font size after break point 

$text-color:       #fff;                     // main copy color
$text-color-light: rgba($text-color, 0.4);   // dates & footer copy
$title-color:      #0dccd1;                  // post title color on post page

$background-color: #3b3056;   // main background color

$brand-color-base: #f76067;   // main accent color
$brand-color-sub:  #0dccd1;   // secondary accent color

Ta-da! 🎉