donpadre

Fold-away hero

Let the hero-section fold away as you scroll down the site, until only the nav-bar is left

A Pen by Jeppe Stougaard on CodePen.

License.

donpadre

<div class="container">
  <h1>Blog Posts</h1>
  <div class="row">
    <div class="eight columns">
      <div class="featured"></div>
      <div class="teaser">
      <h3>JavaScript</h3>
        <h6><span>11th October 2016</span></h6>
      <p>Bacon ipsum dolor amet doner tri-tip shankle, sirloin landjaeger andouille beef ribs rump prosciutto pork loin porchetta. Pork loin pig boudin, andouille.</p>
        <h6><a href="#">Read More</a></h6>

donpadre

Article News Card

This is a demo of Justin Kwak's Article News Card that he posted on Dribbble.

Shot Link: https://dribbble.com/shots/2001637-Article-News-Card-UI

A Pen by Andy Tran on CodePen.

License.

donpadre

<h1>Responsive post grid with Masonry</h1>
<div class="site__wrapper">
  <div class="grid">
    <div class="card">
      <div class="card__image">
        <img src="https://unsplash.it/500/600?image=100" alt="">

        <div class="card__overlay card__overlay--blue">
          <div class="card__overlay-content">
            <ul class="card__meta">

donpadre

<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

  
<header class="main_h">

    <div class="row">
        <a class="logo" href="#">P/F</a>

donpadre

<h2>Categories</h2>
<ul>
{% assign categories_list = site.categories %}
  {% if categories_list.first[0] == null %}
    {% for category in categories_list %}
      <li><a href="#{{ category }}">{{ category | capitalize }} ({{ site.tags[category].size }})</a></li>
    {% endfor %}
  {% else %}
    {% for category in categories_list %}
      <li><a href="#{{ tag[0] }}">{{ category[0] | capitalize }} ({{ category[1].size }})</a></li>

donpadre

#!/bin/sh
#
#   Dieses Script fragt nach einer Bildatei, die dann in die
#   verschiedenen Favicon-Größen mittels sips-Kommandos
#   umgewandelt werden. Ist auf dem Rechner das Programm
#   ImageOptim installiert, dann werden die Bilddateien
#   anschließend verlustlos optimiert.

# Farben in Variablen schreiben (schönerer Output)
reset='\x1B[0m'

donpadre

require 'json'

module Jekyll

  module JsonContent
    class Index < Jekyll::Page
      attr_reader :page

      def initialize site, base, dir, page
        @site = site

donpadre

Flexbox Article Layout

Flexbox is an amazingly powerful layout tool. In this example I have created a responsive grid of articles that increased the amount of visible articles on the page at larger resolutions.

A Pen by Jon Daiello on CodePen.

License.

donpadre

<h1>Social Share Buttons + Counters</h1>
<div class="social">
  <div class="social__item">
    <span class="fa fa-facebook" data-count="..." data-social="fb"></span>
  </div>
  <div class="social__item">
    <span class="fa fa-vk" data-count="..." data-social="vk"></span>
  </div>
  <div class="social__item">
    <span class="fa fa-twitter" data-count="..." data-social="tw"></span>