Skip to content

Instantly share code, notes, and snippets.

View jamiejohnsonkc's full-sized avatar

Jamie Johnson jamiejohnsonkc

View GitHub Profile
@jamiejohnsonkc
jamiejohnsonkc / flipcard css
Created June 2, 2019 16:15
flipcard #html, #css
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
@jamiejohnsonkc
jamiejohnsonkc / css
Created June 4, 2019 20:31
readmore/readless #accordian #button #effect
.container__accordian{
display: none;
}
@jamiejohnsonkc
jamiejohnsonkc / rotate.scss
Created June 4, 2019 20:32
rotate on click (css) #css #sass #scss
.rotate{
transform: rotate(90deg);
transition: all .3s ease-in;
}
@jamiejohnsonkc
jamiejohnsonkc / .jsbeautifyrc
Created October 1, 2019 15:45
[js-beautifyrc] beautify config for vscode #vscode #config #json #beautify
{
"html": {
"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "dust"],
"brace_style": "collapse",
"end_with_newline": true,
"indent_char": " ",
"indent_handlebars": true,
"indent_inner_html": false,
"indent_scripts": "keep",
"indent_size": 4,
@jamiejohnsonkc
jamiejohnsonkc / enqueue typekit.php
Created October 16, 2019 14:00
wp enqueue typekit font #php #function #wp
function enqueue_adobe_fonts_stylesheet()
{
wp_enqueue_style('adobe_fonts_stylesheet', 'https://use.typekit.net/hny8rtu.css', 'all');
}
add_action('wp_enqueue_scripts', 'enqueue_adobe_fonts_stylesheet');
@jamiejohnsonkc
jamiejohnsonkc / enqueue change class function.php
Last active October 16, 2019 14:02
enqueue wp change class #php #wp #function #logo #custom-logo
function understrap_change_logo_class($html)
{
$html = str_replace('class="custom-logo"', 'class="style-svg img-fluid"', $html);
return $html;
}
@jamiejohnsonkc
jamiejohnsonkc / objectMerge.js
Created February 28, 2020 00:56
merge javascript objects
const object1 = {
name: 'Flavio'
}
const object2 = {
age: 35
}
const object3 = {...object1, ...object2 }
@jamiejohnsonkc
jamiejohnsonkc / Query single fluid Gatsby Image to Component.jsx
Last active May 29, 2020 18:26
Query single fluid Gatsby Image to Component.jsx
import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
const data = useStaticQuery(graphql`
query {
file(relativePath: { eq: "bookshelf.jpg" }) {
childImageSharp {
fluid {
base64
@jamiejohnsonkc
jamiejohnsonkc / Single_Fixed_Gatsby_Image_Query
Last active May 29, 2020 18:25
query and inject single fixed gatsby image into a page
/** @jsx jsx */
import React from "react"
import { Styled, jsx } from "theme-ui"
import { Link, graphql } from "gatsby"
import Layout from "../components/Organisms/Layout"
import SEO from "./seo"
import Img from "gatsby-image"
export const query = graphql`
query {
@jamiejohnsonkc
jamiejohnsonkc / Fluid Gatsby Image PageQuery Multiple
Last active July 3, 2020 17:10
query and inject multiple fluid gatsby images in page
/** @jsx jsx */
import React from "react"
import { Styled, jsx } from "theme-ui"
import { Link, graphql } from "gatsby"
import Layout from "../components/Organisms/Layout"
import SEO from "./seo"
import Img from "gatsby-image"
export const fluidImage = graphql`
fragment fluidImage on File {