Fix main page styles

2021-03-30 12:02:42 +03:00 · 2021-03-30 12:02:42 +03:00 · ebbb77e172
commit ebbb77e172
parent 5d180b89a2
16 changed files with 192 additions and 392 deletions
--- a/src/components/footer.js
+++ b/src/components/footer.js
@ -3,7 +3,7 @@ import "../styles/footer.scss"

 const NpmFooter = () => (
    <footer className="blockquote-footer bg-dark">
-        <div className="container " style={{textAlign: `left`}}>
+        <div className="container">
            <p>
                © 2021 mipt-npm lab | Built with
                {` `}
--- a/src/components/layout.js
+++ b/src/components/layout.js
@ -6,9 +6,9 @@ import NpmNavbar from "./navBar"
 import NpmFooter from "./footer"
 import SEO from "./seo"

-import "../styles/layout.scss"
-import "../styles/main.scss"
+import "bootstrap/dist/css/bootstrap.min.css"
 import "katex/dist/katex.min.css"
+import "../styles/npm-site.scss"
 import {Helmet} from "react-helmet";

 const NpmLayout = ({children}) => {
@ -17,9 +17,9 @@ const NpmLayout = ({children}) => {
    return (
        <>
            <Helmet>
-                <html className="npm-site"/>
+                <html className="npm-site" lang={lang}/>
            </Helmet>
-            <SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
+            <SEO title={intl.formatMessage({id: "title"})}/>

            <NpmNavbar/>
            <div className="container">
--- a/src/components/magprog/common/MagProgLayout.js
+++ b/src/components/magprog/common/MagProgLayout.js
@ -15,16 +15,16 @@ const MagProgLayout = ({children}) => {
    return (
        <>
            <Helmet>
-                <html className="magprog"/>
+                <html className="magprog" lang={lang}/>
                <body className="is-preload"/>
            </Helmet>
-            <SEO ang={lang} title={intl.formatMessage({id: "title"})}/>
+            <SEO title={intl.formatMessage({id: "title"})}/>

            <NpmNavbar/>
            <main>{children}</main>


-{/*            <footer id="footer" className="wrapper style1-alt">
+            {/*            <footer id="footer" className="wrapper style1-alt">
                <div className="inner">
                    <ul className="menu">
                        <li>&copy; MIPT-NPM 2021.</li>
--- a/src/components/magprog/common/Scroll.js
+++ b/src/components/magprog/common/Scroll.js
@ -66,7 +66,7 @@ class Scroll extends React.Component {
                {typeof this.props.children === 'object' ? (
                    React.cloneElement(this.props.children, {onClick: this.handleClick})
                ) : (
-                    <span onClick={this.handleClick}>{this.props.children}</span>
+                    <span role="navigation" onClick={this.handleClick}>{this.props.children}</span>
                )}
            </Element>
        );
--- a/src/components/navBar.js
+++ b/src/components/navBar.js
@ -20,15 +20,15 @@ const NpmNavbar = () => {
        <>
            <Navbar bg="dark" expand="lg" id="site-navbar" fixed="top" variant="dark">
                <Container>
-                    <Link to={"/" + intl.locale + "/"} 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">
+                    <Navbar.Brand>
+                        <Link to={"/" + intl.locale + "/"} className={activeBrand}>
+                            <img src={logo} height="50px" alt="npm logo" id="logo" style={{marginBottom: 0}}/>
+                        </Link>
+                    </Navbar.Brand>
+                    <Navbar.Toggle aria-controls="site-navbar-collapse"/>
+                    <Navbar.Collapse id="site-navbar-collapse">
                        <Nav className="mr-auto" activeKey={location.pathname}>
-                            <Link to={`/${intl.locale}/news`} className="nav-item" activeClassName="active"
-                                  partiallyActive={true}>
-                                {/* news */}
+                            <Link to={`/${intl.locale}/news`} className="nav-item" activeClassName="active" partiallyActive={true}>
                                <Nav.Link as="span" eventKey="news"><FormattedMessage id="header.news"/></Nav.Link>
                            </Link>
                            <Link to={`/${intl.locale}/about`} className="nav-item" activeClassName="active"
@ -49,7 +49,7 @@ const NpmNavbar = () => {
                                <Nav.Link as="span" eventKey="partners"><FormattedMessage
                                    id="header.partners"/></Nav.Link>
                            </Link>
-{/*
+                            {/*
                            <Link to={`/${intl.locale}/magprog`} className="nav-item" activeClassName="active"
                                  partiallyActive={true}>
                                <Nav.Link as="span" eventKey="magprog">
--- a/src/components/projectsNavbar.js
+++ b/src/components/projectsNavbar.js
@ -14,7 +14,7 @@ export default function ProjectsNavbar({project_type}) {

    return (
        <>
-            <ul className="nav nav-tabs">
+            <ul id="project-navbar" className="nav nav-tabs">
                <li className="nav-item">
                    <Link id="project_physics" className={navClasses("physics")} to="/projects/physics">
                        <FormattedMessage id="physics.bc_title"/>
--- a/src/components/templates/news.js
+++ b/src/components/templates/news.js
@ -5,14 +5,13 @@ import Parser from "html-react-parser"

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

-import Navbar from "../navBar"
-import NpmFooter from "../footer"
+import NpmLayout from "../layout";

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

-    var news = ""
+    let news = "";
    if (lang === "ru") {
        news = props.data.ru_news.edges
    } else if (lang === "en") {
@ -23,8 +22,7 @@ const NewsTemplate = (props) => {
    const prev = props.pageContext.prev

    return (
-        <>
-            <Navbar/>
+        <NpmLayout>
            <Timeline lineColor={'#ddd'} animate={false}>
                {news.map(({node}) => (
                    <TimelineItem
@ -45,8 +43,8 @@ const NewsTemplate = (props) => {
                    {next && <Link to={`/${next}`}><h1 style={{padding: 10, color: `red`}}>---></h1></Link>}
                </div>
            </nav>
-            <NpmFooter/>
-        </>
+
+        </NpmLayout>
    )
 }

--- a/src/pages/about.js
+++ b/src/pages/about.js
@ -4,7 +4,7 @@ import {graphql} from "gatsby"
 import Parser from "html-react-parser"

 import Layout from "../components/layout"
-import "../styles/main.scss"
+import "../styles/npm-site.scss"

 const AboutPage = ({data}) => {
    const intl = useIntl()
@ -20,11 +20,11 @@ const AboutPage = ({data}) => {
            <h1><FormattedMessage id="about.title"/></h1>
            <p><FormattedMessage id="about.descr"/></p>

-            <h2 id="publications"><FormattedMessage id="about.pubs.title"/></h2>
+            <h3 id="publications"><FormattedMessage id="about.pubs.title"/></h3>
            <p style={{marginTop: `0px`, marginBottom: `0px`}}><FormattedMessage id="about.pubs.available1"/><Link
                to="/publications"><FormattedMessage id="about.pubs.available2"/></Link></p>

-            <h2 id="contacts"><FormattedMessage id="about.contacts.title"/></h2>
+            <h3 id="contacts"><FormattedMessage id="about.contacts.title"/></h3>
            <p style={{marginTop: `0px`, marginBottom: `0px`}}><FormattedMessage id="about.contacts.mail"/><a
                href='mailto&#58;&#110;p&#109;&#64;m%&#54;&#57;%70&#116;&#46;ru'>npm&#64;mip&#116;&#46;ru</a></p>
            <p style={{marginTop: `0px`}}><FormattedMessage id="about.contacts.telegram"/><a
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -7,9 +7,7 @@ import Parser from "html-react-parser"

 import head_ru from "../images/index/head.png"
 import head_en from "../images/index/head_en.png"
-import "../styles/main.scss"
-import "../styles/bootstrap.min.css"
-import {Button, Jumbotron} from "react-bootstrap"
+import {Card, CardGroup, Jumbotron} from "react-bootstrap"

 const IndexPage = ({data}) => {
    const intl = useIntl()
@ -34,32 +32,54 @@ const IndexPage = ({data}) => {
                <h3 style={{color: `rgb(18, 64, 171)`}}><FormattedMessage id="jumbotron.labintro"/></h3>
                <p id="lead"><FormattedMessage id="jumbotron.lead"/></p>
                {Parser(intl.formatMessage({id: "jumbotron.list"}))}
+                <Link to="/about" className="btn btn-primary btn-lg">
+                    <FormattedMessage id="jumbotron.about"/>
+                </Link>
            </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">
-                    <h2><FormattedMessage id="more.nuclear_title"/></h2>
-                    <p><FormattedMessage id="more.nuclear_body"/></p>
-                    <Button variant="primary" id="more"><Link to="/projects/physics"><FormattedMessage
-                        id="more.nuclear_more"/></Link></Button>
-                </div>
-                <div className="col-lg-4">
-                    <h2><FormattedMessage id="more.education_title"/></h2>
-                    <p><FormattedMessage id="more.education_body"/></p>
-                    <Button variant="primary" id="more"><Link to="/projects/education"><FormattedMessage
-                        id="more.education_more"/></Link></Button>
-                </div>
-                <div className="col-lg-4">
-                    <h2><FormattedMessage id="more.software_title"/></h2>
-                    <p><FormattedMessage id="more.software_body"/></p>
-                    <Button variant="primary" id="more"><Link to="/projects/software"><FormattedMessage
-                        id="more.software_more"/></Link></Button>
-                </div>
-            </div>
+
+            <CardGroup>
+                <Card>
+                    <Card.Body>
+                        <Card.Title><FormattedMessage id="more.nuclear_title"/></Card.Title>
+                        <Card.Text>
+                            <FormattedMessage id="more.nuclear_body"/>
+                        </Card.Text>
+                    </Card.Body>
+                    <Card.Footer>
+                        <Link to="/projects/physics" className="btn btn-info">
+                            <FormattedMessage id="more.nuclear_more"/>
+                        </Link>
+                    </Card.Footer>
+                </Card>
+                <Card>
+                    <Card.Body>
+                        <Card.Title><FormattedMessage id="more.education_title"/></Card.Title>
+                        <Card.Text>
+                            <FormattedMessage id="more.education_body"/>
+                        </Card.Text>
+                    </Card.Body>
+                    <Card.Footer>
+                        <Link to="/projects/education" className="btn btn-info">
+                            <FormattedMessage id="more.education_more"/>
+                        </Link>
+                    </Card.Footer>
+                </Card>
+                <Card>
+                    <Card.Body>
+                        <Card.Title><FormattedMessage id="more.software_title"/></Card.Title>
+                        <Card.Text>
+                            <FormattedMessage id="more.software_body"/>
+                        </Card.Text>
+                    </Card.Body>
+                    <Card.Footer>
+                        <Link to="/projects/software" className="btn btn-info">
+                            <FormattedMessage id="more.software_more"/>
+                        </Link>
+                    </Card.Footer>
+                </Card>
+            </CardGroup>
+
            <hr style={{marginBottom: `50px`}}/>
            {/* --------------------------------- */}
            <h1 style={{textAlign: `center`}}><FormattedMessage id="more.news"/></h1>
--- a/src/pages/magprog/index.js
+++ b/src/pages/magprog/index.js
@ -42,10 +42,10 @@ function team(edges) {

                return (
                    <section>
-                        <a className="image">
+                        <div className="image">
                            <img src={withPrefix(`images/members/${photo}`)}
                                 alt={edge.node.frontmatter.title} width="100%" data-position="top center"/>
-                        </a>
+                        </div>
                        <div className="content">
                            <div className="inner">
                                <h2>{name}</h2>
--- a/src/pages/partners.js
+++ b/src/pages/partners.js
@ -14,18 +14,18 @@ const PartnersPage = () => {
        <Layout>
            <div className="media" style={{marginTop: `30px`}}>
                <div className="media-body">
-                    <h1 className="partner">
+                    <h2 className="partner">
                        <a aria-label="MIPT general physics" href="https://mipt.ru/education/chair/physics/">
                            <FormattedMessage id="partners.mipt.title_fund"/>
                        </a>
-                    </h1>
+                    </h2>
                    <p><FormattedMessage id="partners.mipt.description_fund"/></p>
                    <hr/>
-                    <h1 className="partner">
+                    <h2 className="partner">
                        <a aria-label="MIPT HEP" href="https://mipt.ru/science/labs/high_energy_physics_lab.php">
                            <FormattedMessage id="partners.mipt.title_energy"/>
                        </a>
-                    </h1>
+                    </h2>
                    <p><FormattedMessage id="partners.mipt.description_energy"/></p>
                </div>
                <div className="media-right media-middle">
@ -39,7 +39,7 @@ const PartnersPage = () => {

            <div className="media">
                <div className="media-body">
-                    <h1><a className="partner" href="https://www.jetbrains.com/">JetBrains</a></h1>
+                    <h2><a className="partner" href="https://www.jetbrains.com/">JetBrains</a></h2>
                    <p><FormattedMessage id="partners.jb.description"/></p>
                </div>
                <div className="media-right media-middle">
@ -55,8 +55,8 @@ const PartnersPage = () => {

            <div className="media">
                <div className="media-body">
-                    <h1><a className="partner" href="https://research.jetbrains.org/ru/groups/npm">JetBrains
-                        Research</a></h1>
+                    <h2><a className="partner" href="https://research.jetbrains.org/ru/groups/npm">JetBrains
+                        Research</a></h2>
                    <p><FormattedMessage id="partners.jbr.description"/></p>
                </div>
                <div className="media-right media-middle">
@ -72,11 +72,11 @@ const PartnersPage = () => {

            <div className="media">
                <div className="media-body">
-                    <h1 className="partner">
+                    <h2 className="partner">
                        <a href="http://inr.ru/">
                            <FormattedMessage id="partners.ras.title_exp"/>
                        </a>
-                    </h1>
+                    </h2>
                    <p><FormattedMessage id="partners.ras.description_exp"/></p>
                </div>
            </div>
@ -90,11 +90,11 @@ const PartnersPage = () => {
                    </a>
                </div>
                <div className="media-body" style={{marginLeft: `25px`}}>
-                    <h1 className="partner">
+                    <h2 className="partner">
                        <a aria-label="INR" href="http://www.inr.ru/">
                            <FormattedMessage id="partners.ras.title_beam"/>
                        </a>
-                    </h1>
+                    </h2>
                    <p><FormattedMessage id="partners.ras.description_beam"/></p>
                </div>
            </div>
@ -103,8 +103,8 @@ const PartnersPage = () => {

            <div className="media">
                <div className="media-body">
-                    <h1 className="partner"><a aria-label="INR education" href="http://www.inr.ru/"><FormattedMessage
-                        id="partners.ras.title_education"/></a></h1>
+                    <h2 className="partner"><a aria-label="INR education" href="http://www.inr.ru/"><FormattedMessage
+                        id="partners.ras.title_education"/></a></h2>
                    <p><FormattedMessage id="partners.ras.description_education"/></p>
                </div>
                <div className="media-right media-middle">
@ -120,15 +120,15 @@ const PartnersPage = () => {
        <a href="#"><img className="media-object" src={mtl_logo} width="100px"/></a>
    </div>
    <div className="media-body">
-        <h1><a href="http://www.mtl.ru/">МТЛ. Медицинские технологии</a></h1>
+        <h2><a href="http://www.mtl.ru/">МТЛ. Медицинские технологии</a></h2>
        В рамках сотрудничества с МТЛ проводится научная, инженерная и научно-образовательная работа на базе МФТИ.
    </div>
    </div> */}

            <div className="media" style={{marginBottom: `30px`}}>
                <div className="media-body">
-                    <h1 className="partner"><a aria-label="SRI RAS" href="http://www.iki.rssi.ru/"><FormattedMessage
-                        id="partners.ras.title_iki"/></a></h1>
+                    <h2 className="partner"><a aria-label="SRI RAS" href="http://www.iki.rssi.ru/"><FormattedMessage
+                        id="partners.ras.title_iki"/></a></h2>
                    <p><FormattedMessage id="partners.ras.description_iki"/></p>
                </div>
                <div className="media-right media-middle">
--- a/src/styles/bootstrap.min.css
+++ b/src/styles/bootstrap.min.css
--- a/src/styles/footer.scss
+++ b/src/styles/footer.scss
@ -1,6 +1,4 @@
-html.npm-site {
-
-  footer {
+.npm-site footer {
    background-color: rgb(245, 245, 245);
    left: 0;
    bottom: 0;
@ -11,24 +9,22 @@ html.npm-site {
    font-family: Segoe UI, serif;
    font-size: 20px;
    text-decoration: none solid rgb(108, 117, 125);
-  }

-  footer .container p {
+  .container p {
    margin-bottom: 15px;
  }

-  footer p a {
+  p a {
    color: rgb(0, 86, 179);
    text-decoration: none;
  }

-  footer p a:hover {
+  p a:hover {
    color: rgb(12, 65, 124);
    text-decoration: underline;
  }

-  footer a:visited {
+  a:visited {
    color: rgb(0, 86, 179);
  }
-
 }
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@ -1,91 +0,0 @@
-html.npm-site {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-  Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  height: 100%;
-  font-size: 1.08rem;
-
-  body {
-    height: 100%;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  .container {
-    max-width: 1160px;
-    width: 100%;
-    margin: 0 auto;
-    padding: 0 15px 0 15px;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: 400;
-  }
-
-
-  @media (max-width: 769px) {
-    main {
-      margin-top: 6%;
-    }
-
-    nav.navbar.navbar-expand-lg.navbar-light {
-      width: 100%;
-      padding: 0;
-    }
-  }
-
-  img {
-    max-width: 100%;
-    margin-bottom: 1.45rem;
-  }
-
-  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;
-  }
-
-  figure {
-    padding: 0;
-    margin: 0 0 1.45rem;
-  }
-
-  table {
-    padding: 0;
-    margin: 0 0 1.45rem;
-    font-size: 1rem;
-    line-height: 1.45rem;
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  b, strong, dt, th {
-    font-weight: bold;
-  }
-
-  @media only screen and (max-width: 480px) {
-    html {
-      font-size: 100%;
-    }
-  }
-
-}
-
--- a/src/styles/navbar.scss
+++ b/src/styles/navbar.scss
@ -1,48 +1,12 @@
-nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
-    height: 75px;
-}
-
 .site-navbar {
-    div.mr-auto.navbar-nav a {
+
+    height: 75px;
+
+    .nav-link {
        font-size: 1rem;
+        //font-family: Arial, Helvetica, sans-serif;
    }

-    img#logo {
-        margin-bottom: 0;
-    }
-
-    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;
-    }
-
-    /*nav div p a {*/
-    /*    color: rgb(0, 86, 179);*/
-    /*}*/
-
-    /*nav div p a:visited {*/
-    /*    color: rgb(0, 86, 179);*/
-    /*}*/
-
-    /*nav div p a:hover {*/
-    /*    color: rgb(1, 71, 145)*/
-    /*}*/
-
    /* ------ navbar ------------------------------ */


@ -53,7 +17,7 @@ nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
            padding-top: 0
        }

-        a.nav-link a#active {
+        a#active {
            color: white;
            background-color: rgb(20, 142, 161);
            padding-top: 11px;
@ -67,7 +31,7 @@ nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
        margin-right: 17px;
    }

-    div#basic-navbar-nav.navbar-collapse.collapse.show {
+    .navbar-collapse.collapse.show {
        width: 100px;
        padding-bottom: 0;
        text-align: center;
@ -75,7 +39,7 @@ nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
        margin-top: -0px;
    }

-    button.navbar-toggler {
+    .navbar-toggler {
        background-color: rgb(20, 142, 161);
    }

@ -83,31 +47,4 @@ nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
        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/npm-site.scss
+++ b/src/styles/npm-site.scss
@ -1,38 +1,100 @@
-html.npm-site {
+.npm-site {
+  /* Layout */
+
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  height: 100%;
+  font-size: 1.08rem;
+
+  body {
+    height: 100%;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
  main {
    margin-top: 75px;
  }

-  a .partner {
-    font-size: 1.8rem;
+  .container {
+    max-width: 1160px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 15px 0 15px;
+    //font-family: Arial, Helvetica, sans-serif;
+    font-weight: 400;
+  }
+
+
+  @media (max-width: 769px) {
+    main {
+      margin-top: 6%;
+    }
+
+    nav.navbar {
+      width: 100%;
+      padding: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    margin-bottom: 1.45rem;
+  }
+
+  figure {
+    padding: 0;
+    margin: 0 0 1.45rem;
+  }
+
+  table {
+    padding: 0;
+    margin: 0 0 1.45rem;
+    font-size: 1rem;
+    line-height: 1.45rem;
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  b, strong, dt, th {
+    font-weight: bold;
+  }
+
+  @media only screen and (max-width: 480px) {
+    html {
+      font-size: 100%;
+    }
  }

  /* ---- projects navbar ---------------------- */
-  a {
-    font-size: 0.98rem;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
+  .project-navbar {
+    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);
-    text-decoration: none;
-    background-color: rgb(228, 228, 228);
-  }
+    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.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;
-    margin-top: 5px;
+    ul.nav-tabs a.nav-link, ul.nav-tabs a.nav-link.active {
+      border-radius: 0;
+      padding: 7px 22px 7px 22px;
+      margin-top: 5px;
+    }
  }

-  /* ------------------------------------------- */
-
  /* ------- news & main content ----------------------------- */
  h1 {
    font-size: 2.3rem;
@ -46,50 +108,7 @@ html.npm-site {
    font-size: 1.5rem;
  }

-  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 10px 40px;
    margin-bottom: 0;
    background-color: rgb(247, 247, 247);
@ -108,45 +127,6 @@ html.npm-site {
    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);
-  }
-
-  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 {
-    margin-bottom: 15px;
-    color: white;
-    background-color: rgb(51, 113, 155);
-    border: rgb(36, 88, 122);
-  }
-
  h2.title {
    background-color: rgb(247, 247, 247);
    padding: 15px;
@ -165,27 +145,10 @@ html.npm-site {
    right: 0;
  }

-  p {
-    font-size: 0.95rem;
-    margin-top: 15px;
-    margin-bottom: 20px;
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  }
-
-  hr {
-    border-top: 1px solid rgb(220, 222, 224);
-    margin: 10px 0px 20px 0px;
-  }
-
  img.center-block {
    margin-bottom: 0;
  }

-  ol li {
-    font-size: 0.9rem;
-  }
-
  li {
    margin-bottom: 0;
    font-size: 0.9rem;
@ -235,9 +198,9 @@ html.npm-site {
    max-width: 1400px;
  }

-  div.timeline--wrapper {
+/*  div.timeline--wrapper {
    margin-top: 60px;
-  }
+  }*/

  div.entry div.title {
    width: 20%
@ -251,22 +214,6 @@ html.npm-site {
    left: calc(20% - 6px)
  }

-  div.body div.body-container.bounce-in p p a {
-    color: rgb(0, 86, 179)
-  }
-
-  div.body div.body-container.bounce-in p h2 a {
-    color: rgb(0, 86, 179)
-  }
-
-  div.body div.body-container.bounce-in p ul li a {
-    color: rgb(0, 86, 179)
-  }
-
-  nav div a:hover {
-    text-decoration: none;
-  }
-
  /* -------------------------------------------------------- */

  figcaption {