743 lines
12 KiB
SCSS
743 lines
12 KiB
SCSS
.hm-nav-container {
|
|
position: relative;
|
|
background-color: #222;
|
|
clear: both;
|
|
}
|
|
|
|
.main-navigation {
|
|
background-color: #222;
|
|
clear: both;
|
|
display: block;
|
|
float: left;
|
|
font-family: $font__secondary;
|
|
width: 100%;
|
|
|
|
a {
|
|
line-height: 20px;
|
|
padding: 12.5px 17px;
|
|
color: #ddd;
|
|
&:hover {
|
|
background-color: #e74c3c;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
display: none;
|
|
@include font-size(0.875);
|
|
font-weight: bold;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding-left: 0;
|
|
text-transform: uppercase;
|
|
|
|
ul {
|
|
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
|
|
float: left;
|
|
font-weight: normal;
|
|
position: absolute;
|
|
//top: 45px;
|
|
left: -999em;
|
|
z-index: 99999;
|
|
background: #333333;
|
|
text-transform: none;
|
|
|
|
ul {
|
|
left: -999em;
|
|
top: 0;
|
|
}
|
|
|
|
li {
|
|
&:hover > ul,
|
|
&.focus > ul {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
a {
|
|
width: 200px;
|
|
padding: 10px 17px;
|
|
}
|
|
|
|
:hover > a,
|
|
.focus > a {
|
|
}
|
|
|
|
a:hover,
|
|
a.focus {
|
|
}
|
|
}
|
|
|
|
li:hover > ul,
|
|
li.focus > ul {
|
|
left: auto;
|
|
}
|
|
|
|
@media ( max-width: 991px ) {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
li {
|
|
float: left;
|
|
position: relative;
|
|
|
|
&:hover > a,
|
|
&.focus > a {
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.current_page_item > a,
|
|
.current-menu-item > a,
|
|
.current_page_ancestor > a,
|
|
.current-menu-ancestor > a {
|
|
}
|
|
|
|
}
|
|
|
|
.main-navigation .current_page_item > a,
|
|
.main-navigation .current-menu-item > a,
|
|
.main-navigation .current_page_ancestor > a,
|
|
.main-navigation .current-menu-ancestor > a {
|
|
background-color: #e74c3c;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.main-navigation .menu-item-has-children > a:after,
|
|
.main-navigation .page_item_has_children > a:after {
|
|
content: "\f0d7";
|
|
display: inline-block;
|
|
line-height: 1;
|
|
font-family: FontAwesome;
|
|
font-size: 12px;
|
|
margin: 1px 0 0 10px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.main-navigation .menu-item-has-children .menu-item-has-children > a:after,
|
|
.main-navigation .page_item_has_children .menu-item-has-children > a:after {
|
|
content: "\f0da";
|
|
display: inline-block;
|
|
float: right;
|
|
line-height: 20px;
|
|
font-family: FontAwesome;
|
|
font-size: 12px;
|
|
margin: 0 0 0 10px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Small menu. */
|
|
.menu-toggle,
|
|
.main-navigation.toggled ul {
|
|
display: block;
|
|
}
|
|
|
|
@media screen and (min-width: 992px) {
|
|
.menu-toggle {
|
|
display: none;
|
|
}
|
|
.main-navigation ul {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.comment-navigation,
|
|
.posts-navigation,
|
|
.post-navigation {
|
|
|
|
clear: both;
|
|
|
|
.site-main & {
|
|
margin: 0 0 3em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-previous {
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
|
|
.nav-next {
|
|
float: right;
|
|
text-align: right;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.post-navigation {
|
|
|
|
.meta-nav {
|
|
font-family: "Ubuntu", sans-serif;
|
|
display: block;
|
|
color: #aaa;
|
|
@include font-size(1);
|
|
letter-spacing: 1px;
|
|
margin-bottom: 5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.post-title {
|
|
color: #222;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
color: #e74c3c;
|
|
}
|
|
}
|
|
|
|
.nav-previous {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.nav-next {
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
|
|
/* Top Navigation */
|
|
|
|
.top-navigation {
|
|
clear: both;
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
|
|
a {
|
|
color: #222;
|
|
line-height: 20px;
|
|
padding: 7.5px 9px;
|
|
@include font-size(0.75);
|
|
font-weight: 500;
|
|
|
|
&:hover {
|
|
color: #e74c3c;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
display: none;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding-left: 0;
|
|
|
|
ul {
|
|
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
|
|
float: left;
|
|
position: absolute;
|
|
//top: 1.5em;
|
|
left: -999em;
|
|
z-index: 99999;
|
|
background: #ECF0F1;
|
|
|
|
ul {
|
|
left: -999em;
|
|
top: 0;
|
|
}
|
|
|
|
li {
|
|
&:hover > ul,
|
|
&.focus > ul {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
a {
|
|
width: 200px;
|
|
color: #222;
|
|
|
|
&:hover {
|
|
background: #e74c3c;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
:hover > a,
|
|
.focus > a {
|
|
}
|
|
|
|
a:hover,
|
|
a.focus {
|
|
}
|
|
}
|
|
|
|
li:hover > ul,
|
|
li.focus > ul {
|
|
left: auto;
|
|
}
|
|
|
|
@media ( max-width: 991px ) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
li {
|
|
float: left;
|
|
position: relative;
|
|
|
|
&:hover > a,
|
|
&.focus > a {
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.current_page_item > a,
|
|
.current-menu-item > a,
|
|
.current_page_ancestor > a,
|
|
.current-menu-ancestor > a {
|
|
}
|
|
|
|
}
|
|
|
|
.top-navigation .menu-item-has-children > a:after,
|
|
.top-navigation .page_item_has_children > a:after {
|
|
content: "\f0d7";
|
|
display: inline-block;
|
|
line-height: 1;
|
|
font-family: FontAwesome;
|
|
font-size: 10px;
|
|
margin: 0 0 0 10px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.top-navigation .menu-item-has-children .menu-item-has-children > a:after,
|
|
.top-navigation .page_item_has_children .menu-item-has-children > a:after {
|
|
content: "\f0da";
|
|
display: inline-block;
|
|
float: right;
|
|
line-height: 20px;
|
|
font-family: FontAwesome;
|
|
font-size: 10px;
|
|
margin: 0 0 0 10px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Small menu. */
|
|
.menu-toggle,
|
|
.top-navigation.toggled ul {
|
|
display: block;
|
|
}
|
|
|
|
@media screen and (min-width: 992px) {
|
|
.menu-toggle {
|
|
display: none;
|
|
}
|
|
.top-navigation ul {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#main-nav-button {
|
|
color: #ddd;
|
|
display: none;
|
|
line-height: 45px;
|
|
margin: 0 0 0 30px;
|
|
text-align: left;
|
|
padding: 0 16px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
background: #e74c3c;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.hm-topnavbutton {
|
|
@media ( max-width: 991px ) {
|
|
background: #ECF0F1;
|
|
border-bottom: 1px solid #ddd;
|
|
display: block;
|
|
height: 35px;
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
|
|
#top-nav-button {
|
|
display: none;
|
|
line-height: 35px;
|
|
text-align: left;
|
|
width: 100%;
|
|
color: #222222;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
|
|
&:hover {
|
|
color: #e74c3c;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
display: inline-block;
|
|
}
|
|
|
|
}
|
|
|
|
.hitmag-full-width #top-nav-button {
|
|
@media (min-width: 768px) {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
#main-nav-button:before{
|
|
content: "\f0c9";
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.main-nav-btn-lbl {
|
|
margin: 0 0 0 10px;
|
|
}
|
|
|
|
#top-nav-button:before {
|
|
content: "\f0c9";
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
margin: 0 10px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.responsive-mainnav,
|
|
.responsive-topnav {
|
|
background: #333;
|
|
display:none;
|
|
padding-right: 30px;
|
|
|
|
@media ( min-width: 992px ) {
|
|
display: none !important;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 5px 0 5px 30px;
|
|
}
|
|
|
|
li {
|
|
|
|
list-style: none;
|
|
|
|
a {
|
|
color: #eee;
|
|
line-height: 26px;
|
|
padding: 10px 15px;
|
|
text-decoration: none;
|
|
display: block;
|
|
|
|
&:hover {
|
|
background: #e74c3c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* Social Menu */
|
|
|
|
.hm-social-menu {
|
|
display: inline-block;
|
|
float: right;
|
|
margin: 7.5px -5px 7.5px 15px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.screen-reader-text {
|
|
position: absolute;
|
|
top: -9999em;
|
|
left: -9999em;
|
|
}
|
|
|
|
#hm-menu-social {}
|
|
|
|
#hm-menu-social ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
|
|
#hm-menu-social ul li {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
#hm-menu-social li a::before {
|
|
content: '\f408';
|
|
display: inline-block;
|
|
padding: 0 5px;
|
|
font-family: 'FontAwesome';
|
|
vertical-align: top;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-size: 14px;
|
|
color: #222;
|
|
}
|
|
|
|
#hm-menu-social li a:hover {
|
|
color: #222;
|
|
}
|
|
|
|
#hm-menu-social li a[href*="wordpress.org"]::before,
|
|
#hm-menu-social li a[href*="wordpress.com"]::before {
|
|
content: '\f205';
|
|
color: #21759b;
|
|
}
|
|
#hm-menu-social li a[href*="facebook.com"]::before {
|
|
content: '\f09a';
|
|
color: #3b5998;
|
|
}
|
|
#hm-menu-social li a[href*="twitter.com"]::before {
|
|
content: '\f099';
|
|
color: #33ccff;
|
|
}
|
|
#hm-menu-social li a[href*="dribbble.com"]::before {
|
|
content: '\f17d';
|
|
color: #ea4c89;
|
|
}
|
|
#hm-menu-social li a[href*="plus.google.com"]::before {
|
|
content: '\f0d5';
|
|
color: #dd4b39;
|
|
}
|
|
#hm-menu-social li a[href*="pinterest.com"]::before {
|
|
content: '\f0d2';
|
|
color: #c8232c;
|
|
}
|
|
#hm-menu-social li a[href*="github.com"]::before {
|
|
content: '\f09b';
|
|
color: #171515;
|
|
}
|
|
#hm-menu-social li a[href*="tumblr.com"]::before {
|
|
content: '\f173';
|
|
color: #34526f;
|
|
}
|
|
#hm-menu-social li a[href*="youtube.com"]::before {
|
|
content: '\f16a';
|
|
color: #c4302b;
|
|
}
|
|
#hm-menu-social li a[href*="flickr.com"]::before {
|
|
content: '\f16e';
|
|
color: #ff0084;
|
|
}
|
|
#hm-menu-social li a[href*="vimeo.com"]::before {
|
|
content: '\f27d';
|
|
color: #1AB7EA;
|
|
}
|
|
#hm-menu-social li a[href*="instagram.com"]::before {
|
|
content: '\f16d';
|
|
color: #3f729b;
|
|
}
|
|
#hm-menu-social li a[href*="codepen.io"]::before {
|
|
content: '\f1cb';
|
|
color: #000;
|
|
}
|
|
#hm-menu-social li a[href*="linkedin.com"]::before {
|
|
content: '\f0e1';
|
|
color: #0e76a8;
|
|
}
|
|
#hm-menu-social li a[href*="yelp.com"]::before {
|
|
content: '\f1e9';
|
|
color: #d32323;
|
|
}
|
|
|
|
|
|
/* Search Box */
|
|
.hm-search-box-container{
|
|
display: none;
|
|
}
|
|
.hm-search-button-icon {
|
|
cursor: pointer;
|
|
float: right;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 30px;
|
|
width: 30px;
|
|
height: 50px;
|
|
line-height: 45px;
|
|
color: #ddd;
|
|
|
|
@media (max-width: 992px) {
|
|
z-index: 999999;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.hm-search-button-icon:before {
|
|
content: '\f002';
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-family: 'FontAwesome';
|
|
}
|
|
.hm-search-button-icon.hm-search-close:before {
|
|
content: '\f00d';
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
font-family: 'FontAwesome';
|
|
}
|
|
.hm-search-box-container {
|
|
background: #fff;
|
|
border: 3px solid #E3E3E3;
|
|
display: none;
|
|
padding: 5px;
|
|
position: absolute;
|
|
top: 45px;
|
|
width: 345px;
|
|
z-index: 999;
|
|
|
|
@media (max-width:480px) {
|
|
width: 100%;
|
|
right: 0;
|
|
}
|
|
|
|
@media (min-width: 481px) {
|
|
right: 25px;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
right: 30px;
|
|
}
|
|
|
|
@media (min-width:992px) {
|
|
right: 40px;
|
|
}
|
|
}
|
|
#hm-search-form .search-form {
|
|
|
|
.search-submit {
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
background-color: #e74c3c;
|
|
border: none;
|
|
color: #fff;
|
|
@include font-size(0.75);
|
|
border-radius: 3px;
|
|
font-weight: bold;
|
|
font-family: $font__secondary;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding: 0;
|
|
text-shadow: none;
|
|
text-transform: uppercase;
|
|
width: 92px;
|
|
//@include transition( background, 0.2s, ease-in-out );
|
|
|
|
&:hover {
|
|
background: #222;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.search-field {
|
|
background: #f1f1f1;
|
|
border: none;
|
|
color: #222;
|
|
float: left;
|
|
height: 40px;
|
|
margin: 0;
|
|
padding: 0 11px;
|
|
width: 220px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
padding: 1em 0;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
.nav-links .page-numbers {
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-links .page-numbers:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.page-numbers {
|
|
background-color: #333;
|
|
color: #fff;
|
|
padding: 10px 15px;
|
|
font-weight: bold;
|
|
margin: 0 2px;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.page-numbers:hover {
|
|
background: #666;
|
|
}
|
|
|
|
.nav-links .current {
|
|
background: #e74c3c;
|
|
color: #fff;
|
|
padding: 10px 15px;
|
|
font-weight: bold;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
.infinite-scroll .navigation {
|
|
display: none;
|
|
}
|
|
|
|
#infinite-handle {
|
|
text-align: center;
|
|
margin: 25px 0 50px 0;
|
|
}
|
|
|
|
#infinite-handle span {
|
|
background: #333;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
padding: 10px 30px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#infinite-handle span.infinite-loader {
|
|
text-align: center;
|
|
}
|
|
|
|
.infinite-scroll .infinite-loader {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.infinite-scroll .infinite-loader .spinner {
|
|
bottom: -1em;
|
|
left: auto;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hm-nwrap {
|
|
margin: 0 auto;
|
|
position: relative;
|
|
|
|
@media (min-width: 992px) {
|
|
max-width: 990px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
max-width: 760px;
|
|
}
|
|
} |