navbar RWD fix

reactplay · Mar 16, 2022 · bba406e · bba406e
1 parent 08d2750
commit bba406e
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 10 deletions.
diff --git a/src/App.css b/src/App.css
@@ -73,6 +73,10 @@
  --screen-lg-max: 1200px;
  --screen-xl-max: 1400px;
 
+ /* Header */
+ --navbar-icon-size-rg: 24px;
+ --navbar-icon-size-sm: 16px;
+
  /* Play */
  --play-thumb-size: 268px;
 
@@ -143,6 +147,10 @@ code {
  --fs-lg: 1.4rem;
  --fs-xl: 1.8rem;
  --fs-xxl: 2rem;
+
+ /* Header */
+ --navbar-icon-size-rg: 20px;
+ --navbar-icon-size-sm: 14px;
  }
 }
 
@@ -167,7 +175,7 @@ code {
 .app-footer {
  padding: 0 2rem;
  text-align: center;
- font-size: var(--fs-sm);
+ font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  color: var(--color-neutral-50);
  border-top: solid 1px var(--color-neutral-30);

diff --git a/src/common/header/Header.js b/src/common/header/Header.js
@@ -39,19 +39,19 @@ const Header = () => {
  <ul className="header-links">
  <li>
  <a href="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/atapas/react-play" target="_blank" rel="noopener noreferrer">
- <BsGithub className="icon" size="24px" />
+ <BsGithub className="icon" />
  <span className="sr-only">GitHub</span>
  </a>
  </li>
  <li>
  <a href="https://twitter.com/tapasadhikary" target="_blank" rel="noopener noreferrer">
- <BsTwitter className="icon" size="24px" />
+ <BsTwitter className="icon" />
  <span className="sr-only">Twitter</span>
  </a>
  </li>
  <li>
  <a href="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/atapas/react-play" target="_blank" rel="noopener noreferrer" className="app-header-btn">
- <BsShareFill className="icon" size="16px" />
+ <BsShareFill className="icon" />
  <span className="btn-label">Share</span>
  </a>
  </li>

diff --git a/src/common/header/header.css b/src/common/header/header.css
@@ -11,7 +11,13 @@
  background: var(--color-neutral-90);
  color: #fff;
  height: 64px;
- padding: 0 1rem;
+ padding: 0 1rem 0 0.6rem;
+}
+
+@media screen and (max-width: 768px) {
+ .app-header {
+ padding: 0 1rem 0 0.2rem;
+ }
 }
 
 .app-header-home {
@@ -22,15 +28,30 @@
  display: block;
  width: 178px;
  height: 60px;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http:https://www.w3.org/2000/svg' width='179.712' height='60.577' viewBox='0 0 179.712 60.577'%3E%3Cg id='Group_12' data-name='Group 12' transform='translate(-301.998 -4.291)'%3E%3Cg id='Group_11' data-name='Group 11' transform='translate(297 12.413)'%3E%3Cpath id='Path_11' data-name='Path 11' d='M2 0V-19.17h8.478a5.441 5.441 0 0 1 2.444.554 6.321 6.321 0 0 1 1.931 1.458 6.88 6.88 0 0 1 1.269 2.052 6.172 6.172 0 0 1 .459 2.308 6.375 6.375 0 0 1-.932 3.389 5.347 5.347 0 0 1-2.524 2.2L17.5 0H13.311L9.4-6.426H5.724V0ZM5.724-9.693H10.4a1.97 1.97 0 0 0 .958-.243 2.452 2.452 0 0 0 .77-.661 3.3 3.3 0 0 0 .513-.985 3.818 3.818 0 0 0 .189-1.215 3.462 3.462 0 0 0-.216-1.242 3.241 3.241 0 0 0-.58-.985 2.625 2.625 0 0 0-.837-.648 2.173 2.173 0 0 0-.959-.23H5.724ZM25.758.27A7.851 7.851 0 0 1 22.68-.311 7.058 7.058 0 0 1 20.331-1.89a7.011 7.011 0 0 1-1.5-2.322 7.452 7.452 0 0 1-.526-2.781 7.88 7.88 0 0 1 .513-2.849A6.952 6.952 0 0 1 20.3-12.191 7.09 7.09 0 0 1 22.667-13.8a7.864 7.864 0 0 1 3.119-.594 7.669 7.669 0 0 1 3.092.594A7.109 7.109 0 0 1 31.2-12.2a6.77 6.77 0 0 1 1.458 2.322 7.733 7.733 0 0 1 .5 2.754q0 .351-.014.675a2.746 2.746 0 0 1-.067.54H22.14a4.2 4.2 0 0 0 .405 1.485 3.67 3.67 0 0 0 .837 1.107 3.645 3.645 0 0 0 1.161.7 3.813 3.813 0 0 0 1.35.243A4.171 4.171 0 0 0 27.932-2.9a2.787 2.787 0 0 0 1.309-1.391l3.1.864a6.312 6.312 0 0 1-2.5 2.66A7.741 7.741 0 0 1 25.758.27ZM29.43-8.262a3.761 3.761 0 0 0-1.175-2.551 3.59 3.59 0 0 0-2.524-.958 3.6 3.6 0 0 0-1.364.256 3.558 3.558 0 0 0-1.12.716 3.708 3.708 0 0 0-.8 1.107 3.9 3.9 0 0 0-.364 1.431ZM39.231.27a5.367 5.367 0 0 1-1.917-.338 4.608 4.608 0 0 1-1.539-.945A4.4 4.4 0 0 1 34.763-2.43 4.293 4.293 0 0 1 34.4-4.212a3.926 3.926 0 0 1 .445-1.85 4.241 4.241 0 0 1 1.242-1.444 6.157 6.157 0 0 1 1.9-.931 8.3 8.3 0 0 1 2.43-.338 10.471 10.471 0 0 1 1.85.162 7.533 7.533 0 0 1 1.606.459v-.81a2.836 2.836 0 0 0-.8-2.16 3.312 3.312 0 0 0-2.362-.756 6.257 6.257 0 0 0-2.214.405 10.282 10.282 0 0 0-2.214 1.188l-1.107-2.3a10.445 10.445 0 0 1 5.886-1.809 6.9 6.9 0 0 1 4.738 1.5 5.491 5.491 0 0 1 1.688 4.334v4.4a1.271 1.271 0 0 0 .2.81.887.887 0 0 0 .662.27V0a8.055 8.055 0 0 1-1.593.189A2.412 2.412 0 0 1 45.185-.27 1.973 1.973 0 0 1 44.5-1.485l-.081-.783a6.261 6.261 0 0 1-2.3 1.89A6.59 6.59 0 0 1 39.231.27Zm1.026-2.646A4.713 4.713 0 0 0 42-2.7a3.161 3.161 0 0 0 1.282-.864 1.3 1.3 0 0 0 .594-1.026V-6.21a8.858 8.858 0 0 0-1.4-.392 7.562 7.562 0 0 0-1.458-.148 3.865 3.865 0 0 0-2.3.635 1.905 1.905 0 0 0-.891 1.606 1.933 1.933 0 0 0 .7 1.526A2.548 2.548 0 0 0 40.257-2.376Zm9.72-4.7a7.7 7.7 0 0 1 .513-2.808A6.838 6.838 0 0 1 51.975-12.2 7.228 7.228 0 0 1 54.324-13.8a7.766 7.766 0 0 1 3.1-.594 7.441 7.441 0 0 1 3.955 1 6.381 6.381 0 0 1 2.444 2.619l-3.537 1.08a3.177 3.177 0 0 0-1.215-1.2 3.4 3.4 0 0 0-1.674-.418A3.446 3.446 0 0 0 55.944-11a3.584 3.584 0 0 0-1.174.864A4 4 0 0 0 53.986-8.8 5.044 5.044 0 0 0 53.7-7.074 4.837 4.837 0 0 0 54-5.346 4.356 4.356 0 0 0 54.8-4a3.5 3.5 0 0 0 1.174.878 3.384 3.384 0 0 0 1.431.31 3.47 3.47 0 0 0 1.8-.486 2.733 2.733 0 0 0 1.147-1.188L63.882-3.4a5.946 5.946 0 0 1-2.4 2.646A7.552 7.552 0 0 1 57.456.27a7.766 7.766 0 0 1-3.1-.594A7.123 7.123 0 0 1 52-1.931 7.128 7.128 0 0 1 50.5-4.28 7.556 7.556 0 0 1 49.977-7.074Zm24.6 6.345a16.145 16.145 0 0 1-1.782.648 7.486 7.486 0 0 1-2.214.324A5.139 5.139 0 0 1 69.161.054 3.117 3.117 0 0 1 68-.553a2.967 2.967 0 0 1-.8-1.08 3.909 3.909 0 0 1-.3-1.607v-8.127H65.043v-2.781h1.863v-4.59h3.618v4.59h2.97v2.781h-2.97v6.912a1.286 1.286 0 0 0 .392 1.067 1.494 1.494 0 0 0 .959.31 3.328 3.328 0 0 0 1.107-.189q.54-.189.864-.324ZM128.655 0V-19.17h8.127a5.441 5.441 0 0 1 2.443.554 6.321 6.321 0 0 1 1.93 1.458 6.88 6.88 0 0 1 1.269 2.052 6.172 6.172 0 0 1 .459 2.308 6.653 6.653 0 0 1-.432 2.363A6.56 6.56 0 0 1 141.237-8.4a5.969 5.969 0 0 1-1.89 1.431 5.468 5.468 0 0 1-2.43.54h-4.536V0Zm3.726-9.693h4.32a2.134 2.134 0 0 0 1.714-.837A3.463 3.463 0 0 0 139.1-12.8a3.735 3.735 0 0 0-.216-1.309 3.181 3.181 0 0 0-.567-.985 2.256 2.256 0 0 0-.824-.608 2.413 2.413 0 0 0-.958-.2h-4.158ZM145.1-19.71h3.618V-4.536a1.786 1.786 0 0 0 .378 1.215 1.358 1.358 0 0 0 1.08.432A2.71 2.71 0 0 0 150.89-3a4.84 4.84 0 0 0 .743-.27l.486 2.754a7 7 0 0 1-1.7.54 9.28 9.28 0 0 1-1.755.189 3.623 3.623 0 0 1-2.633-.9 3.429 3.429 0 0 1-.932-2.579ZM157.545.27a5.367 5.367 0 0 1-1.917-.338 4.608 4.608 0 0 1-1.539-.945 4.4 4.4 0 0 1-1.012-1.418 4.293 4.293 0 0 1-.365-1.782 3.926 3.926 0 0 1 .445-1.85A4.241 4.241 0 0 1 154.4-7.506a6.157 6.157 0 0 1 1.9-.931 8.3 8.3 0 0 1 2.43-.338 10.47 10.47 0 0 1 1.85.162 7.533 7.533 0 0 1 1.606.459v-.81a2.836 2.836 0 0 0-.8-2.16 3.312 3.312 0 0 0-2.363-.756 6.257 6.257 0 0 0-2.214.405 10.281 10.281 0 0 0-2.214 1.188l-1.107-2.3a10.445 10.445 0 0 1 5.886-1.809 6.9 6.9 0 0 1 4.739 1.5 5.491 5.491 0 0 1 1.688 4.334v4.4a1.271 1.271 0 0 0 .2.81.887.887 0 0 0 .661.27V0a8.055 8.055 0 0 1-1.593.189A2.412 2.412 0 0 1 163.5-.27a1.973 1.973 0 0 1-.689-1.215l-.081-.783a6.262 6.262 0 0 1-2.295 1.89A6.59 6.59 0 0 1 157.545.27Zm1.026-2.646a4.713 4.713 0 0 0 1.742-.324 3.161 3.161 0 0 0 1.283-.864 1.3 1.3 0 0 0 .594-1.026V-6.21a8.858 8.858 0 0 0-1.4-.392 7.562 7.562 0 0 0-1.458-.148 3.865 3.865 0 0 0-2.295.635 1.905 1.905 0 0 0-.891 1.606 1.933 1.933 0 0 0 .7 1.526A2.548 2.548 0 0 0 158.571-2.376Zm10.557 5.13a6.98 6.98 0 0 0 .891.2 4.855 4.855 0 0 0 .729.068 1.548 1.548 0 0 0 .648-.135 1.388 1.388 0 0 0 .54-.473 4.613 4.613 0 0 0 .486-.931q.243-.594.513-1.485l-5.589-14.148h3.726l3.834 11.016 3.4-11.016h3.4L175.77 2.808a5.066 5.066 0 0 1-1.755 2.43 4.935 4.935 0 0 1-3.078.945 5.852 5.852 0 0 1-.878-.068 5.611 5.611 0 0 1-.932-.229Z' transform='translate(3 33.587)' fill='%23fff'/%3E%3Cg id='Group_5' data-name='Group 5' transform='translate(83.211)'%3E%3Cg id='Group_10' data-name='Group 10'%3E%3Cg id='Ellipse_8' data-name='Ellipse 8' transform='translate(18.197 0) rotate(60)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.579' cy='8.689' rx='20.579' ry='8.689' stroke='none'/%3E%3Cellipse cx='20.579' cy='8.689' rx='19.279' ry='7.389' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_9' data-name='Ellipse 9' transform='translate(-0.211 13.587)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.5' cy='8.5' rx='20.5' ry='8.5' stroke='none'/%3E%3Cellipse cx='20.5' cy='8.5' rx='19.2' ry='7.2' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_10' data-name='Ellipse 10' transform='translate(38.776 8.689) rotate(120)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.579' cy='8.689' rx='20.579' ry='8.689' stroke='none'/%3E%3Cellipse cx='20.579' cy='8.689' rx='19.279' ry='7.389' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath id='Path_1' data-name='Path 1' d='M408.4 30.28l-4.563 7.985 4.563 6.274h7.7l4.706-6.844L416.81 30.28Z' transform='translate(-11.246 -2.736)' fill='%2361dafb'/%3E%3Cpath id='Polygon_2' data-name='Polygon 2' d='M26.2 12.227a2.645 2.645 0 0 1 4.523 2.6l-.018.048a2.645 2.645 0 0 0 2.04 3.529l.087.015a2.645 2.645 0 0 1 0 5.216l-.087.015a2.645 2.645 0 0 0-2.04 3.529l.018.048a2.645 2.645 0 0 1-4.523 2.6h0a2.645 2.645 0 0 0-4.089 0h0a2.645 2.645 0 0 1-4.523-2.6l.018-.048a2.645 2.645 0 0 0-2.04-3.529l-.087-.015a2.645 2.645 0 0 1 0-5.216l.087-.015a2.645 2.645 0 0 0 2.04-3.529l-.018-.048a2.645 2.645 0 0 1 4.523-2.6h0a2.645 2.645 0 0 0 4.089 0Z' transform='translate(390.665 4.291) rotate(30)' fill='%2300f2fe'/%3E%3Cpath id='Polygon_3' data-name='Polygon 3' d='M5.689 1.122a1 1 0 0 1 1.621 0l4.544 6.292A1 1 0 0 1 11.044 9H1.956a1 1 0 0 1-.811-1.585Z' transform='translate(407 27.544) rotate(90)' fill='%23010326'/%3E%3C/g%3E%3C/svg%3E");
+ margin-right: 1rem;
+ /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http:https://www.w3.org/2000/svg' width='179.712' height='60.577' viewBox='0 0 179.712 60.577'%3E%3Cg id='Group_12' data-name='Group 12' transform='translate(-301.998 -4.291)'%3E%3Cg id='Group_11' data-name='Group 11' transform='translate(297 12.413)'%3E%3Cpath id='Path_11' data-name='Path 11' d='M2 0V-19.17h8.478a5.441 5.441 0 0 1 2.444.554 6.321 6.321 0 0 1 1.931 1.458 6.88 6.88 0 0 1 1.269 2.052 6.172 6.172 0 0 1 .459 2.308 6.375 6.375 0 0 1-.932 3.389 5.347 5.347 0 0 1-2.524 2.2L17.5 0H13.311L9.4-6.426H5.724V0ZM5.724-9.693H10.4a1.97 1.97 0 0 0 .958-.243 2.452 2.452 0 0 0 .77-.661 3.3 3.3 0 0 0 .513-.985 3.818 3.818 0 0 0 .189-1.215 3.462 3.462 0 0 0-.216-1.242 3.241 3.241 0 0 0-.58-.985 2.625 2.625 0 0 0-.837-.648 2.173 2.173 0 0 0-.959-.23H5.724ZM25.758.27A7.851 7.851 0 0 1 22.68-.311 7.058 7.058 0 0 1 20.331-1.89a7.011 7.011 0 0 1-1.5-2.322 7.452 7.452 0 0 1-.526-2.781 7.88 7.88 0 0 1 .513-2.849A6.952 6.952 0 0 1 20.3-12.191 7.09 7.09 0 0 1 22.667-13.8a7.864 7.864 0 0 1 3.119-.594 7.669 7.669 0 0 1 3.092.594A7.109 7.109 0 0 1 31.2-12.2a6.77 6.77 0 0 1 1.458 2.322 7.733 7.733 0 0 1 .5 2.754q0 .351-.014.675a2.746 2.746 0 0 1-.067.54H22.14a4.2 4.2 0 0 0 .405 1.485 3.67 3.67 0 0 0 .837 1.107 3.645 3.645 0 0 0 1.161.7 3.813 3.813 0 0 0 1.35.243A4.171 4.171 0 0 0 27.932-2.9a2.787 2.787 0 0 0 1.309-1.391l3.1.864a6.312 6.312 0 0 1-2.5 2.66A7.741 7.741 0 0 1 25.758.27ZM29.43-8.262a3.761 3.761 0 0 0-1.175-2.551 3.59 3.59 0 0 0-2.524-.958 3.6 3.6 0 0 0-1.364.256 3.558 3.558 0 0 0-1.12.716 3.708 3.708 0 0 0-.8 1.107 3.9 3.9 0 0 0-.364 1.431ZM39.231.27a5.367 5.367 0 0 1-1.917-.338 4.608 4.608 0 0 1-1.539-.945A4.4 4.4 0 0 1 34.763-2.43 4.293 4.293 0 0 1 34.4-4.212a3.926 3.926 0 0 1 .445-1.85 4.241 4.241 0 0 1 1.242-1.444 6.157 6.157 0 0 1 1.9-.931 8.3 8.3 0 0 1 2.43-.338 10.471 10.471 0 0 1 1.85.162 7.533 7.533 0 0 1 1.606.459v-.81a2.836 2.836 0 0 0-.8-2.16 3.312 3.312 0 0 0-2.362-.756 6.257 6.257 0 0 0-2.214.405 10.282 10.282 0 0 0-2.214 1.188l-1.107-2.3a10.445 10.445 0 0 1 5.886-1.809 6.9 6.9 0 0 1 4.738 1.5 5.491 5.491 0 0 1 1.688 4.334v4.4a1.271 1.271 0 0 0 .2.81.887.887 0 0 0 .662.27V0a8.055 8.055 0 0 1-1.593.189A2.412 2.412 0 0 1 45.185-.27 1.973 1.973 0 0 1 44.5-1.485l-.081-.783a6.261 6.261 0 0 1-2.3 1.89A6.59 6.59 0 0 1 39.231.27Zm1.026-2.646A4.713 4.713 0 0 0 42-2.7a3.161 3.161 0 0 0 1.282-.864 1.3 1.3 0 0 0 .594-1.026V-6.21a8.858 8.858 0 0 0-1.4-.392 7.562 7.562 0 0 0-1.458-.148 3.865 3.865 0 0 0-2.3.635 1.905 1.905 0 0 0-.891 1.606 1.933 1.933 0 0 0 .7 1.526A2.548 2.548 0 0 0 40.257-2.376Zm9.72-4.7a7.7 7.7 0 0 1 .513-2.808A6.838 6.838 0 0 1 51.975-12.2 7.228 7.228 0 0 1 54.324-13.8a7.766 7.766 0 0 1 3.1-.594 7.441 7.441 0 0 1 3.955 1 6.381 6.381 0 0 1 2.444 2.619l-3.537 1.08a3.177 3.177 0 0 0-1.215-1.2 3.4 3.4 0 0 0-1.674-.418A3.446 3.446 0 0 0 55.944-11a3.584 3.584 0 0 0-1.174.864A4 4 0 0 0 53.986-8.8 5.044 5.044 0 0 0 53.7-7.074 4.837 4.837 0 0 0 54-5.346 4.356 4.356 0 0 0 54.8-4a3.5 3.5 0 0 0 1.174.878 3.384 3.384 0 0 0 1.431.31 3.47 3.47 0 0 0 1.8-.486 2.733 2.733 0 0 0 1.147-1.188L63.882-3.4a5.946 5.946 0 0 1-2.4 2.646A7.552 7.552 0 0 1 57.456.27a7.766 7.766 0 0 1-3.1-.594A7.123 7.123 0 0 1 52-1.931 7.128 7.128 0 0 1 50.5-4.28 7.556 7.556 0 0 1 49.977-7.074Zm24.6 6.345a16.145 16.145 0 0 1-1.782.648 7.486 7.486 0 0 1-2.214.324A5.139 5.139 0 0 1 69.161.054 3.117 3.117 0 0 1 68-.553a2.967 2.967 0 0 1-.8-1.08 3.909 3.909 0 0 1-.3-1.607v-8.127H65.043v-2.781h1.863v-4.59h3.618v4.59h2.97v2.781h-2.97v6.912a1.286 1.286 0 0 0 .392 1.067 1.494 1.494 0 0 0 .959.31 3.328 3.328 0 0 0 1.107-.189q.54-.189.864-.324ZM128.655 0V-19.17h8.127a5.441 5.441 0 0 1 2.443.554 6.321 6.321 0 0 1 1.93 1.458 6.88 6.88 0 0 1 1.269 2.052 6.172 6.172 0 0 1 .459 2.308 6.653 6.653 0 0 1-.432 2.363A6.56 6.56 0 0 1 141.237-8.4a5.969 5.969 0 0 1-1.89 1.431 5.468 5.468 0 0 1-2.43.54h-4.536V0Zm3.726-9.693h4.32a2.134 2.134 0 0 0 1.714-.837A3.463 3.463 0 0 0 139.1-12.8a3.735 3.735 0 0 0-.216-1.309 3.181 3.181 0 0 0-.567-.985 2.256 2.256 0 0 0-.824-.608 2.413 2.413 0 0 0-.958-.2h-4.158ZM145.1-19.71h3.618V-4.536a1.786 1.786 0 0 0 .378 1.215 1.358 1.358 0 0 0 1.08.432A2.71 2.71 0 0 0 150.89-3a4.84 4.84 0 0 0 .743-.27l.486 2.754a7 7 0 0 1-1.7.54 9.28 9.28 0 0 1-1.755.189 3.623 3.623 0 0 1-2.633-.9 3.429 3.429 0 0 1-.932-2.579ZM157.545.27a5.367 5.367 0 0 1-1.917-.338 4.608 4.608 0 0 1-1.539-.945 4.4 4.4 0 0 1-1.012-1.418 4.293 4.293 0 0 1-.365-1.782 3.926 3.926 0 0 1 .445-1.85A4.241 4.241 0 0 1 154.4-7.506a6.157 6.157 0 0 1 1.9-.931 8.3 8.3 0 0 1 2.43-.338 10.47 10.47 0 0 1 1.85.162 7.533 7.533 0 0 1 1.606.459v-.81a2.836 2.836 0 0 0-.8-2.16 3.312 3.312 0 0 0-2.363-.756 6.257 6.257 0 0 0-2.214.405 10.281 10.281 0 0 0-2.214 1.188l-1.107-2.3a10.445 10.445 0 0 1 5.886-1.809 6.9 6.9 0 0 1 4.739 1.5 5.491 5.491 0 0 1 1.688 4.334v4.4a1.271 1.271 0 0 0 .2.81.887.887 0 0 0 .661.27V0a8.055 8.055 0 0 1-1.593.189A2.412 2.412 0 0 1 163.5-.27a1.973 1.973 0 0 1-.689-1.215l-.081-.783a6.262 6.262 0 0 1-2.295 1.89A6.59 6.59 0 0 1 157.545.27Zm1.026-2.646a4.713 4.713 0 0 0 1.742-.324 3.161 3.161 0 0 0 1.283-.864 1.3 1.3 0 0 0 .594-1.026V-6.21a8.858 8.858 0 0 0-1.4-.392 7.562 7.562 0 0 0-1.458-.148 3.865 3.865 0 0 0-2.295.635 1.905 1.905 0 0 0-.891 1.606 1.933 1.933 0 0 0 .7 1.526A2.548 2.548 0 0 0 158.571-2.376Zm10.557 5.13a6.98 6.98 0 0 0 .891.2 4.855 4.855 0 0 0 .729.068 1.548 1.548 0 0 0 .648-.135 1.388 1.388 0 0 0 .54-.473 4.613 4.613 0 0 0 .486-.931q.243-.594.513-1.485l-5.589-14.148h3.726l3.834 11.016 3.4-11.016h3.4L175.77 2.808a5.066 5.066 0 0 1-1.755 2.43 4.935 4.935 0 0 1-3.078.945 5.852 5.852 0 0 1-.878-.068 5.611 5.611 0 0 1-.932-.229Z' transform='translate(3 33.587)' fill='%23fff'/%3E%3Cg id='Group_5' data-name='Group 5' transform='translate(83.211)'%3E%3Cg id='Group_10' data-name='Group 10'%3E%3Cg id='Ellipse_8' data-name='Ellipse 8' transform='translate(18.197 0) rotate(60)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.579' cy='8.689' rx='20.579' ry='8.689' stroke='none'/%3E%3Cellipse cx='20.579' cy='8.689' rx='19.279' ry='7.389' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_9' data-name='Ellipse 9' transform='translate(-0.211 13.587)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.5' cy='8.5' rx='20.5' ry='8.5' stroke='none'/%3E%3Cellipse cx='20.5' cy='8.5' rx='19.2' ry='7.2' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_10' data-name='Ellipse 10' transform='translate(38.776 8.689) rotate(120)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.579' cy='8.689' rx='20.579' ry='8.689' stroke='none'/%3E%3Cellipse cx='20.579' cy='8.689' rx='19.279' ry='7.389' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath id='Path_1' data-name='Path 1' d='M408.4 30.28l-4.563 7.985 4.563 6.274h7.7l4.706-6.844L416.81 30.28Z' transform='translate(-11.246 -2.736)' fill='%2361dafb'/%3E%3Cpath id='Polygon_2' data-name='Polygon 2' d='M26.2 12.227a2.645 2.645 0 0 1 4.523 2.6l-.018.048a2.645 2.645 0 0 0 2.04 3.529l.087.015a2.645 2.645 0 0 1 0 5.216l-.087.015a2.645 2.645 0 0 0-2.04 3.529l.018.048a2.645 2.645 0 0 1-4.523 2.6h0a2.645 2.645 0 0 0-4.089 0h0a2.645 2.645 0 0 1-4.523-2.6l.018-.048a2.645 2.645 0 0 0-2.04-3.529l-.087-.015a2.645 2.645 0 0 1 0-5.216l.087-.015a2.645 2.645 0 0 0 2.04-3.529l-.018-.048a2.645 2.645 0 0 1 4.523-2.6h0a2.645 2.645 0 0 0 4.089 0Z' transform='translate(390.665 4.291) rotate(30)' fill='%2300f2fe'/%3E%3Cpath id='Polygon_3' data-name='Polygon 3' d='M5.689 1.122a1 1 0 0 1 1.621 0l4.544 6.292A1 1 0 0 1 11.044 9H1.956a1 1 0 0 1-.811-1.585Z' transform='translate(407 27.544) rotate(90)' fill='%23010326'/%3E%3C/g%3E%3C/svg%3E"); */
+ background-image: url("../../images/img-logo.svg");
  background-size: contain;
+ background-repeat: no-repeat;
  transition: all 0.16s ease-in-out;
 }
 
 @media screen and (max-width: 768px) {
  .app-logo {
- width: 132px;
- height: 45px;
+ width: 58px;
+ height: 64px;
+ margin-right: 0;
+ background-image: url("../../images/img-logo-sm.svg");
+ background-position: center center;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .app-logo {
+ width: 50px;
+ height: 64px;
+ margin-right: 0;
+ background-position: center center;
  }
 }
 
@@ -46,8 +67,8 @@
  color: #fff;
  margin-left: 1rem;
  display: block;
- width: 24px;
- height: 24px;
+ width: var(--navbar-icon-size-rg);
+ height: var(--navbar-icon-size-rg);
 }
 
 .header-links > li > a.app-header-btn {
@@ -65,6 +86,8 @@
 }
 
 .header-links > li > a .icon {
+ width: var(--navbar-icon-size-rg);
+ height: var(--navbar-icon-size-rg);
  fill: var(--color-neutral-40);
 }
 
@@ -73,6 +96,8 @@
 }
 
 .header-links > li > a.app-header-btn .icon {
+ width: var(--navbar-icon-size-sm);
+ height: var(--navbar-icon-size-sm);
  fill: var(--color-neutral-20);
 }