diff --git a/public/assets/css/general.css b/public/assets/css/general.css index 89dd16b6..aab9f23a 100644 --- a/public/assets/css/general.css +++ b/public/assets/css/general.css @@ -361,7 +361,7 @@ table { z-index: 1; } -.nav-bar-logo, .nav-bar-title, .nav-bar-link { +.nav-bar-logo, .nav-bar-title, .nav-bar-link, .nav-bar-subtitle { padding: 2rem 0.5rem 1.5rem 0.5rem; display: inline-block; color: black; @@ -372,6 +372,15 @@ table { vertical-align: top; } +.nav-bar-subtitle { + font-size: small; + color:grey; + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); +} + .nav-bar-link { border-bottom: 2px solid white; } diff --git a/public/assets/css/mediaQueries.css b/public/assets/css/mediaQueries.css index 227e1e4f..7733f978 100644 --- a/public/assets/css/mediaQueries.css +++ b/public/assets/css/mediaQueries.css @@ -17,6 +17,29 @@ } } +@media (max-width: 850px) { + .nav-bar-title, .nav-bar-subtitle { + padding-bottom: 0px; + } + + .nav-bar-subtitle { + left: auto; + right: 0px; + top: auto; + transform: none; + padding-right: 2rem; + } + + .nav-bar-link-section { + position: relative; + padding-left: 0px; + } + + .nav-bar { + height: 8rem; + } +} + @media (max-width: 750px ) { .column--med-10 { @@ -32,10 +55,10 @@ @media (max-width: 475px) { .nav-bar { - height: 8rem; + height: 12rem; } - .nav-bar-title { + .nav-bar-title, .nav-bar-subtitle { padding-bottom: 0px; } @@ -44,6 +67,14 @@ padding-left: 0px; } + .nav-bar-subtitle { + position: relative; + display: inline-block; + left: auto; + top: auto; + transform: none; + } + .row--full-height { height: calc(100% - 11rem); diff --git a/views/partials/topBar.handlebars b/views/partials/topBar.handlebars index f3a4cb1c..a8f84f3d 100644 --- a/views/partials/topBar.handlebars +++ b/views/partials/topBar.handlebars @@ -1,6 +1,7 @@