Skip to content

Instantly share code, notes, and snippets.

View jamesfacts's full-sized avatar

James White jamesfacts

View GitHub Profile
@jamesfacts
jamesfacts / hero.blade.php
Created May 6, 2021 19:22
Hero section with buttons
<section class="relative pt-32 pb-16 mb-8 flex content-center items-center justify-center lg:shadow-sm" style="min-height: 55vh;">
<div class="absolute top-0 w-full h-full bg-center bg-cover"
style="background-image: url('{{ \Roots\asset('images/header-mock-reversed.jpg') }}');">
<span id="blackOverlay" class="w-full h-full absolute opacity-50 bg-white lg:bg-gradient-to-r lg:from-white lg:to-transparent"></span></div>
<div class="container relative mx-auto">
<div class="items-center flex flex-wrap">
<div class="w-full lg:w-8/12 xl:w-6/12 px-4 ml-auto mr-auto text-center lg:mr-12 lg:mt-12 lg:text-left">
<div class="px-4">
<h1 class="text-gray-800 font-semibold text-3xl md:text-5xl font-oxygen leading-none mb-4 lg:text-right">
{{ "Hero Hedline Text" }}
@jamesfacts
jamesfacts / figure-component.blade.php
Created May 6, 2021 19:18
Figure with variable aspect ratio
<figure>
<a href="{{ $url }}">
<div class="aspect-ratio-wrap relative" style="padding-bottom: {{ $aspect_ratio ?? '0%' }};">
<img src="{{ $img_url }}" @if($alt) alt="{!! $alt !!}" @endif
class="block absolute top-0 left-0 object-cover w-full h-full">
</div>
</a>
</figure>
@jamesfacts
jamesfacts / header.blade.php
Created May 6, 2021 19:17
header view template to match Tailwind walker
<header class="banner w-full bg-white border-grey-100 shadow-md">
<div class="menu-wrap flex items-center flex-wrap justify-between p-3 w-full z-20 max-w-screen-xl
sm:px-6 sm:py-5 lg:relative lg:mx-auto">
<div class="flex items-center flex-no-shrink max-w-2/3">
<a class="brand lg:block lg:pt-2" href="{{ home_url('/') }}">
<img src="{{\Roots\asset('images/brand.png')}}" alt="Brand"
class="max-w-200">
</a>
</div>
@jamesfacts
jamesfacts / menus.php
Created May 6, 2021 19:12
This adds tailwind classes to the output of navwalkers
<?php
namespace App;
/**
* Custom fork of WP's native Walker functionality revised so we can output
* classes for tailwind
*
*/
/**
@jamesfacts
jamesfacts / .circleci.config.yml
Created August 24, 2019 18:15
Sample Circle CI config file
# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
build:
docker:
- image: circleci/node:7.10
@jamesfacts
jamesfacts / deploy.sh
Created August 24, 2019 17:50
Circle CI deploy script
#!/usr/bin/env bash
# don't continue to execute if we encounter an error
# https://stackoverflow.com/questions/19622198/what-does-set-e-mean-in-a-bash-script
set -e
# prevent ssh from raising interactive prompt for new host keys
echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
WPE_ENVIRONMENT=production
FOLDER=wp-content/themes/
if [ "production" == "${CI_ENVIRONMENT_NAME}" ]; then
WPE_INSTALL=prod_install
elif [ "staging" == "${CI_ENVIRONMENT_NAME}" ]; then
WPE_INSTALL=staging_install
else
WPE_INSTALL=dev_install
fi
image: php:7.2-cli
before_script:
# Updates
- curl -sL https://deb.nodesource.com/setup_10.x | bash
- curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
- echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
- apt-get update
- apt-get -y install yarn libpcre3-dev zlib1g-dev libbz2-dev libpng-dev libjpeg-dev nodejs git zip unzip curl rsync mysql-client
- docker-php-ext-configure gd --with-png-dir=/usr --with-jpeg-dir=/usr

Keybase proof

I hereby claim:

  • I am jamesfacts on github.
  • I am jamesfacts (https://keybase.io/jamesfacts) on keybase.
  • I have a public key ASAbc-93kS2pgt0xAuJYR44fbSIl19SJLkP0D5tueLesUAo

To claim this, I am signing this object:

@jamesfacts
jamesfacts / css-colors.md
Created February 22, 2018 21:35
Attractive CSS colors

LightCoral FireBrick Coral DarkOrange Chocolate Khaki BlueViolet Indigo SlateBlue SpringGreen