387 lines
11 KiB
SCSS
387 lines
11 KiB
SCSS
/*-----------------------------------------------------------------------------------*/
|
|
/* Social Media Icons
|
|
/*-----------------------------------------------------------------------------------*/
|
|
|
|
.social-nav {
|
|
ul {
|
|
@extend .fa-ul;
|
|
li {
|
|
display: inline-block;
|
|
border: 1px solid transparent;
|
|
border-radius: 50%;
|
|
a {
|
|
background: $color-page-background;
|
|
color: $color-text;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
}
|
|
:hover {
|
|
background: $color-text;
|
|
color: $color-page-background;
|
|
}
|
|
}
|
|
|
|
li {
|
|
a {
|
|
@extend .fa-star;
|
|
&::before {
|
|
@extend .fa;
|
|
@include px2rem($font-size-socialmedia-icon);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
|
|
&[href*="diaspora.com"] {
|
|
// @extend .fa-star-o;
|
|
background-color: #ccc;
|
|
border-color: #ccc;
|
|
color: white;
|
|
}
|
|
&[href*="diaspora.com"]:before {
|
|
@include px2rem($font-size-socialmedia-icon * 2, $font-size-base , $font-size-base * 2);
|
|
content: "*";
|
|
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
font-weight: bold;
|
|
}
|
|
&[href*="diaspora.com"]:focus,
|
|
&[href*="diaspora.com"]:hover {
|
|
background-color: darken(#ccc,10%);
|
|
}
|
|
|
|
&[href*="delicious.com"] {
|
|
@extend .fa-delicious;
|
|
background-color: #eeeeee;
|
|
border-color: #eeeeee;
|
|
color: white;
|
|
}
|
|
&[href*="delicious.com"]:focus,
|
|
&[href*="delicious.com"]:hover {
|
|
background-color: darken(#eeeeee,10%);
|
|
}
|
|
|
|
&[href*="facebook.com"] {
|
|
@extend .fa-facebook;
|
|
background-color: #3b5998;
|
|
border-color: #3b5998;
|
|
color: white;
|
|
}
|
|
&[href*="facebook.com"]:focus,
|
|
&[href*="facebook.com"]:hover {
|
|
background-color: darken(#3b5998,10%);
|
|
}
|
|
|
|
&[href*="feed"] {
|
|
@extend .fa-rss;
|
|
background-color: #ff8800;
|
|
border-color: #ff8800;
|
|
color: white;
|
|
}
|
|
&[href*="feed"]:focus,
|
|
&[href*="feed"]:hover {
|
|
background-color: darken(#ff8800,10%);
|
|
}
|
|
&[href*="flattr.com"] {
|
|
@extend .fa-refresh;
|
|
background-color: #5CB85C;
|
|
border-color: #5CB85C;
|
|
color: white;
|
|
}
|
|
&[href*="flattr.com"]:focus,
|
|
&[href*="flattr.com"]:hover {
|
|
background-color: darken(#5CB85C,10%);
|
|
}
|
|
&[href*="flickr.com"] {
|
|
@extend .fa-flickr;
|
|
background-color: #ff0084;
|
|
border-color: #ff0084;
|
|
color: white;
|
|
}
|
|
&[href*="flickr.com"]:focus,
|
|
&[href*="flickr.com"]:hover {
|
|
background-color: darken(#ff0084,10%);
|
|
}
|
|
&[href*="google.com"] {
|
|
@extend .fa-google;
|
|
background-color: #4285f4;
|
|
border-color: #4285f4;
|
|
color: white;
|
|
}
|
|
&[href*="google.com"]:focus,
|
|
&[href*="google.com"]:hover {
|
|
background-color: darken(#4285f4,10%);
|
|
}
|
|
|
|
|
|
&[href*="github.com"] {
|
|
@extend .fa-github;
|
|
background-color: #4078c0;
|
|
border-color: #4078c0;
|
|
color: white;
|
|
}
|
|
&[href*="github.com"]:focus,
|
|
&[href*="github.com"]:hover {
|
|
background-color: darken(#4078c0,20%);
|
|
}
|
|
&[href*="instagram.com"] {
|
|
@extend .fa-instagram;
|
|
background-color: #c13584;
|
|
border-color: #c13584;
|
|
color: white;
|
|
}
|
|
&[href*="instagram.com"]:focus,
|
|
&[href*="instagram.com"]:hover {
|
|
background-color: darken(#c13584,20%);
|
|
}
|
|
&[href*="linkedin.com"] {
|
|
@extend .fa-linkedin;
|
|
background-color: #0077b5;
|
|
border-color: #0077b5;
|
|
color: white;
|
|
}
|
|
&[href*="linkedin.com"]:focus,
|
|
&[href*="linkedin.com"]:hover {
|
|
background-color: darken(#0077b5,20%);
|
|
}
|
|
|
|
&[href*="pinterest.com"] {
|
|
@extend .fa-pinterest;
|
|
background-color: #bd081c;
|
|
border-color: #bd081c;
|
|
color: white;
|
|
}
|
|
&[href*="pinterest.com"]:focus,
|
|
&[href*="pinterest.com"]:hover {
|
|
background-color: darken(#bd081c,20%);
|
|
}
|
|
&[href*="reddit.com"] {
|
|
@extend .fa-reddit;
|
|
background-color: #ff4500;
|
|
border-color: #ff4500;
|
|
color: white;
|
|
}
|
|
&[href*="reddit.com"]:focus,
|
|
&[href*="reddit.com"]:hover {
|
|
background-color: darken(#ff4500,20%);
|
|
}
|
|
&[href*="slack.com"] {
|
|
@extend .fa-slack;
|
|
background-color: #6ecadc;
|
|
border-color: #6ecadc;
|
|
color: white;
|
|
}
|
|
&[href*="slack.com"]:focus,
|
|
&[href*="slack.com"]:hover {
|
|
background-color: darken(#6ecadc,20%);
|
|
}
|
|
&[href*="snapchat.com"] {
|
|
@extend .fa-snapchat;
|
|
background-color: #fffc00;
|
|
border-color: #fffc00;
|
|
color: white;
|
|
}
|
|
&[href*="snapchat.com"]:focus,
|
|
&[href*="snapchat.com"]:hover {
|
|
background-color: darken(#fffc00,20%);
|
|
}
|
|
|
|
&[href*="slideshare.com"] {
|
|
@extend .fa-slideshare;
|
|
background-color: #bddfdf;
|
|
border-color: #bddfdf;
|
|
color: black;
|
|
}
|
|
&[href*="slideshare.com"]:focus,
|
|
&[href*="slideshare.com"]:hover {
|
|
background-color: darken(#bddfdf,20%);
|
|
}
|
|
|
|
|
|
&[href*="skype.com"],
|
|
&[href*="skype:"] {
|
|
@extend .fa-skype;
|
|
}
|
|
&[href*="spotify.com"] {
|
|
@extend .fa-spotify;
|
|
}
|
|
&[href*="stumbleupon.com"] {
|
|
@extend .fa-stumbleupon;
|
|
}
|
|
&[href*="tumblr.com"] {
|
|
@extend .fa-tumblr;
|
|
background-color: #56BC8A;
|
|
border-color: #56BC8A;
|
|
color: white;
|
|
}
|
|
&[href*="tumblr.com"]:focus,
|
|
&[href*="tumblr.com"]:hover {
|
|
background-color: darken(#56BC8A,20%);
|
|
}
|
|
|
|
&[href*="twitter.com"] {
|
|
@extend .fa-twitter;
|
|
background-color: #1da1f2;
|
|
border-color: #1da1f2;
|
|
color: white;
|
|
}
|
|
&[href*="twitter.com"]:focus,
|
|
&[href*="twitter.com"]:hover {
|
|
background-color: darken(#1da1f2,20%);
|
|
}
|
|
&[href*="vimeo.com"] {
|
|
@extend .fa-vimeo;
|
|
background-color: #162221;
|
|
border-color: #162221;
|
|
color: white;
|
|
}
|
|
&[href*="vimeo.com"]:focus,
|
|
&[href*="vimeo.com"]:hover {
|
|
background-color: lighten(#162221,20%)
|
|
}
|
|
|
|
&[href*="whatsapp.com"] {
|
|
@extend .fa-whatsapp;
|
|
}
|
|
&[href*="wordpress.org"],
|
|
&[href*="wordpress.com"] {
|
|
@extend .fa-wordpress;
|
|
}
|
|
|
|
&[href*="xing.com"] {
|
|
@extend .fa-xing;
|
|
background-color: #026466;
|
|
border-color: #026466;
|
|
color: white;
|
|
}
|
|
&[href*="xing.com"]:focus,
|
|
&[href*="xing.com"]:hover {
|
|
background-color: darken(#026466,20%)
|
|
}
|
|
&[href*="youtube.com"] {
|
|
@extend .fa-youtube;
|
|
background-color: #cd201f;
|
|
border-color: #cd201f;
|
|
color: white;
|
|
}
|
|
&[href*="youtube.com"]:focus,
|
|
&[href*="youtube.com"]:hover {
|
|
background-color: darken(#162221,20%)
|
|
}
|
|
|
|
&[href^="mailto"] {
|
|
@extend .fa-envelope-o;
|
|
}
|
|
// Mailinglists
|
|
&[href*="lists.piratenpartei.de"] {
|
|
@extend .fa-envelope;
|
|
background-color: #ff8800;
|
|
border-color: #ff8800;
|
|
color: white;
|
|
}
|
|
&[href*="lists.piratenpartei.de"]:focus,
|
|
&[href*="lists.piratenpartei.de"]:hover {
|
|
background-color: darken(#ff8800,20%)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.socialmedia-maincolor .social-nav ul li {
|
|
a {
|
|
color: $color-main;
|
|
background-color: $color-page-background;
|
|
border-color: $color-page-background;
|
|
&:focus,
|
|
&:hover {
|
|
background: $color-second;
|
|
color: $color-page-background;
|
|
border-color: $color-second;
|
|
}
|
|
}
|
|
:focus,
|
|
:hover {
|
|
background: $color-second;
|
|
color: $color-page-background;
|
|
border-color: $color-second;
|
|
|
|
}
|
|
}
|
|
|
|
.socialmedia-secondcolor .social-nav ul li {
|
|
a {
|
|
color: $color-second;
|
|
background-color: $color-page-background;
|
|
border-color: $color-page-background;
|
|
&:focus,
|
|
&:hover {
|
|
background: $color-main;
|
|
color: $color-page-background;
|
|
border-color: $color-main;
|
|
}
|
|
}
|
|
:focus,
|
|
:hover {
|
|
background: $color-main;
|
|
color: $color-page-background;
|
|
border-color: $color-main;
|
|
|
|
}
|
|
}
|
|
|
|
#footer-social.social-nav {
|
|
li {
|
|
border: none;
|
|
}
|
|
.socialmedia-maincolor & ul li a {
|
|
color: $color-main;
|
|
background: $color-footer-background;
|
|
&:focus,
|
|
&:hover {
|
|
background: $color-second;
|
|
color: $color-page-background;
|
|
border-color: $color-second;
|
|
|
|
}
|
|
}
|
|
.socialmedia-secondcolor & ul li a {
|
|
color: $color-main;
|
|
|
|
background: $color-footer-background;
|
|
&:focus,
|
|
&:hover {
|
|
background: $color-main;
|
|
color: $color-page-background;
|
|
border-color: $color-main;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@media screen and (min-width: $breakpoint-1060) {
|
|
.header-social {
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 40px;
|
|
height: 59px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
#header-social-sticky {
|
|
top: 7px;
|
|
right: 20px;
|
|
|
|
.header-stick & {
|
|
z-index: 9999;
|
|
}
|
|
}
|
|
|
|
} |