Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design header

Browse source
This commit is contained in:
Chneemann 2024-03-22 23:51:51 +01:00
parent d71cd1ddca
commit 44a797df34
8 changed files with 118 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app/shared/components/header/header.component.html
View file

@ -1 +1,9 @@
<p>header works!</p>
<section>
<div class="headline">Kanban Project Management Tool</div>
<div class="left-frame">
<div class="img-help">
<img src="./../../../../assets/img/sidebar/help.svg" alt="" />
</div>
<div class="img-user"></div>
</div>
</section>

47
src/app/shared/components/header/header.component.scss
View file

@ -0,0 +1,47 @@
section {
display: flex;
justify-content: space-between;
align-items: center;
height: calc(100% - 3px);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
}
.headline {
align-self: center;
font-size: 20px;
padding-left: 116px;
}
.left-frame {
display: flex;
justify-content: center;
align-items: center;
padding-right: 20px;
}
.img-user {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border: 2px solid var(--black);
border-radius: 25px;
background-color: var(--white);
color: var(--light-blue);
cursor: pointer;
&:hover {
background-color: var(--very-light-gray);
}
}
.img-help {
display: flex;
align-items: center;
width: 56px;
cursor: pointer;
&:hover {
filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
brightness(92%) contrast(92%);
}
}

13
src/app/shared/components/sidebar/sidebar.component.scss
View file

@ -34,9 +34,14 @@ nav {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 400;
width: 100%;
color: var(--white);
color: var(--lightgray);
}
&:hover {
background-color: var(--very-dark-blue);
}
&:active {
background-color: var(--very-dark-blue);
}
}
@ -44,14 +49,14 @@ nav {
display: flex;
align-items: center;
flex-direction: column;
margin: 66px 0;
margin-bottom: 30px;
div {
width: 105px;
padding: 8px;
display: flex;
text-align: center;
justify-content: center;
color: var(--white);
color: var(--lightgray);
padding-top: 2vh;
padding-bottom: 2vh;
cursor: pointer;

BIN
src/assets/fonts/inter/inter-v13-latin-600.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/inter/inter-v13-latin-800.woff2 Normal file
View file

Binary file not shown.

BIN
src/assets/fonts/inter/inter-v13-latin-regular.woff2 Normal file
View file

Binary file not shown.

3
src/assets/img/sidebar/help.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.95 16.9658C10.3 16.9658 10.5958 16.845 10.8375 16.6033C11.0792 16.3617 11.2 16.0658 11.2 15.7158C11.2 15.3658 11.0792 15.07 10.8375 14.8283C10.5958 14.5867 10.3 14.4658 9.95 14.4658C9.6 14.4658 9.30417 14.5867 9.0625 14.8283C8.82083 15.07 8.7 15.3658 8.7 15.7158C8.7 16.0658 8.82083 16.3617 9.0625 16.6033C9.30417 16.845 9.6 16.9658 9.95 16.9658ZM10 20.9658C8.61667 20.9658 7.31667 20.7033 6.1 20.1783C4.88333 19.6533 3.825 18.9408 2.925 18.0408C2.025 17.1408 1.3125 16.0825 0.7875 14.8658C0.2625 13.6492 0 12.3492 0 10.9658C0 9.58249 0.2625 8.28249 0.7875 7.06582C1.3125 5.84915 2.025 4.79082 2.925 3.89082C3.825 2.99082 4.88333 2.27832 6.1 1.75332C7.31667 1.22832 8.61667 0.96582 10 0.96582C11.3833 0.96582 12.6833 1.22832 13.9 1.75332C15.1167 2.27832 16.175 2.99082 17.075 3.89082C17.975 4.79082 18.6875 5.84915 19.2125 7.06582C19.7375 8.28249 20 9.58249 20 10.9658C20 12.3492 19.7375 13.6492 19.2125 14.8658C18.6875 16.0825 17.975 17.1408 17.075 18.0408C16.175 18.9408 15.1167 19.6533 13.9 20.1783C12.6833 20.7033 11.3833 20.9658 10 20.9658ZM10 18.9658C12.2333 18.9658 14.125 18.1908 15.675 16.6408C17.225 15.0908 18 13.1992 18 10.9658C18 8.73249 17.225 6.84082 15.675 5.29082C14.125 3.74082 12.2333 2.96582 10 2.96582C7.76667 2.96582 5.875 3.74082 4.325 5.29082C2.775 6.84082 2 8.73249 2 10.9658C2 13.1992 2.775 15.0908 4.325 16.6408C5.875 18.1908 7.76667 18.9658 10 18.9658ZM10.1 6.66582C10.5167 6.66582 10.8792 6.79915 11.1875 7.06582C11.4958 7.33249 11.65 7.66582 11.65 8.06582C11.65 8.43249 11.5375 8.75749 11.3125 9.04082C11.0875 9.32415 10.8333 9.59082 10.55 9.84082C10.1667 10.1742 9.82917 10.5408 9.5375 10.9408C9.24583 11.3408 9.1 11.7908 9.1 12.2908C9.1 12.5242 9.1875 12.72 9.3625 12.8783C9.5375 13.0367 9.74167 13.1158 9.975 13.1158C10.225 13.1158 10.4375 13.0325 10.6125 12.8658C10.7875 12.6992 10.9 12.4908 10.95 12.2408C11.0167 11.8908 11.1667 11.5783 11.4 11.3033C11.6333 11.0283 11.8833 10.7658 12.15 10.5158C12.5333 10.1492 12.8625 9.74915 13.1375 9.31582C13.4125 8.88249 13.55 8.39915 13.55 7.86582C13.55 7.01582 13.2042 6.31999 12.5125 5.77832C11.8208 5.23665 11.0167 4.96582 10.1 4.96582C9.46667 4.96582 8.8625 5.09915 8.2875 5.36582C7.7125 5.63249 7.275 6.04082 6.975 6.59082C6.85833 6.79082 6.82083 7.00332 6.8625 7.22832C6.90417 7.45332 7.01667 7.62415 7.2 7.74082C7.43333 7.87415 7.675 7.91582 7.925 7.86582C8.175 7.81582 8.38333 7.67415 8.55 7.44082C8.73333 7.19082 8.9625 6.99915 9.2375 6.86582C9.5125 6.73249 9.8 6.66582 10.1 6.66582Z" fill="#A8A8A8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

51
src/styles.scss
View file

@ -1,5 +1,7 @@
* {
margin: auto;
margin: 0;
scroll-behavior: smooth;
font-family: "Inter", sans-serif;
}
:root {
@ -7,4 +9,51 @@
--bgContent: #f6f7f8;
--white: #fff;
--black: #000;
--lightgray: #cdcdcd;
--light-blue: #29abe2;
--very-dark-blue: #091931;
--very-light-gray: #f6f7f8;
}
/*------------- SCROLLBAR -------------*/
*::-webkit-scrollbar {
width: 16px;
}
*::-webkit-scrollbar-track {
background: var(--bgSidebar);
}
*::-webkit-scrollbar-thumb {
background-color: var(--lightgray);
border-radius: 10px;
border: 3px solid var(--black);
}
/*------------- FONTS -------------*/
/* inter-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Inter";
font-style: normal;
font-weight: 400;
src: url("./assets/fonts/inter/inter-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Inter";
font-style: normal;
font-weight: 600;
src: url("./assets/fonts/inter/inter-v13-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Inter";
font-style: normal;
font-weight: 800;
src: url("./assets/fonts/inter/inter-v13-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}