Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Commit

Permalink
Merge pull request #463 from olefredrik/feature/frontTemplate
Browse files Browse the repository at this point in the history
Tweaked the visual apperance of the front template
  • Loading branch information
olefredrik committed Sep 13, 2015
2 parents d40064c + 56b87b0 commit a8b41a0
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 15 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ assets/stylesheets/
assets/components/
assets/javascript/vendor/
assets/javascript/foundation.js
assets/javascript/custom/demosite.js
Binary file added assets/images/demo/fpmock.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 81 additions & 9 deletions assets/scss/site/_front.scss
Original file line number Diff line number Diff line change
@@ -1,20 +1,92 @@
#front-hero {
background: url("../images/demo/marquee-stars.svg") repeat scroll 0 0 #074E68;
padding: rem-calc(20) 0;
margin: - rem-calc(32) 0 rem-calc(32);
position: relative;
text-align: left;
height: auto;

.marketing {
@include grid-row();
}

@media #{$small-up} {
background: url("../images/demo/marquee-stars.svg") repeat scroll 0 0 #074E68;
padding: rem-calc(65%) 0;
margin: - rem-calc(32) 0 rem-calc(32);
position: relative;
text-align: left;
}

@media #{$medium-up} {
height: rem-calc(400);
margin: - rem-calc(32) 0 rem-calc(72);
}

#watch {
section {
display: inline;
}

a {
color: #B4C9D1;
cursor: pointer;
font-weight: 400;
margin-right: rem-calc(20);
}

a:hover {
color: #fff;
}

#stargazers {
:before {
content: "\f09b";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #B4C9D1;
margin-right: rem-calc(8);
}
}

#twitter {
:before {
content: "\f099";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #B4C9D1;
margin-right: rem-calc(8);
}
}

}

.tagline {

@media screen and (min-width: 320px) and (max-width: 640px) {
@include grid-column(12);
}

@media screen and (min-width:641px) and (max-width: 870px) {
@include grid-column(9);
}

@media screen and (min-width: 871px) {
@include grid-column(5);
}
}

h1 { font-weight: 500; }

h1 a, h4 { color: #fff; }

.floatingyeti img {
max-width: 30%;
.fpmock img {
@media screen and (max-width: 870px) {
display: none;
}

position: absolute;
right: rem-calc(100);
top:rem-calc(21);
}

.download { margin-top: rem-calc(20); }

}
19 changes: 13 additions & 6 deletions templates/front.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,25 @@
get_header(); ?>

<header id="front-hero" role="banner">
<div class="row">
<div class="small-12 medium-7 columns">
<div class="marketing">
<div class="tagline">
<h1><a href="<?php bloginfo( 'url' ); ?>" title="<?php bloginfo( 'name' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<h4 class="subheader"><?php bloginfo( 'description' ); ?></h4>
<a role="button" class="download large button show-for-medium-up" href="https://github.com/olefredrik/foundationpress">Download FoundationPress</a>
</div>

<div class="medium-6 columns end">
<a role="button" class="download large button hide-for-small" href="https://github.com/olefredrik/foundationpress">Download FoundationPress</a>
<div id="watch" class="small-12 columns">
<section id="stargazers">
<a href="https://github.com/olefredrik/foundationpress">1.5k stargazers</a>
</section>
<section id="twitter">
<a href="https://twitter.com/olefredrik">@olefredrik</a>
</section>
</div>

<div class="floatingyeti show-for-medium-up">
<img data-cfsrc="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/demo/hero-image.svg" alt="Foundation Yeti" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/demo/hero-image.svg">

<div class="fpmock">
<img data-interchange="[<?php echo get_stylesheet_directory_uri(); ?>/assets/images/demo/fpmock.png, (default)]" alt="FoundationPress - the ultimate WordPress starter theme">
</div>
</div>

Expand Down

0 comments on commit a8b41a0

Please sign in to comment.