Style Guide

just testing my blog styles :)

Heading 1

Heading 2

Heading 3

Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam et voluptatibus deleniti provident error vitae dolor eum numquam ad laborum maiores repellendus ullam iure deserunt, veritatis voluptas non mollitia architecto.

Heading 2

Heading 3

Italic

Bold

Italic & Bold

Code Block Sample using liquid and rogue highlighting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14 using System;
using System.Collections.Generic;
using System.Text;

namespace ConsoleApplication1
{
  class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine("Hello, world!");
    }
  }
}

Add this code: (no line numbers sample)

.terminal {
  border-top: 22px solid #bbb;
  width: 100%;
  background-color: #151515;
  margin: 2em 0;
  border-top-right-radius: .6em;
  border-top-left-radius: .6em;
  color: #9CD9F0;
  font-family: monospace;
  padding: 2em 1.5em 2em 2em;
}

This is a Blockquote Sample. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam et voluptatibus deleniti provident error vitae dolor eum numquam ad laborum maiores repellendus ullam iure deserunt, veritatis voluptas non mollitia architecto!

Keep in mind

You can always fork this project on github and deploy it locally on your machine using bundle exec jekyll serve terminal command. Then you can acces the preview on localhost:4000 It is that easy.

Here is a sample terminal window with commands and output:

bundle exec jekyll serve

Configuration file: …/sebastiankulig-Jekyll/_config.yml

Source: source/ Destination: _site/ Incremental build: disabled. Enable with –incremental Generating…done in 0.611 seconds.

Please add the following to your Gemfile to avoid polling for changes: gem ‘wdm’, ‘>= 0.1.0’ if Gem.win_platform? Auto-regeneration: enabled for ‘source/’ Server address: http://127.0.0.1:4000/ Server running… press ctrl-c to stop.

Can apply class to element like a paragraph using Kramdown:

paragraph text {: .blue} - Could be useful for changing paragraph color

Definition Lists:

HTML: HyperText Markup Language

HTML: HyperText Markup Language

CSS: Cascading Style Sheets used to style a website.; Documents structured using XML or HTML are able to make use of them.
Jekyll: Jekyll is a simple, blog-aware, static site generator.; It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and our Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server; Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.

The styling is looking AWESOME so far I think. Still needs a bit of work though.