Skip to content

Instantly share code, notes, and snippets.

View JayHoltslander's full-sized avatar
💭
I may be slow to respond.

Jay Holtslander JayHoltslander

💭
I may be slow to respond.
62 followers · 29 following
View GitHub Profile
@JayHoltslander
JayHoltslander / Broken link checker.md
Last active May 22, 2020 20:58
Broken link checker commands
@JayHoltslander
JayHoltslander / SVG Emoji Favion
Last active April 5, 2020 23:26
SVG Emoji Favicon
<!-- SVG EMOJI FAVICON. See https://twitter.com/LeaVerou/status/1241619866475474946 -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
<text y=%22.9em%22 font-size=%2290%22>😎</text>
</svg>">
<!--ANIMATED ATTEMPT-->
<!-- SVG EMOJI FAVICON. See https://twitter.com/LeaVerou/status/1241619866475474946 -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><style>svg{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}svg{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes flip{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
@JayHoltslander
JayHoltslander / private-wp-admin
Last active February 27, 2020 21:38
Redirect unauthorized IP addresses that try to access Wordpress' wp-admin
# REDIRECT UNAUTHORIZED IP ADDRESSES THAT TRY TO ACCESS WP-ADMIN
#
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
# ======= IF YOU WANT INTO THE WORDPRESS ADMIN AREA... =======
RewriteCond %{REQUEST_URI} ^(.*)?wp-login\.php(.*)$ [OR]
RewriteCond %{REQUEST_URI} ^(.*)?wp-admin$ [OR]
RewriteCond %{REQUEST_URI} ^/wp-admin.*
@JayHoltslander
JayHoltslander / Multi-column CSS
Last active December 25, 2019 16:58
Split a paragraph into multi columns like a newspaper with this CSS3. Text will automatically fill the columns. You can use this within a single Bootstrap column to simulate multi-column layout without needing to add extra divs for extra columns.
p.4columns {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;
column-rule-color: #ccc; /* Optional */
column-rule-style:solid; /* Optional */
column-rule-width: 1px; /* Optional */
@JayHoltslander
JayHoltslander / Animated List Items in Bootstrap 3.html
Created June 2, 2014 20:03
Animated List Items in Bootstrap 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated List Items in Bootstrap</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
@JayHoltslander
JayHoltslander / COMPLETE.html
Created May 4, 2014 23:07
Bootstrap 3 Page with a full height sidebar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Sidebar</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
@JayHoltslander
JayHoltslander / 5 even columns in Bootstrap 3.md
Last active October 18, 2017 10:55
5 even columns in Bootstrap 3

#5 even columns in Bootstrap 3

Bootstrap can easily make 1,2,3,4, or 6 equally sized columns. But what if you want 5? Well the grid doesn't support it out of the box. You have to add a bit of CSS to Bootstrap and add a class to your row.

The HTML

Write your HTML as if you were creating columns to fit a grid width of 10 as opposed to 12. The example below shows 5 columns with a width of 2.

<div class="row fivecolumns">
@JayHoltslander
JayHoltslander / non-critical.css
Created September 29, 2017 16:13
.non-critical {
background-color: yellow; text-align:center; padding:30px; height:20%;
}
.non-critical a {color:black;}
@JayHoltslander
JayHoltslander / picture-element.css
Created September 27, 2017 21:22
<picture> Element for responsive images.
<!--
SOURCE REFERENCES
See:
* https://www.html5rocks.com/en/tutorials/responsive/picture-element/
* https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/
-->
<style>
.responsive-image {
height: 100%;
@JayHoltslander
JayHoltslander / example.html
Last active June 29, 2017 10:22
Marvel App Optimized YouTube Embed. Use in conjunction with the instructions at https://help.marvelapp.com/hc/en-us/articles/208395615-How-do-I-embed-video-
<!-- "playlist" must be the same individual video id in order for continuous looping to work -->
<iframe src="https://www.youtube.com/embed/Zdjg9yhBqTU?modestbranding=1&playlist=Zdjg9yhBqTU&controls=0&showinfo=0&rel=0&iv_load_policy=3&autoplay=1&loop=1&keyboard=1" allowfullscreen="0" frameborder="0"></iframe>