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

collapse and mobile

Browse Source
This commit is contained in:
Elinorre 2020-01-19 01:52:07 +03:00
parent ca8572c119
commit d67360905e
4 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/header.js
View File

@ -1,11 +1,16 @@
import React from "react"
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import logo from "../images/index/npm-logo-no-text.svg"
import "../styles/header.css"
import "../styles/bootstrap.min.css"
import $ from "jquery/dist/jquery"
import "bootstrap/dist/js/bootstrap"
const Header = () => {
let curActive = [' ', ' ', ' '];
if (window.location.pathname === '/about'){curActive[0] = 'active';}
if (window.location.pathname === '/projects/physics' || window.location.pathname === '/projects/education' || window.location.pathname === '/projects/math' || window.location.pathname === '/projects/software'){curActive[1] = 'active';}
@ -13,18 +18,19 @@ const Header = () => {
return (
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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">
<div class="navbar-header">
<button class="navbar-toggler" id="togglerButton" 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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<Link class="navbar-brand" to="/">
<img src={logo} height="40" class="d-inline-block" alt="mipt-npm"/>
</Link>
<ul class="navbar-nav">
<li class="nav-item active "><Link class="nav-link" to="./"><span class="glyphicon glyphicon-home"></span></Link></li>
<li class={`nav-item ${curActive[0]}`}><Link class="nav-link" to="./about">Группа</Link></li>
<li class={`nav-item ${curActive[1]}`}><Link class="nav-link" to="./projects/physics">Проекты</Link></li>
<li class={`nav-item ${curActive[2]}`}><Link class="nav-link" to="./partners">Партнеры</Link></li>

3
src/components/layout.js
View File

@ -3,6 +3,7 @@ import PropTypes from "prop-types"
import Header from "./header"
import Footer from "./footer"
import "../styles/layout.css"
import "../styles/bootstrap.min.css"
import "../styles/main.css"
@ -12,7 +13,7 @@ const Layout = ({ children }) => {
return (
<>
<Header siteTitle="NPM group" />
<div class = "container" style = {{paddingTop: `70px`}}>
<div class = "container">
<main>{children}</main>
</div>
<Footer/>

14
src/styles/header.css
View File

@ -1,11 +1,15 @@
header { background: rgb(248,249,250); }
header { background: rgb(248,249,250); width: 100%; left: 0; top: 0; position: fixed; z-index: 1000;}
.d-inline-block { margin-bottom: 0; }
.navbar-nav.mr-auto { margin-left: 0px; }
.nav-item.active { margin-right: 0px; margin-left: 0px;}
.navbar.fixed-top { padding: 10px 20px 10px 20px; }
/* .navbar.fixed-top { padding: 10px 20px 10px 20px; position: fixed; } */
a.navbar-brand { margin-right: 0px; }
div#navbarSupportedContent.navbar-collapse.collapse.show {
padding-bottom: 200px;
text-align: center;
}
#navbarSupportedContent {
width: 100%;
max-width: 1880px;
@ -29,6 +33,10 @@ a.navbar-brand { margin-right: 0px; }
margin: 0;
padding: 0; }
.navbar-nav.active {
background-color: rgb(248,249,250);
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link{
color: black;
}

7
src/styles/layout.css
View File

@ -11,16 +11,21 @@ body {
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 1160px;
width: 100%;
margin: 0 auto;
padding: 0px 15px 0 15px;
padding-top: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
}
main { margin-top: 17%; }
@media (min-width: 769px) { main { margin-top: 6%; }}
img.gatsby-resp-image-image{
max-width: 750px;
max-height: 550px;