searleb

Text Clock

A text readable clock. Availble here: https://chrome.google.com/webstore/detail/text-clock/caacmmeopdailkdlgkimndodjipilaha

A Pen by Bill Searle on CodePen.

License.

searleb

Multi-Layered changing & fading background

Using d3.js, trianglify.js and velocity.js I was able to create a randomly generated, multilayered, transitioning and responsive background effect.

A Pen by Bill Searle on CodePen.

License.

searleb

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

searleb

	$(".scroll").click(function(event) {
		event.preventDefault();
		var scrollToId = $(this).attr('href');
		$("html, body").animate({ scrollTop: $(scrollToId).offset().top }, 400);
	});

searleb

    // requires Moment.js
    
    // format time
    UI.registerHelper('formatTime', function(time, formatting) {
        if(time) {
            return moment(time).format(formatting);
        }
    });
    
    

searleb

meteor remove insecure autopublish

meteor add fourseven:scss iron:router msavin:mongol accounts-ui

npm install -g meteor-jsdoc

searleb

/**
 * background-image mixin
 * @param  {string} $url   only image name required
 * @param  {string} $pos:  center        background-position: [default]center
 * @param  {string} $size: cover         background-size: [default]cover
 * @param  {string} $rep:  no-repeat     background-repeat: [default]no-repeat
 */
@mixin background-image($url, $pos: center, $size: cover, $rep: no-repeat ) {
    background-image: url('../images/#{$url}');
    background-position: $pos;

searleb

/**
 * Add this to a bootstrap .row to add flex.
 * This will cause child .col-* elements to expand to equal hights
 */
.row-flex {
    @media #{$media-sm}{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;

searleb

// blade template - just html really
@section('journal-carousel')
    <div class="container article-carousel">
        <div class="row">
            <div class="col-sm-12">
                <div class="article-carousel__slider">
                    @for ($i = 0; $i < 3; $i++)
                        <figure><img src="{{Theme::url('images/blonde'.$i.'.jpg')}}" alt="" class="img-responsive" /></figure>
                    @endfor
                    @for ($i = 0; $i < 3; $i++)

searleb

/**
* Closes all navigation layers, staggered from bottom
* if the user clicks anywhere outside of the nav
*/
$('html').on('click', function(event) {
    // if the closest parent is not the nav
    if (!$(event.target).closest('nav').length) {
        // get all elements with the nav--open class and reverse the array
        $($('.nav--open').get().reverse()).each(function(i, el) {
            // remove the element nav--open class with 300ms * i delay to get the stagger effect