Brian Blosser bpb54321
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .hero-media-parallax { | |
| display: block; | |
| position: fixed; | |
| z-index: map-get($site-content-zindex, underneath); | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100vh; | |
| overflow: hidden; | |
| transition: left $menu-timing; |
bpb54321
/ Site.implementParallaxScrolling.js
Last active
July 18, 2017 21:35
Parallax image effect, both with and without text overlays.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function (Site, $, undefined) { | |
| 'use strict'; | |
| /** | |
| * This function is called on scroll for both parallax image blocks, | |
| * either with a text overlay or without. | |
| */ | |
| Site.implementParallaxScrolling = function (data) { | |
| var window_height = Site.$window.height(); |
bpb54321
/ _slideshow.inc
Last active
July 12, 2017 20:28
A custom javascript image slideshow, with responsive images, buttons, and image swipe on mobile (requires the jquery-ui.js library).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="slideshow"> | |
| <div class="slideshow__inner"> | |
| <nav class="slideshow__navigation"> | |
| <h2 class="visuallyhidden">Slideshow Navigation</h2> | |
| <ul class='slideshow__navigation-list'> | |
| <li class='slideshow__navigation-item'> | |
| <button title="Previous" class="slideshow__navigation-button slideshow__navigation-button--previous" aria-label="Previous Slide"> | |
| <svg class="slideshow__previous-arrow"> | |
| <use xlink:href="#arrow-circle-previous"/> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="hero-image hero-image--fixed-height-800"> | |
| <picture> | |
| <source srcset="https://unsplash.it/414/800 414w, https://unsplash.it/828/1600 828w, https://unsplash.it/1242/2400 1242w" sizes="100vw" media="(max-width: 414px)"> | |
| <source srcset="https://unsplash.it/768/800 768w, https://unsplash.it/1536/1600 1536w, https://unsplash.it/2304/2400 2304w" sizes="100vw" media="(max-width: 768px)"> | |
| <source srcset="https://unsplash.it/960/800 960w, https://unsplash.it/1920/1600 1920w, https://unsplash.it/2880/2400 2880w" sizes="100vw"> | |
| <img class="hero-image__image" src="https://unsplash.it/414/800" alt="A black sloping roof on a building"> | |
| </picture> | |
| </div> |
bpb54321
/ regular-responsive-image.html
Created
June 29, 2017 16:53
Regular responsive image with a single crop across screen sizes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <img class="zoom-image__image" sizes="(max-width: 768px) calc(100vw - 40px), (max-width: 960px) 345px, (max-width: 1200px) 455px, 555px" srcset="https://unsplash.it/374/374 374w, https://unsplash.it/748/748 748w, https://unsplash.it/1122/1122 1122w, https://unsplash.it/728/728 728w, https://unsplash.it/1456/1456 1456w, https://unsplash.it/2184/2184 2184w, https://unsplash.it/345/345 345w, https://unsplash.it/690/690 690w, https://unsplash.it/1035/1035 1035w" src="https://unsplash.it/374/374" alt="Adrian Walker at STL Fashion Week 1"> |
bpb54321
/ format_phone_number.php
Created
June 16, 2017 22:40
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Formats a bare bones phone number with parentheses and dashes. | |
| * | |
| * @param $phone A 10-digit string with no spaces, representing a number. | |
| * | |
| * @return string The formatted number. | |
| */ | |
| function format_phone_number($phone) { | |
| $area_code = substr($phone, 0, 3); | |
| $first_three = substr($phone, 3, 3); |
bpb54321
/ postal-address-markup.html
Created
June 16, 2017 21:22
Markup for the postal address of the organisation that the site is about.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <address itemscope itemtype="http://schema.org/PostalAddress"> | |
| <a href="" target="_blank" rel="noreferrer" class="" > | |
| <span itemprop="streetAddress">20 Commerce St.</span><br><span itemprop="addressLocality">Springfield</span>, <span itemprop="addressRegion">NJ</span> <span itemprop="postalCode">07081</span> | |
| </a> | |
| </address> |
bpb54321
/ filter-video-iframe-wordpress.php
Last active
July 11, 2017 15:14
Vimeo Hero Video With Hero Image Fallback on Mobile
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| //region Hero Video Iframe | |
| $iframe = get_field( 'hero_video' ); | |
| preg_match( '/src="(\S+)"/', $iframe, $matches ); | |
| // Get the first capture group, the stuff inside the 'src' attribute. | |
| // The variable $matches is automatically initialized. | |
| // $matches[0] = the match of the whole regular expression | |
| // $matches[1] = the contents of the first capture group |
bpb54321
/ the_picture_auto_crop.php
Created
June 13, 2017 21:37
Echoes a picture element in WordPress for a single attachment id, with the image crops determined by the image sizes set up with the theme.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Echo a picture element, with auto-cropping based on the image size names that you have created in functions.php. | |
| * | |
| * @param Number $id The id of the image (attachment) that you want to display. | |
| * @param ArrayObject $full_image_names An array of strings of WordPress image size names that correspond to the | |
| * "full" or "largest" dimensions of each crop. | |
| * @param ArrayObject $media_queries An array of media queries describing under which conditions you want each image | |
| * size to display. | |
| * @param ArrayObject $sizes An array of width media queries and image width descriptors describing the width of the | |
| * image on the page in each <source> media condition. |
bpb54321
/ _full-screen-hero-video.php
Last active
June 28, 2017 16:41
Script for responsively loading video sources. Judges best video 'fit' by comparing surface areas.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="hero js-scale-media-container"> | |
| <img class="hero__preloader-image" src="fpo/images/TOKY_preloader.gif" alt="TOKY"> | |
| <video class="hero__video js-scale-media" autoplay playsinline loop muted> | |
| <source src="fpo/video/toky_background_sd_640x360.mp4" type="video/mp4"> | |
| </video> | |
| <div class="hero__overlay-block"> | |
| <div class="hero__slash-label animate-slide-up-100px-from-below-fade-in">At Toky</div> | |
| <h1 class="hero__header-1 animate-slide-up-100px-from-below-fade-in-first-delay">We believe our world can be more thoughtful, more humane, and more beautiful.</h1> | |
| <a href="/what-we-do/" class="hero__link-button hero__link-button--clear-red animate-slide-up-100px-from-below-fade-in-second-delay">About TOKY</a> | |
| </div> |