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

Merge pull request #17 from mipt-npm/magprog

Browse Source 
Magprog
This commit is contained in:
Alexander Nozik 2021-04-03 16:06:25 +03:00 committed by GitHub
commit a675e11d26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 252 additions and 432 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">

20
src/components/magprog/assets/sass/magprog.scss
View File

@ -8,11 +8,11 @@
.magprog { .magprog {
/* /*
Hyperspace by HTML5 UP Hyperspace by HTML5 UP
html5up.net | @ajlkn html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/ */
// Breakpoints. // Breakpoints.
@ -56,20 +56,16 @@
@import 'layout/sidebar'; @import 'layout/sidebar';
@import 'layout/intro'; @import 'layout/intro';
#site-navbar { #site-navbar {
.container { .container {
max-width: 1160px; max-width: 1160px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 0 15px 0 15px; padding: 0 15px 0 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
} }
a.nav-item { font-weight: 400;
text-decoration: none; text-decoration: none;
}
z-index: 100000; z-index: 100000;
} }
@ -78,4 +74,4 @@
@import 'layout/footer'; @import 'layout/footer';
@import 'layout/header'; @import 'layout/header';
@import 'layout/wrapper'; @import 'layout/wrapper';

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

@ -6,6 +6,9 @@ import SEO from "../../seo";
import NpmNavbar from "../../navBar"; import NpmNavbar from "../../navBar";
import '../assets/sass/magprog.scss' import '../assets/sass/magprog.scss'
import "bootstrap/dist/css/bootstrap.min.css"
import "katex/dist/katex.min.css"
import "../../../styles/npm-site.scss"
const MagProgLayout = ({children}) => { const MagProgLayout = ({children}) => {
const intl = useIntl(); const intl = useIntl();
@ -15,16 +18,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 lang={lang} 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>
); );

18
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>
<Link to={"/" + intl.locale + "/"} className={activeBrand}> <Navbar.Brand>
<Navbar.Brand as="span"><img src={logo} height="50px" alt="npm logo" id="logo"/></Navbar.Brand> <Link to={"/" + intl.locale + "/"} className={activeBrand}>
</Link> <img src={logo} height="50px" alt="npm logo" id="logo" style={{marginBottom: 0}}/>
<Navbar.Toggle aria-controls="basic-navbar-nav"/> </Link>
<Navbar.Collapse id="basic-navbar-nav"> </Navbar.Brand>
<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>
) )
} }

3
src/content/ru/magprog/contacts.md
View File

@ -5,6 +5,9 @@ section_title: Контакты
language: ru language: ru
--- ---
[Сайт лаборатории](/)
[Страница направления в JetBrains Research](https://research.jetbrains.org/groups/npm/)
Все вопросы можно задать в [телеграм канале лаборатории](https://t.me/mipt_npm). Все вопросы можно задать в [телеграм канале лаборатории](https://t.me/mipt_npm).

7
src/content/ru/magprog/enroll.md
View File

@ -5,6 +5,9 @@ section_title: Как поступить?
language: ru language: ru
--- ---
Для поступления на программу необходимо: Для поступления на программу необходимо:
* в срок **до 31 мая** заполнить [анкету]. В анкете надо указать одного или нескольких научных руководителей, с которыми вы бы хотели работать. * в срок **до 31 мая** заполнить **[анкету](https://docs.google.com/forms/d/e/1FAIpQLScxsTEuCMdPcIJCrdlxCepVOV_j8mqhV7Sh9jnsUKpsS0howg/viewform?usp=sf_link)**. В анкете надо указать одного или нескольких научных руководителей, с которыми вы бы хотели работать.
* в срок **до 30 июня** пройти собеседование с научными руководителями и согласовать предполагаемый план обучения. * в срок **до 30 июня** пройти собеседование с научными руководителями и согласовать предполагаемый план обучения.
* Подать документы в магистратуру МФТИ согласно [правилам поступления](https://pk.mipt.ru/master/) (направление **ЛФИ Математика и физика** или **ФПМИ Информатика**). Если есть соглашение с научным руководителем, но не удалось пройти по конкурсу, то обучение с большой вероятностью будет оплачено нашими партнерами. * Подать документы в магистратуру МФТИ согласно [правилам поступления](https://pk.mipt.ru/master/) (направление **ЛФИ Математика и физика** или **ФПМИ Информатика**). Если есть соглашение с научным руководителем, но не удалось пройти по конкурсу, то обучение с большой вероятностью будет оплачено нашими партнерами.
<span class="badge badge-danger">ВАЖНО:</span> предварительное согласование с научным руководителем является **обязательным** для обучения на программе.

2
src/content/ru/magprog/partners.md
View File

@ -5,7 +5,7 @@ section_title: Партнеры
language: ru language: ru
--- ---
* [ЛФИ](https://mipt.ru/education/departments/lpr/) * [ЛФИ](https://mipt.ru/education/departments/lpr/)
* [ПМИ](https://mipt.ru/education/departments/fpmi/) * [ФПМИ](https://mipt.ru/education/departments/fpmi/)
* [JetBrains Research](https://research.jetbrains.org/groups/npm/) * [JetBrains Research](https://research.jetbrains.org/groups/npm/)
* [JetBrains](https://www.jetbrains.com/) * [JetBrains](https://www.jetbrains.com/)
* [Таврида электрик](https://www.tavrida.com/ter/) * [Таврида электрик](https://www.tavrida.com/ter/)

12
src/content/ru/magprog/team.md
View File

@ -1,12 +0,0 @@
---
content_type: magprog
magprog_section: team
section_title: Комманда
language: ru
---
### Александр Нозик
**Руководитель программы.**
### Александр Светличный
**Заместитель руководителя программы**

4
src/content/ru/magprog/what.md
View File

@ -5,6 +5,6 @@ section_title: Что?
language: ru language: ru
--- ---
Эта страница посвящена магистерской программе МФТИ под названием **Разработка и применение программного обеспечения в физических исследованиях**. Программа создана на базе [лаборатории методов ядерно-физических экспериментов](/) при поддержке двух школ МФТИ: [ЛФИ](https://mipt.ru/education/departments/lpr/) и [ПМИ](https://mipt.ru/education/departments/fpmi/) и ряда академических и промышленных [партнеров]. Эта страница посвящена магистерской программе МФТИ под названием **Разработка и применение программного обеспечения в физических исследованиях**. Программа создана на базе [лаборатории методов ядерно-физических экспериментов](/) при поддержке двух школ МФТИ: [ЛФИ](https://mipt.ru/education/departments/lpr/) и [ФПМИ](https://mipt.ru/education/departments/fpmi/) и ряда академических и промышленных [партнеров](#partners).
Эта страница призвана ответить на вопросы о том, [зачем] создана программа, кто является [научными руководителями] [как поступить] на нее и в чем ее особенности (в частности, что входит в [учебную программу]). Ну и разумеется информация о [команде] и [контактах]. Эта страница призвана ответить на вопросы о том, [зачем](#why) создана программа, кто является [научными руководителями](#mentors) [как поступить](#enroll) на нее и в чем ее особенности (в частности, что входит в [учебную программу](#program)). Ну и разумеется информация о [команде](#team) и [контактах](#contacts).

10
src/content/ru/magprog/why.md
View File

@ -5,22 +5,22 @@ section_title: Зачем?
language: ru language: ru
--- ---
*Зачем* физтеху **еще одна** магистерская программа? **Зачем** физтеху **еще одна** магистерская программа?
Чтобы объединить усилия физиков и программистов для создания лучших компьютерных решений и применения этих решений в области фундаментальной и прикладной физики и инженерии. Чтобы объединить усилия физиков и программистов для создания лучших компьютерных решений и применения этих решений в области фундаментальной и прикладной физики и инженерии.
*Зачем* нужно объединять эти усилия? **Зачем** нужно объединять эти усилия?
Потому что сейчас существенная (если не основная) часть работы физика и/или инженера так или иначе связана с компьютером. Компьютеры и компьютерные программы используются на всех этапах экспериментального или теоретического исследования. Любой работе предшествует **компьютерное моделирование**, затем требуется **автоматизация сбора и хранения данных**, затем **анализ данных** и, наконец, **представление результатов**. На всех этих этапах нужны компьютеры и компьютерные программы и совершенствование последних является ключевым фактором в исследованиях и разработках. Потому что сейчас существенная (если не основная) часть работы физика и/или инженера так или иначе связана с компьютером. Компьютеры и компьютерные программы используются на всех этапах экспериментального или теоретического исследования. Любой работе предшествует **компьютерное моделирование**, затем требуется **автоматизация сбора и хранения данных**, затем **анализ данных** и, наконец, **представление результатов**. На всех этих этапах нужны компьютеры и компьютерные программы и совершенствование последних является ключевым фактором в исследованиях и разработках.
*Зачем* для этого нужны программисты? **Зачем** для этого нужны программисты?
Современная разработка программного обеспечения — это отдельная инженерная дисциплина, требующая опыта и погружения в технологию и соответствующие профессиональные сообщества. Несмотря на то, что современное программирование зародилось в физических исследованиях, с тех пор прошло много времени, и физики в среднем уже не могут похвастаться хорошими знаниями в этой области. Качество программного обеспечения в физике в среднем крайне низкое. Те же проблемы свойствены инженерной индустрии. Современная разработка программного обеспечения — это отдельная инженерная дисциплина, требующая опыта и погружения в технологию и соответствующие профессиональные сообщества. Несмотря на то, что современное программирование зародилось в физических исследованиях, с тех пор прошло много времени, и физики в среднем уже не могут похвастаться хорошими знаниями в этой области. Качество программного обеспечения в физике в среднем крайне низкое. Те же проблемы свойствены инженерной индустрии.
*Зачем* для этого нужны физики? **Зачем** для этого нужны физики?
Все прошлые попытки поручить всю работу профессиональным программистам не увенчались успехом. Для того чтобы сформулировать задачу программисту надо знать современные компьютерные технологии и понимать как их лучше применить. Но без погружения в предметную область, программисты тоже не могут сами понять, что нужно делать и как это лучше делать. Все прошлые попытки поручить всю работу профессиональным программистам не увенчались успехом. Для того чтобы сформулировать задачу программисту надо знать современные компьютерные технологии и понимать как их лучше применить. Но без погружения в предметную область, программисты тоже не могут сами понять, что нужно делать и как это лучше делать.
*Зачем* все это программистам? **Зачем** все это программистам?
Во-первых, это просто интересно. Задачи, возникающие на стыке физики и программирования на порядок (или два) интереснее того, что ожидает в повседневной рабочей жизни инженера-программиста. Во-вторых, это хороший повод опробовать все самые свежие и экспериментальные технологии. Кроме того, опыт в моделировании, обработке данных и работе с приборами является бесценным в IT среде. Во-первых, это просто интересно. Задачи, возникающие на стыке физики и программирования на порядок (или два) интереснее того, что ожидает в повседневной рабочей жизни инженера-программиста. Во-вторых, это хороший повод опробовать все самые свежие и экспериментальные технологии. Кроме того, опыт в моделировании, обработке данных и работе с приборами является бесценным в IT среде.

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>

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

@ -10,11 +10,19 @@ import Scroll from "../../components/magprog/common/Scroll";
function mentors(edges) { function mentors(edges) {
return ( return (
<> <>
<div className="header" style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginLeft: 40
}}>
<h1 className="title">Научные руководители</h1>
</div>
{edges.map((edge) => { {edges.map((edge) => {
return <section> return <section key={`team_${edge.node.frontmatter.id}`}>
<div className="image"> <div className="image fit">
<img src={withPrefix(`images/magprog/mentors/${edge.node.frontmatter.photo}`)} <img src={withPrefix(`images/magprog/mentors/${edge.node.frontmatter.photo}`)}
alt={edge.node.frontmatter.title} width="100%" data-position="top center"/> alt={edge.node.frontmatter.title}/>
</div> </div>
<div className="content"> <div className="content">
<div className="inner"> <div className="inner">
@ -36,16 +44,24 @@ function mentors(edges) {
function team(edges) { function team(edges) {
return ( return (
<> <>
<div className="header" style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginLeft: 40
}}>
<h1 className="title">Команда</h1>
</div>
{edges.map((edge) => { {edges.map((edge) => {
const name = edge.node.frontmatter.title; const name = edge.node.frontmatter.title;
const photo = edge.node.frontmatter.photo; const photo = edge.node.frontmatter.photo;
return ( return (
<section> <section key={`team_${edge.node.frontmatter.id}`}>
<a className="image"> <div className="image fit">
<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}/>
</a> </div>
<div className="content"> <div className="content">
<div className="inner"> <div className="inner">
<h2>{name}</h2> <h2>{name}</h2>
@ -112,7 +128,7 @@ const MagProgPage = (props) => {
offset={-300} offset={-300}
> >
{sections.map(section => { {sections.map(section => {
return <li> return <li key={section.id}>
<Scroll type="id" element={section.id}> <Scroll type="id" element={section.id}>
<a href={`#${section.id}`}>{section.title}</a> <a href={`#${section.id}`}>{section.title}</a>
</Scroll> </Scroll>
@ -124,8 +140,17 @@ const MagProgPage = (props) => {
</section> </section>
<div id="wrapper"> <div id="wrapper">
<div className="header" style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginTop: 90,
marginLeft: 40
}}>
<h1 className="title">Научное программное обеспечение</h1>
</div>
{sections.map(section => { {sections.map(section => {
return <section id={section.id} className={section.style}> return <section id={section.id} key={section.id} className={section.style}>
{section.body} {section.body}
</section> </section>
})} })}
@ -172,6 +197,7 @@ export const query = graphql`
node { node {
html html
frontmatter { frontmatter {
id
title title
photo photo
language language
@ -203,6 +229,7 @@ export const query = graphql`
node { node {
html html
frontmatter { frontmatter {
id
title title
photo photo
language language

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

77
src/styles/navbar.scss
View File

@ -1,48 +1,12 @@
nav#site-navbar.navbar.navbar-expand-lg.bg-dark.fixed-top { #site-navbar {
height: 75px; height: 75px;
}
.site-navbar { .nav-link {
div.mr-auto.navbar-nav a {
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 }
} */
} }

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

@ -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 { 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 ---------------------- */
a { .project-navbar {
font-size: 0.98rem; a {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 0.98rem;
} font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
a.nav-link#project:hover { a.nav-link#project:hover {
padding-bottom: 7px; padding-bottom: 7px;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
text-decoration: none; text-decoration: none;
background-color: rgb(228, 228, 228); background-color: rgb(228, 228, 228);
} }
ul.nav-tabs a.nav-link.active { ul.nav-tabs a.nav-link.active {
color: black; color: black;
background-color: rgb(190, 190, 190); background-color: rgb(190, 190, 190);
} }
ul.nav-tabs a.nav-link, ul.nav-tabs a.nav-link.active { ul.nav-tabs a.nav-link, ul.nav-tabs a.nav-link.active {
border-radius: 0; border-radius: 0;
padding: 7px 22px 7px 22px; padding: 7px 22px 7px 22px;
margin-top: 5px; margin-top: 5px;
}
} }
/* ------------------------------------------- */
/* ------- news & main content ----------------------------- */ /* ------- news & main content ----------------------------- */
h1 { h1 {
font-size: 2.3rem; font-size: 2.3rem;
@ -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 {