A header image that goes 100% width of its container and vertically aligns to the top, bottom or middle.
A Pen by Ian Edward on CodePen.
// == CodePen Gist == | |
// @name: LESS Mixin For 3D Text | |
// @author: ian.pvd - http://ian.pvdindustrial.com/ | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>LESS Mixin For 3D Text · CodePen</title> |
<?php /* Secondary Post Template */ ?> | |
<article id="post-<?php the_ID(); ?>" <?php post_class(dailyburn_category()); ?>> | |
<?php if ( has_post_thumbnail() ) { ?> | |
<div class="post-thumbnail"> | |
<a href="<?php the_permalink(); ?>"><img src="http://placekitten.com/<?php echo rand(602,598); ?>/<?php echo rand(248,252); ?>" alt="" /></a> | |
</div> | |
<?php } ?> | |
<header class="entry-header"> | |
<h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1> | |
</header><!-- .entry-header --> |
A header image that goes 100% width of its container and vertically aligns to the top, bottom or middle.
A Pen by Ian Edward on CodePen.
{ | |
// User settings | |
// Options include: | |
// - Sniffer | |
// - Fixer | |
// - Mess Detector | |
// | |
// This will prepend the application with the path to php | |
// Needed for windows, or anyone who doesn't/can't make phars |
/* Generated CSS */ | |
.replace-image { | |
text-indent: 101%; | |
white-space: nowrap; | |
overflow: hidden; | |
display: block; | |
width: 12.5em; | |
height: 3.125em; | |
background-image: url('../images/image-name.png'); |
body { | |
max-width: 80%; | |
margin: 1em auto; | |
font: 16px/1.333 sans-serif; | |
box-sizing: border-box; | |
} | |
*,*::before,*::after { | |
box-sizing: inherit; | |
} |
@import 'utilities'; | |
/* Example Dev Boxes */ | |
// Basic Example | |
.dev-box { | |
@include dev-box; | |
} | |
// Change Box Colors |
/* Breakpoint Mixin Examples | |
* | |
* SCSS example syntax for using the breakpoints mixin | |
*/ | |
// Load Breakpoints Mixin | |
@import 'breakpoints'; | |
.responsive { | |
/* 0px and up */ |
.elegantwp-fp16-posts { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.elegantwp-fp16-post, | |
.elegantwp-fp16-post-thumbnail { | |
height: 100%; | |
} |
/* TODO: Media query */ | |
.home .scrolling-bg-image { | |
margin-bottom: 2em; | |
} | |
.home #header .sidemenu { | |
position: absolute; | |
width: 100%; | |
bottom: 1em; | |
} |