diff --git a/src/sass/components/_header.scss b/src/sass/components/_header.scss index 36c86ef..46d2c5f 100644 --- a/src/sass/components/_header.scss +++ b/src/sass/components/_header.scss @@ -34,6 +34,8 @@ z-index: 1; width: 100%; height: 100%; + display: flex; + flex-direction: column; @include transition; } @@ -48,12 +50,16 @@ .header { display: flex; flex-direction: column; - height: 100%; @include transition; + @include screen(md) { + height: 4rem; + flex-direction: row; + } &__top { display: flex; flex-direction: row; + flex-grow: 1; height: 3rem; @include screen(md) { height: 4rem; @@ -89,8 +95,10 @@ cursor: pointer; text-align: center; white-space: nowrap; - @include transition; + @include screen(md) { + display: none; + } &:hover { background-color: $theme-blue; } diff --git a/src/sass/components/_menu.scss b/src/sass/components/_menu.scss index fbd35a2..3718d65 100644 --- a/src/sass/components/_menu.scss +++ b/src/sass/components/_menu.scss @@ -1,11 +1,48 @@ .menu { - max-height: 0px; display: flex; flex-direction: column; @include transition; - overflow: hidden; - &.enabled { - max-height: 100vh; + + @include screen(md) { + flex-direction: row; + } + + // Dark mode special menu + &--dark-mode { + .menu__text { + display: block; + @include screen(md) { + display: none; + } + } + .menu__icon { + display: inline-block; + } + } + + &__nav { + display: flex; + flex-direction: column; + + @include screen(md) { + flex-direction: row; + } + } + &__nav-main { + display: flex; + flex-direction: column; + + @include screen(md) { + flex-direction: row; + } + + &.hidden { + display: none; + + @include screen(md) { + display: flex; + } + } } &__item { color: $white; @@ -16,6 +53,10 @@ cursor: pointer; @include transition; + @include screen(md) { + height: 4rem; + } + &:hover { background-color: $theme-blue; } @@ -42,6 +83,10 @@ text-align: center; @include px(0.5rem); @include py(0.75rem); + + @include screen(md) { + display: none; + } } &__text { display: inline-block; @@ -94,4 +139,4 @@ text-decoration: underline; } } -} +} \ No newline at end of file diff --git a/src/sass/components/_postheader.scss b/src/sass/components/_postheader.scss index 856e353..f899733 100644 --- a/src/sass/components/_postheader.scss +++ b/src/sass/components/_postheader.scss @@ -8,7 +8,7 @@ align-items: center; } &--tag-text { - margin-left: 0.5rem; + margin-right: 0.5rem; color: $white; } &--tag-color { diff --git a/src/sass/ghost.scss b/src/sass/ghost.scss index c6fe842..b6b6b11 100644 --- a/src/sass/ghost.scss +++ b/src/sass/ghost.scss @@ -131,3 +131,12 @@ white-space: nowrap; } } + +#darkMode { + .menu__text { + display: block; + @include screen(md) { + display: none; + } + } +} \ No newline at end of file