dataforge styles & layout
This commit is contained in:
Elinorre
parent
d6e1aef31e
commit
760ea5fe03
@ -14,24 +14,26 @@ const Header = () => {
|
||||
if (window.location.pathname === '/dataforge/apps'){curActive[4] = 'styled';}
|
||||
return(
|
||||
<header id="df">
|
||||
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
|
||||
<nav class="navbar navbar-expand-lg navbar-light" id="collapsedNavbarDF">
|
||||
<div class="container">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<Link to="/dataforge/"><img alt="DataForge" height="55" src={logo} style={{paddingTop: `15px`, marginBottom: `20px`}}/></Link>
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item" id={`${curActive[0]}`}><Link class="nav-link" to="/dataforge/news">News</Link></li>
|
||||
<li class="nav-item" id={`${curActive[1]}`}><Link class="nav-link" to="/dataforge/docs">Documentation</Link></li>
|
||||
<li class="nav-item" id={`${curActive[2]}`}><Link class="nav-link" to="/dataforge/modules">Modules</Link></li>
|
||||
<li class="nav-item" id={`${curActive[3]}`}><Link class="nav-link" to="/dataforge/releases">Releases</Link></li>
|
||||
<li class="nav-item" id={`${curActive[4]}`}><Link class="nav-link" to="/dataforge/apps">Applications</Link></li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right" style={{fontSize: `15px`}}>
|
||||
<li class="nav-item"><Link class="nav-link" to="/dataforge/misc">See also</Link></li>
|
||||
</ul>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
{/* style={{paddingTop: `15px`, marginTop: `10px`, marginBottom: `25px`}} */}
|
||||
<Link to="/dataforge/"><img alt="DataForge" height="55" src={logo}/></Link>
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item" id={`${curActive[0]}`}><Link class="nav-link" to="/dataforge/news">News</Link></li>
|
||||
<li class="nav-item" id={`${curActive[1]}`}><Link class="nav-link" to="/dataforge/docs">Documentation</Link></li>
|
||||
<li class="nav-item" id={`${curActive[2]}`}><Link class="nav-link" to="/dataforge/modules">Modules</Link></li>
|
||||
<li class="nav-item" id={`${curActive[3]}`}><Link class="nav-link" to="/dataforge/releases">Releases</Link></li>
|
||||
<li class="nav-item" id={`${curActive[4]}`}><Link class="nav-link" to="/dataforge/apps">Applications</Link></li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right" style={{marginBottom: `10px`}}>
|
||||
<li class="nav-item"><Link class="nav-link" to="/dataforge/misc">See also</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -8,8 +8,8 @@ import "../../styles/dataforge/layout.css"
|
||||
const Layout = ({children}) => (
|
||||
<>
|
||||
<Header id="df"/>
|
||||
<div class = "container">
|
||||
<main id="df" style={{marginTop: `80px`}}>{children}</main>
|
||||
<div class = "container" id="df">
|
||||
<main id="df">{children}</main>
|
||||
</div>
|
||||
<Footer id="df"/>
|
||||
</>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
footer#df * {
|
||||
footer#df * {
|
||||
text-align: left;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
left: 0;
|
||||
@ -6,6 +6,6 @@
|
||||
|
||||
footer#df p { font-size: 15px; }
|
||||
|
||||
footer#df a { color: rgb(51, 122, 183); text-decoration: none; }
|
||||
footer#df a:hover { color: rgb(35, 82, 124); text-decoration: underline; }
|
||||
footer#df a:visited { color: rgb(51, 122, 183); }
|
||||
footer#df a { color: rgb(54, 117, 185); text-decoration: none; }
|
||||
footer#df a:hover { color: rgb(54, 117, 185); text-decoration: underline; }
|
||||
footer#df a:visited { color: rgb(54, 117, 185); }
|
||||
@ -1,19 +1,51 @@
|
||||
header#df {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
height: 70px; }
|
||||
|
||||
/* ----- navbar ----------------------------- */
|
||||
.navbar#collapsedNavbarDF {
|
||||
padding: 0;
|
||||
height: 75px;
|
||||
background: rgb(114, 111, 111);
|
||||
border: none; }
|
||||
|
||||
header#df ul.navbar-nav.mr-auto { padding-bottom: 20px; }
|
||||
header#df ul.navbar-nav .nav-item a[aria-current="page"] { padding: 18px }
|
||||
|
||||
header#df a.nav-link:hover { color: black; background-color: rgb(182, 188, 192); }
|
||||
header#df a.nav-link {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 15px;
|
||||
color: rgb(119,119,119);
|
||||
padding: 12px; }
|
||||
font-size: 20px;
|
||||
color: rgb(240, 240, 240);
|
||||
padding-right: 20px; }
|
||||
|
||||
header#df a.nav-link:hover { color:rgb(51,51,51); }
|
||||
header#df button.navbar-toggler {
|
||||
background-color: rgb(228, 228, 228);
|
||||
margin-left: 10px;
|
||||
margin-top: 10px; }
|
||||
|
||||
header#df nav { padding: 0; }
|
||||
header#df img { padding-right: 10px; }
|
||||
header#df div#navbarSupportedContent.navbar-collapse.collapse.show {
|
||||
background-color: rgb(114, 111, 111);
|
||||
padding-bottom: 400px; }
|
||||
|
||||
header#df li#styled.nav-item { padding-top: 9px; background-color: rgb(231,231,231);}
|
||||
header#df li#styled.nav-item {
|
||||
background-color: rgb(182, 188, 192);
|
||||
height: 60px; /*ЭТО МЕНЯЕТ ВЫСОТУ БЛОКА !!!!!!!!!!!!!*/
|
||||
padding-top: 14px;
|
||||
margin-top: 10px;
|
||||
color: black; }
|
||||
|
||||
header#df [aria-current] {
|
||||
color: rgb(85,85,85);
|
||||
font-size: 15px;
|
||||
padding: 12px;
|
||||
header#df a[aria-current="page"] {
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 20px;
|
||||
text-decoration: none; }
|
||||
|
||||
text-decoration: none;}
|
||||
header#df img {
|
||||
padding-right: 10px;
|
||||
margin-top: 25px;
|
||||
margin-right: 20px; }
|
||||
/* ------------------------------------------------- */
|
||||
@ -1,13 +1,11 @@
|
||||
main#df * { font-family: Arial, Helvetica, sans-serif; }
|
||||
main#df p { font-size: 15px; margin: 10px 0 10px 0; }
|
||||
main#df h1 { font-size: 36px; font-weight: 500; }
|
||||
main#df h2 { font-size: 30px; font-weight: 500; }
|
||||
main#df p { font-size: 20px; margin: 10px 0 10px 0; }
|
||||
main#df h1 { font-size: 56px; font-weight: 500; }
|
||||
main#df h2 { font-size: 45px; font-weight: 500; }
|
||||
main#df h3 { font-size: 24px; }
|
||||
main#df hr { margin: 20px 0 20px 0; border: none; }
|
||||
main#df li { font-size: 15px; }
|
||||
|
||||
main#df a { color: rgb(51, 122, 183); text-decoration: none; }
|
||||
main#df a:hover { color: rgb(35, 82, 124); text-decoration: underline; }
|
||||
main#df a:visited { color: rgb(51, 122, 183); }
|
||||
|
||||
main#df div.post:last-of-type { margin-bottom: 150px;}
|
||||
main#df a { color: rgb(54, 117, 185); text-decoration: none; }
|
||||
main#df a:hover { color: rgb(54, 117, 185); text-decoration: underline; }
|
||||
main#df a:visited { color: rgb(54, 117, 185); }
|
||||
main#df div.post:last-of-type { margin-bottom: 150px; }
|
||||
Loading…
Reference in New Issue
Block a user