status-im
/
artproject
mirror of https://github.com/status-im/artproject.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make navigation logo smaller

This commit is contained in:
wswidzinski 2018-01-16 18:40:29 +01:00
parent 7fcfcd9a14
commit 74be620978
4 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/images/logo.svg
View File

@ -1,7 +1,3 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="125px" height="26px">
<path fill-rule="evenodd" fill="currentColor"
d="M118.734,11.055 L118.734,20.226 C118.734,21.609 119.582,22.300 121.277,22.300 C122.266,22.300 123.793,22.507 124.876,21.945 L124.872,25.564 C123.836,26.102 121.547,25.884 119.970,25.884 C116.437,25.884 114.671,24.256 114.671,21.000 L114.671,11.055 L110.401,11.055 L110.401,7.506 L114.671,7.506 L114.671,0.072 L118.734,0.091 L118.734,7.506 L124.880,7.506 L124.880,11.055 L118.734,11.055 ZM95.344,21.913 L100.325,21.913 L100.325,11.055 L95.344,11.055 L95.344,7.506 L104.387,7.506 L104.387,21.913 L109.368,21.913 L109.368,25.462 L95.344,25.462 L95.344,21.913 ZM100.461,0.667 L108.312,0.667 L108.312,4.066 L100.461,4.066 L100.461,0.667 ZM85.735,25.884 C83.757,25.884 82.226,25.287 81.143,24.092 L81.143,25.462 L77.081,25.462 L77.081,0.002 L81.143,0.091 L81.143,8.911 C81.637,8.373 82.314,7.934 83.174,7.593 C84.034,7.254 84.911,7.084 85.806,7.084 C88.067,7.084 89.904,7.927 91.317,9.614 C92.730,11.301 93.436,13.585 93.436,16.467 C93.436,19.465 92.753,21.785 91.387,23.424 C90.021,25.064 88.137,25.884 85.735,25.884 ZM88.261,12.338 C87.542,11.389 86.489,10.914 85.100,10.914 C84.204,10.914 83.409,11.096 82.715,11.459 C82.020,11.823 81.496,12.238 81.143,12.707 L81.143,20.262 C82.014,21.433 83.333,22.019 85.100,22.019 C86.489,22.019 87.542,21.532 88.261,20.560 C88.979,19.589 89.339,18.223 89.339,16.467 C89.339,14.663 88.979,13.286 88.261,12.338 ZM61.537,18.048 C61.796,19.361 62.320,20.397 63.109,21.158 C63.898,21.920 64.916,22.300 66.165,22.300 C67.743,22.300 69.073,21.714 70.157,20.543 L72.594,23.108 C70.899,24.959 68.744,25.884 66.130,25.884 C63.468,25.884 61.366,25.029 59.824,23.319 C58.281,21.609 57.511,19.326 57.511,16.467 C57.511,13.562 58.287,11.272 59.842,9.597 C61.396,7.922 63.492,7.084 66.130,7.084 C68.438,7.084 70.321,7.804 71.782,9.245 C73.242,10.686 73.972,12.801 73.972,15.588 C73.972,16.620 73.925,17.439 73.831,18.048 L61.537,18.048 ZM68.726,11.635 C68.008,10.967 67.142,10.633 66.130,10.633 C64.834,10.633 63.792,10.985 63.003,11.688 C62.214,12.391 61.714,13.362 61.502,14.604 L69.980,14.604 C69.862,13.292 69.444,12.303 68.726,11.635 ZM50.481,23.740 C49.327,25.170 47.642,25.884 45.429,25.884 C43.427,25.884 41.808,25.293 40.572,24.109 C39.335,22.927 38.717,21.035 38.717,18.434 L38.717,7.506 L42.780,7.506 L42.780,17.556 C42.780,20.531 44.016,22.019 46.489,22.019 C49.150,22.019 50.481,20.555 50.481,17.626 L50.481,7.506 L54.543,7.506 L54.543,25.462 L50.481,25.462 L50.481,23.740 ZM32.500,10.844 L32.147,10.844 C30.286,10.844 28.849,11.278 27.837,12.145 C26.824,13.012 26.318,14.311 26.318,16.044 L26.318,21.913 L26.463,22.401 L26.463,25.462 L22.366,25.462 L22.366,22.401 L22.256,21.913 L22.256,11.055 L18.441,11.055 L18.441,7.506 L26.036,7.506 L26.036,10.387 C26.530,9.357 27.343,8.548 28.473,7.962 C29.604,7.378 30.851,7.084 32.217,7.084 C33.842,7.084 34.765,7.400 35.966,8.033 L35.966,12.234 L32.500,12.234 L32.500,10.844 ZM8.832,20.226 C8.832,21.609 9.680,22.300 11.376,22.300 C12.365,22.300 13.891,22.507 14.975,21.945 L14.971,25.564 C13.935,26.102 11.646,25.884 10.068,25.884 C6.536,25.884 4.770,24.256 4.770,21.000 L4.770,11.055 L0.499,11.055 L0.499,7.506 L4.770,7.506 L4.770,0.072 L8.832,0.091 L8.832,7.506 L14.979,7.506 L14.979,11.055 L8.832,11.055 L8.832,20.226 Z"/>
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="26" viewBox="0 0 125 26">
<path id="truebit_logo" fill-rule="evenodd" fill="currentColor" d="M118.734,11.055 L118.734,20.226 C118.734,21.609 119.582,22.300 121.277,22.300 C122.266,22.300 123.793,22.507 124.876,21.945 L124.872,25.564 C123.836,26.102 121.547,25.884 119.970,25.884 C116.437,25.884 114.671,24.256 114.671,21.000 L114.671,11.055 L110.401,11.055 L110.401,7.506 L114.671,7.506 L114.671,0.072 L118.734,0.091 L118.734,7.506 L124.880,7.506 L124.880,11.055 L118.734,11.055 ZM95.344,21.913 L100.325,21.913 L100.325,11.055 L95.344,11.055 L95.344,7.506 L104.387,7.506 L104.387,21.913 L109.368,21.913 L109.368,25.462 L95.344,25.462 L95.344,21.913 ZM100.461,0.667 L108.312,0.667 L108.312,4.066 L100.461,4.066 L100.461,0.667 ZM85.735,25.884 C83.757,25.884 82.226,25.287 81.143,24.092 L81.143,25.462 L77.081,25.462 L77.081,0.002 L81.143,0.091 L81.143,8.911 C81.637,8.373 82.314,7.934 83.174,7.593 C84.034,7.254 84.911,7.084 85.806,7.084 C88.067,7.084 89.904,7.927 91.317,9.614 C92.730,11.301 93.436,13.585 93.436,16.467 C93.436,19.465 92.753,21.785 91.387,23.424 C90.021,25.064 88.137,25.884 85.735,25.884 ZM88.261,12.338 C87.542,11.389 86.489,10.914 85.100,10.914 C84.204,10.914 83.409,11.096 82.715,11.459 C82.020,11.823 81.496,12.238 81.143,12.707 L81.143,20.262 C82.014,21.433 83.333,22.019 85.100,22.019 C86.489,22.019 87.542,21.532 88.261,20.560 C88.979,19.589 89.339,18.223 89.339,16.467 C89.339,14.663 88.979,13.286 88.261,12.338 ZM61.537,18.048 C61.796,19.361 62.320,20.397 63.109,21.158 C63.898,21.920 64.916,22.300 66.165,22.300 C67.743,22.300 69.073,21.714 70.157,20.543 L72.594,23.108 C70.899,24.959 68.744,25.884 66.130,25.884 C63.468,25.884 61.366,25.029 59.824,23.319 C58.281,21.609 57.511,19.326 57.511,16.467 C57.511,13.562 58.287,11.272 59.842,9.597 C61.396,7.922 63.492,7.084 66.130,7.084 C68.438,7.084 70.321,7.804 71.782,9.245 C73.242,10.686 73.972,12.801 73.972,15.588 C73.972,16.620 73.925,17.439 73.831,18.048 L61.537,18.048 ZM68.726,11.635 C68.008,10.967 67.142,10.633 66.130,10.633 C64.834,10.633 63.792,10.985 63.003,11.688 C62.214,12.391 61.714,13.362 61.502,14.604 L69.980,14.604 C69.862,13.292 69.444,12.303 68.726,11.635 ZM50.481,23.740 C49.327,25.170 47.642,25.884 45.429,25.884 C43.427,25.884 41.808,25.293 40.572,24.109 C39.335,22.927 38.717,21.035 38.717,18.434 L38.717,7.506 L42.780,7.506 L42.780,17.556 C42.780,20.531 44.016,22.019 46.489,22.019 C49.150,22.019 50.481,20.555 50.481,17.626 L50.481,7.506 L54.543,7.506 L54.543,25.462 L50.481,25.462 L50.481,23.740 ZM32.500,10.844 L32.147,10.844 C30.286,10.844 28.849,11.278 27.837,12.145 C26.824,13.012 26.318,14.311 26.318,16.044 L26.318,21.913 L26.463,22.401 L26.463,25.462 L22.366,25.462 L22.366,22.401 L22.256,21.913 L22.256,11.055 L18.441,11.055 L18.441,7.506 L26.036,7.506 L26.036,10.387 C26.530,9.357 27.343,8.548 28.473,7.962 C29.604,7.378 30.851,7.084 32.217,7.084 C33.842,7.084 34.765,7.400 35.966,8.033 L35.966,12.234 L32.500,12.234 L32.500,10.844 ZM8.832,20.226 C8.832,21.609 9.680,22.300 11.376,22.300 C12.365,22.300 13.891,22.507 14.975,21.945 L14.971,25.564 C13.935,26.102 11.646,25.884 10.068,25.884 C6.536,25.884 4.770,24.256 4.770,21.000 L4.770,11.055 L0.499,11.055 L0.499,7.506 L4.770,7.506 L4.770,0.072 L8.832,0.091 L8.832,7.506 L14.979,7.506 L14.979,11.055 L8.832,11.055 L8.832,20.226 Z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

2
src/styles/base/_settings.scss
View File

@ -42,6 +42,6 @@ $title-font-family: 'Rubik Mono One', sans-serif;
//=======================
$duration: .2s;
$header-height--mobile: 80px;
$header-height--mobile: 70px;
$header-height--desktop: 95px;
$distort-anim-size: 2px;

28
src/styles/components/_header.scss
View File

@ -40,9 +40,26 @@
&__subtitle {
position: absolute;
right: 0;
bottom: -5px;
font-size: 12px;
bottom: -2px;
font-size: 10px;
transform: translate(50%, 100%);
@media #{$screen-sm} {
bottom: -5px;
font-size: 12px;
}
}
svg {
width: 75px;
height: 15px;
}
@media #{$screen-sm} {
svg {
width: 125px;
height: 26px;
}
}
}
@ -50,14 +67,9 @@
.header {
height: $header-height--desktop;
}
.header-logo__img {
width: 110px;
height: 37px;
}
}
@media #{$screen-md} {
@media #{$screen-lg} {
.header {
&::after,
&__btn {

12
src/styles/components/_nav.scss
View File

@ -87,6 +87,14 @@ $_anim-size: 2px;
}
@media #{$screen-md} {
.nav {
&__link:hover {
@include hoverDistortionActive();
}
}
}
@media #{$screen-lg} {
.nav {
&__list {
position: relative;
@ -105,10 +113,6 @@ $_anim-size: 2px;
width: calc(100% - 20px);
}
&__link:hover {
@include hoverDistortionActive();
}
&__link {
position: static;
flex-direction: row;