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

Fix main page styles

Browse Source
This commit is contained in:
Alexander Nozik 2021-03-30 12:02:42 +03:00
parent 5d180b89a2
commit ebbb77e172
16 changed files with 192 additions and 392 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/footer.js
View File

@ -3,7 +3,7 @@ import "../styles/footer.scss"
const NpmFooter = () => ( const NpmFooter = () => (
<footer className="blockquote-footer bg-dark"> <footer className="blockquote-footer bg-dark">
<div className="container " style={{textAlign: `left`}}> <div className="container">
<p> <p>
© 2021 mipt-npm lab | Built with © 2021 mipt-npm lab | Built with
{` `} {` `}

8
src/components/layout.js
View File

@ -6,9 +6,9 @@ import NpmNavbar from "./navBar"
import NpmFooter from "./footer" import NpmFooter from "./footer"
import SEO from "./seo" import SEO from "./seo"
import "../styles/layout.scss" import "bootstrap/dist/css/bootstrap.min.css"
import "../styles/main.scss"
import "katex/dist/katex.min.css" import "katex/dist/katex.min.css"
import "../styles/npm-site.scss"
import {Helmet} from "react-helmet"; import {Helmet} from "react-helmet";
const NpmLayout = ({children}) => { const NpmLayout = ({children}) => {
@ -17,9 +17,9 @@ const NpmLayout = ({children}) => {
return ( return (
<> <>
<Helmet> <Helmet>
<html className="npm-site"/> <html className="npm-site" lang={lang}/>
</Helmet> </Helmet>
<SEO lang={lang} title={intl.formatMessage({id: "title"})}/> <SEO title={intl.formatMessage({id: "title"})}/>
<NpmNavbar/> <NpmNavbar/>
<div className="container"> <div className="container">

6
src/components/magprog/common/MagProgLayout.js
View File

@ -15,16 +15,16 @@ const MagProgLayout = ({children}) => {
return ( return (
<> <>
<Helmet> <Helmet>
<html className="magprog"/> <html className="magprog" lang={lang}/>
<body className="is-preload"/> <body className="is-preload"/>
</Helmet> </Helmet>
<SEO ang={lang} title={intl.formatMessage({id: "title"})}/> <SEO title={intl.formatMessage({id: "title"})}/>
<NpmNavbar/> <NpmNavbar/>
<main>{children}</main> <main>{children}</main>
{/* <footer id="footer" className="wrapper style1-alt"> {/* <footer id="footer" className="wrapper style1-alt">
<div className="inner"> <div className="inner">
<ul className="menu"> <ul className="menu">
<li>&copy; MIPT-NPM 2021.</li> <li>&copy; MIPT-NPM 2021.</li>

2
src/components/magprog/common/Scroll.js
View File

@ -66,7 +66,7 @@ class Scroll extends React.Component {
{typeof this.props.children === 'object' ? ( {typeof this.props.children === 'object' ? (
React.cloneElement(this.props.children, {onClick: this.handleClick}) 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> </Element>
); );

14
src/components/navBar.js
View File

@ -20,15 +20,15 @@ const NpmNavbar = () => {
<> <>
<Navbar bg="dark" expand="lg" id="site-navbar" fixed="top" variant="dark"> <Navbar bg="dark" expand="lg" id="site-navbar" fixed="top" variant="dark">
<Container> <Container>
<Navbar.Brand>
<Link to={"/" + intl.locale + "/"} className={activeBrand}> <Link to={"/" + intl.locale + "/"} className={activeBrand}>
<Navbar.Brand as="span"><img src={logo} height="50px" alt="npm logo" id="logo"/></Navbar.Brand> <img src={logo} height="50px" alt="npm logo" id="logo" style={{marginBottom: 0}}/>
</Link> </Link>
<Navbar.Toggle aria-controls="basic-navbar-nav"/> </Navbar.Brand>
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Toggle aria-controls="site-navbar-collapse"/>
<Navbar.Collapse id="site-navbar-collapse">
<Nav className="mr-auto" activeKey={location.pathname}> <Nav className="mr-auto" activeKey={location.pathname}>
<Link to={`/${intl.locale}/news`} className="nav-item" activeClassName="active" <Link to={`/${intl.locale}/news`} className="nav-item" activeClassName="active" partiallyActive={true}>
partiallyActive={true}>
{/* news */}
<Nav.Link as="span" eventKey="news"><FormattedMessage id="header.news"/></Nav.Link> <Nav.Link as="span" eventKey="news"><FormattedMessage id="header.news"/></Nav.Link>
</Link> </Link>
<Link to={`/${intl.locale}/about`} className="nav-item" activeClassName="active" <Link to={`/${intl.locale}/about`} className="nav-item" activeClassName="active"
@ -49,7 +49,7 @@ const NpmNavbar = () => {
<Nav.Link as="span" eventKey="partners"><FormattedMessage <Nav.Link as="span" eventKey="partners"><FormattedMessage
id="header.partners"/></Nav.Link> id="header.partners"/></Nav.Link>
</Link> </Link>
{/* {/*
<Link to={`/${intl.locale}/magprog`} className="nav-item" activeClassName="active" <Link to={`/${intl.locale}/magprog`} className="nav-item" activeClassName="active"
partiallyActive={true}> partiallyActive={true}>
<Nav.Link as="span" eventKey="magprog"> <Nav.Link as="span" eventKey="magprog">

2
src/components/projectsNavbar.js
View File

@ -14,7 +14,7 @@ export default function ProjectsNavbar({project_type}) {
return ( return (
<> <>
<ul className="nav nav-tabs"> <ul id="project-navbar" className="nav nav-tabs">
<li className="nav-item"> <li className="nav-item">
<Link id="project_physics" className={navClasses("physics")} to="/projects/physics"> <Link id="project_physics" className={navClasses("physics")} to="/projects/physics">
<FormattedMessage id="physics.bc_title"/> <FormattedMessage id="physics.bc_title"/>

12
src/components/templates/news.js
View File

@ -5,14 +5,13 @@ import Parser from "html-react-parser"
import {Timeline, TimelineItem} from 'vertical-timeline-component-for-react' import {Timeline, TimelineItem} from 'vertical-timeline-component-for-react'
import Navbar from "../navBar" import NpmLayout from "../layout";
import NpmFooter from "../footer"
const NewsTemplate = (props) => { const NewsTemplate = (props) => {
const intl = useIntl() const intl = useIntl()
const lang = intl.locale const lang = intl.locale
var news = "" let news = "";
if (lang === "ru") { if (lang === "ru") {
news = props.data.ru_news.edges news = props.data.ru_news.edges
} else if (lang === "en") { } else if (lang === "en") {
@ -23,8 +22,7 @@ const NewsTemplate = (props) => {
const prev = props.pageContext.prev const prev = props.pageContext.prev
return ( return (
<> <NpmLayout>
<Navbar/>
<Timeline lineColor={'#ddd'} animate={false}> <Timeline lineColor={'#ddd'} animate={false}>
{news.map(({node}) => ( {news.map(({node}) => (
<TimelineItem <TimelineItem
@ -45,8 +43,8 @@ const NewsTemplate = (props) => {
{next && <Link to={`/${next}`}><h1 style={{padding: 10, color: `red`}}>---></h1></Link>} {next && <Link to={`/${next}`}><h1 style={{padding: 10, color: `red`}}>---></h1></Link>}
</div> </div>
</nav> </nav>
<NpmFooter/>
</> </NpmLayout>
) )
} }

6
src/pages/about.js
View File

@ -4,7 +4,7 @@ import {graphql} from "gatsby"
import Parser from "html-react-parser" import Parser from "html-react-parser"
import Layout from "../components/layout" import Layout from "../components/layout"
import "../styles/main.scss" import "../styles/npm-site.scss"
const AboutPage = ({data}) => { const AboutPage = ({data}) => {
const intl = useIntl() const intl = useIntl()
@ -20,11 +20,11 @@ const AboutPage = ({data}) => {
<h1><FormattedMessage id="about.title"/></h1> <h1><FormattedMessage id="about.title"/></h1>
<p><FormattedMessage id="about.descr"/></p> <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 <p style={{marginTop: `0px`, marginBottom: `0px`}}><FormattedMessage id="about.pubs.available1"/><Link
to="/publications"><FormattedMessage id="about.pubs.available2"/></Link></p> 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 <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> 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 <p style={{marginTop: `0px`}}><FormattedMessage id="about.contacts.telegram"/><a

74
src/pages/index.js
View File

@ -7,9 +7,7 @@ import Parser from "html-react-parser"
import head_ru from "../images/index/head.png" import head_ru from "../images/index/head.png"
import head_en from "../images/index/head_en.png" import head_en from "../images/index/head_en.png"
import "../styles/main.scss" import {Card, CardGroup, Jumbotron} from "react-bootstrap"
import "../styles/bootstrap.min.css"
import {Button, Jumbotron} from "react-bootstrap"
const IndexPage = ({data}) => { const IndexPage = ({data}) => {
const intl = useIntl() const intl = useIntl()
@ -34,32 +32,54 @@ const IndexPage = ({data}) => {
<h3 style={{color: `rgb(18, 64, 171)`}}><FormattedMessage id="jumbotron.labintro"/></h3> <h3 style={{color: `rgb(18, 64, 171)`}}><FormattedMessage id="jumbotron.labintro"/></h3>
<p id="lead"><FormattedMessage id="jumbotron.lead"/></p> <p id="lead"><FormattedMessage id="jumbotron.lead"/></p>
{Parser(intl.formatMessage({id: "jumbotron.list"}))} {Parser(intl.formatMessage({id: "jumbotron.list"}))}
<Link to="/about" className="btn btn-primary btn-lg">
<FormattedMessage id="jumbotron.about"/>
</Link>
</Jumbotron> </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"> <CardGroup>
<h2><FormattedMessage id="more.nuclear_title"/></h2> <Card>
<p><FormattedMessage id="more.nuclear_body"/></p> <Card.Body>
<Button variant="primary" id="more"><Link to="/projects/physics"><FormattedMessage <Card.Title><FormattedMessage id="more.nuclear_title"/></Card.Title>
id="more.nuclear_more"/></Link></Button> <Card.Text>
</div> <FormattedMessage id="more.nuclear_body"/>
<div className="col-lg-4"> </Card.Text>
<h2><FormattedMessage id="more.education_title"/></h2> </Card.Body>
<p><FormattedMessage id="more.education_body"/></p> <Card.Footer>
<Button variant="primary" id="more"><Link to="/projects/education"><FormattedMessage <Link to="/projects/physics" className="btn btn-info">
id="more.education_more"/></Link></Button> <FormattedMessage id="more.nuclear_more"/>
</div> </Link>
<div className="col-lg-4"> </Card.Footer>
<h2><FormattedMessage id="more.software_title"/></h2> </Card>
<p><FormattedMessage id="more.software_body"/></p> <Card>
<Button variant="primary" id="more"><Link to="/projects/software"><FormattedMessage <Card.Body>
id="more.software_more"/></Link></Button> <Card.Title><FormattedMessage id="more.education_title"/></Card.Title>
</div> <Card.Text>
</div> <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`}}/> <hr style={{marginBottom: `50px`}}/>
{/* --------------------------------- */} {/* --------------------------------- */}
<h1 style={{textAlign: `center`}}><FormattedMessage id="more.news"/></h1> <h1 style={{textAlign: `center`}}><FormattedMessage id="more.news"/></h1>

4
src/pages/magprog/index.js
View File

@ -42,10 +42,10 @@ function team(edges) {
return ( return (
<section> <section>
<a className="image"> <div className="image">
<img src={withPrefix(`images/members/${photo}`)} <img src={withPrefix(`images/members/${photo}`)}
alt={edge.node.frontmatter.title} width="100%" data-position="top center"/> alt={edge.node.frontmatter.title} width="100%" data-position="top center"/>
</a> </div>
<div className="content"> <div className="content">
<div className="inner"> <div className="inner">
<h2>{name}</h2> <h2>{name}</h2>

32
src/pages/partners.js
View File

@ -14,18 +14,18 @@ const PartnersPage = () => {
<Layout> <Layout>
<div className="media" style={{marginTop: `30px`}}> <div className="media" style={{marginTop: `30px`}}>
<div className="media-body"> <div className="media-body">
<h1 className="partner"> <h2 className="partner">
<a aria-label="MIPT general physics" href="https://mipt.ru/education/chair/physics/"> <a aria-label="MIPT general physics" href="https://mipt.ru/education/chair/physics/">
<FormattedMessage id="partners.mipt.title_fund"/> <FormattedMessage id="partners.mipt.title_fund"/>
</a> </a>
</h1> </h2>
<p><FormattedMessage id="partners.mipt.description_fund"/></p> <p><FormattedMessage id="partners.mipt.description_fund"/></p>
<hr/> <hr/>
<h1 className="partner"> <h2 className="partner">
<a aria-label="MIPT HEP" href="https://mipt.ru/science/labs/high_energy_physics_lab.php"> <a aria-label="MIPT HEP" href="https://mipt.ru/science/labs/high_energy_physics_lab.php">
<FormattedMessage id="partners.mipt.title_energy"/> <FormattedMessage id="partners.mipt.title_energy"/>
</a> </a>
</h1> </h2>
<p><FormattedMessage id="partners.mipt.description_energy"/></p> <p><FormattedMessage id="partners.mipt.description_energy"/></p>
</div> </div>
<div className="media-right media-middle"> <div className="media-right media-middle">
@ -39,7 +39,7 @@ const PartnersPage = () => {
<div className="media"> <div className="media">
<div className="media-body"> <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> <p><FormattedMessage id="partners.jb.description"/></p>
</div> </div>
<div className="media-right media-middle"> <div className="media-right media-middle">
@ -55,8 +55,8 @@ const PartnersPage = () => {
<div className="media"> <div className="media">
<div className="media-body"> <div className="media-body">
<h1><a className="partner" href="https://research.jetbrains.org/ru/groups/npm">JetBrains <h2><a className="partner" href="https://research.jetbrains.org/ru/groups/npm">JetBrains
Research</a></h1> Research</a></h2>
<p><FormattedMessage id="partners.jbr.description"/></p> <p><FormattedMessage id="partners.jbr.description"/></p>
</div> </div>
<div className="media-right media-middle"> <div className="media-right media-middle">
@ -72,11 +72,11 @@ const PartnersPage = () => {
<div className="media"> <div className="media">
<div className="media-body"> <div className="media-body">
<h1 className="partner"> <h2 className="partner">
<a href="http://inr.ru/"> <a href="http://inr.ru/">
<FormattedMessage id="partners.ras.title_exp"/> <FormattedMessage id="partners.ras.title_exp"/>
</a> </a>
</h1> </h2>
<p><FormattedMessage id="partners.ras.description_exp"/></p> <p><FormattedMessage id="partners.ras.description_exp"/></p>
</div> </div>
</div> </div>
@ -90,11 +90,11 @@ const PartnersPage = () => {
</a> </a>
</div> </div>
<div className="media-body" style={{marginLeft: `25px`}}> <div className="media-body" style={{marginLeft: `25px`}}>
<h1 className="partner"> <h2 className="partner">
<a aria-label="INR" href="http://www.inr.ru/"> <a aria-label="INR" href="http://www.inr.ru/">
<FormattedMessage id="partners.ras.title_beam"/> <FormattedMessage id="partners.ras.title_beam"/>
</a> </a>
</h1> </h2>
<p><FormattedMessage id="partners.ras.description_beam"/></p> <p><FormattedMessage id="partners.ras.description_beam"/></p>
</div> </div>
</div> </div>
@ -103,8 +103,8 @@ const PartnersPage = () => {
<div className="media"> <div className="media">
<div className="media-body"> <div className="media-body">
<h1 className="partner"><a aria-label="INR education" href="http://www.inr.ru/"><FormattedMessage <h2 className="partner"><a aria-label="INR education" href="http://www.inr.ru/"><FormattedMessage
id="partners.ras.title_education"/></a></h1> id="partners.ras.title_education"/></a></h2>
<p><FormattedMessage id="partners.ras.description_education"/></p> <p><FormattedMessage id="partners.ras.description_education"/></p>
</div> </div>
<div className="media-right media-middle"> <div className="media-right media-middle">
@ -120,15 +120,15 @@ const PartnersPage = () => {
<a href="#"><img className="media-object" src={mtl_logo} width="100px"/></a> <a href="#"><img className="media-object" src={mtl_logo} width="100px"/></a>
</div> </div>
<div className="media-body"> <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> */} </div> */}
<div className="media" style={{marginBottom: `30px`}}> <div className="media" style={{marginBottom: `30px`}}>
<div className="media-body"> <div className="media-body">
<h1 className="partner"><a aria-label="SRI RAS" href="http://www.iki.rssi.ru/"><FormattedMessage <h2 className="partner"><a aria-label="SRI RAS" href="http://www.iki.rssi.ru/"><FormattedMessage
id="partners.ras.title_iki"/></a></h1> id="partners.ras.title_iki"/></a></h2>
<p><FormattedMessage id="partners.ras.description_iki"/></p> <p><FormattedMessage id="partners.ras.description_iki"/></p>
</div> </div>
<div className="media-right media-middle"> <div className="media-right media-middle">

7
src/styles/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
src/styles/footer.scss
View File

@ -1,6 +1,4 @@
html.npm-site { .npm-site footer {
footer {
background-color: rgb(245, 245, 245); background-color: rgb(245, 245, 245);
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -11,24 +9,22 @@ html.npm-site {
font-family: Segoe UI, serif; font-family: Segoe UI, serif;
font-size: 20px; font-size: 20px;
text-decoration: none solid rgb(108, 117, 125); text-decoration: none solid rgb(108, 117, 125);
}
footer .container p { .container p {
margin-bottom: 15px; margin-bottom: 15px;
} }
footer p a { p a {
color: rgb(0, 86, 179); color: rgb(0, 86, 179);
text-decoration: none; text-decoration: none;
} }
footer p a:hover { p a:hover {
color: rgb(12, 65, 124); color: rgb(12, 65, 124);
text-decoration: underline; text-decoration: underline;
} }
footer a:visited { a:visited {
color: rgb(0, 86, 179); color: rgb(0, 86, 179);
} }
} }

91
src/styles/layout.scss
View File

@ -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%;
}
}
}

79
src/styles/navbar.scss
View File

@ -1,48 +1,12 @@
nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
height: 75px;
}
.site-navbar { .site-navbar {
div.mr-auto.navbar-nav a {
height: 75px;
.nav-link {
font-size: 1rem; 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 ------------------------------ */ /* ------ navbar ------------------------------ */
@ -53,7 +17,7 @@ nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
padding-top: 0 padding-top: 0
} }
a.nav-link a#active { a#active {
color: white; color: white;
background-color: rgb(20, 142, 161); background-color: rgb(20, 142, 161);
padding-top: 11px; padding-top: 11px;
@ -67,7 +31,7 @@ nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
margin-right: 17px; margin-right: 17px;
} }
div#basic-navbar-nav.navbar-collapse.collapse.show { .navbar-collapse.collapse.show {
width: 100px; width: 100px;
padding-bottom: 0; padding-bottom: 0;
text-align: center; text-align: center;
@ -75,7 +39,7 @@ nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
margin-top: -0px; margin-top: -0px;
} }
button.navbar-toggler { .navbar-toggler {
background-color: rgb(20, 142, 161); background-color: rgb(20, 142, 161);
} }
@ -83,31 +47,4 @@ nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top {
margin: auto; 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 }
} */
} }

191
src/styles/main.scss → src/styles/npm-site.scss
View File

@ -1,13 +1,76 @@
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 { main {
margin-top: 75px; margin-top: 75px;
} }
a .partner { .container {
font-size: 1.8rem; 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 ---------------------- */ /* ---- projects navbar ---------------------- */
.project-navbar {
a { a {
font-size: 0.98rem; font-size: 0.98rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@ -30,8 +93,7 @@ html.npm-site {
padding: 7px 22px 7px 22px; padding: 7px 22px 7px 22px;
margin-top: 5px; margin-top: 5px;
} }
}
/* ------------------------------------------- */
/* ------- news & main content ----------------------------- */ /* ------- news & main content ----------------------------- */
h1 { h1 {
@ -46,50 +108,7 @@ html.npm-site {
font-size: 1.5rem; 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 { .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; padding: 60px 40px 10px 40px;
margin-bottom: 0; margin-bottom: 0;
background-color: rgb(247, 247, 247); background-color: rgb(247, 247, 247);
@ -108,45 +127,6 @@ html.npm-site {
border-right: 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);
}
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 { h2.title {
background-color: rgb(247, 247, 247); background-color: rgb(247, 247, 247);
padding: 15px; padding: 15px;
@ -165,27 +145,10 @@ html.npm-site {
right: 0; 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 { img.center-block {
margin-bottom: 0; margin-bottom: 0;
} }
ol li {
font-size: 0.9rem;
}
li { li {
margin-bottom: 0; margin-bottom: 0;
font-size: 0.9rem; font-size: 0.9rem;
@ -235,9 +198,9 @@ html.npm-site {
max-width: 1400px; max-width: 1400px;
} }
div.timeline--wrapper { /* div.timeline--wrapper {
margin-top: 60px; margin-top: 60px;
} }*/
div.entry div.title { div.entry div.title {
width: 20% width: 20%
@ -251,22 +214,6 @@ html.npm-site {
left: calc(20% - 6px) 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 { figcaption {