New design: 2.0

Finally got to make a little design refresh here.

So, an update. Nothing that special, though. Goals of the refresh was to get bounce rate down (stats will show), and make the site more slick and nicer to use.

I got tons of new articles queued up.

This is a test post to see how all the elements work on the page.

Tables

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

More tables

Table header Something Something2
Something Content Here
More smthng And other interesting thing There

Links

google

Images

With a caption.
With a caption.

Without a caption

Picture 39

Images span wider than the paragraphs (at least they should, this image should be as wide as the column).

IMG_4013-web

Code

SCSS

.color-changer {
    margin-bottom: 0;
    padding-bottom: $omni-value / 4;

    &:last-child {
        padding-bottom: 0;
    }
}

PHP

/**
 * Theme changer
 * @return string A CSS class
 */
function cm_theme()
{
    // Boring
    if ($_COOKIE['color-theme'] == 'theme-2') {
        $theme = 'theme-2';
    // Hello Kitty
    } elseif ($_COOKIE['color-theme'] == 'theme-3') {
        $theme = 'theme-3';
    } else {
        $theme = 'theme-1';
    }
    return $theme;
}

Javascript

/**
 * Keyboard shortcuts
 */
$(document.documentElement).keyup(function(e) {
    var older  = $('.older'),
        newer  = $('.newer'),
        search = $('#s');
    // Esc activates search
    if (e.keyCode === 27) {
        search.focus();
    }
    // Right arrow next
    if (older.length > 1 && e.keyCode === 39) {
        window.location.href = older.attr('href');
    }
    // Left arrow previous
    if (newer.length > 1 && e.keyCode === 37) {
        window.location.href = newer.attr('href');
    }
});

Loads of code. The code box has a max-height and a scrollbar appears:

// Codeblock basic styles
// Prism syntax styles defined in scss/vendor/_prism.scss
code {
    background: rgba(255, 255, 255, .5);
    font-family: $font-monospace;
    font-size: 90%;
    padding: 0 5px;
}

pre {
    @include transition(background-color  .2s ease-in 0);
    background-color: #e4ffff;
    direction: ltr;
    line-height: 1.6;
    max-height: 600px;
    margin: 0 -20px 20px;
    overflow: auto;
    padding-bottom: 0;
    position: relative;
    white-space: pre;

    &::-webkit-scrollbar {
        background: $color-white;
        width: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background: $color-black;
    }

    code {
        background: transparent;
        display: block;
        margin: $omni-value-half;
        white-space: pre;
    }
}

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, ipsa maxime asperiores nobis voluptas dignissimos quibusdam quo quas porro sapiente voluptatum natus aut ad hic et ex recusandae molestias commodi!

Lists

Unordered list:

  • lorem
  • ipsum
  • dolor

Ordered list:

  1. lorem
  2. ipsum
  3. dolor

Mixed lists:

  1. magna
    • nullam
  2. quis
    • risus
  • lorem
    1. This is an ol element but
    2. it seems not to be working.
  • dolor
    1. It’s too much for the
    2. markdown parser.

Mega list:

  • lorem
  • ipsum
  • dolor
    • sit
    • amet
      • consecteur
      • adipisicing
    • elit
  • bladitiis
    1. maecenas
    2. sed
      • varius
      • blandit
  • nullam

Lazy loaded Vimeo embed

Lazy loaded CodePen embed

See the Pen PwWQBK by hilja (@hilja) on CodePen.

Comments

Club-Mate, the beverage → club-mate.fi