From 1bed723eac90bb3eb8ef73b0eadd7f3e39bbf1b5 Mon Sep 17 00:00:00 2001 From: Elinorre Date: Wed, 22 Jan 2020 18:49:42 +0300 Subject: [PATCH] reactStrap + mobile --- src/components/header.js | 60 +++++++++++------------------ src/pages/index.js | 15 +++++--- src/pages/projects/education.js | 8 ++-- src/pages/projects/math.js | 8 ++-- src/pages/projects/software.js | 8 ++-- src/styles/header.css | 68 ++++++++++++++++++++------------- src/styles/main.css | 59 ++++++++++++---------------- 7 files changed, 108 insertions(+), 118 deletions(-) diff --git a/src/components/header.js b/src/components/header.js index c26c79a..77b417d 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,50 +1,34 @@ import React from "react" import { Link } from "gatsby" -import PropTypes from "prop-types" + import logo from "../images/index/logo_white.png" - +import "bootstrap/dist/css/bootstrap.css" import "../styles/header.css" -import "bootstrap/dist/js/bootstrap" - -const Header = () => { +import {Navbar, Nav} from "react-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';} - if (window.location.pathname === '/partners'){curActive[2] = 'active';} - - return ( -
- + return( +
+ +
+ + + + +
+
) } -Header.propTypes = { - siteTitle: PropTypes.string, -} - -Header.defaultProps = { - siteTitle: ``, -} - export default Header diff --git a/src/pages/index.js b/src/pages/index.js index 3fec4de..4103ed3 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,13 +1,16 @@ import React from "react" import { Link, graphql } from "gatsby" import Layout from "../components/layout" + import head from "../images/index/head.png" import "../styles/main.css" +import "../styles/bootstrap.min.css" +import {Jumbotron, Button} from "react-bootstrap" const IndexPage = ({data}) => ( {/* --------------------------------- */} -
+ head

Лаборатория методов ядерно-физических экспериментов

@@ -27,8 +30,8 @@ const IndexPage = ({data}) => (
  • Мы применяем самые современные методы в работе на физических экспериментах.

    • -

    О нашей лаборатории

    -
    + + {/* ------------------------------ */}
    @@ -36,7 +39,7 @@ const IndexPage = ({data}) => (

    Лаборатория принимает участие в нескольких международных экспериментах в области физики частиц, таких как эксперимент по безнейтринному двойному бета-распаду GERDA, эксперимент по поиску массы нейтрино Троицк ню-масс и так далее.

    -

    Подробнее »

    +

    Образование

    @@ -44,7 +47,7 @@ const IndexPage = ({data}) => ( эксперимента, а также совершенствование существующей методической и информационной базы в МФТИ и академических институтах.

    -

    Подробнее »

    +

    Компьютерные методы

    @@ -52,7 +55,7 @@ const IndexPage = ({data}) => ( Одним из основных направлений деятельности является разработка вычислительных методов и открытого программного обеспечения для использования в образовании и научной деятельности.

    -

    Подробнее »

    +
    diff --git a/src/pages/projects/education.js b/src/pages/projects/education.js index 6073517..3226c3b 100644 --- a/src/pages/projects/education.js +++ b/src/pages/projects/education.js @@ -7,10 +7,10 @@ const PhysicsPage = (props) => { return(
      -
    • Физика
      • -
    • Образование
      • -
    • Математика
      • -
    • Программное обеспечение
      • +
    • Физика
      • +
    • Образование
      • +
    • Математика
      • +
    • Программное обеспечение

    Образовательные проекты

    diff --git a/src/pages/projects/math.js b/src/pages/projects/math.js index 81ee1eb..d118de5 100644 --- a/src/pages/projects/math.js +++ b/src/pages/projects/math.js @@ -7,10 +7,10 @@ const PhysicsPage = (props) => { return(
      -
    • Физика
      • -
    • Образование
      • -
    • Математика
      • -
    • Программное обеспечение
      • +
    • Физика
      • +
    • Образование
      • +
    • Математика
      • +
    • Программное обеспечение

    Математические методы

    diff --git a/src/pages/projects/software.js b/src/pages/projects/software.js index 8b6bc29..0468109 100644 --- a/src/pages/projects/software.js +++ b/src/pages/projects/software.js @@ -7,10 +7,10 @@ const PhysicsPage = (props) => { return(
      -
    • Физика
      • -
    • Образование
      • -
    • Математика
      • -
    • Программное обеспечение
      • +
    • Физика
      • +
    • Образование
      • +
    • Математика
      • +
    • Программное обеспечение

    Научное программное обеспечение

    diff --git a/src/styles/header.css b/src/styles/header.css index 1606340..993b5a3 100644 --- a/src/styles/header.css +++ b/src/styles/header.css @@ -1,28 +1,50 @@ -header { - width: 100%; - left: 0; - top: 0; - position: fixed; - z-index: 1000; - height: 75px; - background-color: rgb(45,45,45); -} +/* ------ navbar ------------------------------ */ +.navbar { height: 80px; } +a.nav-link { margin-top: 25px; max-height: 62px;} +a.nav-link:hover { background-color: rgb(20, 142, 161); } +a.nav-link a:hover { color: white; text-decoration: none; } +a.nav-link a#active { + color: white; + background-color: rgb(20, 142, 161); + padding-top: 12px; + padding-bottom: 20px; + } +a.nav-link a { + padding: 12px; + color: rgb(212, 212, 212); + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + transition: 0s; } +/* ------------------------------------------- */ -/* logo------------------------ */ -img#logo { margin-right: 20px; opacity: 0.7; margin-top: 10px;} +/* -------------- logo ----------------------- */ +img#logo { opacity: 0.7; margin-top: 20px;} img#logo:hover { opacity: 1;} -.d-inline-block { margin-bottom: 0; } -a[aria-current="page"]{ opacity: 1; } -/* ----------------------------- */ - +a[aria-current="page"] img#logo { opacity: 1; margin-top: 20px; } +/* ------------------------------------------- */ /* ----- collapse show ---------------------- */ -div#navbarSupportedContent.navbar-collapse.collapse.show { +@media(max-width: 769px) { + img#logo { margin: 0 40px 0 10px; } + a.nav-link { + margin-bottom: 10px; + margin-top: 15px; + margin-right: 60px; } + a.nav-link a#active { + color: white; + background-color: rgb(20, 142, 161); + padding-top: 11px; + padding-bottom: 12px; + } +} + +button.navbar-toggler.collapsed { margin-top: 0px; margin-left: 15px; } +button.navbar-toggler { margin-top: 15px; margin-left: 15px; } + +div#basic-navbar-nav.navbar-collapse.collapse.show { width: 100px; - padding-bottom: 230px; text-align: center; - background-color: rgb(45,45,45); } -button.navbar-toggler { background-color: rgb(20, 142, 161); margin-bottom: 15px; } + background-color: rgb(52,58,64); } +button.navbar-toggler { background-color: rgb(20, 142, 161); } div#navbarSupportedContent.navbar-collapse.collapse.show img#logo{ margin: auto; } /* ------------------------------------------- */ @@ -34,14 +56,6 @@ div#navbarSupportedContent.navbar-collapse.collapse.show img#logo{ margin: auto; max-height: 56px; text-align: left; } -.nav-item { - font-size: 20px; - font-family: Arial, Helvetica, sans-serif; - margin: 5px 0px 5px 15px; - height: 50px; - padding: 0px; - text-decoration: rgb(255, 254, 254); } - .container { max-width: 1160px; width: 100%; diff --git a/src/styles/main.css b/src/styles/main.css index ad5e723..de5acb4 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,30 +1,14 @@ -main { margin-top: 65px; } - -/* ----- navbar ----------------------------- */ -.navbar-light .navbar-nav .nav-link { color: rgb(190, 190, 190); } -.navbar-light .navbar-nav .nav-link:hover { color: white; } -.navbar-light .navbar-nav .nav-item:hover { background-color: rgb(20, 142, 161); padding-bottom: 15px; } -.navbar-light .navbar-nav .nav-item.active{ color: rgb(190, 190, 190); } -li.nav-item {margin-bottom: 25px; } -ul.navbar-nav { margin-bottom: -8px; align-items: center;} -ul.navbar-nav .nav-item a.nav-link { padding: 15px; } -a[aria-current="page"] img#logo { opacity: 1; margin-top: 0px; } -a.navbar-brand img#logo { margin: 0 } -ul.navbar-nav li.nav-item.active a.nav-link { - background-color:rgb(20, 142, 161); - padding-bottom: 15px; - color: white; } - -ul.navbar-nav li.nav-item a.nav-link:hover { - padding-bottom: 15px; - background-color:rgb(20, 142, 161); - transition: 0s; } -/* ----------------------------------- */ +main { margin-top: 75px; } /* ---- projects navbar ---------------------- */ ul.nav.nav-tabs { margin-top: 75px; } -a.nav-link#project:hover { padding-bottom: 7px; color: rgb(0, 86, 179); } -ul.nav-tabs a.nav-link.active { background-color: rgb(230, 230, 230); } + +a.nav-link#project:hover { + padding-bottom: 7px; + color: rgb(0, 0, 0); + text-decoration: none; + background-color: rgb(228, 228, 228); } +ul.nav-tabs a.nav-link.active { color: black; background-color: rgb(190, 190, 190); } ul.nav-tabs a.nav-link, ul.nav-tabs a.nav-link.active { border-radius: 0; padding: 7px 22px 7px 22px; @@ -33,26 +17,27 @@ ul.nav-tabs a.nav-link, ul.nav-tabs a.nav-link.active { /* ------- news & main content ----------------------------- */ div.container main a { color: rgb(0, 86, 179); } -a:hover { color: rgb(0, 86, 179); text-decoration: underline;} +div.container main a:hover { color: rgb(1, 66, 136); text-decoration: underline;} .jumbotron { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 60px 40px 30px 40px; margin-bottom: 35px; background-color: rgb(247,247,247); - border: 1px solid rgb(219, 219, 219); } + border: 1.5px solid rgb(219, 219, 219); } -p#button a.btn.btn-lg.btn-success:hover { background-color: rgb(9, 110, 88); } -p#button a.btn.btn-lg.btn-success { +button#jt:hover { background-color: rgb(9, 110, 88); } +button#jt a { color: white; } +button#jt a:hover { text-decoration: none; } +button#jt { font-size: 25px; - color: white; background-color: rgb(14, 156, 125); border: rgb(0,99,99); } -a#more { font-size: 20px; } - -a#more.btn.btn-primary:hover { background-color: rgb(34, 76, 104); } -a#more.btn.btn-primary { +button#more a { font-size: 20px; color: white; } +button#more a:hover { text-decoration: none; } +button#more:hover { background-color: rgb(34, 76, 104); } +button#more { color: white; background-color: rgb(51, 113, 155); border: rgb(36,88,122); } @@ -60,8 +45,7 @@ a#more.btn.btn-primary { h2.title { background-color: rgb(247, 247, 247); padding: 15px; - border: 2px solid #E8E4E4; - } + border: 2px solid #E8E4E4; } span#date { color: white; @@ -108,5 +92,10 @@ span.katex-html{color: rgb(0, 0, 0); font-weight: 500;} button#togglerButton.navbar-toggler.collapsed { margin-top: 10px; margin-left: 10px; } + a.nav-link#project { + margin-bottom: 10px; + margin-right: 0; + border: 1px solid rgb(202, 202, 202); } + a.nav-link#project.active { color: black; } } /* ------------------------------------------------------- */ \ No newline at end of file