Dumbarton

A simple Jekyll theme for academics
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About
• Installation
• Setting Options
  • Base Settings
  • Site Settings
  • Blog Settings
  • Theme Settings
  • Help Settings
  • Jekyll Scholar Settings
  • CDN Settings
  • Meta Tag Settings
  • Favicon
• Thanks
  • Code
  • Images

About

Dumbarton is a Jekyll Theme developed by Tyler Butler. The theme is designed for academics and features a simple home page with an about me section, a blog, and an interactive highlights section to describe publications, coursework, courses taught, and projects. UI design with Bootstrap and Animate CSS.

A Note on Compatability

At this time, this theme is not compatible with GitHub pages because GitHub does not support jekyll-scholar.

Installation

Follow the following instructions to install the Dumbarton theme:

1. Clone the repo.

   git clone https://github.com/tcbutler320/Jekyll-Theme-Dumbarton.git
   cd Jekyll-Theme-Dumbarton
   

2. Use Bundler to install dependancies

   bundle install
   

3. Start the Jekyll development server

   bundle exec jekyll serve
   

Setting Options

There are many settings available to users to change how the theme looks. These settings can be changed in _config.yml. It's important to note that unlike previewing changes in other areas of the site, you must stop and restart the development server in order to see changes made in the config file.

Base Settings

Site Settings

Blog Settings

Theme Settings

UI 2.0 Color Schemes 🌈
The recent Dumbarton release supports Color Schemes! To pick a pre-configured color theme, change the ui-theme option in _config.yml . To create a new theme add a new entry in _data/themes.yml

abyss:
    name: abyss
    nav-color: "#10292e"
    nav-text: "#149f98"
    title-font: "Noto Sans JP"
    link-font: "#272343"
    link-color: "#272343"
    link-font: "Poppins"
    font: "Poppins"
    font-color: "Black"
    social-color: "#CCCCCC"
    footer-social-color: "Black"
    button-color: "black"
    home-highlight-background: "#10292e"
    home-highlight-header-text: "#149f98"
    education-title-font: "Noto Sans JP"
    education-title-size: "18px"
    education-entry-font: "Noto Sans JP"
    education-entry-size: "18px"
    education-section-size: "15px"
    certification-title-font: "Noto Sans JP"
    certification-title-size: "18px"
    certification-entry-font: "Noto Sans JP"
    certification-entry-size: "18px"
    certification-section-size: "15px"
    highlights-tab-color: "White"
    projects-color: "Black"
    border-style: ""
    post-tag-size: "20px"
    post-title-size: "36px"
    post-author-size: "15px"
    post-font-weight: "700"
    default-button-color: ""

Help Settings

Jekyll Scholar Settings

Excerpt from Jekyll-Scholar

Jekyll-Scholar is for all the academic bloggers out there. It is a set of extensions to Jekyll, the awesome, blog aware, static site generator; it formats your bibliographies and reading lists for the web and gives your blog posts citation super-powers.

The Jekyll Scholar plugin is used on the publications page and the home page publications highlight section. Refer to the official documentation for setting options.

scholar:
  last_name: Dumbarton
  style: apa
  locale: en
  source: /_bibliography/
  bibliography: papers.bib
  bibliography_template: bib
  replace_strings: true
  join_strings: true
  details_dir: bibliography
  details_layout: bibtex.html
  details_link: 
  query: "@*"

CDN Settings

Meta Tag Settings

Several meta tag settings are optional. Refer to htmlhead.dev for a full list of options and explanations for the below configurations.

google-site-verification:                         #<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
yandex-verification:                              #<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
msvalidate:                                       # meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
alexaVerifyID:                                    # <meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
pinterestdomain_verify:                           #<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
norton-safeweb:                                   # <meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
detectphone: yes                                  # yes or no. Disable automatic detection and formatting of possible phone numbers 
x-dns-prefetch-control: on                        # on or off. Completely opt out of DNS prefetching by setting to "off"
fbappid:                                          # Facebook OpenGraph 

Favicon

Site favicons are located at /assets/img/icons. You can use a Favicon Generator to create a new set of icons using any image you'd like. Simply create a package from the aboved linked generator and replace the icons folder.

Thanks

I borrowed concepts and assets from various other open source projects. A special thanks for everyone who contributed to Jekyll-Theme-Dumbarton.

Code

• Corey
  • Used as a concept for the blog layout v 2.0
• Masresha
  • Decision Making App: Used as a concept for the blog layout v 1.0

Images

Special thanks to the following individuals for their images

• Cole Keister