Code Monkey home page Code Monkey logo

greyshade's Introduction

#Greyshade

Greyshade is a minimal, responsive theme for Octopress. Starting point forked from Slash

For demo, check out websites from the wiki

mobile view

mobile view

Desktop view

##Features

  1. Responsive design.
  2. Fancybox integration
  3. Gravatar support thanks to Zhigang Fang. Add your email id to _config.yml and your profile picture will appear in the left nav. If you don't want your email to be visible in the HTML code, you can provide the MD5 hashed value of your email as expected by Gravatar with an email_md5 entry in _config.yml
  4. Schema.org support thanks to Nathan Shaughnessy

##Conditions

The only condition to use this theme for your octopress blog is that you have to set a different highlight color than the ones mentioned here. When you have chosen a highlight color, please add it to the wiki so that no one else uses it.

Highlight color: This color is used on a:hover, blockquotes etc. I'll be using it in more places so that blogs with different highlight colors look slightly different and maintain a bit of their uniqueness.

##Install

Assuming you have installed the default theme, type the code below in terminal.

$ git clone [email protected]:shashankmehta/greyshade.git .themes/greyshade
$ echo "\$greyshade: color;" >> sass/custom/_colors.scss //Substitue 'color' with your highlight color
$ rake "install[greyshade]"
$ rake generate

For profile picture and description, just add the relevant details in _config.yml

##License

MIT: http://sm.mit-license.org

greyshade's People

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  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

greyshade's Issues

Sass error: Undefined variable: "$greyshade"

I'm getting this error when I type rake generate with octopress:

## Generating Site with Jekyll
    error sass/screen.scss (Line 14 of sass/_greyshade.scss: Undefined variable: "$greyshade".)
overwrite source/stylesheets/screen.css 
Configuration from /mnt/ubuntu/home/gulshan/code/web/gulshansingh.com/_config.yml
Building site: source -> public
Successfully generated site: source -> public

error sass/screen.scss

rake generate
## Generating Site with Jekyll
    error sass/screen.scss (Line 2 of sass/_greyshade.scss: Invalid CSS after "@import ": expected file to import (string or url()), was "custom/_font.scss")

Gravatar image broken

Since jquery was moved to load in the footer, the gravatar image load is broken in the body since it uses the jquery function.

syntax highlighting

I can't seem to enable syntax highlighting for this theme, is it supported and how?

Trouble getting greyshade theme to recognize my $greyshade variable

I followed the steps as you prescribed and got errors during rake generate that said it couldn't find the $greyshade variable. I put it in the sass/custom/_colors.scss file as the instructions dictated. For the meantime, I moved the variable to the top of the _greyshade.scss file instead.

Also I noticed that line #132 of _greyshade.scss should probably use the $greyshade variable instead of your chosen highlight color of #2571B8.

Thanks.

Does configuring Google Analytics in _config.yml work?

I listed my tracking id next to it but I can't seem to get it to work, shouldn't it generate the necessary script tag inside the bottom of my blog posts when I create a new post similar to how Disqus works after it get's configured, When I search through the whole folder, I can't find anything relating to Google Analytics except that one line

tweet container not restricted to a max width?

Hey, really like your theme! This might not be a real issue, but maybe more of just a concern.

I noticed that the latest tweets text and banner currently aren't being bound a max % width. Long tweets don't wrap, so they end up pushing the div boundaries way outside div.mid-col. I'm a terrible noob at web design, but I couldn't convince myself that this was intentional. If I'm wrong, my bad!

I personally really didn't like it as I don't think we ought to be seeing any horizontal scroll bars in responsive designs. In _twitter.scss, I ended up adding "width:95%;" to the #banner to address the div containment issue and "word-wrap: break-word;" to the li element to get the entire tweet to show. Only catch is that the time stamp gets pushed to line 2 in these long tweets. I have it set up this way on my site iamscottrogers.com.

Great work otherwise!

Push .mid-col to the bottom

On pages with little content, the .mid-col does not always make it to the bottom of the page and leaving a band on blue under it. See attached:
Screen Shot 2013-02-05 at 5 42 18 PM

Google Analytics tracking code missing

I've entered my GA tracking code into my Octopress _config.yml and it doesn't appear to have changed the code at all.

Now I may be wrong here about whose job that is (my guess is that it'd be the theme's when it comes down to it though as that's where the JS has to come out) and maybe I'm doing it wrong (I'm very new to Octopress) but I thought I'd raise it as a bug here and you can quickly dismiss and close if I'm wrong.

Great theme by the way, thanks for open sourcing your hard work!

Fancybox not working?

Thanks for your theme, it's awesome. Is there anything I should do to enable the fancybox integration? I found it not working with my site.

Error pushing github

Why I can't push mi blog code after install the plugin?

$ git push origin master
The submodule at ".themes/greyshade" was removed from
.gitmodules, but the folder still exists in the repository. 
Delete the folder, commit the change, then try again.

Search form in greyshade

How to add simple simple search form in greyshade ?
I try put the same code from classic octopress to navigation

<form action="{{ site.simple_search }}" method="get">
  <fieldset role="search">
    <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}" />
    <input class="search" type="text" name="q" results="0" placeholder="Search"/>
  </fieldset>
</form>

But the result not perfect,

iOS weirdness?

I noticed that (certain) code blocks on iOS look weird. I've tried inspecting the CSS (through Safari on my desktop) and can't see why it happens 0 the case styles that affect the HTML in my screenshots below affect the non0HTML and yet they render differently.

The page in question is http://alexrussell.me.uk/

Here's how it looks in Chrome on my desktop:

chrome normal

Chrome emulating iOS using developer tools (obviously it fails miserably at actual emulation here for whatever reason - just seems to scale things down even though I am emulating the UA and the size - the left nav does switch to being at the top so something responsive is working, but apparently something's wrong - maybe it's due to retina weirdness):

chrome emulating ios badly

Here's a screenshot from my iOS 7 Safari showing the problem:

ios 7

Here's a screenshot from my iOS Simulator showing the problem:

ios 7 simulator

And for reference here's a screenshot of where it's really going wrong and affecting things:

ios 7 extra

In the remote inspector (using Safari on my desktop connected to my iPhone) I see that the <span class="line"> inherits a style of font-size: 0.9em; which comes from article pre, but as I said above, both the {{ 'hello' }} and <div class="name code blocks have the same CSS and render differently. Looking at computed style for the <span class="line"> shows the correct 14px for the {{ 'hello' }} line but oddly 23px for the <div class="name one. The highlighter classes don't appear to have any special styles that exhibit the font-size issue.

Sorry i can't be very helpful here, but hopefully the original page, screenshots, and what I've found so far well help you at least reproduce the bug.

Support external-url linklog option

The Octopress documentation discusses using Octopress as a linklog.

According to their documentation, you simply need to add external-url to the post frontmatter as such:

external-url: http://opinionguy.com/post/uninformed-rant-vs-straw-man/

However, the theme dictates what effect this actually has. It seems that the greyshade theme doesn't do anything with this option.

Embedding code using Gist plugin screws up alignment

Using the gist plugin and embedding code aligns all code text to "center".

Debugged a little and found this in the inherited style attributes of the code lines-

article .entry-content table td {
  text-align: center;
}

Tried with the classic theme and this is what I got -

caption, th, td {
  font-weight: normal;
  text-align: left;
}

Gravatar needs jquery to work

Great work with the theme. It looks brilliant. I am using it for my personal website.

I think the gravatar needs jquery to work. It didn't work for me just adding the email address in _config.

The browser console shows error for jquery. So to fix it I just included jquery in the head section of source/_includes/head.html and it started working.

I think it will be great if you can update the documentation to include this.

Thanks.

$greyshade text selection color

A possible suggestion to further differentiate different sites using Greyshade: change the text selection color to $greyshade. I'm using this on my site as an example.

::selection, ::-moz-selection, ::-webkit-selection
    background-color: $greyshade
    color: $color-background

Screen Shot 2012-12-28 at 02 11 13

Customization Variable

To further differentiate among Greyshade installation, consider adding variables for:

  • left sidebar color
  • midcol color
  • font-family for headings
  • font-family for article content

Missing slash.js and fancybox ?

Thank u for this theme.
After installing it I found the codes in / source / _includes / after_footer.html are default:

{% include disqus.html %}
{% include facebook_like.html %}
{% include google_plus_one.html %}
{% include twitter_sharing.html %}
{% include custom/after_footer.html %}

and after installing slash the codes are:

{% include disqus.html %}
{% include facebook_like.html %}
{% include google_plus_one.html %}
{% include twitter_sharing.html %}

hmm...I want to know why I am missing slash.js and fancybox.

Google Analytics JS gets put in twice

Hey Shashank!

Noticed tonight that {% include google_analytics.html %} is in both head.html and after_footer.html, making that bit of JS appear twice per page. It should be taken out of head.html for page load speed considerations.

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.