Git Product home page Git Product logo

whitespace's Introduction

Whitespace

Whitespace is a minimal and responsive theme for Octopress. This theme lets your content take the center stage of your blog.

Demos

Default theme: Themespace Preview

Actual blogs: Chymeric Tutorials Blog, Tibsar's Blog

If you are using whitespace and would like to showcase your website, we would be very happy to add you to the list! Just tell us your URL via the issue tracking system!

Install

$ cd octopress
$ git clone git://github.com/lucaslew/whitespace.git .themes/whitespace
$ rake install['whitespace'] # for zsh, use: rake install\['whitespace'\]
$ rake generate

Update

$ git -C .themes/whitespace pull origin master
$ rake install['whitespace']
$ rake generate

Update and Keep Customizations

For this to work, you have to track your website theme customizations on a remote (we call it mywebsiterepo).

$ git -C .themes/whitespace pull origin master
$ rake install['whitespace']
$ cd ../..
$ git fetch --all
$ git reset --hard mywebsiterepo/master
$ rake generate

Comment System

We support the open-source Juvia comment system. To enable it, add the juvia_site_key and juvia_host parameters in _config.yml.

Navigation Bar

You can add several icons to the navigation bar. Just set the corresponding user IDs in _config.yml:

  • googleplus_user with googleplus_hidden: false for Google+ profile.
  • pinboard_user for Pinboard bookmarks.
  • delicious_user for Delicious bookmarks.
  • github_user with github_show_profile_link: true for GitHub profile.
  • twitter_user for Twitter profile.
  • bitbucket_user for Bitbucket profile.
  • stackoverflow_user_id for Stackoverflow profile. (If you look at your profile link its structure is: http://stackoverflow.com/users/your-user-id/your-login)
  • linkedin_user for LinkedIn profile. (To use this icon you'll need to create a custom public profile URL. Here is a help topic specifying how to do this.)

External URL

You can also use our theme to set up a Linklog! To publish a link post, just add the external-url variable to the YAML section (the header) of your post - and specify a valid URL.

---
layout: post
...
external-url: http://example.com/some/external/url
---

The title will be rendered with an arrow (→) character at the end; and the title link will point to the external url.

Google+ "authored by" link

If the googleplus_user variable is set under _config.yml, by default, posts will contain a link with rel="author" pointing to the respective Google+ profile.

You can override the pofile for the authored by link for a specific post by adding googleplus_user for the post:

---
layout: post
...
gooleplus_user: [put overriding profile id here]
---

You can also choose to ignore the link by assigning ignore to the googleplus_user post variable (in your post header). The "authored by" text will then be displayed without a link.

---
layout: post
...
googleplus_user: ignore
---

AdSense for Search

You can enable Google AdSense™ for search via your whitespace search bar. For this to work you have to set simple_search and adsense_cse_partner_ID in your _config.yml file (you will have to add a line for the second variable, as it is not used with any other themes). The value for this variable can be extracted from the custom code for your search bar from a line such as the following:

<input type="hidden" name="cx" value="<adsense_cse_partner_ID>" />

Example for _config.yml:

simple_search: https://www.google.com/search
adsense_cse_partner_ID: partner-pub-9999999999999999:9999999999

Edit and History Links

If you choose to track your content via an open repository (on GitHub, Bitbucket, etc.) you can also link to your article's history (in the footer) or allow users to contribute via the version controlling backend (link in the header, next to "COMMENTS"). Whitespace automatically enables this if you set the following variables in your _config.yml - e.g.:

history: https://github.com/youruser/yourblog/commits/master/source/
edit: https://github.com/youruser/yourblog/edit/master/source/

License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

whitespace's People

Contributors

aech avatar alwynlombaard avatar aotarola avatar atimothee avatar bandrzejczak avatar brandoncc avatar haya14busa avatar ianrenton avatar kgs avatar lpmi-13 avatar lucaslew avatar sdvcrx avatar thechymera avatar vincenttam avatar yimingtang avatar yous 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

whitespace's Issues

navigation.html won’t update

Having a few problems getting source/custom/havigation.html to reflect changes I have made.

I added my Twitter account, which worked fine, but I switched to using ‘Mono Social Icon Font’ from Foundation icons and now it outputs text links to Twitter, GitHub and RSS instead of the new icons I have added.

I don’t understand why this is happening, especially as I have actually deleted the text links, so it shouldn’t be possible to serve them, bearing in mind I made all the changes in source and the Twitter text link, for example, is not even present in the Theme version of navigation.html.

Any suggestions appreciated.

Profile icons resolution

Our recently updated profile icons (on the right in the top bar) work well on regular monitors, but look pixelated when viewed on retina displays.

Please see these two (1, 2) articles for the technical background of the issue.

In short we need 2x2 bigger versions of all the icons (and downsize them via the css) for stuff to still look nice under high-density pixel displays. I'll do it for my g+ icon, @yous can you do this for yours?

Disquis support?

Hi, I can'T get disquis to work on my whitespace site - can you help me out? I browsed the code a bit and everything seems to be there - but for some reason it just won't get displayed :(

Change Solarized palette to "light"

For some reason I can't switch to the "light" variant of solarized - and I can't tell why. I set both

$solarized: light !default;

in /sass/base/_solarized.scss.
AND:

$solarized: light;

in /sass/base/_colors.scss.

And I've also tried just doing either of the above. Apparently both files get loaded correctly so I can't really tell what's happening - ideas? help?

Article Spacing Relative to Titlebar

Whenever you go from the "home" view of a whitespace website to the article view, the article title skips a couple (I'd say ~10) pixels further up - also, the dotted line separator appears under the title (which I think is ok), but this also pushes the body of the article further down. Together these things look quite bad when switching between the said views.

I think we should:

  • Make sure the title does not skip upward in the article view.
  • Make sure the dotted line separator does not take up additional space.

I have not yet found the time to dig this issue up, and sadly I won't in the near future either, but I keep seeing this everytime I look up stuff on my blog. If any of you could get on this in the near future, that would be awesome!

Post "updated" date not showing

As I understand from this line and this file, setting an updated: specification in the post header should print that date instead of the actual creation date on the article page.

With the following header, however, my post still displays the creation and not the updated date:


---
layout: post
title: "per-attack risk dice odds"
date: 2014-07-23 02:22:35 +0200
updated: 2014-08-13 02:22:35 +0200
author: Horea Christian
googleplus_user: 117525803180879614771
comments: true
categories: [statistics, gameplay, strategy]
published: true

---

The code seems fine afaict....
@yous Do you think this might also be an upstream thing?

Customizing link colors.

Hello, I am using your theme for my blog, and I am very happy with it. Recently I tried modifying my link colors by edditing sass/custom/_colors.scss. I have appended this to the file:

// Main Link Colors
$link-color: lighten(#331057, 3) !default;
$link-color-hover: adjust-color($link-color, $lightness: 20, $saturation: -45) !default;
$link-color-visited: adjust-color($link-color, $lightness: 10, $saturation: -25) !default;
$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;

And while this has completely changed my colors on a blog using the default octopress theme, it has only changed the hover appearance on my whitespace blog. Also clicked links seem to not be affected at all.

What different link color configurations does whitespace have? And what can I do to completely change my link colors?

Also, how can I remove the underline from links?

Cheers,

tumblr

Thanks for awesome theme, love it. Any plans on adding tumblr username support?
Thanks

Sarang

Unmodified Theme Blog for preview.

Hi guys, @lucaslew @yous - as you may have seen, the README showcases our blogs. Mine is quite customized, so even though I keep my theme up to date, I can't use it to showcase the unmodified theme.

In case any of you uses the theme as-is, could you please update your blog (we have made a couple of big updates this past month) and link it in the README?

Otherwise it might be a good idea to keep a perennially updated blog full of ipsum instead, so that we can modify what we want for ourselves and still have a "pure" site to showcase.

Thoughts?

Support multi-language fonts

Whitespace supports Korean fonts by #28, but doesn't support Chinese or Japanese characters. Also because of the size issue, we can't ship web fonts for those languages.

  1. Fallback fonts for Windows, Mac and Linux.
  2. Cross-platform default fonts.

Also added fonts should not affect other language fonts.

  • Simplified Chinese fonts
  • Traditional Chinese fonts
  • Japanese fonts

Seeing List of CJK fonts, we can use Microsoft YaHei, Microsoft JhengHei, Meiryo for simplified Chinese, traditional Chinese, Japanese respectively. They are distributed with Windows Vista. Also, we should find more fonts for older Windows.

Adobe, in partnership with Google, announced Source Han Sans. We can consider this as default font for CJK.

Also mention me another languages that can be added.

Remove Sidebar Code

Since whitespace does not have a sidebar, it would make sense to purge all the sidebar-related code from it. I have already done so for the google+ part of that in commit ec30c35.

I would be very grateful if anybody could help with the rest :)

@yous?

Stackoverflow and LinkedIn icon

I've implemented stackoverflow and linked icons on the navigation bars, that work based on data contained in _config.yml file. Should I create a pull request for it?

Stack's icon is show on my website, while linkedin icon was shown, but then I left it behind. You can see my implementation here.

There are also some changes in styles (icons are color-filled on hover), but I guess it could be a subject of yet another pull request. Of course if you agree on adding some colors to "whitespace". I liked it, so I've got it on my website, but it doesn't mean automatic pull request ;)

Highlight code with Solarized light

Hi, I think Solarized light complements our white-dominant design better than equivalent dark themes. However, at least at my end, the light highlight you get when you select code in Solarized light is very similar to our background color, and thus not that easy to see.

Any idea how we can change this?

@yous - I see that over here (do you still wnat to keep this site up now that themespace is running?) you have a whitespace distribution where Solarized light codeblocks get selected like normal text. This is an ok solution, I guess (though admittedly tweaking the colors specifically for codeblocks would be even better). How can we implement that for the whitespace master branch?

Tag index

Hi there - I think tag indexes/clouds/archives are a very useful feature - especially for our website format. We seem to be offering our users a rather handsome "blog archives" link; but our "tag collection" page, by contrast, looks like this.

Is anyone of you interested in helping out with this?

Stop capitalizing all words in the title

I noticed that whitespace capitalizes all the words in the post title. This is nice for writing in english, but if you want to switch to other languages (spanish), it doesn't make sense.

Rounded corner codeblocks

From #43 (comment)

    $ cd octopress
    $ git clone git://github.com/lucaslew/whitespace.git .themes/whitespace
    $ rake install['whitespace']
    $ rake generate

generates a codeblock with rounded corners, no line numbers.

```
$ cd octopress
$ git clone git://github.com/lucaslew/whitespace.git .themes/whitespace
$ rake install['whitespace']
$ rake generate
```

generates a rectangle codeblock, with line numbers.

SVG social-media/follow icons

This issue is based on the discussion in pull request #42 and supersedes issue #41.

@yous , you can find the icons I use on my website here. If you want me to process any additional icons, just let me know which from under this directory you think we would also need.

Error in sass/screen.scss

I just installed this theme on my site, and upon regenerating the site, I got this error:

$ rake generate
## Generating Site with Jekyll
    error sass/screen.scss (Line 10: File to import not found or unreadable: plugins/**/*.
Load paths:
  /home/canspice/octopress/sass
  /home/canspice/.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/blueprint/stylesheets
  /home/canspice/.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets
  Compass::SpriteImporter)

Removing line 10 fixed it for me, but I don't know if this has any knock-on effects. Doesn't appear to so far.

Linkedin integration not showing up

Hi Lucas, great work on this theme! I tried adding the Linkedin integration in _config.yml the following ways:

linkedin_user: publicProfileId
linkedin_user: actualLinkUrl

However, nothing new seems to appear. Perhaps I'm going about this the wrong way. Any help would be appreciated!

Thanks,
Michael

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.