Giter Club home page Giter Club logo

dinky's Introduction

The Dinky theme

.github/workflows/ci.yaml Gem Version

Dinky is a Jekyll theme for GitHub Pages. You can preview the theme to see what it looks like, or even use it today.

Thumbnail of Dinky

Usage

To use the Dinky theme:

  1. Add the following to your site's _config.yml:

    remote_theme: pages-themes/[email protected]
    plugins:
    - jekyll-remote-theme # add this line to the plugins list if you already have one
  2. Optionally, if you'd like to preview your site on your computer, add the following to your site's Gemfile:

    gem "github-pages", group: :jekyll_plugins

Customizing

Configuration variables

Dinky will respect the following variables, if set in your site's _config.yml:

title: [The title of your site]
description: [A short description of your site's purpose]

Additionally, you may choose to set the following optional variables:

show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
google_analytics: [Your Google Analytics tracking ID]

Stylesheet

If you'd like to add your own custom styles:

  1. Create a file called /assets/css/style.scss in your site
  2. Add the following content to the top of the file, exactly as shown:
    ---
    ---
    
    @import "{{ site.theme }}";
  3. Add any custom CSS (or Sass, including imports) you'd like immediately after the @import line

Note: If you'd like to change the theme's Sass variables, you must set new values before the @import line in your stylesheet.

Layouts

If you'd like to change the theme's HTML layout:

  1. For some changes such as a custom favicon, you can add custom files in your local _includes folder. The files provided with the theme provide a starting point and are included by the original layout template.
  2. For more extensive changes, copy the original template from the theme's repository
    (Pro-tip: click "raw" to make copying easier)
  3. Create a file called /_layouts/default.html in your site
  4. Paste the default layout content copied in the first step
  5. Customize the layout as you'd like

Customizing Google Analytics code

Google has released several iterations to their Google Analytics code over the years since this theme was first created. If you would like to take advantage of the latest code, paste it into _includes/head-custom-google-analytics.html in your Jekyll site.

Overriding GitHub-generated URLs

Templates often rely on URLs supplied by GitHub such as links to your repository or links to download your project. If you'd like to override one or more default URLs:

  1. Look at the template source to determine the name of the variable. It will be in the form of {{ site.github.zip_url }}.
  2. Specify the URL that you'd like the template to use in your site's _config.yml. For example, if the variable was site.github.url, you'd add the following:
    github:
      zip_url: http://example.com/download.zip
      another_url: another value
  3. When your site is built, Jekyll will use the URL you specified, rather than the default one provided by GitHub.

Note: You must remove the site. prefix, and each variable name (after the github.) should be indent with two space below github:.

For more information, see the Jekyll variables documentation.

Roadmap

See the open issues for a list of proposed features (and known issues).

Project philosophy

The Dinky theme is intended to make it quick and easy for GitHub Pages users to create their first (or 100th) website. The theme should meet the vast majority of users' needs out of the box, erring on the side of simplicity rather than flexibility, and provide users the opportunity to opt-in to additional complexity if they have specific needs or wish to further customize their experience (such as adding custom CSS or modifying the default layout). It should also look great, but that goes without saying.

Contributing

Interested in contributing to Dinky? We'd love your help. Dinky is an open source project, built one contribution at a time by users like you. See the CONTRIBUTING file for instructions on how to contribute.

Previewing the theme locally

If you'd like to preview the theme locally (for example, in the process of proposing a change):

  1. Clone down the theme's repository (git clone https://github.com/pages-themes/dinky)
  2. cd into the theme's directory
  3. Run script/bootstrap to install the necessary dependencies
  4. Run bundle exec jekyll serve to start the preview server
  5. Visit localhost:4000 in your browser to preview the theme

Running tests

The theme contains a minimal test suite, to ensure a site with the theme would build successfully. To run the tests, simply run script/cibuild. You'll need to run script/bootstrap once before the test script will work.

dinky's People

Contributors

benbalter avatar fptavares avatar parkr 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

dinky's Issues

The <sup> tag is not properly rendered in numbered list

I am creating a short tutorial that uses some matrix notation, and I need to have superscripts. The Dinky theme does not seem to render them properly.

Please see https://justbennet.github.io/pyregress/index.html

There are several examples near the bottom, where converted one item from a numbered list into a regular paragraph entry for your reviewing convenience. Not that the -1 superscript is not actually superscripted. Examining the rendered page source shows the <sup></sup> tag pair in place.

Is this something that you would be willing to fix globally in the theme or provide a fix that I could put into the style for that repository?

Paragraph anchors

What is the proper wat to add anchors to headers? The same way GitHub does for markdown.

Version of jekyll

The following error occured when I attempted to start jekyll.

$ bundle exec jekyll serve
 Configuration file: ~/jekyll/_config.yml
jekyll 3.8.5 | Error:  The jekyll-theme-dinky theme could not be found.
$  ruby -v
ruby 2.4.9p362 (2019-10-02 revision 67824) [x64-mingw32]

Could anyone tell me the correct version of jekyll that goes well with the dinky theme?
Thank you.

Layout missing for Dinky Jekyll theme

Bug Name: Jekyll server can not find layout “post” when first using theme Dinky
Build Number: Jekyll 3.3.1; jekyll-theme-dinky 0.0.3
Severity: Low
Reported By: Ty Hopp
Reported On: 25 January 2017
Reason: Defect
Status: New
Environment: MacOS Sierra 10.12.2, Ruby 2.4

Description:
Jekyll server returns “Layout ‘post’...does not exist” when running [bundle exec jekyll serve] after installing the gem jekyll-theme-dinky for the first time. Jekyll docs states that _layouts dir is located away from project dir when using supported themes, but after visiting the path
[ /usr/local/lib/ruby/gems/2.4.0/gems/jekyll-theme-dinky-0.0.3/_layouts], only the “default.html" layout exists. Has the “post” layout gone missing?
screen shot 2017-01-25 at 8 30 19 pm

Edit: After further digging, I found that another theme (Minimal) had the same problem. Only the Minima theme contains all the layouts.

screen shot 2017-01-26 at 10 31 52 am

screen shot 2017-01-26 at 10 33 32 am

screen shot 2017-01-26 at 10 34 14 am

Change the width of the post's/page's content

Is there an easy way to change the width of the post's/page's content? The default width of the content is too narrow for me. I expect it to be somewhere in _layouts, but cannot locate.

update URL for html5shiv

As Google Code is long gone, the URL for html5shiv should be updated to //cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js, on this and all other themes.

Header background on mobile

The header background on mobile doesn't look intentional. It has a weird margin on the right. It would be better to make the background full-width.

screenshot_20171225-222120

add MathJax to website

The professor I work for is working on updates to the site he hosts using Jekyll and this theme. The web designer who originally set up the site for him was a student who graduated and we're not able to contact him. Initially we would like to add superscript and subscript. We know that's not supported, but eventually we'd also like to add equations, so we thought MathJax would be a great way to take care of everything we want.

The instructions I've found mention editing head.html, which doesn't appear to exist in this theme. Do you have any suggestions of how to add MathJax?

TIA,

Laura

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://pages-themes.github.io/dinky/" and found these accessibility errors:

  • Page https://pages-themes.github.io/dinky/:
    • Issue e20f0bbe-4438-4308-bb0f-548bba74090c:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.49:1. Recommendation: change background to #f9f9f9.
      • Selector: html > body > div > section > div:nth-child(11) > div > pre > code > span:nth-child(4)
      • Context: <span class="no">Dependencies</span>
    • Issue edc47fa5-4ad3-45ea-b333-1b9206282ceb:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.49:1. Recommendation: change background to #f9f9f9.
      • Selector: html > body > div > section > div:nth-child(11) > div > pre > code > span:nth-child(2)
      • Context: <span class="no">GitHubPages</span>
    • Issue bb3d6e02-277c-42a9-95dc-cdbf7e2713e3:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.72:1. Recommendation: change text colour to #737362.
      • Selector: html > body > div > section > div:nth-child(11) > div > pre > code > span:nth-child(1)
      • Context: <span class="c1"># Ruby code with syntax highlig...</span>
    • Issue a799b641-5de0-4342-8245-eeeeb259b90d:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.72:1. Recommendation: change text colour to #737362.
      • Selector: html > body > div > section > div:nth-child(10) > div > pre > code > span:nth-child(1)
      • Context: <span class="c1">// Javascript code with syntax ...</span>

You can check these accessibility errors using pa11y.
You can view the full validation results in our website.

include script tag

How to use <script> tag?

I couldn't find a clear example how to do that.

I have this includes to do:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="/exchange-table.js"></script>

Is that possible?

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.