diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html index 4f5a95d..d2762ac 100644 --- a/src/app/shared/components/header/header.component.html +++ b/src/app/shared/components/header/header.component.html @@ -1 +1,9 @@ -

header works!

+
+
Kanban Project Management Tool
+
+
+ +
+
+
+
diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss index e69de29..e3dcb49 100644 --- a/src/app/shared/components/header/header.component.scss +++ b/src/app/shared/components/header/header.component.scss @@ -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%); + } +} diff --git a/src/app/shared/components/sidebar/sidebar.component.scss b/src/app/shared/components/sidebar/sidebar.component.scss index 6c175a6..bb5ca01 100644 --- a/src/app/shared/components/sidebar/sidebar.component.scss +++ b/src/app/shared/components/sidebar/sidebar.component.scss @@ -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; diff --git a/src/assets/fonts/inter/inter-v13-latin-600.woff2 b/src/assets/fonts/inter/inter-v13-latin-600.woff2 new file mode 100644 index 0000000..da1c039 Binary files /dev/null and b/src/assets/fonts/inter/inter-v13-latin-600.woff2 differ diff --git a/src/assets/fonts/inter/inter-v13-latin-800.woff2 b/src/assets/fonts/inter/inter-v13-latin-800.woff2 new file mode 100644 index 0000000..39b9673 Binary files /dev/null and b/src/assets/fonts/inter/inter-v13-latin-800.woff2 differ diff --git a/src/assets/fonts/inter/inter-v13-latin-regular.woff2 b/src/assets/fonts/inter/inter-v13-latin-regular.woff2 new file mode 100644 index 0000000..d228a4a Binary files /dev/null and b/src/assets/fonts/inter/inter-v13-latin-regular.woff2 differ diff --git a/src/assets/img/sidebar/help.svg b/src/assets/img/sidebar/help.svg new file mode 100644 index 0000000..363822c --- /dev/null +++ b/src/assets/img/sidebar/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles.scss b/src/styles.scss index 9a3f255..9db9182 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -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+ */ }