0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Varia: Add styles for the footer menu

Browse source
This commit is contained in:
Allan Cole 2019-07-23 18:10:52 -04:00
parent 0eec4313c1
commit ba43d1a55d
6 changed files with 180 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
varia/footer.php
View file

@ -17,6 +17,24 @@
<footer id="colophon" class="site-footer responsive-max-width">
<?php get_template_part( 'template-parts/footer/footer', 'widgets' ); ?>
<?php
if ( function_exists( 'the_privacy_policy_link' ) ) {
the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
}
?>
<?php if ( has_nav_menu( 'menu-2' ) ) : ?>
<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'varia' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-2',
'menu_class' => 'footer-menu',
'depth' => 1,
)
);
?>
</nav><!-- .footer-navigation -->
<?php endif; ?>
<div class="site-info">
<?php $blog_info = get_bloginfo( 'name' ); ?>
<?php if ( ! empty( $blog_info ) ) : ?>
@ -28,24 +46,6 @@
printf( __( 'proudly powered by %s.', 'varia' ), 'WordPress' );
?>
</a>
<?php
if ( function_exists( 'the_privacy_policy_link' ) ) {
the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
}
?>
<?php if ( has_nav_menu( 'menu-2' ) ) : ?>
<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'varia' ); ?>">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-2',
'menu_class' => 'footer-menu',
'depth' => 1,
)
);
?>
</nav><!-- .footer-navigation -->
<?php endif; ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->

5
varia/sass/components/footer/_footer-branding.scss
View file

@ -7,6 +7,11 @@
font-size: #{map-deep-get($config-footer, "font", "size")};
line-height: #{map-deep-get($config-footer, "font", "line-height")};
@include media(tablet) {
order: 1;
flex: 1 0 50%;
}
.site-name {
font-weight: bold;
}

38
varia/sass/components/footer/_footer-navigation.scss
View file

@ -2,19 +2,49 @@
display: inline;
@include media(tablet) {
flex: 1 0 50%;
order: 2;
text-align: right;
}
& > div {
display: inline;
}
.footer-menu {
display: inline;
color: #{map-deep-get($config-footer, "color", "text")};
padding-left: 0;
margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
@include media(tablet) {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
li {
display: inline;
margin-right: #{map-deep-get($config-global, "spacing", "unit")}
}
a {
font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
font-size: #{map-deep-get($config-global, "font", "size", "sm")};
font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
color: currentColor;
&:link,
&:visited {
color: currentColor;
}
&:hover {
color: #{map-deep-get($config-footer, "color", "link-hover")};
}
}
}
}
}

15
varia/sass/components/footer/_footer.scss
View file

@ -1,2 +1,17 @@
.site-footer {
@include media(tablet) {
align-items: baseline;
display: flex;
justify-content: space-between;
& > * {
margin-top: 0;
margin-bottom: 0;
}
}
}
@import "footer-branding";
@import "footer-navigation";

56
varia/style-rtl.css
View file

@ -2199,12 +2199,31 @@ table th,
vertical-align: middle;
}
@media only screen and (min-width: 640px) {
.site-footer {
align-items: baseline;
display: flex;
justify-content: space-between;
}
.site-footer > * {
margin-top: 0;
margin-bottom: 0;
}
}
.site-info {
color: #767676;
font-family: sans-serif;
font-size: 0.83333rem;
}
@media only screen and (min-width: 640px) {
.site-info {
order: 1;
flex: 1 0 50%;
}
}
.site-info .site-name {
font-weight: bold;
}
@ -2225,18 +2244,51 @@ table th,
display: inline;
}
@media only screen and (min-width: 640px) {
.footer-navigation {
flex: 1 0 50%;
order: 2;
text-align: left;
}
}
.footer-navigation > div {
display: inline;
}
.footer-navigation .footer-menu {
display: inline;
color: #767676;
padding-right: 0;
margin-right: -16px;
margin-left: -16px;
}
@media only screen and (min-width: 640px) {
.footer-navigation .footer-menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
}
.footer-navigation .footer-menu li {
display: inline;
margin-left: 16px;
}
.footer-navigation .footer-menu a {
font-family: sans-serif;
font-size: 0.83333rem;
font-weight: bold;
padding: 16px;
color: currentColor;
}
.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
color: currentColor;
}
.footer-navigation .footer-menu a:hover {
color: indigo;
}
.entry-title {

56
varia/style.css
View file

@ -2204,12 +2204,31 @@ table th,
vertical-align: middle;
}
@media only screen and (min-width: 640px) {
.site-footer {
align-items: baseline;
display: flex;
justify-content: space-between;
}
.site-footer > * {
margin-top: 0;
margin-bottom: 0;
}
}
.site-info {
color: #767676;
font-family: sans-serif;
font-size: 0.83333rem;
}
@media only screen and (min-width: 640px) {
.site-info {
order: 1;
flex: 1 0 50%;
}
}
.site-info .site-name {
font-weight: bold;
}
@ -2230,18 +2249,51 @@ table th,
display: inline;
}
@media only screen and (min-width: 640px) {
.footer-navigation {
flex: 1 0 50%;
order: 2;
text-align: right;
}
}
.footer-navigation > div {
display: inline;
}
.footer-navigation .footer-menu {
display: inline;
color: #767676;
padding-left: 0;
margin-left: -16px;
margin-right: -16px;
}
@media only screen and (min-width: 640px) {
.footer-navigation .footer-menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
}
.footer-navigation .footer-menu li {
display: inline;
margin-right: 16px;
}
.footer-navigation .footer-menu a {
font-family: sans-serif;
font-size: 0.83333rem;
font-weight: bold;
padding: 16px;
color: currentColor;
}
.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
color: currentColor;
}
.footer-navigation .footer-menu a:hover {
color: indigo;
}
.entry-title {