alexgaribay/octoflat

An Octopress theme based off Twitter Bootstrap v2 and Designmodo's Flat-UI

Octoflat

This is a theme using Twitter Bootstrap and Designmodo's Flat UI theme which can be previewed on Designmodo's website. The awesome symbol font is from FontAwesome.

This theme has a live preview at AlexGaribay.com.

The theme now comes in two different color schemes: a light color scheme and a dark color scheme. The dark scheme is the default.

Please update the Wiki page if you are using this theme.

Installing the theme

As a submodule

$ cd your_octopress_dir
$ git submodule add https://github.com/alexgaribay/octoflat .themes/octoflat
$ rake install['octoflat']
$ rake generate

Grabbing the latest updates as a module

$ cd your_octopress_dir
$ git submodule update

As a clone

$ cd your_octopress_dir
$ git clone https://github.com/alexgaribay/octoflat .themes/octoflat
$ rake install['octoflat']
$ rake generate

---

Configuring Navigation

Add a navigation section to your _config.yml. Doing this allows the navbar to highlight the active page. Use the following format:

navigation:
- text: Home
  url: /index.html

Adding New Pages

Create new pages by using the following command:

rake new_page['new_page_name.md']

Go back to update your _config.yml file:

navigation:
- text: Home
  url: /index.html
- text: New Page Title
  url: /new_page_name.html

---

Modifying the Color Scheme

The theme has two color scheme options: light and dark. The dark color scheme is the one enabled by default.

To change the color scheme after you've installed the theme, do the following:

$ cd your_octopress_dir/sass/custom/
$ vim _colors.scss
// Delete lines 3 and 18 and save
$ rake generate

---

LinkedIn Link

To get the LinkedIn link to work, modify your _config.yml to have this line:

$ linkedin_user: username

Your username can be found by going to your profile page. On your info card at the top of the page, theres a link to your public profile page. Extract out your username from the link. www.linkedin.com/in/**username**/

---

License

This theme is licensed under a MIT License - http://opensource.org/licenses/mit-license.html

octoflat's Issues

Title case tags don't work

You can use {{ category | category_link }} to get the correct link, but you have to adjust the CSS as well.

Fix meta tags creation in header

Currently meta description and keywords are generated in a rather haphazard way. This issue originates from Octopress, I ported the fix (taken from here: http://www.leeturner.co/octopress-meta-desc-keywords/) to your theme.

Code highlighting is missing.

Syntax highlighting of code is missing. Will be fixed by redoing the sass files to include the components required for syntax highlighting.

Rake generate fails

Executing rake generate after installing the theme fails and gives the following output:

## Generating Site with Jekyll
    error sass/screen.scss (Line 61 of sass/_syntax.scss: "html .gist .gist-file .gist-meta" failed to     @extend ".sans".
The selector ".sans" was not found.
Use "@extend .sans !optional" if the extend should be able to fail.
)
Compilation failed in 1 files.
Configuration file: /home/aditya/workspace/blog/octopress/_config.yml
            Source: source
       Destination: public
      Generating... 
     Build Warning: Layout 'nil' requested in blog/categories/self/atom.xml does not exist.
     Build Warning: Layout 'nil' requested in blog/categories/uptime/atom.xml does not exist.
     Build Warning: Layout 'nil' requested in atom.xml does not exist.
 Build Warning: Layout 'nil' requested in robots.txt does not exist.
 Build Warning: Layout 'nil' requested in blog/categories/self/atom.xml does not exist.
 Build Warning: Layout 'nil' requested in blog/categories/uptime/atom.xml does not exist.
                done.
 Auto-regeneration: disabled. Use --watch to enable.

Pull Quotes don't work

Move post-meta to appear below post-container when viewing from mobile

Post date, tags, and comment count appear above the post title and post body by default from the responsiveness of Bootstrap when viewing from mobile.

Enhance theme to move post-meta to appear below post-container when viewing from mobile.

Categories page case sensitive.

Categories do not link correctly unless category is all lowercase. If category is not all lowercase it returns 404.
Bug can be seen http://alexgaribay.com/blog/categories/iOS/

Linkedin icon

Hi, could you put in a few lines in the readme on how you configure the Linked In icon?

I found the right syntax, but it does not say it anywhere I could find.

Disqus Comment Count

Hey Alex,

First of all, great theme! I am having one problem, however... I can't seem to get the Disqus comment count on the blog index page to work. The disqus comments show up if I drill into the post... not sure what I'm doing wrong. The site is

www.artifexcontramundum.com

Any idea what I've missed?

Boostrap 3

Any plans to move this to Bootstrap 3?

Horizontal layout of social icons in collapsed navbar

I think keeping the navbar as small as possible on mobile devices would be a good thing. I propose laying out the social icons horizontally instead of vertically.
From:

To this:

Load JS Asynchronously

There's about 415kb of JS used for this theme. It'd be ideal if this was loaded asynchronously.

_fonts.scss, is it functional?

There are two issues I would like to point out, honestly:

1. There is an error that continuously shows up:

   WARNING on line 61 of /Users/$USER/Documents/octopress/sass/_syntax.scss: "html .gist .gist-file .gist-meta" failed to @extend ".sans".
   The selector ".sans" was not found.
   This will be an error in future releases of Sass.
   Use "@extend .sans !optional" if the extend should be able to fail.

2. Does the _fonts.scss actually works? I try to change stuff there, but Octopress isn't detecting any changes at all.

Best,
Maz

Linkedin icon gone after updating octopress

Hi,

I noticed that the Linkedin icon has gone missing after updating octopress from my blog navbar. I guess it has to do with FontAwesome changing some of the identifiers of its icons?

Check out the problem at http://tschoonj.github.io/index.html

Cheers,

Tom

Suggest the navbar collapse threshold reduce to 767px

The navbar collapse threshold is 979px. It's will not convenient for some tablet on portrait mode such as iPad.

Bootstrap 3

Is anyone working to put in bootstrap 3 into this theme any time soon?

error when generating site

fixed it. My bad. Sorry guys.

read more function not working

I've just post article, when using tag more its not working

<!-- more -->

code background color in dark theme

The background color of inline <code> is white. How can I modify this? I want to have the same color as code blocks.

pre code tags does not include background color

Hi,

I wrote sass/custom/_color.scss like this...

$code-bg-color:      #000000; // Code background
$pre-bg: #000000;

But my HTML does not display background color with #000000.

How can I set background color with pre code tags.

Thanks.

Date is not displayed alongside calendar icon

I don't know what the problem is I had tried changing _config.yml date format but still date is not appearing .Here's is my site "http://ayoush.github.io/"

Current page is not always highlighted

The current page is not highlighted (in green) when the page is a custom one and it was created with
rake new_page[about]

However, the current page is highlighted if it was created with
rake new_page[about.html]

Not a big issue, but it would be nice if you mention it on the documentation.

(also, a brief explanation of how the navigation works would be helpful)

Thanks for your work!