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.
Ian Del Giudice ian-pvd
🌃
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 | |
| function pvdind_bloginfo() { | |
| return [ | |
| 'name' => get_bloginfo( 'name' ), | |
| 'description' => get_bloginfo( 'description' ), | |
| 'wpurl' => get_bloginfo( 'wpurl' ), | |
| 'url' => get_bloginfo( 'url' ), | |
| 'admin_email' => get_bloginfo( 'admin_email' ), | |
| 'charset' => get_bloginfo( 'charset' ), | |
| 'version' => get_bloginfo( 'version' ), |
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
| /* TODO: Media query */ | |
| .home .scrolling-bg-image { | |
| margin-bottom: 2em; | |
| } | |
| .home #header .sidemenu { | |
| position: absolute; | |
| width: 100%; | |
| bottom: 1em; | |
| } |
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
| .elegantwp-fp16-posts { | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| .elegantwp-fp16-post, | |
| .elegantwp-fp16-post-thumbnail { | |
| height: 100%; | |
| } |
ian-pvd
/ breakpoint-examples.scss
Last active
November 5, 2021 09:53
Mobile-First SCSS Breakpoints Mixin
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
| /* Breakpoint Mixin Examples | |
| * | |
| * SCSS example syntax for using the breakpoints mixin | |
| */ | |
| // Load Breakpoints Mixin | |
| @import 'breakpoints'; | |
| .responsive { | |
| /* 0px and up */ |
ian-pvd
/ dev-box-examples.scss
Last active
September 10, 2018 18:29
SCSS Developer Mixin To Highlight Box Layouts
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
| @import 'utilities'; | |
| /* Example Dev Boxes */ | |
| // Basic Example | |
| .dev-box { | |
| @include dev-box; | |
| } | |
| // Change Box Colors |
ian-pvd
/ codepen-starter-kit.css
Last active
July 13, 2018 03:45
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
| body { | |
| max-width: 80%; | |
| margin: 1em auto; | |
| font: 16px/1.333 sans-serif; | |
| box-sizing: border-box; | |
| } | |
| *,*::before,*::after { | |
| box-sizing: inherit; | |
| } |
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
| /* 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'); |
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
Show hidden characters
| { | |
| // 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 |
ian-pvd
/ dp-post-templates.php
Created
July 17, 2013 16:12
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 /* 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 --> |
NewerOlder