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

Commit

Permalink
Styling social media section
Browse files Browse the repository at this point in the history
  • Loading branch information
@benbrehaut
benbrehaut committed Aug 13, 2017
1 parent a36a63a commit 2d20582
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 19 deletions.
80 changes: 78 additions & 2 deletions assets/css/dist/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,31 @@ Author URI: https://benb.uk/
License: MIT License
License URI: http://www.opensource.org/licenses/mit-license.php
*/
.section {
width: 100%;
float: left; }
.section::after, .section::before {
content: ' ';
display: table;
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1; }
.section::after {
clear: both; }
.section--default {
padding-top: 1.875rem;
padding-bottom: 1.875rem; }
.section--normal {
padding-top: 0.9375rem;
padding-bottom: 0.9375rem; }
.section--lrg {
padding-top: 3.75rem;
padding-bottom: 3.75rem; }

._show-only--small {
display: none; }

Expand All @@ -29,7 +54,8 @@ License URI: http://www.opensource.org/licenses/mit-license.php
._show-only--large {
display: block; } }

._sr-hidden {
._sr-hidden,
.screen-reader-response {
position: absolute !important;
width: 1px;
height: 1px;
Expand Down Expand Up @@ -1139,6 +1165,12 @@ progress {
textarea {
overflow: auto; }

/**
* Remove italics from <address> tag
*/
address {
font-style: normal; }

/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
Expand Down Expand Up @@ -1543,14 +1575,58 @@ img.size-full {
.site-footer {
width: 100%;
float: left; }
.site-footer a {
color: inherit; }
.site-footer__row {
max-width: 1165px;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap; }
.site-footer__main {
padding-top: 1.875rem;
padding-bottom: 1.875rem; }
.site-footer__bottom {
padding-top: 0.9375rem;
padding-bottom: 0.9375rem; }
.site-footer__col {
width: 50%; }
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.33333%;
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
padding-left: 0.625rem;
padding-right: 0.625rem;
max-width: 33.33333%; }
@media screen and (min-width: 40em) {
.site-footer__col {
padding-left: 0.9375rem;
padding-right: 0.9375rem; } }

.site-footer-nav {
list-style: none;
margin: 0;
padding: 0; }

.site-social {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
.site-social__item {
display: inline-block; }
.site-social__item:not(:first-of-type) {
margin-left: 0.5rem; }

.breadcrumbs {
width: 100%; }
Expand Down
2 changes: 1 addition & 1 deletion assets/css/dist/main.min.css
View file

Large diffs are not rendered by default.

26 changes: 25 additions & 1 deletion assets/scss/abstracts/_helpers.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,29 @@
// :Helpers
// - - - - - - - - - - - - - - - - - - - - - - - - -

// Sections
// ------------------
.section {
@include clearfix;
width: 100%;
float: left;

&--default {
padding-top: $spacing-primary;
padding-bottom: $spacing-primary;
}

&--normal {
padding-top: $spacing-secondary;
padding-bottom: $spacing-secondary;
}

&--lrg {
padding-top: $spacing-primary * 2;
padding-bottom: $spacing-primary * 2;
}
}

// Responsive Classes
// ------------------

Expand Down Expand Up @@ -33,7 +56,8 @@

// Accessability
// ------------------
._sr-hidden {
._sr-hidden,
.screen-reader-response {
@include element-invisible;
}

Expand Down
14 changes: 13 additions & 1 deletion assets/scss/abstracts/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,15 @@ $palette-success: $green;
$palette-heading: $dark-grey;
$palette-paragraph: lighten($palette-primary, 4);

$box-shadow: 0 9px 45px 0 rgba($palette-primary, 0.20);
// Social Media Colors
$facebook: #3b5998;
$twitter: #00aced;
$pinterest: #cb2027;
$instagram: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
$google-plus: #dd4b39;
$linkedin: #007bb6;
$youtube: #bb0000;
$houzz: #7ac142;

// Typography
// ------------------
Expand Down Expand Up @@ -57,6 +65,10 @@ $spacing-tertiary: rem-calc(5);
// ------------------
$z-stack: site, skipToContent, mobileMenu, siteOverlay, modal;

// Misc Variables
// ------------------
$box-shadow: 0 9px 45px 0 rgba($palette-primary, 0.20);

// Layout & Grid
// ------------------
$global-width: 1165px;
Expand Down
28 changes: 27 additions & 1 deletion assets/scss/partials/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@
width: 100%;
float: left;

a {
color: inherit;
}

&__row {
@include flex-grid-row;
}

&__main {
padding-top: $spacing-primary;
padding-bottom: $spacing-primary;
Expand All @@ -17,6 +25,24 @@
}

&__col {
width: 50%;
@include flex-grid-column(4);
}
}

// Footer Links
.site-footer-nav {
@include unstyled-list;
}

.site-social {
display: flex;
justify-content: center;

&__item {
display: inline-block;

&:not(:first-of-type) {
margin-left: rem-calc(8);
}
}
}
149 changes: 136 additions & 13 deletions template-parts/site-footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,147 @@

<footer class="site-footer _slab-secondary _text-color-primary" role="contentinfo">

<div class="site-footer__main">
<div class="site-footer__col">
<?php
wp_nav_menu( array(
'theme_location' => 'site-footer-nav',
'container' => false,
'menu_class' => 'site-footer-nav site-footer-nav__list',
'fallback_cb' => false, // Do not fall back to wp_page_menu()
'walker' => new Vanlig_Nav_Walker,
) );
?>
<!-- main footer part -->
<div class="site-footer__main _slab-primary _text-color-secondary">

<div class="site-footer__row">

<!-- main footer links -->
<section class="site-footer__col">
<h2 class="heading-3">Links</h2>
<?php
wp_nav_menu( array(
'theme_location' => 'site-footer-nav',
'container' => false,
'menu_class' => 'site-footer-nav site-footer-nav__list',
'fallback_cb' => false, // Do not fall back to wp_page_menu()
'walker' => new Vanlig_Nav_Walker,
) );
?>
</section>
<!-- /main footer links -->

<!-- main footer info -->
<section class="site-footer__col">
<h2 class="heading-3">Info</h2>

<ul class="_unstyled-list">
<?php if ( get_field('telephone_number', 'options') ) { ?>
<li>
<a href="tel:<?php the_field('telephone_number', 'options'); ?>">
Call us: <?php the_field('telephone_number', 'options'); ?>
</a>
</li>
<?php } ?>
<?php if ( get_field('fax_number', 'options') ) { ?>
<li>
<a href="fax:<?php the_field('fax_number', 'options'); ?>">
Fax: <?php the_field('fax_number', 'options'); ?>
</a>
</li>
<?php } ?>
<?php if ( get_field('email_address', 'options') ) { ?>
<li>
<a href="fax:<?php the_field('email_address', 'options'); ?>">
Email: <?php the_field('email_address', 'options'); ?>
</a>
</li>
<?php } ?>
</ul>
<!-- /main footer info -->

</section>
<!-- /main footer info -->

<!-- site address -->
<section class="site-footer__col">
<h2 class="heading-3">Address</h2>
<?php if ( get_field('address', 'options') ) { ?>
<address>
<?php the_field('address', 'options'); ?>
</address>
<?php } ?>
</section>
<!-- /site address -->

</div>

<!-- site social platforms -->
<section class="site-footer__social _text-c">
<h2 class="heading-3">Social Platforms</h2>

<ul class="site-social _unstyled-list">
<?php if ( get_field('facebook_url', 'options') ) { ?>
<li class="site-social__item site-social__item--facebook">
<a href="<?php the_field('facebook_url', 'options'); ?>">
Facebook
</a>
</li>
<?php } ?>
<?php if ( get_field('twitter_url', 'options') ) { ?>
<li class="site-social__item site-social__item--twitter">
<a href="<?php the_field('twitter_url', 'options'); ?>">
Twitter
</a>
</li>
<?php } ?>
<?php if ( get_field('pinterest_url', 'options') ) { ?>
<li class="site-social__item site-social__item--pinterest">
<a href="<?php the_field('pinterest_url', 'options'); ?>">
Pinterest
</a>
</li>
<?php } ?>
<?php if ( get_field('instagram_url', 'options') ) { ?>
<li class="site-social__item site-social__item--instagram">
<a href="<?php the_field('instagram_url', 'options'); ?>">
Instagram
</a>
</li>
<?php } ?>
<?php if ( get_field('google_plus_url', 'options') ) { ?>
<li class="site-social__item site-social__item--googleplus">
<a href="<?php the_field('google_plus_url', 'options'); ?>">
Google Plus
</a>
</li>
<?php } ?>
<?php if ( get_field('linkedin_url', 'options') ) { ?>
<li class="site-social__item site-social__item--linkedin">
<a href="<?php the_field('linkedin_url', 'options'); ?>">
LinkedIn
</a>
</li>
<?php } ?>
<?php if ( get_field('youtube_url', 'options') ) { ?>
<li class="site-social__item site-social__item--youtube">
<a href="<?php the_field('youtube_url', 'options'); ?>">
YouTube
</a>
</li>
<?php } ?>
<?php if ( get_field('houzz_url', 'options') ) { ?>
<li class="site-social__item site-social__item--houzz">
<a href="<?php the_field('houzz_url', 'options'); ?>">
Houzz
</a>
</li>
<?php } ?>
</ul>
</section>
<!-- /site social platforms -->

</div>
<!-- /main footer part -->

<!-- bottom footer part -->
<div class="site-footer__bottom">
<div class="site-footer__notice">
&copy; <?php echo date("Y"); ?> of <?php bloginfo('name'); ?>
<div class="site-footer__row">
<div class="site-footer__notice">
&copy; <?php echo date("Y"); ?> of <?php bloginfo('name'); ?>
</div>
</div>
</div>
<!-- bottom footer part -->

</footer>

0 comments on commit 2d20582

Please sign in to comment.