Last active
December 27, 2015 04:18
-
-
Save marekhrabe/7265433 to your computer and use it in GitHub Desktop.
new logotype
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// variables - change only these | |
@headerBg: #1f1f1f; | |
@headerText: #a4a4a4; | |
@headerActive: #c63926; | |
@headerNotification: #579aff; | |
// computed | |
@headerDivider: fade(@headerText, 22%); | |
// styles | |
header { | |
display: block; | |
background: @headerBg; | |
height: 70px; | |
color: @headerText; | |
overflow: hidden; | |
font-size: 14px; | |
.logo { | |
line-height: 70px; | |
text-transform: uppercase; | |
a { | |
display: inline-block; | |
text-decoration: none; | |
border: 0; | |
height: 70px; | |
position: relative; | |
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAAAPCAMAAADkiNBTAAACYVBMVEXu7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7////4+Pjz8/P5+fn4+Pj////w8PD////////////////////////////////////////////////////z8/P////////////////////////////////////////////////u7u719fX////////////29vb9/f3////z8/P////5+fn////////6+vrw8PDz8/P////////////////////w8PD7+/v29vbx8fH////////////////////////////////v7+/19fX39/f7+/v////////u7u7w8PDw8PD19fX4+Pj////////////////////////////////////////8/Pzz8/Pv7+/////////////////////////39/f////////////y8vL09PT6+vrx8fHx8fH////+/v76+vr////v7+/////x8fH////////w8PD////////////////////////////////////////////////////////////////v7+/x8fH09PT39/f////////////////////////z8/P////6+vr19fXv7+/////////39/f////////////4+Pj////////////////////////////////////v7+/////09PT+/v75+fn////////////////////////////y8vL////9/f319fX////////////u7u4AAADv7+/v7+/6+vr9/f35+fn7+/v4+Pj8/Pz+/v739/fx8fH///+lOdu+AAAAv3RSTlP+/vv+/P79/jG807a5QOibHUg1YkF1oBiTSyh21mNWW4ucH3qYMhNfIPjLiU0ux6Vt1Fe4ITuy7tkwfTklPeysxecrnoV4hmxeSffIvq0OOvnp7cm9ljw+fpWABD8cRKjX8lSBBTZFEcAXU3HgzrHh45qjsFnvJORuSusDeXQsl08td2BqKV0zjpIv9ubQwQZvZ40WCNgHs830GxDCg1iduwwJj1yEGmgBAvFm0qG1glJkEg9pWt4ip8yImR7+AH106F8AAALoSURBVHjavZTlbxtBEMWtKKrKzMzMzMzMgYa5YWZmZmaG2o7tcHzRWkns2H5/VW93T5c6stp+aX+SPfNGM343uycriA1PDcKdQfJPsXV8awVwV3PbpujvKwjVbdkDxUwdrOqJEqp1zUykFApKltwQhIe8e+SY0BnFspmcNr0+9XkeE06FnaqVK4oCljrmglP2bESu7TGD84UqjZGL+TSqRoFp1jQGjNN4tMgC4BrrXADjk5gPdUAivGLRsUX8TAD36pjD7HAmL9cbEJ2p3avMzf4qqligyXVfb58j8MKOY0UcYHBpzxLTYMD8qqPjzec+UbQDE+3Li7UqIERyrKn0CifkCtBISL+uwQoRfnBumK8lMq+xcJnGLCDGjuMMoGrhncNAPo2SmFtPY6AFYdSxe7xzAUgi5ByQwzpqzwOYYakP4LtNHn2PSJ68xAf7jlNS50cYhuSxUpTwpA4GxZCHmm0UN0RGLDB0s9u/eEl2rHEAZmO03XxiHhM8+QHD7x0tvJNTgpJJxm7MKa6DElF4hJBEoIiQSc0FducO0vH09ywDYN1aQAX+2hG/OjpCxqgAUKZzZ/VQIJ2Qclo3NWjr5X6/DR1WwKwTU6OtY+2fd5S6rXqJXuq4v4uVb7HxyTmYG6tGiC1dSm9EsoeN4IUmJPPfVTEZAiTJjlLDCSJTB5O8gMICYD6oMp6QR0AvIY8f3JwkdnBGmfh9FqYaQthzddKoguU7jQ3AcVvH+4C/PKwGBmTHd9FWUBLUJvbeLN1uUKv1cCooWLMWbaIaAEI3uW2uSgbaCdelu2J1nkAjsXVMBAxtSuWWQ/S0AwDzyQxBPRyWEKgQT6y3fAGMHju7jULCgS6TckBS5p5B9jyHJV0av8TRLwgMftFPjJBoVvD3MW2Cqjw7jt9cXaaGW1tX6d253qjxbC2fci4mEjsrtwtC344Kft0ZQr48GKxu9Zpevc6HO+j6TulTx06nL/6vnqn2vkr+Bz8BrqqTxTV0e0gAAAAASUVORK5CYII=); | |
width: 100px; | |
background-position: left center; | |
background-repeat: no-repeat; | |
text-indent: -999999px; | |
cursor: pointer; | |
&:after { | |
display: block; | |
content: ''; | |
position: absolute; | |
.size (1px, 29px); | |
background-color: @headerDivider; | |
pointer-events: none; | |
top: 20px; | |
right: -15px; | |
} | |
} | |
strong { | |
padding-left: 40px; | |
font-weight: bold; | |
color: @headerActive; | |
} | |
} | |
.menu { | |
position: absolute; | |
top: 0; | |
right: 0; | |
height: 70px; | |
a { | |
display: inline-block; | |
height: 70px; | |
vertical-align: top; | |
text-align: center; | |
line-height: 70px; | |
color: @headerText; | |
border: 0; | |
cursor: pointer; | |
text-transform: uppercase; | |
text-decoration: none; | |
margin-left: 35px; | |
.transition(.1s); | |
* { | |
cursor: pointer; | |
} | |
&:hover { | |
color: contrast(@headerBg, darken(@headerText, 15%), lighten(@headerText, 15%)); | |
} | |
&.active { | |
color: @headerActive; | |
} | |
} | |
.divider { | |
display: inline-block; | |
.size (1px, 29px); | |
background-color: @headerDivider; | |
pointer-events: none; | |
position: relative; | |
top: 20px; | |
right: -12px; | |
} | |
.notifications { | |
background-color: @headerNotification; | |
color: @headerBg; | |
.size(24px); | |
.border-radius(12px); | |
line-height: 24px; | |
position: relative; | |
top: 22px; | |
margin-left: 20px; | |
&:hover { | |
color: @headerBg; | |
background-color: fadeout(@headerNotification, 5%); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment