Skip to content
This repository has been archived by the owner on Mar 13, 2023. It is now read-only.

Commit

Permalink
Implement hero from parent
Browse files Browse the repository at this point in the history
  • Loading branch information
@fjarrett-godaddy
fjarrett-godaddy committed Aug 15, 2016
1 parent ab54364 commit f357da2
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 104 deletions.
63 changes: 41 additions & 22 deletions .dev/sass/partials/_header.scss
View file
@@ -1,37 +1,42 @@
$entry-title-bg: rgba(0,0,0,.6) !default;
$entry-title-bg: rgba(0, 0, 0, 0.6) !default;

.site-header[style] {
height: 100%;
max-height: 600px;

@include clearfix;

@media screen and (min-width: 900px) {
max-height: 800px;
min-height: 500px;
}
}

.featured-content{
.entry-header{
.featured-content {
.entry-header {
background-size: cover;

&,
.entry-title,
.entry-title a{
.entry-title a {
color: #999;
}

.entry-header-row{
.entry-header-row {
@extend .row;
}

.entry-header-column{
.entry-header-column {
@extend .large-8;

@extend .medium-12;

@extend .small-12;

@extend .columns;

background-color: $entry-title-bg;
color: contrast-color($entry-title-bg,#000,#fff,50%);
color: contrast-color($entry-title-bg, #000, #fff, 50%);
margin-top: 6em;
margin-top: 6rem;
padding: 1.5em 4em 0;
Expand All @@ -47,94 +52,101 @@ $entry-title-bg: rgba(0,0,0,.6) !default;

.entry-meta,
.entry-title,
.entry-excerpt{
.entry-excerpt {
margin-bottom: 1.5rem;
}

.entry-meta{
color: contrast-color($entry-title-bg,#000,#fff,50%);
border-bottom: 1px solid rgba(255,255,255,.2);
.entry-meta {
color: contrast-color($entry-title-bg, #000, #fff, 50%);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
line-height: 3rem;

.entry-date{
.entry-date {
float: right;
}
}

.entry-title{
.entry-title {
font-size: rem-calc(42);
line-height: 1.2;
font-family: $primary-font-family;
}

.entry-excerpt {
p{
p {
font-style: italic;
font-size: emCalc(19);
font-size: rem-calc(19);
font-weight: 200;
}
}

.post-format{
.post-format {
color: $primary-color;
}

.read-more{
.read-more {
padding: .5em 1em;
padding: .5rem 1rem;
background-color: $primary-color;
color: contrast-color($primary-color,#fff,#000,50%);
color: contrast-color($primary-color, #fff, #000, 50%);
display: inline-block;
font-family: $primary-font-family;
text-transform: uppercase;
font-weight: bold;
font-size: emCalc(13);
font-size: rem-calc(13);

&:hover{
background-color: darken($primary-color,10%);
&:hover {
background-color: darken($primary-color, 10%);
}
}
}
}

.hero-widget {
.hero {
color: #fff;
position: relative;
padding: 5rem 2.3rem 0;

.widget {
padding: 0;
}

h2.widget-title {
color: #fff;
font-size: 2em;
font-weight: 300;
}

div.textwidget {
font-family: $secondary-font-family;
font-size: 14px;
line-height: 20px;

p {
font-size: 14px;
line-height: 20px;
}
}
}

@media all and ( min-width: 600px ){
@media all and (min-width: 600px) {
.hero-widget {
color: #fff;
padding: 7rem 4.4375rem 0;

h2.widget-title {
color: #fff;
font-size: 3.5em;
font-weight: 300;
}

div.textwidget {
font-family: $secondary-font-family;
font-size: 18px;
line-height: 24px;

p {
font-size: 18px;
line-height: 24px;
Expand All @@ -143,19 +155,22 @@ $entry-title-bg: rgba(0,0,0,.6) !default;
}
}

@media all and ( min-width: 1100px ){
@media all and (min-width: 1100px) {
.hero-widget {
color: #fff;
max-width: 800px;

h2.widget-title {
color: #fff;
font-size: 6em;
font-weight: 300;
}

div.textwidget {
font-family: $secondary-font-family;
font-size: 24px;
line-height: 36px;

p {
font-size: 24px;
line-height: 36px;
Expand All @@ -174,14 +189,18 @@ $entry-title-bg: rgba(0,0,0,.6) !default;
.single {
.site-header[style] {
max-height: 300px;

@media screen and (min-width: 783px) {
max-height: 500px;
}

position: relative;
}

.hero-widget {
position: absolute;
bottom: 50px;

h1 {
color: #fff;
}
Expand Down
78 changes: 24 additions & 54 deletions functions.php
View file
Expand Up @@ -10,15 +10,37 @@ function escapade_move_elements() {

// Hero image
remove_action( 'primer_header', 'primer_add_hero' );
add_action( 'primer_hero', 'primer_add_hero' );

// Page titles
remove_action( 'primer_after_header', 'primer_add_page_title' );
add_action( 'primer_hero_content', 'primer_add_page_title' );

if ( ! is_front_page() ) {

add_action( 'primer_hero', 'primer_add_page_title' );

}

}
add_action( 'template_redirect', 'escapade_move_elements' );

/**
* Set header element style attribute.
*
* @filter primer_header_style_attr
* @since 1.0.0
*
* @return string
*/
function escapade_header_style_attr() {

return sprintf(
'background: url(%s) no-repeat top center; background-size: cover;',
primer_get_hero_image()
);

}
add_filter( 'primer_header_style_attr', 'escapade_header_style_attr' );

/**
* Add footer navigation.
*
Expand All @@ -30,7 +52,6 @@ function escapade_add_footer_navigation() {
get_template_part( 'templates/parts/footer-navigation' );

}

add_action( 'primer_site_info', 'escapade_add_footer_navigation' );

/**
Expand Down Expand Up @@ -112,57 +133,6 @@ function escapade_custom_header_args( $args ) {
}
add_filter( 'primer_custom_header_args', 'escapade_custom_header_args' );

/**
* Add styles to the header element.
*
* @param string $css
*
* @return string
*/
function escapade_header_style_attribute( $css ) {

if ( primer_has_hero_image() ) {

$css = sprintf(
"background:url('%s') no-repeat top center; background-size: cover;",
esc_url( primer_get_hero_image() )
);

}

return $css;

}
add_action( 'primer_header_style_attr', 'escapade_header_style_attribute' );

/**
* Register sidebar areas.
*
* @filter primer_sidebars
* @since 1.0.0
*
* @param array $sidebars
*
* @return array
*/
function escapade_sidebars( $sidebars ) {

unset( $sidebars['sidebar-2'] );

$sidebars['hero'] = array(
'name' => esc_html__( 'Hero', 'escapade' ),
'description' => esc_html__( 'Hero widgets appear over the header image on the front page.', 'escapade' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
);

return $sidebars;

}
add_filter( 'primer_sidebars', 'escapade_sidebars' );

/**
* Set font types.
*
Expand Down
2 changes: 1 addition & 1 deletion header.php
View file
Expand Up @@ -46,7 +46,7 @@

</div>

<?php do_action( 'primer_hero' ); ?>
<?php get_template_part( 'templates/parts/hero' ); ?>

</header><!-- #masthead -->

Expand Down
10 changes: 5 additions & 5 deletions style-rtl.css
View file
Expand Up @@ -3912,21 +3912,21 @@ body.layout-one-column-narrow #content {
.featured-content .entry-header .read-more:hover {
background-color: #006687; }

.hero-widget {
.hero {
color: #fff;
position: relative;
padding: 5rem 2.3rem 0; }
.hero-widget .widget {
.hero .widget {
padding: 0; }
.hero-widget h2.widget-title {
.hero h2.widget-title {
color: #fff;
font-size: 2em;
font-weight: 300; }
.hero-widget div.textwidget {
.hero div.textwidget {
font-family: "Droid Serif", serif;
font-size: 14px;
line-height: 20px; }
.hero-widget div.textwidget p {
.hero div.textwidget p {
font-size: 14px;
line-height: 20px; }

Expand Down
10 changes: 5 additions & 5 deletions style.css
View file
Expand Up @@ -3912,21 +3912,21 @@ body.layout-one-column-narrow #content {
.featured-content .entry-header .read-more:hover {
background-color: #006687; }

.hero-widget {
.hero {
color: #fff;
position: relative;
padding: 5rem 2.3rem 0; }
.hero-widget .widget {
.hero .widget {
padding: 0; }
.hero-widget h2.widget-title {
.hero h2.widget-title {
color: #fff;
font-size: 2em;
font-weight: 300; }
.hero-widget div.textwidget {
.hero div.textwidget {
font-family: "Droid Serif", serif;
font-size: 14px;
line-height: 20px; }
.hero-widget div.textwidget p {
.hero div.textwidget p {
font-size: 14px;
line-height: 20px; }

Expand Down
17 changes: 0 additions & 17 deletions templates/parts/hero.php
View file

This file was deleted.

0 comments on commit f357da2

Please sign in to comment.