Freemius - weDocs Pretty Sections

_sections-header.scss

// Header search
.page-header
{
    .wedocs-search-form
    {
        position: relative;

        input
        {
            @include placeholder(#999);
            @include border-radius(5px 0 0 5px);

            max-width:      550px;
            color:          #777;
            font-size:      20px;
            font-weight:    300;
            border:         1px solid #165c79;
            height:         47px;
            vertical-align: top;
            display:        inline;
            box-sizing:     border-box;
            border-right:   none;
            padding:        0 20px 0 50px;
            background:     #fff url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjFweCIgdmlld0JveD0iMCAwIDIwIDIxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4wLjMgKDc4OTEpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkltcG9ydGVkIExheWVyczwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIGlkPSJBcnRib2FyZC0xIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQyLjAwMDAwMCwgLTE2NC4wMDAwMDApIiBmaWxsPSIjREREREREIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iU2VhcmNoLUlucHV0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjIuMDAwMDAwLCAxNDkuMDAwMDAwKSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM5LjU2MTk0NDQsMzMuMzgxMDQxMSBMMzMuNjI0NzIyMiwyNy4yMzIwNjg1IEMzNC40ODU1NTU2LDI1Ljk2ODYxNjQgMzQuOTkzMDU1NiwyNC40Mjc4NDkzIDM0Ljk5MzA1NTYsMjIuNzYzMzgzNiBDMzQuOTkzMDU1NiwxOC40NzU2NDM4IDMxLjYzNjk0NDQsMTUgMjcuNDk2NjY2NywxNSBDMjMuMzU2NjY2NywxNSAyMCwxOC40NzU2NDM4IDIwLDIyLjc2MzM4MzYgQzIwLDI3LjA1MDgzNTYgMjMuMzU2NjY2NywzMC41MjcwNTQ4IDI3LjQ5NjY2NjcsMzAuNTI3MDU0OCBDMjkuMTExNjY2NywzMC41MjcwNTQ4IDMwLjYwNjExMTEsMjkuOTk2NTg5IDMxLjgyOTcyMjIsMjkuMDk3MDQxMSBMMzcuNzYzODg4OSwzNS4yNDMxMzcgQzM4LjMwODMzMzMsMzUuODA2Njg0OSAzOS4xNTgzMzMzLDM1Ljg0OTI2MDMgMzkuNjUyNzc3OCwzNS4zMzY5MTc4IEM0MC4xNDcyMjIyLDM0LjgyNTE1MDcgNDAuMTA2Mzg4OSwzMy45NDQ4NzY3IDM5LjU2MTk0NDQsMzMuMzgxMDQxMSBMMzkuNTYxOTQ0NCwzMy4zODEwNDExIFogTTIyLjUsMjIuNzYzMzgzNiBDMjIuNSwxOS45MTA1NDc5IDI0Ljc0MTY2NjcsMTcuNTg5MDQxMSAyNy40OTY2NjY3LDE3LjU4OTA0MTEgQzMwLjI1MTY2NjcsMTcuNTg5MDQxMSAzMi40OTMwNTU2LDE5LjkxMDU0NzkgMzIuNDkzMDU1NiwyMi43NjMzODM2IEMzMi40OTMwNTU2LDI1LjYxNjc5NDUgMzAuMjUxNjY2NywyNy45MzgwMTM3IDI3LjQ5NjY2NjcsMjcuOTM4MDEzNyBDMjQuNzQxNjY2NywyNy45MzgwMTM3IDIyLjUsMjUuNjE2Nzk0NSAyMi41LDIyLjc2MzM4MzYgTDIyLjUsMjIuNzYzMzgzNiBaIiBpZD0iSW1wb3J0ZWQtTGF5ZXJzIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat 14px 13px;
        }

        button
        {
            background:     #222;
            border-radius:  0 5px 5px 0;
            height:         47px;
            vertical-align: top;
            display:        inline;
            border:         1px solid #165c79;
            font-size:      20px;
            padding:        0 20px;
            box-sizing:     border-box;
            border-left:    none;
            @include transition(all 0.3s);

            &:hover
            {
                background: darken($fs-logo-blue-color, 10%);
            }

            &:active
            {
                background: darken($fs-logo-blue-color, 10%);
                @include box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
            }
        }

        h2
        {
            font-weight: 200;
            @include font-size(18px);
            margin-top:  5px;
        }

        @media #{$small-and-down}
        {
            input
            {
                width: 100%;
                @include border-radius(5px);
            }

            button
            {
                position: absolute;
                top:      0;
                right:    0;
            }
        }

        @media only screen and (max-width: 460px) {
            input
            {
                background-image: none;
                padding:          0 20px;
            }

            button
            {
                width:      50px;
                background: #fff url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjFweCIgdmlld0JveD0iMCAwIDIwIDIxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4wLjMgKDc4OTEpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkltcG9ydGVkIExheWVyczwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIGlkPSJBcnRib2FyZC0xIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQyLjAwMDAwMCwgLTE2NC4wMDAwMDApIiBmaWxsPSIjREREREREIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iU2VhcmNoLUlucHV0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjIuMDAwMDAwLCAxNDkuMDAwMDAwKSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM5LjU2MTk0NDQsMzMuMzgxMDQxMSBMMzMuNjI0NzIyMiwyNy4yMzIwNjg1IEMzNC40ODU1NTU2LDI1Ljk2ODYxNjQgMzQuOTkzMDU1NiwyNC40Mjc4NDkzIDM0Ljk5MzA1NTYsMjIuNzYzMzgzNiBDMzQuOTkzMDU1NiwxOC40NzU2NDM4IDMxLjYzNjk0NDQsMTUgMjcuNDk2NjY2NywxNSBDMjMuMzU2NjY2NywxNSAyMCwxOC40NzU2NDM4IDIwLDIyLjc2MzM4MzYgQzIwLDI3LjA1MDgzNTYgMjMuMzU2NjY2NywzMC41MjcwNTQ4IDI3LjQ5NjY2NjcsMzAuNTI3MDU0OCBDMjkuMTExNjY2NywzMC41MjcwNTQ4IDMwLjYwNjExMTEsMjkuOTk2NTg5IDMxLjgyOTcyMjIsMjkuMDk3MDQxMSBMMzcuNzYzODg4OSwzNS4yNDMxMzcgQzM4LjMwODMzMzMsMzUuODA2Njg0OSAzOS4xNTgzMzMzLDM1Ljg0OTI2MDMgMzkuNjUyNzc3OCwzNS4zMzY5MTc4IEM0MC4xNDcyMjIyLDM0LjgyNTE1MDcgNDAuMTA2Mzg4OSwzMy45NDQ4NzY3IDM5LjU2MTk0NDQsMzMuMzgxMDQxMSBMMzkuNTYxOTQ0NCwzMy4zODEwNDExIFogTTIyLjUsMjIuNzYzMzgzNiBDMjIuNSwxOS45MTA1NDc5IDI0Ljc0MTY2NjcsMTcuNTg5MDQxMSAyNy40OTY2NjY3LDE3LjU4OTA0MTEgQzMwLjI1MTY2NjcsMTcuNTg5MDQxMSAzMi40OTMwNTU2LDE5LjkxMDU0NzkgMzIuNDkzMDU1NiwyMi43NjMzODM2IEMzMi40OTMwNTU2LDI1LjYxNjc5NDUgMzAuMjUxNjY2NywyNy45MzgwMTM3IDI3LjQ5NjY2NjcsMjcuOTM4MDEzNyBDMjQuNzQxNjY2NywyNy45MzgwMTM3IDIyLjUsMjUuNjE2Nzk0NSAyMi41LDIyLjc2MzM4MzYgTDIyLjUsMjIuNzYzMzgzNiBaIiBpZD0iSW1wb3J0ZWQtTGF5ZXJzIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") no-repeat 14px 13px;

                span
                {
                    display: none;
                }

                &:hover
                {
                    background-color: #222;
                }
            }
        }
    }
}

_sections.scss

#docs_sections {
    .section-tile {
        padding: 0 15px;
        border: 1px solid transparent;
        box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
        background: #fff;
        @include transition(background 0.3s);
        margin-top: 25px;

        &:hover {
            background: #fefefe;
        }

        h2 {
            font-size: 26px;
            color: #333;
            font-weight: 400;
        }

        .excerpt {
            color: #777;
        }

        .counter {
            i {
                margin-right: 5px;
            }
        }
    }
}

docs-header-main.php

<div class="page-header page-header--no-cover">
	<div class="container center" itemtype="http://schema.org/WebSite">
		<h1 class="page-title"><?php the_title() ?></h1>
		<meta property="url" content="<?php echo esc_url( home_url( '/help/documentation/' ) ) ?>"/>
		<form role="search" method="post" class="search-form wedocs-search-form"
		      itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction"
		      action="<?php echo esc_url( home_url( '/help/documentation/search/' ) ) ?>">

			<meta itemprop="target" content="https://freemius.com/help/documentation/search/{query}/"/>
			<div class="wedocs-search-input">
				<input type="search" class="search-field"
				       itemprop="query-input"
				       name="query"
				       tabindex="1"
				       placeholder="<?php _e( 'What can we help you with?', 'freemius' ) ?>"
				       value="<?php echo get_search_query() ?>"
				       title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>"/><button type="submit" tabindex="1"><span><?php _e( 'Search', 'freemius' ) ?></span></button>
			</div>
			<h2><?php _e('Search Freemius documentation using terms like "Deployment", "API", or "Payouts".') ?></h2>
		</form>
	</div>
</div>

<script type="text/javascript">
	(function ($) {
		$('.search-form.wedocs-search-form').on('submit', function () {
			var search = $(this).find('input').val().toLowerCase().trim();

			if ('' === search){
				return false;
			}

			$(this).attr('action', $(this).attr('action') + encodeURIComponent(search) + '/');
		});
	})(jQuery);
</script>

docs-sections.php

<?php
	global $post;
	$root        = $post;
	$show_drafts = current_user_can( 'edit_others_pages' );
	$sections    = get_children( array(
		'post_parent' => $root->ID,
		'post_type'   => 'docs',
		'post_status' => $show_drafts ? 'any' : 'publish',
	) );

	usort( $sections, 'wedocs_sort_callback' );
?>
<section id="docs_sections" class="section center">
	<div class="container row">
		<?php $i = 0 ?>
		<?php foreach ( $sections as $section ) : ?>
			<div class="col s12 m6 l4">
				<a href="<?php echo get_the_permalink( $section ) ?>">
					<div class="section-tile">
						<?php printf(
							'<h2>%s</h2>',
							get_the_title( $section ),
							get_the_permalink( $section )
						) ?>
						<?php if ( ! has_excerpt( $section ) && current_user_can( 'edit_others_pages' ) ) : ?>
							<p><strong
									style="text-transform: uppercase; color: red;"><?php _e( 'Excerpt is missing! (this is only visible for admins)' ) ?></strong>
							</p>
						<?php else : ?>
							<p class="excerpt">
								<?php echo get_the_excerpt( $section ) ?>
							</p>
						<?php endif ?>

						<p class="counter">
							<i class="fa fa-book"></i>
							<?php echo wedocs_count_section_docs(
								$section->ID,
								$show_drafts ? 'any' : 'publish'
							) ?>
							<?php _e( 'articles', 'freemius' ) ?>
						</p>
					</div>
				</a>
			</div>
			<?php $i ++ ?>
		<?php endforeach ?>
	</div>
</section>