NPM/site
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dataforge styles & layout

Browse Source
This commit is contained in:
Elinorre 2020-01-20 22:25:42 +03:00
parent d6e1aef31e
commit 760ea5fe03
5 changed files with 74 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/dataforge/header.js
View File

@ -14,14 +14,15 @@ const Header = () => {
if (window.location.pathname === '/dataforge/apps'){curActive[4] = 'styled';} if (window.location.pathname === '/dataforge/apps'){curActive[4] = 'styled';}
return( return(
<header id="df"> <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"> <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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<Link to="/dataforge/"><img alt="DataForge" height="55" src={logo} style={{paddingTop: `15px`, marginBottom: `20px`}}/></Link> {/* style={{paddingTop: `15px`, marginTop: `10px`, marginBottom: `25px`}} */}
<Link to="/dataforge/"><img alt="DataForge" height="55" src={logo}/></Link>
<ul class="navbar-nav mr-auto"> <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[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[1]}`}><Link class="nav-link" to="/dataforge/docs">Documentation</Link></li>
@ -29,7 +30,8 @@ const Header = () => {
<li class="nav-item" id={`${curActive[3]}`}><Link class="nav-link" to="/dataforge/releases">Releases</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> <li class="nav-item" id={`${curActive[4]}`}><Link class="nav-link" to="/dataforge/apps">Applications</Link></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right" style={{fontSize: `15px`}}>
<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> <li class="nav-item"><Link class="nav-link" to="/dataforge/misc">See also</Link></li>
</ul> </ul>
</div> </div>

4
src/components/dataforge/layout.js
View File

@ -8,8 +8,8 @@ import "../../styles/dataforge/layout.css"
const Layout = ({children}) => ( const Layout = ({children}) => (
<> <>
<Header id="df"/> <Header id="df"/>
<div class = "container"> <div class = "container" id="df">
<main id="df" style={{marginTop: `80px`}}>{children}</main> <main id="df">{children}</main>
</div> </div>
<Footer id="df"/> <Footer id="df"/>
</> </>

8
src/styles/dataforge/footer.css
View File

@ -1,4 +1,4 @@
footer#df * { footer#df * {
text-align: left; text-align: left;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
left: 0; left: 0;
@ -6,6 +6,6 @@
footer#df p { font-size: 15px; } footer#df p { font-size: 15px; }
footer#df a { color: rgb(51, 122, 183); text-decoration: none; } footer#df a { color: rgb(54, 117, 185); text-decoration: none; }
footer#df a:hover { color: rgb(35, 82, 124); text-decoration: underline; } footer#df a:hover { color: rgb(54, 117, 185); text-decoration: underline; }
footer#df a:visited { color: rgb(51, 122, 183); } footer#df a:visited { color: rgb(54, 117, 185); }

56
src/styles/dataforge/header.css
View File

@ -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 { header#df a.nav-link {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 15px; font-size: 20px;
color: rgb(119,119,119); color: rgb(240, 240, 240);
padding: 12px; } 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 div#navbarSupportedContent.navbar-collapse.collapse.show {
header#df img { padding-right: 10px; } 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] { header#df a[aria-current="page"] {
color: rgb(85,85,85); color: rgb(0, 0, 0);
font-size: 15px; font-size: 20px;
padding: 12px; text-decoration: none; }
text-decoration: none;} header#df img {
padding-right: 10px;
margin-top: 25px;
margin-right: 20px; }
/* ------------------------------------------------- */

16
src/styles/dataforge/layout.css
View File

@ -1,13 +1,11 @@
main#df * { font-family: Arial, Helvetica, sans-serif; } main#df * { font-family: Arial, Helvetica, sans-serif; }
main#df p { font-size: 15px; margin: 10px 0 10px 0; } main#df p { font-size: 20px; margin: 10px 0 10px 0; }
main#df h1 { font-size: 36px; font-weight: 500; } main#df h1 { font-size: 56px; font-weight: 500; }
main#df h2 { font-size: 30px; font-weight: 500; } main#df h2 { font-size: 45px; font-weight: 500; }
main#df h3 { font-size: 24px; } main#df h3 { font-size: 24px; }
main#df hr { margin: 20px 0 20px 0; border: none; } main#df hr { margin: 20px 0 20px 0; border: none; }
main#df li { font-size: 15px; } main#df li { font-size: 15px; }
main#df a { color: rgb(54, 117, 185); text-decoration: none; }
main#df a { color: rgb(51, 122, 183); text-decoration: none; } main#df a:hover { color: rgb(54, 117, 185); text-decoration: underline; }
main#df a:hover { color: rgb(35, 82, 124); text-decoration: underline; } main#df a:visited { color: rgb(54, 117, 185); }
main#df a:visited { color: rgb(51, 122, 183); } main#df div.post:last-of-type { margin-bottom: 150px; }
main#df div.post:last-of-type { margin-bottom: 150px;}