kazhnuz.space/kspace-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: refactoring des boutons

Browse source
This commit is contained in:
Kazhnuz 2020-12-31 08:45:00 +01:00
parent e06c12268c
commit ea976d6d04
6 changed files with 67 additions and 226 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/posts-list.php
View file

@ -4,12 +4,12 @@
<div class="article-meta">
<div class="article-category">
<?php $category = get_the_category();
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='article-category'>" . $category[0]->cat_name . "</a>"; ?>
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
</div>
<time itemprop="datePublished"><em><?php the_time('j F Y') ?></em></time>
</div>
<?php the_excerpt(); ?>
<p class="align-center"> <a href="<?php the_permalink(); ?>" title="<?php the_title();?>" class="btn btn-readmore">Lire l'article</a> </p>
<p class="align-center"> <a href="<?php the_permalink(); ?>" class="btn btn-readmore" title="<?php the_title();?>">Lire l'article</a> </p>
</div>
<?php endwhile; ?>
<div class="navigation">

12
functions.php
View file

@ -86,13 +86,13 @@ function mypost_social_sharing_buttons($content) {
// Add sharing button at the end of page/page content
$content .= '<!-- based on crunchify social sharing. Get your copy here: http://crunchify.me/1VIxAsz -->';
$content .= '<div class="reagir share-buttons">';
$content .= '<a class="btn btn-twitter" href="'. $twitterURL .'" target="_blank"><i alt="twitter" class="fa fa-fw fa-twitter"></i></a>';
$content .= '<a class="btn btn-facebook" href="'.$facebookURL.'" target="_blank"><i alt="facebook" class="fa fa-fw fa-facebook"></i></a>';
$content .= '<a title="Share to Diaspora*" class="btn btn-social btn-diaspora" href="'.$diasporaURL.'" target="_blank"><i class="fa fa-fw fa-diaspora"></i></a>';
$content .= '<a class="btn btn-whatsapp" href="'.$whatsappURL.'" target="_blank"><i alt="whatsapp" class="fa fa-fw fa-whatsapp"></i></a>';
$content .= '<a class="btn-small btn-twitter" href="'. $twitterURL .'" target="_blank"><i alt="twitter" class="fa fa-fw fa-twitter"></i></a> ';
$content .= '<a class="btn-small btn-facebook" href="'.$facebookURL.'" target="_blank"><i alt="facebook" class="fa fa-fw fa-facebook"></i></a> ';
$content .= '<a title="Share to Diaspora*" class="btn-small btn-diaspora" href="'.$diasporaURL.'" target="_blank"><i class="fa fa-fw fa-diaspora"></i></a>';
//$content .= '<a class="btn btn-whatsapp" href="'.$whatsappURL.'" target="_blank"><i alt="whatsapp" class="fa fa-fw fa-whatsapp"></i></a>';
// $content .= '<a class="btn btn-buffer" href="'.$bufferURL.'" target="_blank"><i alt="buffer" class="fa fa-fw fa-buffer"></i></a>';
$content .= '<a class="btn btn-linkedin" href="'.$linkedInURL.'" target="_blank"><i alt="linkedin" class="fa fa-fw fa-linkedin"></i></a>';
$content .= '<a class="btn btn-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank"><i alt="Pin It" class="fa fa-fw fa-pinterest"></i></a>';
//$content .= '<a class="btn btn-linkedin" href="'.$linkedInURL.'" target="_blank"><i alt="linkedin" class="fa fa-fw fa-linkedin"></i></a>';
//$content .= '<a class="btn btn-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank"><i alt="Pin It" class="fa fa-fw fa-pinterest"></i></a>';
$content .= '</div>';
return $content;

38
scss/_drawing.scss
View file

@ -17,20 +17,6 @@
padding-bottom: 1.5rem;
}
.article-category-link {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
@include button-color($color-info, $color-button-light);
&:hover, &:active {
@include borders();
}
p &:last-child {
margin-bottom:0;
}
}
strong.btn-fake {
@include button($button_large);
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
@ -50,30 +36,6 @@ a.article-nav-link-wrap {
@include button-color($color-info, $color-button-light);
}
.article-more-link {
text-align: center;
a {
@include button($button_large);
padding-left: $button_large;
padding-right: $button_large;
&:hover, &:active {
@include borders();
}
p &:last-child {
margin-bottom:0;
}
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary);
}
}
.btn-navbar {
@include button($button_large);
padding-left: $button_small;
padding-right: $button_small;
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
}
.pigimg, .mb {
padding-bottom:1.5rem;
}

13
scss/components/_buttons.scss
View file

@ -81,8 +81,8 @@ $button_small: $lineheight_quarter;
}
}
.label, label.label, a.label, .chip, a.chip {
@include biseau($button_small);
.btn-small {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none;
@ -96,12 +96,14 @@ $button_small: $lineheight_quarter;
// NAVBAR SPECIAL BUTTONS
.navbar .btn-link {
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light);
.btn-navbar {
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
padding-left: $button_small;
padding-right: $button_small;
}
.btn-readmore {
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-primary);
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary);
}
// BUTTONS GROUPS
@ -186,6 +188,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
.share-buttons {
margin-top: $lineheight;
padding-bottom: $lineheight;
}
.reagir {

11
single.php
View file

@ -17,10 +17,19 @@
<small class="author-date">Le <?php the_time('l j F Y à H:i') ?></small>
</div>
</div>
<div class="article-category">
<?php $categories = get_the_category();
foreach( $categories as $category ) {
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class=''>" . $category->cat_name . "</a>";
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-folder'></i> " . $category->cat_name . "</a>";
} ?>
<?php $tags = get_the_tags();
if ($tags) {
foreach( $tags as $tag ) {
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-tag'></i> " . $tag->name . "</a>";
}
} ?>
</div>
</section>
</article>

205
style.css
View file

@ -1352,14 +1352,35 @@ ul.card-list, .card > ul {
p .btn:last-child {
margin-bottom: 0; }
.label, label.label, a.label, .chip, a.chip {
.btn-small {
padding: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
margin: 0.1875rem;
margin-top: 0.125rem;
margin-bottom: 1.5rem;
line-height: 1.5rem;
height: auto;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
font-weight: 400;
background-color: transparent;
position: relative;
z-index: 1;
overflow: visible;
padding-left: 0.375rem;
padding-right: 0.375rem;
text-decoration: none; }
.label:before, label.label:before, a.label:before, .chip:before, a.chip:before {
.btn-small:hover, .btn-small:active, .btn-small:focus, a:hover > .btn-small, a:active > .btn-small, a:focus > .btn-small {
text-decoration: none;
background-color: transparent; }
.btn-small:focus {
outline: none;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
.btn-small:focus:before {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
.btn-small:before {
content: " ";
position: absolute;
top: 0;
@ -1387,18 +1408,20 @@ ul.card-list, .card > ul {
transform: skewX(-15deg);
transition: background-color 0.3s; }
.navbar .btn-link {
color: #fdf6e3; }
.navbar .btn-link:before {
.btn-navbar {
color: #fdf6e3;
padding-left: 0.375rem;
padding-right: 0.375rem; }
.btn-navbar:before {
background-color: transparent; }
.navbar .btn-link:visited {
.btn-navbar:visited {
color: #fdf6e3; }
.navbar .btn-link:visited:before {
.btn-navbar:visited:before {
background-color: transparent; }
.navbar .btn-link:hover, .navbar .btn-link:active, .navbar .btn-link:focus, a:hover > .navbar .btn-link, a:active > .navbar .btn-link, a:focus > .navbar .btn-link, .navbar .btn-link:visited:hover, .navbar .btn-link:visited:active, .navbar .btn-link:visited:focus, a:hover > .navbar .btn-link:visited, a:active > .navbar .btn-link:visited, a:focus > .navbar .btn-link:visited, .navbar .btn-link:not(.disabled):not(:disabled):hover, .navbar .btn-link:not(.disabled):not(:disabled):active, .navbar .btn-link:not(.disabled):not(:disabled):focus, a:hover > .navbar .btn-link:not(.disabled):not(:disabled), a:active > .navbar .btn-link:not(.disabled):not(:disabled), a:focus > .navbar .btn-link:not(.disabled):not(:disabled) {
.btn-navbar:hover, .btn-navbar:active, .btn-navbar:focus, a:hover > .btn-navbar, a:active > .btn-navbar, a:focus > .btn-navbar, .btn-navbar:visited:hover, .btn-navbar:visited:active, .btn-navbar:visited:focus, a:hover > .btn-navbar:visited, a:active > .btn-navbar:visited, a:focus > .btn-navbar:visited, .btn-navbar:not(.disabled):not(:disabled):hover, .btn-navbar:not(.disabled):not(:disabled):active, .btn-navbar:not(.disabled):not(:disabled):focus, a:hover > .btn-navbar:not(.disabled):not(:disabled), a:active > .btn-navbar:not(.disabled):not(:disabled), a:focus > .btn-navbar:not(.disabled):not(:disabled) {
color: #fffefb; }
.navbar .btn-link:hover:before, .navbar .btn-link:active:before, .navbar .btn-link:focus:before, a:hover > .navbar .btn-link:before, a:active > .navbar .btn-link:before, a:focus > .navbar .btn-link:before, .navbar .btn-link:visited:hover:before, .navbar .btn-link:visited:active:before, .navbar .btn-link:visited:focus:before, a:hover > .navbar .btn-link:visited:before, a:active > .navbar .btn-link:visited:before, a:focus > .navbar .btn-link:visited:before, .navbar .btn-link:not(.disabled):not(:disabled):hover:before, .navbar .btn-link:not(.disabled):not(:disabled):active:before, .navbar .btn-link:not(.disabled):not(:disabled):focus:before, a:hover > .navbar .btn-link:not(.disabled):not(:disabled):before, a:active > .navbar .btn-link:not(.disabled):not(:disabled):before, a:focus > .navbar .btn-link:not(.disabled):not(:disabled):before {
background-color: rgba(0, 0, 0, 0.2); }
.btn-navbar:hover:before, .btn-navbar:active:before, .btn-navbar:focus:before, a:hover > .btn-navbar:before, a:active > .btn-navbar:before, a:focus > .btn-navbar:before, .btn-navbar:visited:hover:before, .btn-navbar:visited:active:before, .btn-navbar:visited:focus:before, a:hover > .btn-navbar:visited:before, a:active > .btn-navbar:visited:before, a:focus > .btn-navbar:visited:before, .btn-navbar:not(.disabled):not(:disabled):hover:before, .btn-navbar:not(.disabled):not(:disabled):active:before, .btn-navbar:not(.disabled):not(:disabled):focus:before, a:hover > .btn-navbar:not(.disabled):not(:disabled):before, a:active > .btn-navbar:not(.disabled):not(:disabled):before, a:focus > .btn-navbar:not(.disabled):not(:disabled):before {
background-color: rgba(0, 0, 0, 0.1); }
.btn-readmore {
color: #d33682; }
@ -1411,7 +1434,7 @@ ul.card-list, .card > ul {
.btn-readmore:hover, .btn-readmore:active, .btn-readmore:focus, a:hover > .btn-readmore, a:active > .btn-readmore, a:focus > .btn-readmore, .btn-readmore:visited:hover, .btn-readmore:visited:active, .btn-readmore:visited:focus, a:hover > .btn-readmore:visited, a:active > .btn-readmore:visited, a:focus > .btn-readmore:visited, .btn-readmore:not(.disabled):not(:disabled):hover, .btn-readmore:not(.disabled):not(:disabled):active, .btn-readmore:not(.disabled):not(:disabled):focus, a:hover > .btn-readmore:not(.disabled):not(:disabled), a:active > .btn-readmore:not(.disabled):not(:disabled), a:focus > .btn-readmore:not(.disabled):not(:disabled) {
color: #d84b8f; }
.btn-readmore:hover:before, .btn-readmore:active:before, .btn-readmore:focus:before, a:hover > .btn-readmore:before, a:active > .btn-readmore:before, a:focus > .btn-readmore:before, .btn-readmore:visited:hover:before, .btn-readmore:visited:active:before, .btn-readmore:visited:focus:before, a:hover > .btn-readmore:visited:before, a:active > .btn-readmore:visited:before, a:focus > .btn-readmore:visited:before, .btn-readmore:not(.disabled):not(:disabled):hover:before, .btn-readmore:not(.disabled):not(:disabled):active:before, .btn-readmore:not(.disabled):not(:disabled):focus:before, a:hover > .btn-readmore:not(.disabled):not(:disabled):before, a:active > .btn-readmore:not(.disabled):not(:disabled):before, a:focus > .btn-readmore:not(.disabled):not(:disabled):before {
background-color: rgba(0, 0, 0, 0.2); }
background-color: rgba(0, 0, 0, 0.05); }
.btn-toolbar {
padding: 0 1.5rem; }
@ -1761,7 +1784,8 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons {
margin-top: 1.5rem; }
margin-top: 1.5rem;
padding-bottom: 1.5rem; }
.reagir {
text-align: right; }
@ -2088,59 +2112,6 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
justify-content: space-between;
padding-bottom: 1.5rem; }
.article-category-link {
padding: 0.375rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
margin: 0.1875rem;
margin-top: 0.125rem;
margin-bottom: 1.5rem;
line-height: 1.5rem;
height: auto;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
font-weight: 400;
background-color: transparent;
position: relative;
z-index: 1;
overflow: visible;
padding-left: 0.375rem;
padding-right: 0.375rem;
color: #fdf6e3; }
.article-category-link:hover, .article-category-link:active, .article-category-link:focus, a:hover > .article-category-link, a:active > .article-category-link, a:focus > .article-category-link {
text-decoration: none;
background-color: transparent; }
.article-category-link:focus {
outline: none;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
.article-category-link:focus:before {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
.article-category-link:before {
content: " ";
position: absolute;
top: 0;
left: -0.1875rem;
right: -0.1875rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
transition: background-color 0.3s; }
.article-category-link:before {
background-color: #2aa198; }
.article-category-link:visited {
color: #fdf6e3; }
.article-category-link:visited:before {
background-color: #2aa198; }
.article-category-link:hover, .article-category-link:active, .article-category-link:focus, a:hover > .article-category-link, a:active > .article-category-link, a:focus > .article-category-link, .article-category-link:visited:hover, .article-category-link:visited:active, .article-category-link:visited:focus, a:hover > .article-category-link:visited, a:active > .article-category-link:visited, a:focus > .article-category-link:visited, .article-category-link:not(.disabled):not(:disabled):hover, .article-category-link:not(.disabled):not(:disabled):active, .article-category-link:not(.disabled):not(:disabled):focus, a:hover > .article-category-link:not(.disabled):not(:disabled), a:active > .article-category-link:not(.disabled):not(:disabled), a:focus > .article-category-link:not(.disabled):not(:disabled) {
color: #fffefb; }
.article-category-link:hover:before, .article-category-link:active:before, .article-category-link:focus:before, a:hover > .article-category-link:before, a:active > .article-category-link:before, a:focus > .article-category-link:before, .article-category-link:visited:hover:before, .article-category-link:visited:active:before, .article-category-link:visited:focus:before, a:hover > .article-category-link:visited:before, a:active > .article-category-link:visited:before, a:focus > .article-category-link:visited:before, .article-category-link:not(.disabled):not(:disabled):hover:before, .article-category-link:not(.disabled):not(:disabled):active:before, .article-category-link:not(.disabled):not(:disabled):focus:before, a:hover > .article-category-link:not(.disabled):not(:disabled):before, a:active > .article-category-link:not(.disabled):not(:disabled):before, a:focus > .article-category-link:not(.disabled):not(:disabled):before {
background-color: #22837b; }
.article-category-link:hover, .article-category-link:active {
border: 0px solid rgba(0, 0, 0, 0.3); }
p .article-category-link:last-child {
margin-bottom: 0; }
strong.btn-fake {
padding: 1.5rem;
padding-top: 0.5rem;
@ -2241,110 +2212,6 @@ a.article-nav-link-wrap {
a.article-nav-link-wrap:hover:before, a.article-nav-link-wrap:active:before, a.article-nav-link-wrap:focus:before, a:hover > a.article-nav-link-wrap:before, a:active > a.article-nav-link-wrap:before, a:focus > a.article-nav-link-wrap:before, a.article-nav-link-wrap:visited:hover:before, a.article-nav-link-wrap:visited:active:before, a.article-nav-link-wrap:visited:focus:before, a:hover > a.article-nav-link-wrap:visited:before, a:active > a.article-nav-link-wrap:visited:before, a:focus > a.article-nav-link-wrap:visited:before, a.article-nav-link-wrap:not(.disabled):not(:disabled):hover:before, a.article-nav-link-wrap:not(.disabled):not(:disabled):active:before, a.article-nav-link-wrap:not(.disabled):not(:disabled):focus:before, a:hover > a.article-nav-link-wrap:not(.disabled):not(:disabled):before, a:active > a.article-nav-link-wrap:not(.disabled):not(:disabled):before, a:focus > a.article-nav-link-wrap:not(.disabled):not(:disabled):before {
background-color: #22837b; }
.article-more-link {
text-align: center; }
.article-more-link a {
padding: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin: 0.75rem;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
line-height: 1.5rem;
height: auto;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
font-weight: 400;
background-color: transparent;
position: relative;
z-index: 1;
overflow: visible;
padding-left: 1.5rem;
padding-right: 1.5rem;
color: #d33682; }
.article-more-link a:hover, .article-more-link a:active, .article-more-link a:focus, a:hover > .article-more-link a, a:active > .article-more-link a, a:focus > .article-more-link a {
text-decoration: none;
background-color: transparent; }
.article-more-link a:focus {
outline: none;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
.article-more-link a:focus:before {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
.article-more-link a:before {
content: " ";
position: absolute;
top: 0;
left: -0.75rem;
right: -0.75rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
transition: background-color 0.3s; }
.article-more-link a:hover, .article-more-link a:active {
border: 0px solid rgba(0, 0, 0, 0.3); }
p .article-more-link a:last-child {
margin-bottom: 0; }
.article-more-link a:before {
background-color: transparent; }
.article-more-link a:visited {
color: #d33682; }
.article-more-link a:visited:before {
background-color: transparent; }
.article-more-link a:hover, .article-more-link a:active, .article-more-link a:focus, a:hover > .article-more-link a, a:active > .article-more-link a, a:focus > .article-more-link a, .article-more-link a:visited:hover, .article-more-link a:visited:active, .article-more-link a:visited:focus, a:hover > .article-more-link a:visited, a:active > .article-more-link a:visited, a:focus > .article-more-link a:visited, .article-more-link a:not(.disabled):not(:disabled):hover, .article-more-link a:not(.disabled):not(:disabled):active, .article-more-link a:not(.disabled):not(:disabled):focus, a:hover > .article-more-link a:not(.disabled):not(:disabled), a:active > .article-more-link a:not(.disabled):not(:disabled), a:focus > .article-more-link a:not(.disabled):not(:disabled) {
color: #d84b8f; }
.article-more-link a:hover:before, .article-more-link a:active:before, .article-more-link a:focus:before, a:hover > .article-more-link a:before, a:active > .article-more-link a:before, a:focus > .article-more-link a:before, .article-more-link a:visited:hover:before, .article-more-link a:visited:active:before, .article-more-link a:visited:focus:before, a:hover > .article-more-link a:visited:before, a:active > .article-more-link a:visited:before, a:focus > .article-more-link a:visited:before, .article-more-link a:not(.disabled):not(:disabled):hover:before, .article-more-link a:not(.disabled):not(:disabled):active:before, .article-more-link a:not(.disabled):not(:disabled):focus:before, a:hover > .article-more-link a:not(.disabled):not(:disabled):before, a:active > .article-more-link a:not(.disabled):not(:disabled):before, a:focus > .article-more-link a:not(.disabled):not(:disabled):before {
background-color: rgba(0, 0, 0, 0.05); }
.btn-navbar {
padding: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin: 0.75rem;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
line-height: 1.5rem;
height: auto;
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 0px 0px 0px 0px;
font-weight: 400;
background-color: transparent;
position: relative;
z-index: 1;
overflow: visible;
padding-left: 0.375rem;
padding-right: 0.375rem;
color: #fdf6e3; }
.btn-navbar:hover, .btn-navbar:active, .btn-navbar:focus, a:hover > .btn-navbar, a:active > .btn-navbar, a:focus > .btn-navbar {
text-decoration: none;
background-color: transparent; }
.btn-navbar:focus {
outline: none;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0); }
.btn-navbar:focus:before {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none; }
.btn-navbar:before {
content: " ";
position: absolute;
top: 0;
left: -0.75rem;
right: -0.75rem;
bottom: 0;
z-index: -1;
transform: skewX(-15deg);
transition: background-color 0.3s; }
.btn-navbar:before {
background-color: transparent; }
.btn-navbar:visited {
color: #fdf6e3; }
.btn-navbar:visited:before {
background-color: transparent; }
.btn-navbar:hover, .btn-navbar:active, .btn-navbar:focus, a:hover > .btn-navbar, a:active > .btn-navbar, a:focus > .btn-navbar, .btn-navbar:visited:hover, .btn-navbar:visited:active, .btn-navbar:visited:focus, a:hover > .btn-navbar:visited, a:active > .btn-navbar:visited, a:focus > .btn-navbar:visited, .btn-navbar:not(.disabled):not(:disabled):hover, .btn-navbar:not(.disabled):not(:disabled):active, .btn-navbar:not(.disabled):not(:disabled):focus, a:hover > .btn-navbar:not(.disabled):not(:disabled), a:active > .btn-navbar:not(.disabled):not(:disabled), a:focus > .btn-navbar:not(.disabled):not(:disabled) {
color: #fffefb; }
.btn-navbar:hover:before, .btn-navbar:active:before, .btn-navbar:focus:before, a:hover > .btn-navbar:before, a:active > .btn-navbar:before, a:focus > .btn-navbar:before, .btn-navbar:visited:hover:before, .btn-navbar:visited:active:before, .btn-navbar:visited:focus:before, a:hover > .btn-navbar:visited:before, a:active > .btn-navbar:visited:before, a:focus > .btn-navbar:visited:before, .btn-navbar:not(.disabled):not(:disabled):hover:before, .btn-navbar:not(.disabled):not(:disabled):active:before, .btn-navbar:not(.disabled):not(:disabled):focus:before, a:hover > .btn-navbar:not(.disabled):not(:disabled):before, a:active > .btn-navbar:not(.disabled):not(:disabled):before, a:focus > .btn-navbar:not(.disabled):not(:disabled):before {
background-color: rgba(0, 0, 0, 0.1); }
.pigimg, .mb {
padding-bottom: 1.5rem; }