diff --git a/src/header.pug b/src/header.pug index 55d364b..a7549f9 100644 --- a/src/header.pug +++ b/src/header.pug @@ -16,5 +16,5 @@ details #profile img(src="/images/user.jpg") span - | Profile + | Profile span.icon-arrow-down diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 0000000..076235b --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,78 @@ + +#header { + background-color: $color-white; + color: $color-black; + //position: relative; + //@include border-shadow(bottom); + box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); + border: solid $color-white; + border-width: 1px 0; + display: flex; + //flex-grow: 0; + //flex-basis : 150px; + flex-shrink: 0; + align-items: center; + padding: 1em 0.4em; + + > * { + padding: 0 1.8rem; + } +} + +#button-toggle { + @include icon('menu'); + display: none; + color: $color-black; + font-size: 2em; + padding: 0.72em; + cursor: pointer; +} + +#logo { + flex: 1 1 0; +} + +#notifications-button { + @include icon(bell); + font-size: 2em; + cursor: pointer; + list-style-type: none; +} + +#notifications { + position: absolute; + right: 0; + bottom: 0; + height: 0; + left: 0; + z-index: 1; + + > div { + position: absolute; + top: 0; + right: 0; + } +} + +#profile { + > * { + vertical-align: middle; + } + + img { + width: 48px; + height: 48px; + object-fit: cover; + object-position: center; + border-radius: 100%; + margin-right: 1rem; + } + + span { + color: $color-black; + font-size: 16px; + font-weight: 600; + letter-spacing: 0.38px; + padding: 0 0.5rem; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 8e0598b..457c9b4 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -10,4 +10,5 @@ @import 'content'; // @import 'members'; +@import 'header'; @import 'menu'; \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 6ce8dc5..f3fa214 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -68,7 +68,7 @@ h4 { @extend %frame; padding: 1em; } - +/* #header { background-color: $color-white; color: $color-black; @@ -104,7 +104,7 @@ h4 { #notifications-button { @include icon(bell); - font-size: 1.5em; + font-size: 2em; cursor: pointer; list-style-type: none; } @@ -131,13 +131,14 @@ h4 { img { margin-right: 0.5em; - width: 43px; - height: 43px; + width: 48px; + height: 48px; object-fit: cover; object-position: center; border-radius: 100%; } } +*/ .layer { position: absolute;