Merge branch 'elinorre' of https://github.com/mipt-npm/site

2020-03-22 13:05:35 +03:00 · 2020-03-22 13:05:35 +03:00 · b312c2e3fd
commit b312c2e3fd
parent 71dd79123b 37ada44525
33 changed files with 479 additions and 1531 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@ -2,7 +2,7 @@ name: copy build to master
 on: 
  push:
    branches:
-      - master
+      - elinorre

 jobs:
  build:
--- a/.prettierignore
+++ b/.prettierignore
@ -1,4 +0,0 @@
-.cache
-package.json
-package-lock.json
-public
--- a/.prettierrc
+++ b/.prettierrc
@ -1,7 +0,0 @@
-{
-  "endOfLine": "lf",
-  "semi": false,
-  "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
--- a/README.md
+++ b/README.md
@ -18,18 +18,18 @@ gatsby develop

    ├── src
        ├── components
-        ├── pages
+        ├── files
        ├── images
+        ├── intl
+        ├── pages
        ├── styles
    ├── static
        ├── admin
        ├── files
        ├── images
    ├── .gitignore
-    ├── .prettierrc
    ├── gatsby-config.js
    ├── gatsby-node.js
-    ├── gatsby-ssr.js
    ├── assets.bat
    ├── package-lock.json
    ├── package.json
@ -37,7 +37,8 @@ gatsby develop

 Все исходники лежат в `src`. 
 - **/components** - элементы страницы, такие как _навигационная панель, подвал, основные стили._ 
- **/images** - изображения, которые используются на сайте.
+- **/images** и **/files** - изображения и файлы, которые используются на сайте.
+- **/intl** - содержит элементы локализации.
 - **/pages** - основной контент, * *.js-файлы трогать не нужно.* Все markdown-файлы находятся в папке `content`
 - **/styles** - стили сайта.

@ -45,7 +46,6 @@ gatsby develop

 - Файл `gatsby-config.js` предназначен для внесения плагинов.
 - В `gatsby-node.js` хранится код для преобразования .md-файлов в страницы.
- `gatsby-ssr.js` содержит внешние скрипты.

 ## Деплой
 Для деплоя сайта нужно в командной строке прописать `npm run deploy`.
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -22,12 +22,6 @@ module.exports = {
        ],
      },
    },
-    // { 
-    //   resolve: "gatsby-remark-normalize-paths", 
-    //   options: { 
-    //     pathFields: ["image", "cover"] 
-    //   }, 
-    // },
    `gatsby-plugin-react-helmet`,
    {
      resolve: 'gatsby-source-filesystem',
@ -50,6 +44,7 @@ module.exports = {
        short_name: `npm`,
        lang: `ru`,
        start_url: `/`,
+        // start_url: `/new`,
        display: `minimal-ui`,
        icon: `src/images/icon.png`, // This path is relative to the root of the site.  
      },
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@ -1,37 +0,0 @@
-import React from "react";
-export function onRenderBody(
-  { setHeadComponents, setPostBodyComponents }
-) {
- setHeadComponents([
-    <script
-        key="head1"
-        type="text/javascript"
-        src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
-    />,
-    <script
-        key="head2"
-        type="text/javascript"
-        stc="https://code.jquery.com/jquery-3.4.1.js"
-    />,
-    <script
-        key="postbody1"
-        type="text/javascript"
-        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" 
-    />,
-    <script
-      key="activePage"
-      dangerouslySetInnerHTML={{
-        __html: `
-        let curActive = [' ', ' ', ' '];
-        if (document.location.pathname === '/about'){curActive[0] = 'active';}  
-        if (document.location.pathname === '/projects/physics' || document.location.pathname === '/projects/education' || document.location.pathname === '/projects/math' || document.location.pathname === '/projects/software'){curActive[1] = 'active';}  
-        if (document.location.pathname === '/partners'){curActive[2] = 'active';} 
-        `
-      }}
-    />
-  ]);
-
-  setPostBodyComponents([    
-  ]);
-
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -13,7 +13,6 @@
    "gatsby-plugin-intl": "^0.3.2",
    "gatsby-plugin-manifest": "^2.2.31",
    "gatsby-plugin-netlify-cms": "^4.1.33",
-    "gatsby-plugin-offline": "^3.0.27",
    "gatsby-plugin-react-helmet": "^3.1.16",
    "gatsby-plugin-sharp": "^2.3.10",
    "gatsby-remark-images": "^3.1.39",
@ -24,17 +23,15 @@
    "gatsby-source-graphql": "^2.1.29",
    "gatsby-transformer-remark": "^2.6.45",
    "gatsby-transformer-sharp": "^2.3.7",
+    "html-react-parser": "^0.10.2",
    "katex": "^0.10.0",
-    "netlify-cms": "^2.10.2",
    "netlify-cms-app": "^2.10.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
-    "react-burger-menu": "^2.6.13",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-use": "^13.21.0",
-    "react-use-gesture": "^6.0.14",
    "vertical-timeline-component-for-react": "^1.0.6"
  },
  "devDependencies": {
@ -45,7 +42,6 @@
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.0",
    "file-loader": "^5.0.2",
-    "gh-pages": "^2.2.0",
    "html-webpack-plugin": "^3.2.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "img-loader": "^3.0.1",
@ -73,8 +69,7 @@
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
-    "deploy": "gatsby build && gh-pages -d public -b master"
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
--- a/src/components/header.js
+++ b/src/components/header.js
@ -1,45 +0,0 @@
-import React from "react"
-import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
-import Language from "./language"
-import SEO from "./seo"
-
-import logo from "../images/index/logo_white.png"
-import "bootstrap/dist/css/bootstrap.css"
-import "../styles/header.css"
-import { globalHistory as history } from '@reach/router'
-import {Navbar, Nav} from "react-bootstrap"
-
-const Header = (  ) => {
-  const intl = useIntl()
-  const lang = intl.locale
-
-  const { location } = history;
-  var activePrj = location.pathname.includes('/projects') ? 'active': '';
-  var activeNews = location.pathname.includes('/news') ? 'active': '';
-  var active = [' ', ' ']
-  if (location.pathname.includes('/about')) active[0] = 'active'
-  if (location.pathname.includes('/partners')) active[1] = 'active'
-
-  return(
-    <header>
-    <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
-
-    <Navbar bg="dark" expand="lg" fixed="top">
-    <div className="container">
-    <Navbar.Toggle aria-controls="basic-navbar-nav" />
-    <Navbar.Collapse id="basic-navbar-nav">
-        <Nav className="mr-auto">
-          <Navbar.Brand><Link to="/"><img src={logo} height="50px" alt="npm logo" id="logo"/></Link></Navbar.Brand>
-          <Nav.Link><Link id={activeNews} to="/news"><FormattedMessage id="header.news"/></Link></Nav.Link>
-          <Nav.Link><Link id={active[0]} to="/about"><FormattedMessage id="header.group"/></Link></Nav.Link>
-          <Nav.Link><Link id={activePrj} to="/projects/physics"><FormattedMessage id="header.projects"/></Link></Nav.Link>
-          <Nav.Link><Link id={active[1]} to="/partners"><FormattedMessage id="header.partners"/></Link></Nav.Link>
-          <Nav.Link eventKey="language"><Language/></Nav.Link>
-        </Nav>
-    </Navbar.Collapse>
-    </div>
-    </Navbar>
-  </header>
-)}
-
-export default injectIntl(Header)
--- a/src/components/language.js
+++ b/src/components/language.js
@ -13,6 +13,7 @@ const Language = () => {
        {({ languages, language: currentLocale }) =>
          languages.map(language => (
            <a
+              href={language}
              key={language}
              onClick={() => changeLocale(language)}
              style={{
@ -21,6 +22,7 @@ const Language = () => {
                marginLeft: -11,
                margin: 10,
                cursor: `pointer`,
+                opacity: 1
              }}
            >
              {languageName[language]}
--- a/src/components/layout.js
+++ b/src/components/layout.js
@ -1,26 +1,29 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { injectIntl } from "gatsby-plugin-intl"
+import { injectIntl, useIntl } from "gatsby-plugin-intl"

-import Header from "./header"
+import Navbar from "./navBar"
 import Footer from "./footer"
 import SEO from "./seo"

-import "../styles/layout.css"
 import "../styles/bootstrap.min.css"
+import "../styles/layout.css"
 import "../styles/main.css"
 import "katex/dist/katex.min.css"

-const Layout = ({ children, intl }) => (
+const Layout = ({ children }) => {
+  const intl = useIntl();
+  const lang = intl.locale;
+  return (
    <>
-      <Header siteTitle={intl.formatMessage({ id: "title" })} />
-      <SEO title=" "/>
+      <Navbar />
+      <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
        <div className = "container">
          <main>{children}</main>
        </div>
      <Footer/>
    </>
-)
+)}

 Layout.propTypes = {
  children: PropTypes.node.isRequired,
--- a/src/components/navBar.js
+++ b/src/components/navBar.js
@ -0,0 +1,61 @@
+import React from "react"
+import { Link } from "gatsby"
+import { globalHistory as history } from '@reach/router'
+
+import { FormattedMessage, useIntl, injectIntl } from "gatsby-plugin-intl"
+import { Container } from "react-bootstrap"
+import Language from "./language"
+import SEO from "./seo"
+
+import "../styles/navbar.css"
+import logo from "../images/index/logo_white.png"
+
+import { Navbar, Nav } from "react-bootstrap"
+
+const CustomNavbar = () => {
+  const { location } = history;
+
+  var active = ["", "", "", ""]
+  active[0] = location.pathname.includes('/news/') ? 'active': "link-no-style";
+  active[1] = location.pathname.includes('/about/') ? 'active': "link-no-style";
+  active[2] = location.pathname.includes('/projects/') ? 'active': "link-no-style";
+  active[3] = location.pathname.includes('/partners/') ? 'active': "link-no-style";
+  var activeBrand = location.pathname === "/ru/" || location.pathname === "/en/" ? 'activeBrand': "link-no-style";
+
+  const intl = useIntl();
+  const lang = intl.locale;
+  return (
+    <>
+      <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
+      <Navbar bg="dark" expand="lg" id="site-navbar" fixed="top">
+        <Container>
+        <Link to="/" className={activeBrand}>
+          <Navbar.Brand as="span"><img src={logo} height="50px" alt="npm logo" id="logo"/></Navbar.Brand>
+        </Link>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="mr-auto" activeKey={location.pathname}>
+            <Link to="/news" className={active[0]}> {/* news */}
+              <Nav.Link as="span" eventKey="news"><FormattedMessage id="header.news"/></Nav.Link>
+            </Link>
+            <Link to="/about" className={active[1]}> {/* about */}
+              <Nav.Link as="span" eventKey="about"><FormattedMessage id="header.group"/></Nav.Link>
+            </Link>
+            <Link to="/projects/physics" className={active[2]}>
+              <Nav.Link as="span" eventKey="projects"><FormattedMessage id="header.projects"/></Nav.Link>
+            </Link>
+            <Link to="/partners" className={active[3]}> {/* partners */}
+              <Nav.Link as="span" eventKey="partners"><FormattedMessage id="header.partners"/></Nav.Link>
+            </Link>
+            <Link>
+              <Nav.Link eventKey="language" className="language"><Language/></Nav.Link>
+            </Link>
+          </Nav>
+        </Navbar.Collapse>
+        </Container>
+      </Navbar>
+    </>
+  )
+}
+
+export default injectIntl(CustomNavbar)
--- a/src/components/templates/courseTemplate.js
+++ b/src/components/templates/courseTemplate.js
@ -1,6 +1,8 @@
 import React from "react"
 import { graphql } from "gatsby"
 import { Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import Parser from "html-react-parser"
+
 import SEO from "../seo"
 import Layout from "../layout"

@ -8,7 +10,6 @@ const Template = (props) => {
    const intl = useIntl()
    const lang = intl.locale
    const course = props.data.course
-    console.log(course)

    let par = 'Физика'
    if (lang === "ru"){
@ -53,7 +54,7 @@ const Template = (props) => {
            </nav>

            <h1 style={{marginTop: `15px`, textAlign: `center`}}>{course.frontmatter.title}</h1>
-            <div dangerouslySetInnerHTML={{__html: course.html}}/>
+            <div>{Parser(course.html)}</div>
        </Layout>
    )
 }
--- a/src/components/templates/news.js
+++ b/src/components/templates/news.js
@ -1,16 +1,16 @@
 import React from 'react'
 import { graphql } from 'gatsby'
-import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import { Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import Parser from "html-react-parser"

 import { Timeline, TimelineItem }  from 'vertical-timeline-component-for-react'

-import Header from "../header"
+import Navbar from "../navBar"
 import Footer from "../footer"

 const NewsTemplate = ( props ) => {
  const intl = useIntl()
  const lang = intl.locale
-  console.log(lang)

  var news = ""
  if ( lang==="ru" ) { news = props.data.ru_news.edges} 
@ -19,20 +19,17 @@ const NewsTemplate = ( props ) => {
  const next = props.pageContext.next
  const prev = props.pageContext.prev

-  console.log(news)
-
  return (
    <>
-    <Header/>
+    <Navbar />
      <Timeline lineColor={'#ddd'} animate={false}>
-        {/* <h2>Все новости</h2> */}
        {news.map(({node}) => (
          <TimelineItem
            key={node.frontmatter.date}
            dateText={node.frontmatter.date}
            style={{ color: '#e86971' }} >
            <h2>{node.frontmatter.title}</h2>
-            <p dangerouslySetInnerHTML={{__html: node.html}}/>
+            <div>{Parser(node.html)}</div>
          </TimelineItem>
        ))}
      </Timeline>
--- a/src/intl/ru.json
+++ b/src/intl/ru.json
@ -8,7 +8,7 @@
    "projects": "Проекты", 
    "partners": "Партнёры" },
  "notfound": {
-    "header": "404: НЕ НАЙДЕНО",
+    "header": "404: СТРАНИЦА НЕ НАЙДЕНА",
    "description": "Вы перешли по несуществующему пути" },

  "jumbotron": {
--- a/src/pages/about.js
+++ b/src/pages/about.js
@ -1,6 +1,8 @@
 import React from "react"
 import { FormattedMessage, FormattedHTMLMessage, useIntl, Link, injectIntl } from "gatsby-plugin-intl"
 import { graphql } from "gatsby"
+import Parser from "html-react-parser"
+
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import "../styles/main.css"
@ -38,11 +40,7 @@ const AboutPage = ({ data }) => {
                <div className = "col-lg-2"></div>
                <div className = "col-lg-10">
                    <h2>{name}</h2>
-                    <p
-                    dangerouslySetInnerHTML = {{
-                        __html: node.html,
-                        }}
-                    />
+                    <div>{Parser(node.html)}</div>
                </div>     
            </div>
          </div>  
@ -57,11 +55,7 @@ const AboutPage = ({ data }) => {
                </div>
                <div className = "col-lg-10">
                    <h2>{name}</h2>
-                    <p
-                    dangerouslySetInnerHTML = {{
-                        __html: node.html,
-                        }}
-                    />
+                    <div>{Parser(node.html)}</div>
                </div>     
            </div>
          </div>
--- a/src/pages/content/en/pages/biref.md
+++ b/src/pages/content/en/pages/biref.md
@ -19,7 +19,7 @@ language: en
    </ul>
    <h3 id="приложение">Application</h3>
    <p>To start, you must have the installed platform JVM 8.</p>
-    <h4 id="установка-jre" style="margin-bottom: 0px">Установка JRE</h4>
+    <h4 id="установка-jre" style="margin-bottom: 0px">JRE installation</h4>
    <p>This program requires <a href="https://en.wikipedia.org/wiki/Java_virtual_machine">Java Runtime Environment </a> version 8 (it will probably work on 7, but it has not been tested. JRE is installed by default on the vast majority of personal computers. You can verify the installed version with the command <code> java -version </code>. If platform is not installed, or an old version is installed, then you need to install it. </p>
    <ul>
        <li><strong>Windows:</strong> Go <a
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -3,6 +3,7 @@ import { FormattedMessage, FormattedHTMLMessage, Link, useIntl, injectIntl } fro
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
+import Parser from "html-react-parser"

 import head_ru from "../images/index/head.png"
 import head_en from "../images/index/head_en.png"
@ -17,7 +18,7 @@ const IndexPage = ({ data }) => {
  var head = ""
  if ( lang==="ru" ) { news = data.ru_posts.edges; head = head_ru; } 
  else if ( lang==="en" ) { news = data.en_posts.edges; head = head_en; }
-
+  console.log(head)

  return(
    <Layout>
@ -30,8 +31,10 @@ const IndexPage = ({ data }) => {
        <h3 style = {{color: `rgb(18,64,171)`}}><FormattedMessage id="jumbotron.labintro"/></h3>
        <p id="lead"><FormattedMessage id="jumbotron.lead"/></p>
        <FormattedHTMLMessage id="jumbotron.list" />
-        <Button variant="success" id="jt"><Link to="/about"><FormattedMessage id="jumbotron.about" /></Link></Button>
    </Jumbotron> 
+    <div className="aboutButton">
+    <Button variant="success" id="jt"><Link to="/about"><FormattedMessage id="jumbotron.about" /></Link></Button>
+    </div>
    {/* ------------------------------ */}
    <div className="row">
      <div className="col-lg-4">
@ -56,17 +59,14 @@ const IndexPage = ({ data }) => {
      { news.map(({node}) => {
          const title = node.frontmatter.title; 
          const date = node.frontmatter.date;  
+          const html = node.html;
          return (
            <div className = "card" style={{marginBottom: `15px`, borderRadius: `0px`, boxShadow: `0 2px 2px #A2A2A2`}}>
            <div className = "card-body">
              <h2 className = "title">
                {title}<span id="date">{date}</span>
              </h2>
-                <p
-                  dangerouslySetInnerHTML = {{
-                    __html: node.frontmatter.description || node.html,
-                  }}
-                />
+              <div className="news">{Parser(html)}</div>
            </div>
            </div>
          )
--- a/src/pages/partners.js
+++ b/src/pages/partners.js
@ -9,7 +9,6 @@ import inr_logo from "../images/partners/inr_logo.png"
 import jetbrains_logo from "../images/partners/jetbrains.svg"
 import jbr from "../images/partners/JBR.svg"
 import SEO from "../components/seo"
-// import mtl_logo from "../images/partners/mtl_logo.png"

 const PartnersPage = () => {
    const intl = useIntl()
--- a/src/pages/projects/education.js
+++ b/src/pages/projects/education.js
@ -1,6 +1,8 @@
 import React from "react"
 import { graphql } from "gatsby"
 import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import Parser from "html-react-parser"
+
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"

@ -43,11 +45,7 @@ const SoftwarePage = ({ data }) => {
                    <div className="col-lg-12">
                    <hr/>
                        <h2 name={id}>{title}</h2>
-                        <p
-                        dangerouslySetInnerHTML = {{
-                            __html: node.html,
-                            }}
-                        />
+                        <div>{Parser(node.html)}</div>
                        <div className="card" style={{backgroundColor: `#F5F5F5`}}>
                        <div className="card-body" style={{padding: `10px`}}>
                                <p style={{textAlign: `center`, margin: `5px`}}>
--- a/src/pages/projects/math.js
+++ b/src/pages/projects/math.js
@ -1,6 +1,8 @@
 import React from "react"
 import { graphql } from "gatsby"
 import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import Parser from "html-react-parser"
+
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"

@ -42,11 +44,7 @@ const SoftwarePage = ({ data }) => {
                    <div className="col-lg-12">
                    <hr/>
                        <h2 name={id}>{title}</h2>
-                        <p
-                        dangerouslySetInnerHTML = {{
-                            __html: node.html,
-                            }}
-                        />
+                        <div>{Parser(node.html)}</div>
                    </div>
                    </div>
                )
--- a/src/pages/projects/physics.js
+++ b/src/pages/projects/physics.js
@ -1,6 +1,7 @@
 import React from "react"
 import { graphql } from "gatsby"
 import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import Parser from "html-react-parser"

 import Layout from "../../components/layout"
 import SEO from "../../components/seo"
@ -42,11 +43,7 @@ const PhysicsPage = ({ data }) => {
                    <div className="col-lg-12">
                    <hr/>
                        <h2 name={id}>{title}</h2>
-                        <p
-                        dangerouslySetInnerHTML = {{
-                            __html: node.html,
-                            }}
-                        />
+                        <div>{Parser(node.html)}</div>
                    </div>
                    </div>
                )
--- a/src/pages/projects/software.js
+++ b/src/pages/projects/software.js
@ -1,6 +1,8 @@
 import React from "react"
 import { graphql } from "gatsby"
 import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import Parser from "html-react-parser"
+
 import Layout from "../../components/layout"
 import SEO from "../../components/seo"

@ -42,11 +44,7 @@ const SoftwarePage = ({ data }) => {
                    <div className="col-lg-12">
                    <hr/>
                        <h2 name={id}>{title}</h2>
-                        <p
-                        dangerouslySetInnerHTML = {{
-                            __html: node.html,
-                            }}
-                        />
+                        <div>{Parser(node.html)}</div>
                    </div>
                    </div>
                )
--- a/src/pages/publications.js
+++ b/src/pages/publications.js
@ -1,6 +1,8 @@
 import React from "react"
 import { graphql } from "gatsby"
 import { Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import Parser from "html-react-parser"
+
 import Layout from "../components/layout"
 import SEO from "../components/seo"

@ -10,7 +12,6 @@ const PublicationsPage = ({ data }) => {
    var publications = ""
    if ( lang==="ru" ) { publications = data.ru_publications.edges; } 
    else if ( lang==="en" ) { publications = data.en_publications.edges; }
-    console.log(publications)
    return(
    <Layout>
      <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
@ -27,7 +28,7 @@ const PublicationsPage = ({ data }) => {
                <li className="breadcrumb-item active">{title}</li>
                </ol>
            </nav>
-            <p dangerouslySetInnerHTML={{__html: node.html}}/>
+            <div>{Parser(node.html)}</div>
            </>
            )
        })}
--- a/src/pages/quarks.js
+++ b/src/pages/quarks.js
@ -1,8 +1,9 @@
 import React from "react"
 import { graphql } from "gatsby"
-import Layout from "../components/layout"
 import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import Parser from "html-react-parser"

+import Layout from "../components/layout"
 import SEO from "../components/seo"

 const QuarksPage = ({ data }) => {
@ -26,7 +27,7 @@ const QuarksPage = ({ data }) => {

        {pubs.map(({node}) =>{
            return(
-                <p dangerouslySetInnerHTML={{__html: node.html}}/>
+                <div>{Parser(node.html)}</div>
            )
        })}
    </Layout>
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@ -1,17 +1,3 @@
-a {
-    color: rgb(0, 86, 179);
-    text-decoration: none;
-}
-
-a:hover {
-    color: rgb(0, 86, 179);
-    text-decoration: underline;
-}
-
-a:visited {
-    color: rgb(0, 86, 179);
-}
-
 footer {
    background-color: rgb(245,245,245);
    left: 0;
@ -22,7 +8,9 @@ footer {
    color: rgb(108, 117, 125);
    font-family: Segoe UI;
    font-size: 20px;
-    text-decoration: none solid rgb(108, 117, 125);
-}
+    text-decoration: none solid rgb(108, 117, 125); }

 footer .container p { margin-bottom: 15px; }
+footer p a { color: rgb(0, 86, 179); text-decoration: none; }
+footer p a:hover { color: rgb(12, 65, 124); text-decoration: underline; }
+footer a:visited { color: rgb(0, 86, 179); }
--- a/src/styles/header.css
+++ b/src/styles/header.css
@ -1,82 +0,0 @@
-/* ------ navbar ------------------------------ */
-.navbar { height: 80px; }
-a.nav-link { margin-top: 25px; max-height: 62px; color: white; }
-a.nav-link:hover { background-color: rgb(20, 142, 161); }
-
-a.nav-link[data-rb-event-key="language"] { margin-left: 50px }
-a.nav-link[data-rb-event-key="language"]:hover { background-color: rgb(52,58,64); }
-a.nav-link[data-rb-event-key="language"] a { padding-bottom: 19px; }
-
-a.nav-link a:hover { color: white; text-decoration: none; }
-a[aria-current="page"] { 
-    color: white; 
-    background-color: rgb(20, 142, 161); 
-    padding-top: 12px; }
-
-a.nav-link a#active { 
-    color: white; 
-    background-color: rgb(20, 142, 161);
-    padding-bottom: 23px;
-    padding-right: 30px;
-    padding-left: 30px; }
-
-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 { opacity: 0.7; margin-top: 20px;}
-img#logo:hover { opacity: 1;}
-a[aria-current="page"] img#logo { opacity: 1; margin-top: 20px; background-color: rgb(52,58,64); }
-/* ------------------------------------------- */
-
-/* ----- collapse show ---------------------- */
-@media(max-width: 769px) {
-    img#logo { margin: 0 0px 0 20px; }
-    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: 0px; margin-left: 15px; }
-
-div#basic-navbar-nav.navbar-collapse.collapse.show { 
-    width: 100px;
-    padding-bottom: 0px;
-    text-align: center;
-    background-color: rgb(52,58,64);
-    margin-top: -0px; }
-button.navbar-toggler { background-color: rgb(20, 142, 161); }
-div#navbarSupportedContent.navbar-collapse.collapse.show img#logo{ margin: auto; }
-/* ------------------------------------------- */
-
-#navbarSupportedContent {
-    width: 100%;
-    max-width: 1880px;
-    padding: 0;
-    line-height: 30px;
-    max-height: 56px;
-    text-align: left; }
-
-.container {
-    max-width: 1160px;
-    width: 100%;
-    margin: 0;
-    padding: 0; }
-
-
-@media (max-width: 769px) { 
-    a[aria-current="page"] img#logo { margin-top: 0; margin-left: 0; padding-left: 15px }
-    a[aria-current="page"] { padding-top: 0 }
-    button.navbar-toggler { margin-top: 15px; }
-    a.nav-link[data-rb-event-key="language"] a { 
-        padding-bottom: 12px;
-        margin-right: 0;
-        margin-left: -10px }
- }
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@ -4,6 +4,7 @@ html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: 100%;
+  font-size: 1.08rem;
 }
 body {
  height: 100%;
@ -12,7 +13,6 @@ body {
  -moz-osx-font-smoothing: grayscale;
 }

-
 .container {
  max-width: 1160px;
  width: 100%;
@ -23,400 +23,20 @@ body {
  font-weight: 400;
 }

-main { margin-top: 17%; }

@media (max-width: 769px) { 
  main { margin-top: 6%; }
  nav.navbar.navbar-expand-lg.navbar-light { width: 100%; padding: 0; } }

-img.gatsby-resp-image-image{
-  max-width: 750px;
-  max-height: 550px;
-  margin-top: 500px;
-}
+img { max-width: 100%; margin-bottom: 1.45rem; }

-p p span.gatsby-resp-image-wrapper {
-  max-width: 1160px;
-}
+h1 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; }
+h2 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; }
+h3 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; }
+h4 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; }
+h5 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; }
+h6 { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; }

-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 50px;
-  margin: 0.67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="reset"],
-[type="submit"],
-button,
-html [type="button"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  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";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 15px;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: 600;
-  text-rendering: optimizeLegibility;
-  font-size: 2.5rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 10px;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: 600;
-  text-rendering: optimizeLegibility;
-  font-size: 1.75rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 5px;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: 620;
-  text-rendering: optimizeLegibility;
-  font-size: 35px;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
 figure {
  margin-left: 0;
  margin-right: 0;
@ -427,19 +47,7 @@ figure {
  padding-top: 0;
  margin-bottom: 1.45rem;
 }
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
+
 table {
  margin-left: 0;
  margin-right: 0;
@ -454,198 +62,9 @@ table {
  border-collapse: collapse;
  width: 100%;
 }
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  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;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
+
+b, strong, dt, th { font-weight: bold; }
+
@media only screen and (max-width: 480px) {
  html {
    font-size: 100%;
--- a/src/styles/main.css
+++ b/src/styles/main.css
@ -1,9 +1,8 @@
 main { margin-top: 75px; }
+a#partner{ font-size: 1.8rem; }

 /* ---- projects navbar ---------------------- */
-ul.nav.nav-tabs { margin-top: 75px; }
-a { font-size: 0.9rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
-a#partner{ font-size: 1.8rem; }
+a { font-size: 0.98rem; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
 a.nav-link#project:hover { 
  padding-bottom: 7px;
  color: rgb(0, 0, 0); 
@ -24,18 +23,38 @@ div.container main a { color: rgb(0, 86, 179); }
 div.container main a:hover { color: rgb(1, 66, 136); text-decoration: underline; }
 div.container main p a:visited {color: rgb(0, 86, 179); text-decoration: none; }

+li a { color: rgb(0,86,179) }
+li a:hover { color: rgb(1,66,136) }
+li a:visited { color: rgb(0,86,179) }
+
+h2 a { color: rgb(0,86,179) }
+h2 a:hover { color: rgb(1,66,136) }
+h2 a:visited { color: rgb(0,86,179) }
+
 .jumbotron { 
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
  Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  padding: 60px 40px 30px 40px; 
-  margin-bottom: 35px; 
+  padding: 60px 40px 10px 40px; 
+  margin-bottom: 0px; 
  background-color: rgb(247,247,247);
-  border: 1.5px solid rgb(219, 219, 219); }
+  border: 1.5px solid rgb(219, 219, 219); 
+  border-bottom: 0;
+  border-radius: 5px 5px 0px 0px; }
+
+.aboutButton { 
+  background-color: rgb(247,247,247); 
+  padding-top: 5px;
+  padding-bottom: 25px;
+  margin-bottom: 25px;
+  border-bottom: 1.5px solid rgb(219, 219, 219); 
+  border-left: 1.5px solid rgb(219, 219, 219); 
+  border-right: 1.5px solid rgb(219, 219, 219); }

 button#jt:hover { background-color: rgb(9, 110, 88); }
 button#jt a { color: white; }
 button#jt a:hover { text-decoration: none; }
 button#jt { 
+  margin-left: 50px;
  font-size: 25px; 
  background-color: rgb(14, 156, 125);
  border: rgb(0,99,99); }
--- a/src/styles/navbar.css
+++ b/src/styles/navbar.css
@ -0,0 +1,87 @@
+nav#site-navbar.navbar.navbar-expand-lg.navbar-light.bg-dark.fixed-top { height: 75px; }
+
+div.mr-auto.navbar-nav a { font-size: 1rem; }
+img#logo { margin-bottom: 0; }
+a[href="/"] {  padding-top: 1.5%; opacity: 0.75}
+a[href="/"]:hover { opacity: 1; }
+a[href="/"].activeBrand { opacity: 1; padding-top: 0}
+a.link-no-style[href="/"] { padding: 0; margin-top: 0 }
+
+a.link-no-style span[data-rb-event-key="news"].nav-link,
+a.link-no-style span[data-rb-event-key="about"].nav-link,
+a.link-no-style span[data-rb-event-key="projects"].nav-link,
+a.link-no-style span[data-rb-event-key="partners"].nav-link
+ { color: rgb(209, 209, 209); margin-left: 15px; margin-right: 10px; }
+
+ a.link-no-style { margin-top: 10px; }
+ a.active { margin-top: 10px; }
+
+a.link-no-style span[data-rb-event-key="news"].nav-link:hover,
+a.link-no-style span[data-rb-event-key="about"].nav-link:hover,
+a.link-no-style span[data-rb-event-key="projects"].nav-link:hover,
+a.link-no-style span[data-rb-event-key="partners"].nav-link:hover
+ { color: white; background-color: rgb(20, 142, 161); padding-bottom: 15px; }
+
+ a.active { background-color: rgb(20, 142, 161); margin-left: 15px; margin-right: 10px; margin-bottom: 8px;}
+ .navbar-light .navbar-nav a.active>.nav-link { color: white; }
+
+a.language.nav-link { margin-left: 50px;  }
+a[data-rb-event-key="language"] div { margin-bottom: 8px; }
+a[data-rb-event-key="language"]:hover { background-color: rgb(52,58,64);}
+a[data-rb-event-key="language"] a { padding: 15px;}
+
+a#project { margin: 0; }
+
+div p a { color: rgb(0, 86, 179); }
+div p a:visited { color: rgb(0, 86, 179); }
+div p a:hover { color: rgb(1, 71, 145) }
+/* ------ navbar ------------------------------ */
+
+
+/* ----- collapse show ---------------------- */
+@media(max-width: 769px) {
+    a.activeBrand { margin: 0 0px 0 20px; padding-top: 0 }
+    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: 0px; margin-right: 17px; } 
+
+div#basic-navbar-nav.navbar-collapse.collapse.show { 
+    width: 100px;
+    padding-bottom: 0px;
+    text-align: center;
+    background-color: rgb(52,58,64);
+    margin-top: -0px; }
+button.navbar-toggler { background-color: rgb(20, 142, 161); }
+div#navbarSupportedContent.navbar-collapse.collapse.show img#logo{ margin: auto; } 
+/* ------------------------------------------- */
+
+/* #navbarSupportedContent {
+    width: 100%;
+    max-width: 1880px;
+    padding: 0;
+    line-height: 30px;
+    max-height: 56px;
+    text-align: left; }
+
+.container {
+    max-width: 1160px;
+    width: 100%;
+    margin: 0;
+    padding: 0; } */
+
+
+/* @media (max-width: 769px) { 
+    a[aria-current="page"] img#logo { margin-top: 0; margin-left: 0; padding-left: 15px }
+    a[aria-current="page"] { padding-top: 0 }
+    button.navbar-toggler { margin-top: 15px; }
+    a.nav-link[data-rb-event-key="language"] a { 
+        padding-bottom: 12px;
+        margin-right: 0;
+        margin-left: -10px }
+ } */
--- a/static/_redirects
+++ b/static/_redirects
@ -1,16 +0,0 @@
-/dataforge                          / #сайт dataforge   200
-/dataforge/news                     / # сайт dataforge/news  200
-
-/dataforge/docs/                    / # 1...     200     
-/dataforge/docs/meta                / # 2...     200
-/dataforge/docs/framework           / # 3...     200
-/dataforge/docs/data_flow           / # 4...     200
-/dataforge/docs/envelopes           / # 5...     200
-/dataforge/docs/storage             / # 6...     200
-/dataforge/docs/control             / # 7...     200
-/dataforge/docs/extensions          / # 8...     200
-
-/dataforge/modules                  / #     200
-/dataforge/releases                 / #     200
-/dataforge/apps                     / #     200
-/dataforge/misc                     / #     200