fix(client): minor issues with header/footer styles
This commit is contained in:
Valeriy
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
232036e588
commit
8f07c8608e
@ -1,11 +1,10 @@
|
||||
footer{
|
||||
footer {
|
||||
position: absolute;
|
||||
background-color: #E0E0E0;
|
||||
color:#555555;
|
||||
background-color: #e0e0e0;
|
||||
color: #555555;
|
||||
background-size: cover;
|
||||
font-size: .9em;
|
||||
width:100%;
|
||||
margin-top: 5px;
|
||||
font-size: 0.9em;
|
||||
width: 100%;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
|
||||
@ -7,13 +7,13 @@ header {
|
||||
|
||||
#top-nav {
|
||||
background: #006400;
|
||||
height: 40px;
|
||||
margin-bottom: 0px;
|
||||
height: 38px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
#top-nav .home-link {
|
||||
@ -24,12 +24,11 @@ header {
|
||||
#top-nav img {
|
||||
max-height: 25px;
|
||||
min-width: 35px;
|
||||
margin: 0 5px 0 10px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
#top-right-nav {
|
||||
display: flex;
|
||||
width: 270px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
justify-content: space-around;
|
||||
@ -90,13 +89,6 @@ li.user-state-link > a:focus {
|
||||
background-color: #006400 !important;
|
||||
}
|
||||
|
||||
#top-right-nav {
|
||||
margin-left: 20px;
|
||||
}
|
||||
#top-right-nav li:last-child {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
#top-right-nav li > a:hover,
|
||||
#top-right-nav li > a:focus {
|
||||
text-decoration: none;
|
||||
@ -112,14 +104,54 @@ li.user-state-link > a:focus {
|
||||
|
||||
/* Search bar */
|
||||
.fcc_searchBar {
|
||||
flex-grow: 0.8;
|
||||
flex-grow: 1;
|
||||
padding: 2px 10px 0;
|
||||
}
|
||||
.ais-SearchBox-form {
|
||||
|
||||
.fcc_searchBar .ais-SearchBox-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ais-Hits {
|
||||
background-color: #fff;
|
||||
|
||||
.fcc_searchBar .ais-Hits {
|
||||
background-color: white;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media (max-width: 735px) {
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: 80%;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navbar logo */
|
||||
|
||||
.logo-glyph {
|
||||
height: 30px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 735px) {
|
||||
.logo-glyph {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
margin-right: 50px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
@ -129,8 +161,8 @@ li.user-state-link > a:focus {
|
||||
width: 100%;
|
||||
background-color: #006400;
|
||||
color: #fff;
|
||||
margin-top: -40px;
|
||||
height: 40px;
|
||||
margin-top: -38px;
|
||||
height: 38px;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
@ -143,23 +175,13 @@ li.user-state-link > a:focus {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mobile-menu .header-search {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
@media (max-width: 734px) {
|
||||
#top-nav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.opened #top-right-nav {
|
||||
transform: translate(0, 40px);
|
||||
transform: translate(0, 38px);
|
||||
padding-bottom: 10px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -29,18 +29,12 @@ class Header extends Component {
|
||||
return (
|
||||
<header className={this.state.isMenuOpened ? 'opened' : null}>
|
||||
<nav id='top-nav'>
|
||||
|
||||
<Media query='(min-width: 735px)'>
|
||||
<Fragment>
|
||||
<Link className='home-link' to='/'>
|
||||
<NavLogo />
|
||||
</Link>
|
||||
{disableSettings
|
||||
? null
|
||||
: <div className="header-search">
|
||||
<FCCSearch />
|
||||
</div>
|
||||
}
|
||||
{disableSettings ? null : <FCCSearch />}
|
||||
</Fragment>
|
||||
</Media>
|
||||
|
||||
@ -49,20 +43,12 @@ class Header extends Component {
|
||||
<Link to='/learn'>Curriculum</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href='/forum'
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
<a href='/forum' rel='noopener noreferrer' target='_blank'>
|
||||
Forum
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href='/news'
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
>
|
||||
<a href='/news' rel='noopener noreferrer' target='_blank'>
|
||||
News
|
||||
</a>
|
||||
</li>
|
||||
@ -73,22 +59,16 @@ class Header extends Component {
|
||||
</nav>
|
||||
|
||||
<Media query='(max-width: 734px)'>
|
||||
<div className="mobile-menu">
|
||||
<div className='mobile-menu'>
|
||||
<Link className='home-link' to='/'>
|
||||
<NavLogo />
|
||||
</Link>
|
||||
{disableSettings
|
||||
? null
|
||||
: <div className="header-search">
|
||||
<FCCSearch />
|
||||
</div>
|
||||
}
|
||||
<span className="menu-button" onClick={this.toggleClass}>
|
||||
{disableSettings ? null : <FCCSearch />}
|
||||
<span className='menu-button' onClick={this.toggleClass}>
|
||||
Menu
|
||||
</span>
|
||||
</div>
|
||||
</Media>
|
||||
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@ -82,107 +82,6 @@
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
|
||||
.fcc_searchBar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fcc_searchBar .ais-Hits {
|
||||
background-color: white;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.fcc_searchBar .ais-Hits {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* NavBar */
|
||||
|
||||
.navBar {
|
||||
background: #006400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 38px !important;
|
||||
max-height: 38px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.navContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.navContainer {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.navContainer {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navbar logo */
|
||||
|
||||
.logo-glyph {
|
||||
height: 30px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 735px) {
|
||||
.logo-glyph {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
margin-right: 50px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navbar Toggle */
|
||||
|
||||
.navbar-toggle {
|
||||
border: 1px solid #fff;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* 404 */
|
||||
|
||||
.flexWrapper {
|
||||
@ -215,10 +114,6 @@
|
||||
|
||||
/* SideNav */
|
||||
|
||||
.body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.caretStyle {
|
||||
border-top: 8px dashed;
|
||||
border-right: 6px solid transparent;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
html {
|
||||
font-family: 'Lato', sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
@ -39,7 +40,6 @@ template {
|
||||
}
|
||||
a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
a:active,
|
||||
a:hover {
|
||||
@ -203,7 +203,6 @@ body {
|
||||
word-wrap: break-word;
|
||||
font-kerning: normal;
|
||||
-moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
|
||||
-ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
|
||||
-webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
|
||||
font-feature-settings: 'kern', 'liga', 'clig', 'calt';
|
||||
}
|
||||
@ -575,7 +574,6 @@ th {
|
||||
border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
|
||||
font-feature-settings: 'tnum';
|
||||
-moz-font-feature-settings: 'tnum';
|
||||
-ms-font-feature-settings: 'tnum';
|
||||
-webkit-font-feature-settings: 'tnum';
|
||||
padding-left: 0.96667rem;
|
||||
padding-right: 0.96667rem;
|
||||
@ -623,5 +621,5 @@ pre tt:after {
|
||||
}
|
||||
}
|
||||
.default-layout {
|
||||
margin-top: 34px;
|
||||
margin-top: 38px;
|
||||
}
|
||||
Reference in New Issue
Block a user