├── .editorconfig ├── .gitignore ├── README.md ├── gulpfile.js ├── icons.sketch ├── package.json └── src ├── all-the-blocks.pug ├── call-for-speakers ├── index.md └── index.pug ├── code-of-conduct-ru ├── index.md └── index.pug ├── code-of-conduct ├── index.md └── index.pug ├── favicon.ico ├── fonts ├── gotham-pro-bold.woff ├── gotham-pro-bold.woff2 ├── gotham-pro-regular.woff └── gotham-pro-regular.woff2 ├── images ├── Rock.jpg ├── Scissors.jpg ├── icon-144x144.png ├── icon-180x180.png ├── icon-192x192.png ├── icon-228x228.png ├── icon.svg ├── logo-htmlacademy.svg ├── logo-jetbrains.svg ├── logo-selectel.svg ├── logo-semrush.svg ├── logo-shishki.svg ├── logo-skyeng.svg ├── logo-yandex-taxi.svg ├── logo.svg ├── og-fb.png ├── og-vk.png ├── slash.svg ├── square.svg ├── team.jpg └── team@2x.jpg ├── index.pug ├── pitercss.webmanifest ├── pug ├── _adwords.pug ├── _common.pug ├── _data.pug └── _metrika.pug ├── scripts └── loadfonts.js ├── speakers ├── eva-lettner.jpg └── patrick-kettner.jpg ├── styles.styl ├── styles ├── components │ ├── Badge.styl │ ├── Content.styl │ ├── Counters.styl │ ├── Footer.styl │ ├── Form.styl │ ├── Header.styl │ ├── Nav.styl │ ├── Page.styl │ ├── PriceInfo.styl │ ├── Schedule.styl │ ├── Section.styl │ └── SocialLinks.styl ├── elements │ ├── page.styl │ └── selection.styl ├── generic │ └── resets.styl ├── lib │ ├── add-font.styl │ ├── constants.styl │ ├── stops.styl │ └── z-index.styl ├── pages │ └── CoC.styl ├── ui │ ├── ui-Block.styl │ ├── ui-Button.styl │ ├── ui-Cols.styl │ ├── ui-Icon.styl │ ├── ui-Input.styl │ ├── ui-Link.styl │ └── ui-Table.styl └── utilities │ ├── is-hidden.styl │ └── is-wider.styl ├── svg ├── Close.svg ├── Error.svg ├── FooterLogo.svg ├── Info.svg ├── Logo.svg ├── Logo_ticket.svg ├── Logo_ticketClose.svg ├── PayPal.svg ├── Pin.svg ├── SocialIcon_facebook.svg ├── SocialIcon_github.svg ├── SocialIcon_twitter.svg ├── Ticket.svg ├── TogglerOff.svg ├── TogglerOn.svg ├── Valid.svg └── YandexKassa.svg ├── woff.styl └── woff2.styl /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 4 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [{package.json,.travis.yml,*.pug}] 12 | indent_size = 2 13 | indent_style = space 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dest 2 | node_modules 3 | src/_icons 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [pitercss](https://pitercss.com/) 2 | 3 | - Start: `npm start` or `gulp` 4 | - Build: `npm run build` or `gulp build` 5 | - Init Deploy to gh-pages: `npm run init-deploy` 6 | - Deploy: `npm run deploy` 7 | - Test: `npm test` 8 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const runSequence = require('run-sequence'); 3 | 4 | const svgSprite = require("gulp-svg-sprite"); 5 | 6 | const stylus = require('gulp-stylus'); 7 | const _stylus = require('stylus'); 8 | const stylobuild = require('stylobuild'); 9 | 10 | const pug = require('gulp-pug'); 11 | 12 | const rsync = require('gulp-rsync'); 13 | const sync = require('browser-sync').create(); 14 | 15 | const assets = [ 16 | 'src/**', 17 | '!src/svg{,/**}', 18 | '!src/_icons{,/**}', 19 | '!src/styles{,/**}', 20 | '!src/scripts{,/**}', 21 | '!src/fonts{,/**}', 22 | '!src/pug{,/**}', 23 | '!src/**/*.pug', 24 | '!src/**/*.md', 25 | '!src/**/*.js', 26 | '!src/**/*.styl', 27 | '!src/**/*~' 28 | ]; 29 | 30 | gulp.task('html', () => { 31 | return gulp.src('src/**/index.pug') 32 | .pipe(pug({ 33 | 34 | })) 35 | .pipe(gulp.dest('dest')) 36 | .pipe(sync.stream()); 37 | }); 38 | 39 | gulp.task('styles', () => { 40 | return gulp.src('src/*.styl') 41 | .pipe(stylus({ 42 | 'include css': true, 43 | use: stylobuild({}), 44 | define: { 45 | url: _stylus.resolver() 46 | } 47 | })) 48 | .pipe(gulp.dest('dest')) 49 | .pipe(sync.stream()); 50 | }); 51 | 52 | gulp.task('svg-icons', function () { 53 | return gulp.src('src/svg/*.svg') 54 | .pipe(svgSprite({ 55 | mode: { 56 | symbol: { 57 | inline: true, 58 | prefix: '.ui-Icon_%s .ui-Icon-Image', 59 | dest: '', 60 | dimensions: '%s', 61 | sprite: 'sprite.svg', 62 | render: { 63 | styl: true 64 | }, 65 | example: true 66 | } 67 | }, 68 | svg: { 69 | namespaceClassnames: false 70 | } 71 | })) 72 | .pipe(gulp.dest("src/_icons")) 73 | }); 74 | 75 | gulp.task('copy', () => { 76 | return gulp.src(assets) 77 | .pipe(gulp.dest('dest')) 78 | .pipe(sync.stream({ once: true })); 79 | }); 80 | 81 | gulp.task('server', () => { 82 | sync.init({ 83 | notify: false, 84 | server: { 85 | baseDir: 'dest' 86 | } 87 | }); 88 | }); 89 | 90 | gulp.task('watch', () => { 91 | gulp.watch(['src/**/*.pug', 'src/**/*.md', 'src/**/*.js'], ['html']); 92 | gulp.watch(['src/**/*.css', 'src/**/*.styl'], ['styles']); 93 | gulp.watch('src/svg/*.svg', ['build-assets-with-icons']); 94 | gulp.watch(assets, ['copy']); 95 | }); 96 | 97 | gulp.task('deploy', () => { 98 | return gulp.src('dest/**/*') 99 | .pipe(rsync({ 100 | root: 'dest', 101 | hostname: 'pitercss.com', 102 | destination: '/var/www/pitercss.com/html/', 103 | recursive: true, 104 | clean: true, 105 | incremental: true, 106 | exclude: '.DS_Store' 107 | })); 108 | }); 109 | 110 | gulp.task('build', [ 111 | 'build-assets-with-icons', 112 | 'copy' 113 | ]); 114 | 115 | gulp.task('build-assets', [ 116 | 'html', 117 | 'styles' 118 | ]); 119 | 120 | gulp.task('build-assets-with-icons', (done) => { 121 | runSequence('svg-icons', 'build-assets', done); 122 | }); 123 | 124 | 125 | gulp.task('default', [ 126 | 'build', 127 | 'server', 128 | 'watch' 129 | ]); 130 | -------------------------------------------------------------------------------- /icons.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/icons.sketch -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "start": "gulp", 5 | "build": "gulp build", 6 | "deploy": "(cd dest && touch z && git add . && git rm -rf .) && gulp build && (cd dest && git add . && git commit -m 'Build up' && git push -f origin gh-pages)", 7 | "init-deploy": "rm -rf dest && git clone -b gh-pages git@github.com:pitercss/pitercss.com.git dest", 8 | "test": "editorconfig-cli && gulp build && ls dest" 9 | }, 10 | "devDependencies": { 11 | "@htmlacademy/editorconfig-cli": "^0.1.0", 12 | "autoprefixer": "^6.5.3", 13 | "bemto.pug": "^2.0.0", 14 | "browser-sync": "^2.17.5", 15 | "gulp": "^3.9.1", 16 | "gulp-pug": "^3.2.0", 17 | "gulp-rsync": "0.0.7", 18 | "gulp-stylus": "^2.6.0", 19 | "gulp-svg-sprite": "^1.3.6", 20 | "jstransformer-markdown-it": "^2.0.0", 21 | "run-sequence": "^1.2.2", 22 | "stylobuild": "^1.0.0", 23 | "stylus": "^0.54.5" 24 | }, 25 | "editorconfig-cli": [ 26 | "src/*.html", 27 | "src/**/*.css", 28 | "src/**/*.svg" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /src/all-the-blocks.pug: -------------------------------------------------------------------------------- 1 | include pug/_common.pug 2 | 3 | +Page 4 | +Header({ isIndex: true, action: true }) 5 | 6 | +b.Content.-Content(role="main") 7 | h1 h1. What we expect and other text 8 | h2 h2. Sponsoring Front-Trends, you'll reach thousands of web developers 9 | h3 h3. Front-Trends is one of Europe’s most established annual conferences for professional front-end developers 10 | h4 h4. Sometext content 11 | 12 | p There are techniques that will help you prepare for that situation. We’ll illuminate the audience and reduce the brightness of the stage lights for Q&A sessions. 13 | p Be prepared for a lot of light. Depending on the conditions, you may or may not be able to see the audience well (or at all). There are techniques that will help you prepare for that situation. We’ll illuminate the audience and reduce the brightness of the stage lights for Q&A sessions. 14 | 15 | p.is-large Be prepared for a lot of light. Depending on the conditions, you may or may not be able to see the audience well (or at all). 16 | 17 | +b.ui-Cols 18 | +e.Item 19 | p.is-small Be prepared for a lot of light. Depending on the conditions, you may or may not be able to see the audience well (or at all). There are techniques that will help you prepare for that situation. We’ll illuminate the audience and reduce the brightness of the stage lights for Q&A sessions. 20 | +e.Item 21 | p.is-small Be prepared for a lot of light. Depending on the conditions, you may or may not be able to see the audience well (or at all). There are techniques that will help you prepare for that situation. We’ll illuminate the audience and reduce the brightness of the stage lights for Q&A sessions. 22 | 23 | p: strong Be prepared for a lot of light. Depending on the conditions, you may or may not be able to see the audience well (or at all). 24 | p: em Be prepared for a lot of light. Depending on the conditions, you may or may not be able to see the audience well (or at all). 25 | 26 | blockquote.is-large 27 | p By sponsoring Front-Trends, you'll reach thousands of professional web-developers, both at the event and online once videos areposted 28 | cite John Doe 29 | 30 | blockquote 31 | p By sponsoring Front-Trends, you'll reach thousands of professional web-developers, both at the event and online once videos areposted 32 | cite John Doe 33 | 34 | blockquote.is-small 35 | p By sponsoring Front-Trends, you'll reach thousands of professional web-developers, both at the event and online once videos areposted 36 | cite John Doe 37 | 38 | figure.is-wider 39 | img(src="http://placekitten.com/1280/450") 40 | figcaption Be prepared for a lot of light 41 | 42 | +b.ui-Cols 43 | +e.Item 44 | ol 45 | li Riemann zeta function 46 | li Riemann Xi function 47 | li Dirichlet eta function 48 | li Dirichlet L-function 49 | li Hurwitz zeta function 50 | li Legendre chi function 51 | li Lerch transcendent 52 | li 53 | | Polylogarithm functions 54 | ul 55 | li Incomplete polylogarithm 56 | li Clausen function 57 | li 58 | | Complete Fermi–Dirac integral 59 | ul 60 | li Incomplete polylogarithm 61 | li Clausen function 62 | +e.Item 63 | ul 64 | li Riemann zeta function 65 | li Riemann Xi function 66 | li Dirichlet eta function 67 | li Dirichlet L-function 68 | li Hurwitz zeta function 69 | li Legendre chi function 70 | li Lerch transcendent 71 | li 72 | | Polylogarithm functions 73 | ul 74 | li Incomplete polylogarithm 75 | li Clausen function 76 | li 77 | | Complete Fermi–Dirac integral 78 | ul 79 | li Incomplete polylogarithm 80 | li Clausen function 81 | 82 | +b.ui-Table 83 | table 84 | thead 85 | tr 86 | th Company 87 | th Q1 88 | th Q2 89 | th Q3 90 | th G4 91 | tbody 92 | tr 93 | td Microsoft 94 | td 12.4 95 | td 12.4 96 | td 12.4 97 | td 12.4 98 | tr 99 | td Google 100 | td 30.2 101 | td 30.2 102 | td 30.2 103 | td 30.2 104 | tr 105 | td Apple 106 | td 25.5 107 | td 25.5 108 | td 25.5 109 | td 25.5 110 | 111 | +b.ui-Cols 112 | +e.Item 113 | +b.ui-Block 114 | h4 Term_Responsibility 115 | p The participant acknowledges that they may not engage in damage claims against the Conference Organizer should the holding of the Conference be hindered or prevented by unexpected political or economic events 116 | +e.Item 117 | +b.ui-Block 118 | h4 Term_Audio / Video Recording 119 | p The participant acknowledges that they may not engage in damage claims against the Conference Organizer should the holding of the Conference be hindered or prevented by evil 120 | 121 | +b.ui-Cols.is-wider 122 | +e.Item 123 | +b.ui-Block_dark 124 | h4 Term_Responsibility 125 | p The participant acknowledges that they may not engage in damage claims against the Conference Organizer should the holding of the Conference be hindered or prevented by unexpected political or economic events 126 | +e.Item 127 | +b.ui-Block_dark 128 | h4 Term_Audio / Video Recording 129 | p The participant acknowledges that they may not engage in damage claims against the Conference Organizer should the holding of the Conference be hindered or prevented by evil 130 | 131 | +Footer({ isIndex: true }) 132 | -------------------------------------------------------------------------------- /src/call-for-speakers/index.md: -------------------------------------------------------------------------------- 1 | # Call for Speakers 2 | 3 | ## TL;DR 4 | 5 | We’re inviting you to submit a talk or idea for pitercss_conf on June 16th, 2017 in St. Petersburg, Russia. We speak English and have a [code of conduct](/code-of-conduct/). Topics: HTML, CSS, SVG, etc. Decision won’t take long. We’ll help you to prepare your talk and cover all expenses, such as travel and accommodation. Submission is open until **April 30th**. 6 | 7 | Submit a Talk 8 | 9 | ## Conference 10 | 11 | It’s a full-day, single track, English-speaking front-end conference in St. Petersburg, Russia on June 16th, 2017. The very first Russian conference fully dedicated to visual front-end technologies. 12 | 13 | In case you don’t speak Russian, it’s the first time when you’re truly welcome: English is our main language for talks, discussions, and all issues. If you speak Russian, this is your chance to participate in a real European conference without leaving the country. Why English? We’re trying to unite Russian and global communities. 14 | 15 | And all this in the most beautiful and the most European city in Russia during the famous white nights season. 16 | 17 | ## Who we are 18 | 19 | We are developers and members of Russian front-end communities organizing conferences and local meetups since 2007. We know what makes a good conference and ready to make the best one Russia has ever seen. But we can’t do it without you, the great speakers. Don’t hesitate, join us on stage! 20 | 21 |
22 | Photo of Alexey, Maria, Vadim 23 |
pitercss_conf organizers: Alexey, Maria, Vadim
24 |
25 | 26 | ## Topics 27 | 28 | We want to discuss the whole set of visual front-end technologies: 29 | 30 |
31 | 37 | 43 |
44 | 45 | You’re welcome to submit multiple talks or even raw ideas. 46 | 47 | ## Guidelines 48 | 49 | To have more chances to get your talk accepted, note the following rules: 50 | 51 | - **Language:** all talks are in English, with no exception. 52 | - **Duration:** you’ll have 30 minutes and optional 10 minutes for Q&A. 53 | - **Quality:** visual fidelity, great typography, perfect styling, and good contrast on your slides. 54 | - **Originality:** we prefer premieres and unique topics to anything you’ve already presented elsewhere or anything well-known among developers. 55 | - **Brevity:** give it a catchy name and try to describe the main plot in a couple of paragraphs instead of writing the whole text. 56 | 57 | We’re not limiting your creativity, but helping to deliver your message in the best way possible. 58 | 59 | ## We can help 60 | 61 | Have an idea or unique experience but not sure how to turn it into a talk? Don’t worry, we’ve helped many speakers before to tell good stories. 62 | 63 | - **Never presented on stage?** We will be guiding you through preparation process and rehearsing your talk via video chat. 64 | - **Not a native English speaker?** We can help to rehearse and proofread your talk, but intermediate language skills are required. 65 | - **Had a bad experience on a conference before?** We truly care about our speakers and audience to help everyone feel comfortable, safe and welcome. 66 | 67 | ## Selection 68 | 69 | Once your talk or idea is submitted you’ll get a confirmation. Then, within a week we’ll get back to you. In most cases we don’t decline a submission, but rather schedule a quick call to figure out the details. Once everything is clear we’ll give you the final decision. 70 | 71 | ## What you get 72 | 73 | If your proposal is selected, here’s what you’ll get: 74 | 75 | - Travel to St. Petersburg. 76 | - Support in visa application process. 77 | - Entry to the conference. 78 | - Hotel accommodation. 79 | 80 | If your employer can cover your travel and hotel, we’ll be happy to list them as a sponsor. The money we save will be invested into making this conference even better. 81 | 82 | ## Code of Conduct 83 | 84 | Our [code of conduct](/code-of-conduct/) aims to create a safe and welcoming space for our community members, and to protect every attendee, staff member and speaker from harassment. Thus we need you to read, understand, and comply with our code of conduct. 85 | 86 | ## Anything else? 87 | 88 | If you have any questions, suggestions or concerns about any of the above, please feel free to contact us at [hi@pitercss.com](mailto:hi@pitercss.com). We look forward to receiving your proposal! 89 | -------------------------------------------------------------------------------- /src/call-for-speakers/index.pug: -------------------------------------------------------------------------------- 1 | include ../pug/_common.pug 2 | 3 | - delete data.menu[0].href 4 | - delete data.footerMenu[0].href 5 | 6 | +Page({ title: "Call for Speakers" })._CfS 7 | +Header({ menu: data.menu, actionIsHidden: true }) 8 | 9 | +b.Content.-Content(role="main") 10 | include:markdown-it(html=true, typographer=true) index.md 11 | 12 | +Footer({ menu: data.footerMenu }) 13 | -------------------------------------------------------------------------------- /src/code-of-conduct-ru/index.md: -------------------------------------------------------------------------------- 1 | # Нормы поведения 2 | 3 |

In English

4 | 5 | Все участники, докладчики, спонсоры и волонтёры на нашей конференции должны согласиться со следующими нормами поведения. Организаторы конференции обязуются следить за соблюдением этих норм в течение мероприятия. Чтобы обеспечить безопасную обстановку для всех участников, мы ожидаем сотрудничества от всех сторон. 6 | 7 | ## Нужна помощь? 8 | 9 | Сразу свяжитесь с нами: 10 | 11 | - **Алексей Симоненко** 12 | - [@simonenko](https://twitter.com/simonenko) 13 | - [simonenko@pitercss.com](mailto:simonenko@pitercss.com) 14 | - [+7 911 274-85-68](tel:79112748568) 15 | 16 | - **Мария Аникеева** 17 | - [@not_plasticine](https://twitter.com/not_plasticine) 18 | - [not_plasticine@pitercss.com](mailto:not_plasticine@pitercss.com) 19 | - [+7 981 765-28-51](tel:79817652851) 20 | 21 | - **Вадим Макеев** 22 | - [@pepelsbey](https://twitter.com/pepelsbey) 23 | - [pepelsbey@pitercss.com](mailto:pepelsbey@pitercss.com) 24 | - [+7 911 027-90-09](tel:79110279009) 25 | 26 | ## Краткая версия 27 | 28 | Наша конференция — это место, свободное от оскорбительного поведения для всех, вне зависимости от пола, гендерной идентичности и самовыражения, возраста, сексуальной ориентации, инвалидности, внешности, телосложения, расы, этнической принадлежности, вероисповедания (или его отсутствия) и предпочитаемых технологий. Мы не потерпим никаких форм дискриминации по отношению ко всем участвующим в конференции. Фразы и изображения сексуального характера неуместны на всех площадках конференции, включая доклады, воркшопы, афтепати, Твиттер и другие онлайн-медиа. По усмотрению организаторов, к нарушившим правила будут применены соответствующие меры, вплоть до удаления с конференции **без возмещения стоимости участия**. 29 | 30 | ## Менее краткая версия 31 | 32 | Оскорбительное поведение включает: комментарии, относящиеся к полу, гендерной идентичности и выражению, возрасту, сексуальной ориентации, инвалидности, внешности, телосложению, расе, этнической принадлежности, вероисповеданию и предпочитаемым технологиям; демонстрацию сексуальных изображений в общественных местах; умышленное запугивание, преследование, навязчивую фото-, видео- и аудиозапись; намеренный срыв выступлений и других событий; неуместный физический контакт и нежелательное сексуальное внимание. 33 | 34 | Те, кого просят прекратить оскорбительное поведение, должны немедленно выполнить просьбу. 35 | 36 | Правила также относятся к спонсорам конференции. В частности, спонсоры не должны использовать откровенные изображения или другие материалы, а также проводить акции с сексуальным подтекстом. Персонал на стендах (включая волонтёров) не должен использовать откровенную одежду, униформу, костюмы или как-то иначе создавать обстановку сексуальной направленности. 37 | 38 | В случае оскорбительного поведения, организаторы конференции могут предпринять любые действия, которые посчитают нужными, включая предупреждение нарушителям или удаление с конференции без возмещения стоимости участия. 39 | 40 | Если вас оскорбляют, или вы заметили, что оскорбляют кого-то ещё, или если у вас есть любые другие причины для беспокойства, пожалуйста, немедленно свяжитесь с кем-либо из команды организаторов. Их можно узнать по брендированным футболкам. 41 | 42 | Команда конференции будет рада помочь связаться с охраной площадки, с местными правоохранительными органами, предложить сопровождение, или иным образом помочь тем, кто подвергся оскорбительным действиям, почувствовать себя в безопасности на протяжении всей конференции. Мы ценим ваше присутствие. 43 | 44 | Мы ожидаем от всех участвующих соблюдения этих правил на всех площадках конференции и на всех публичных мероприятиях, связанных с конференцией. 45 | 46 | Основано на [нормах поведения JSConf 2012](http://2012.jsconf.us/#/about) и [Инициативе Ады](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy). Лицензировано по [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/deed.ru). 47 | -------------------------------------------------------------------------------- /src/code-of-conduct-ru/index.pug: -------------------------------------------------------------------------------- 1 | include ../pug/_common.pug 2 | 3 | - delete data.menu[1].href 4 | - delete data.footerMenu[1].href 5 | 6 | +Page({ title: "Нормы поведения" }) 7 | +Header({ menu: data.menu }) 8 | 9 | +b.Content._CoC.-Content(role="main", lang="ru") 10 | include:markdown-it(html=true, typographer=true) index.md 11 | 12 | +Footer({ menu: data.footerMenu }) 13 | -------------------------------------------------------------------------------- /src/code-of-conduct/index.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 |

По-русски

4 | 5 | All attendees, speakers, sponsors and volunteers at our conference are required to agree with the following code of conduct. Organisers will enforce this code throughout the event. We expect cooperation from all participants to help ensure a safe environment for everybody. 6 | 7 | ## Need Help? 8 | 9 | Don’t hesitate to contact us: 10 | 11 | - **Alexey Simonenko** 12 | - [@simonenko](https://twitter.com/simonenko) 13 | - [simonenko@pitercss.com](mailto:simonenko@pitercss.com) 14 | - [+7 911 274-85-68](tel:79112748568) 15 | 16 | - **Maria Anikeeva** 17 | - [@not_plasticine](https://twitter.com/not_plasticine) 18 | - [not_plasticine@pitercss.com](mailto:not_plasticine@pitercss.com) 19 | - [+7 981 765-28-51](tel:79817652851) 20 | 21 | - **Vadim Makeev** 22 | - [@pepelsbey](https://twitter.com/pepelsbey) 23 | - [pepelsbey@pitercss.com](mailto:pepelsbey@pitercss.com) 24 | - [+7 911 027-90-09](tel:79110279009) 25 | 26 | ## The Quick Version 27 | 28 | Our conference is a harassment-free place for everyone, regardless of gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion (or lack thereof), or technology choices. We do not tolerate harassment of conference participants in any form. Sexual language and imagery is not appropriate for any conference venue, including talks, workshops, parties, Twitter and other online media. Conference participants violating these rules may be sanctioned or expelled from the conference **without a refund** at the discretion of the conference organisers. 29 | 30 | ## The Less Quick Version 31 | 32 | Harassment includes offensive verbal comments related to gender, gender identity and expression, age, sexual orientation, disability, physical appearance, body size, race, ethnicity, religion, technology choices, sexual images in public spaces, deliberate intimidation, stalking, following, harassing photography or recording, sustained disruption of talks or other events, inappropriate physical contact, and unwelcome sexual attention. 33 | 34 | Participants asked to stop any harassing behavior are expected to comply immediately. 35 | 36 | Sponsors are also subject to the anti-harassment policy. In particular, sponsors should not use sexualised images, activities, or other material. Booth staff (including volunteers) should not use sexualised clothing/uniforms/costumes, or otherwise create a sexualised environment. 37 | 38 | If a participant engages in harassing behavior, the conference organisers may take any action they deem appropriate, including warning the offender or expulsion from the conference with no refund. 39 | 40 | If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact a member of conference staff immediately. Conference staff can be identified as they’ll be wearing branded clothing and/or badges. 41 | 42 | Conference staff will be happy to help participants contact venue security or local law enforcement, provide escorts, or otherwise assist those experiencing harassment to feel safe for the duration of the conference. We value your attendance. 43 | 44 | We expect participants to follow these rules at conference and workshop venues and conference-related social events. 45 | 46 | Based on [JSConf 2012 code of conduct](http://2012.jsconf.us/#/about) and [The Ada Initiative](http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy). Licensed under a [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/deed.en_US). 47 | -------------------------------------------------------------------------------- /src/code-of-conduct/index.pug: -------------------------------------------------------------------------------- 1 | include ../pug/_common.pug 2 | 3 | - delete data.menu[1].href 4 | - delete data.footerMenu[1].href 5 | 6 | +Page({ title: "Code of Conduct" }) 7 | +Header({ menu: data.menu }) 8 | 9 | +b.Content._CoC.-Content(role="main") 10 | include:markdown-it(html=true, typographer=true) index.md 11 | 12 | +Footer({ menu: data.footerMenu }) 13 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/favicon.ico -------------------------------------------------------------------------------- /src/fonts/gotham-pro-bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/fonts/gotham-pro-bold.woff -------------------------------------------------------------------------------- /src/fonts/gotham-pro-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/fonts/gotham-pro-bold.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham-pro-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/fonts/gotham-pro-regular.woff -------------------------------------------------------------------------------- /src/fonts/gotham-pro-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/fonts/gotham-pro-regular.woff2 -------------------------------------------------------------------------------- /src/images/Rock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/Rock.jpg -------------------------------------------------------------------------------- /src/images/Scissors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/Scissors.jpg -------------------------------------------------------------------------------- /src/images/icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/icon-144x144.png -------------------------------------------------------------------------------- /src/images/icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/icon-180x180.png -------------------------------------------------------------------------------- /src/images/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/icon-192x192.png -------------------------------------------------------------------------------- /src/images/icon-228x228.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/icon-228x228.png -------------------------------------------------------------------------------- /src/images/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/logo-htmlacademy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/logo-jetbrains.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/images/logo-selectel.svg: -------------------------------------------------------------------------------- 1 | selectel_logo_web -------------------------------------------------------------------------------- /src/images/logo-semrush.svg: -------------------------------------------------------------------------------- 1 | semrush-logo -------------------------------------------------------------------------------- /src/images/logo-shishki.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/logo-skyeng.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/logo-yandex-taxi.svg: -------------------------------------------------------------------------------- 1 | Яндекс Такси 2 | -------------------------------------------------------------------------------- /src/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/og-fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/og-fb.png -------------------------------------------------------------------------------- /src/images/og-vk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/og-vk.png -------------------------------------------------------------------------------- /src/images/slash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/square.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/images/team.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/team.jpg -------------------------------------------------------------------------------- /src/images/team@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/images/team@2x.jpg -------------------------------------------------------------------------------- /src/index.pug: -------------------------------------------------------------------------------- 1 | include pug/_common.pug 2 | 3 | +Page 4 | +Header({ isIndex: true, menu: data.menu }) 5 | 6 | +e.Content(role="main") 7 | +b.Section_Landing.Content 8 | +e.Banner 9 | h1 10 | abbr(title="Saint Petersburg") saint-p 11 | = " summer css" 12 | h2 June 16th, 2017 13 | 14 | +b.Section_Mission.Content 15 | +e.Banner 16 | h1 17 | = "mission " 18 | small= "and Lifestyle" 19 | 20 | p.is-large pitercss conference provides the opportunity to be part of the global frontend development community 21 | 22 | 23 | +b.Section_Schedule.Content 24 | h1.is-wider 25 | small= "preliminary" 26 | = " schedule" 27 | 28 | +b.TABLE.Schedule.is-wider 29 | +e.TBODY.Body 30 | each item in data.schedule 31 | +e.TR.Item(id = item.id || false, class = item.type ? '_' + item.type : false) 32 | +e.TH.Cell_left 33 | if item.time 34 | = item.time 35 | 36 | +e.TD.Cell_middle 37 | if item.name || item.company 38 | h3 39 | if item.name 40 | +e.SPAN.Name= item.name 41 | if item.company 42 | +e.SPAN.Company= item.company 43 | 44 | if item.title 45 | h4= item.title 46 | 47 | if item.picture 48 | +e.Picture.AdditionalInfo(src=item.picture, alt="") 49 | 50 | if item.info 51 | p.AdditionalInfo= item.info 52 | 53 | if item.links 54 | +e.Links.AdditionalInfo 55 | each link in item.links 56 | p.AdditionalInfo 57 | +b.ui-Link_Bright(href=link.link)= link.title 58 | 59 | if item.id 60 | +e.TD.Cell_right 61 | +e.Toggler- 62 | +e.On(href="#" + item.id) 63 | +svg-icon('TogglerOn') 64 | +e.Off(href="#x") 65 | +svg-icon('TogglerOff') 66 | 67 | //- +b.Section.Content 68 | //- h2 It will be cool! 69 | 70 | +b.Section_Badge.Content#Ticket 71 | +e.BadgeWrap.is-wider 72 | +e.BadgeForm 73 | h1 74 | = "make your badge" 75 | 76 | small 77 | = "with personal color id " 78 | +b.SPAN.BadgeColor(style="background-color:#DF665D;color:#FFF") 79 | = "#DF665D" 80 | 81 | +b.FORM.Form 82 | +e.LABEL.Label 83 | +e.INPUT.Input.ui-Input.is-valid(value="konstantin") 84 | +e.Label-Text= "first name" 85 | +e.Status 86 | +svg-icon('Valid') 87 | +svg-icon('Error') 88 | +e.LABEL.Label 89 | +e.INPUT.Input.ui-Input 90 | +e.Label-Text= "last name" 91 | +e.Status 92 | +svg-icon('Valid') 93 | +svg-icon('Error') 94 | +e.LABEL.Label 95 | +e.INPUT.Input.ui-Input 96 | +e.Label-Text= "company" 97 | +e.Status 98 | +svg-icon('Valid') 99 | +svg-icon('Error') 100 | +e.LABEL.Label 101 | +e.INPUT.Input.ui-Input.with-error 102 | +e.Label-Text= "e-mail" 103 | +e.Status 104 | +svg-icon('Valid') 105 | +svg-icon('Error') 106 | +e.Label-Error= "We can not send this address confirmation" 107 | 108 | +e.Badge.Section-Badge 109 | +b.Badge 110 | +svg-icon('Logo_ticket') 111 | +e.Name= "konstantin" 112 | +e.Name= "konstantinopolskiy" 113 | +e.Info= "jet brains" 114 | +e.Info= "#df665d" 115 | +svg-icon('Logo_ticketClose') 116 | +e.Label 117 | 118 | +e.PaymentSystem- 119 | +e.LABEL.Item 120 | +e.INPUT.Input(name="PaymentSystem", type="radio", checked=true) 121 | +e.View 122 | +svg-icon('YandexKassa', "Яндекс.Касса") 123 | +e.LABEL.Item 124 | +e.INPUT.Input(name="PaymentSystem", type="radio") 125 | +e.View 126 | +svg-icon('PayPal', "PayPal") 127 | 128 | +e.CachlessInfo.ui-Link-(href="#x") 129 | +svg-icon('Info') 130 | +e.Content= "about cashless payment" 131 | 132 | +e.INPUT.Input.-Promo.ui-Input(placeholder="promo code") 133 | +e.BUTTON.Action.ui-Button_Action 134 | = "Buy ticket for 1699 ₽" 135 | 136 | +b.PriceInfo 137 | +e.INPUT.Controller#PriceInfoController(type="radio") 138 | +e.Content 139 | +e.LABEL.Close(for="PriceInfoController") 140 | +svg-icon('Close', "Close") 141 | +e.DL.PriceChange- 142 | +e.DT.When= "today, 23 april" 143 | +e.DD.What= "3 days till price increase. Hurry up!" 144 | +e.DT.When= "1 may" 145 | +e.DD.What= "2500 ₽" 146 | 147 | +e.Disclaimer 148 | = "Pressing the button you accept " 149 | +b.ui-Link(href="#x"): +e.Content= "the terms of use" 150 | = " and " 151 | +b.ui-Link(href="#x"): +e.Content= "Code of Conduct" 152 | 153 | +b.Section_SpeakAndConduct.Content 154 | +b.ui-Cols.is-wider 155 | +e.Item 156 | h2 Wanna be a speaker? 157 | p We’re inviting you to submit a talk or idea for pitercss_conf on June 16th, 2017 in St. Petersburg, Russia. We speak English and have a code of conduct. Topics: HTML, CSS, SVG, etc. Decision won’t take long. We’ll help you to prepare your talk and cover all expenses, such as travel and accommodation. Submission is open until April 30th. 158 | 159 | +b.ui-Button_Bright(href="/call-for-speakers/")= "Submit a talk" 160 | 161 | +e.Item 162 | +b.ui-Block 163 | h4 Code of Conduct 164 | p All attendees, speakers, sponsors and volunteers at our conference are required to agree with the following code of conduct. Organisers will enforce this code throughout the event. We expect cooperation from all participants to help ensure a safe environment for everybody. 165 | +b.ui-Link_Bright(href="/code-of-conduct/")= "Read all code of conduct" 166 | 167 | +b.Section_Sponsors.Content 168 | h1.is-wider thanks to all these people 169 | p These sponsors, without whom our holiday would not take place.
You can also. 170 | +e.UL.Sponsors-.is-wider 171 | +e.Item 172 | +e.Link(href="https://htmlacademy.ru/" target="_blank") 173 | +e.Image(src="/images/logo-htmlacademy.svg" width="200" height="67" alt="HTML Academy") 174 | +e.Item 175 | +e.Link(href="http://www.shishki.pro/" target="_blank") 176 | +e.Image(src="/images/logo-shishki.svg" width="200" height="39" alt="Shishki") 177 | +e.Item 178 | +e.Link(href="https://skyeng.ru/" target="_blank") 179 | +e.Image(src="/images/logo-skyeng.svg" width="200" height="57" alt="Skyeng") 180 | +e.Item 181 | +e.Link(href="https://semrush.com/" target="_blank") 182 | +e.Image(src="/images/logo-semrush.svg" width="200" height="75" alt="SEMrush") 183 | +e.Item 184 | +e.Link(href="http://jetbrains.ru/" target="_blank") 185 | +e.Image(src="/images/logo-jetbrains.svg" width="150" height="162" alt="JetBrains") 186 | +e.Item 187 | +e.Link(href="https://taxi.yandex.ru/" target="_blank") 188 | +e.Image(src="/images/logo-yandex-taxi.svg" width="200" height="50" alt="Yandex Taxi") 189 | +e.Item 190 | +e.Link(href="https://selectel.ru/" target="_blank") 191 | +e.Image(src="/images/logo-selectel.svg" width="200" height="43" alt="Selectel") 192 | 193 | p 194 | +b.ui-Button_Bright(href="https://pitercss.com/sponsorship-ru.pdf")= "I want to become a sponsor" 195 | 196 | +Footer({ isIndex: true, menu: data.footerMenu }) 197 | -------------------------------------------------------------------------------- /src/pitercss.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pitercss_conf", 3 | "short_name": "pitercss", 4 | "display": "standalone", 5 | "icons": [ 6 | { 7 | "src": "favicon.ico", 8 | "sizes": "32x32 16x16", 9 | "type": "image/vnd.microsoft.icon" 10 | }, 11 | { 12 | "src": "images/icon-144x144.png", 13 | "sizes": "144x144", 14 | "type": "image/png" 15 | }, 16 | { 17 | "src": "images/icon-180x180.png", 18 | "sizes": "180x180", 19 | "type": "image/png" 20 | }, 21 | { 22 | "src": "images/icon-192x192.png", 23 | "sizes": "192x192", 24 | "type": "image/png" 25 | }, 26 | { 27 | "src": "images/icon-228x228.png", 28 | "sizes": "228x228", 29 | "type": "image/png" 30 | }, 31 | { 32 | "src": "images/icon.svg", 33 | "sizes": "any", 34 | "type": "image/svg" 35 | } 36 | ], 37 | "start_url": "/", 38 | "theme_color": "#ff0198", 39 | "background_color": "#00e2b5" 40 | } 41 | -------------------------------------------------------------------------------- /src/pug/_adwords.pug: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/pug/_common.pug: -------------------------------------------------------------------------------- 1 | include ../../node_modules/bemto.pug/bemto.pug 2 | include _data.pug 3 | 4 | - 5 | set_bemto_settings({ 6 | flat_elements: false, 7 | element: '-', 8 | modifier: '_' 9 | }) 10 | 11 | mixin svg-icon(name, title) 12 | - var attributes = attributes || {} 13 | - var width = attributes.width || 16 14 | - var height = attributes.height || 16 15 | +b.SPAN.ui-Icon(class='_' + name)&attributes(attributes) 16 | +e.SVG.Image(width=width, height=height) 17 | use(xmlns:xlink="http://www.w3.org/1999/xlink", xlink:href="#" + name) 18 | +e.RECT.Helper 19 | if title 20 | title= title 21 | block 22 | 23 | mixin Page(options) 24 | - var options = options || {} 25 | 26 | +b.HTML.Page(lang="en")&attributes(attributes) 27 | head 28 | meta(charset="utf-8") 29 | meta(name="viewport", content="width=device-width") 30 | 31 | link(rel="manifest", href="/pitercss.webmanifest") 32 | 33 | link(rel="icon", href="/favicon.ico") 34 | link(rel="icon", type="image/png", href="/images/icon-228x228.png", sizes="228x228") 35 | link(rel="apple-touch-icon", type="image/png", href="/images/icon-228x228.png") 36 | link(rel="image_src", href="https://pitercss.com/images/og-vk.png") 37 | meta(name="description", content="Saint-P, summer, CSS. Full-day, single track, English-speaking front-end conference in St. Petersburg, Russia on June 16th, 2017.") 38 | meta(name="twitter:card", content="summary_large_image") 39 | meta(name="twitter:site", content="@pitercss") 40 | meta(name="twitter:url", property="og:url", content="https://pitercss.com") 41 | meta(name="twitter:title", property="og:title", content="pitercss conference") 42 | meta(name="twitter:description", property="og:description", content="Saint-P, summer, CSS. June 16th, 2017") 43 | meta(name="twitter:image", property="og:image", content="https://pitercss.com/images/og-fb.png") 44 | meta(property="og:type", content="website") 45 | meta(property="og:site_name", content="pitercss") 46 | 47 | //- Using this, so IE8 could be handled as IE7 48 | meta(http-equiv="x-ua-compatible", content="ie=emulateie7,ie=edge") 49 | link(rel="stylesheet", href="/styles.css") 50 | 51 | link( 52 | rel="preload", 53 | href="/woff2.css", 54 | as="style", 55 | onload="this.rel='stylesheet'" 56 | ) 57 | 58 | title= options.title || "pitercss_conf" 59 | 60 | +e.BODY.Body 61 | include ../_icons/sprite.svg 62 | 63 | block 64 | 65 | script 66 | include ../scripts/loadfonts.js 67 | 68 | script. 69 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create','UA-85020445-1','auto');ga('send','pageview');setTimeout(function() { ga('send','event','New Visitor',location.pathname); }, 10000); 70 | 71 | include _metrika.pug 72 | include _adwords.pug 73 | 74 | mixin Header(options) 75 | - 76 | var options = options || {}; 77 | options.menu = options.menu || [ 78 | { name: 'About', href: (options.isIndex ? false : "/") }, 79 | { name: 'Speakers', href: '#x' }, 80 | { name: 'Photos', href: '#x' }, 81 | { name: 'Blog', href: '#x' }, 82 | { name: 'Other', href: '#x' } 83 | ] 84 | 85 | +b.HEADER.Header(role="banner") 86 | +e.Content 87 | +e.H1.Logo- 88 | +svg-icon('Logo')(width="175", height="38", title="PiterCSS Conference. June 16th, 2017", href=(options.isIndex ? false : "/")) 89 | +b.Header-Logo-Date= data.date 90 | 91 | +b.NAV.Nav(role="navigation") 92 | +e.Address-.ui-Link(href="https://www.google.com/maps/place/Benoit+Farm/@60.0194,30.3681353,17z/data=!3m1!4b1!4m5!3m4!1s0x469633797b84bdff:0x60bbc00ebc5a02f1!8m2!3d60.0194!4d30.370324?hl=en", title="Benoit Farm on Google Maps", target="_blank") 93 | +e.Part.-City 94 | +svg-icon('Pin') 95 | = "Saint Petersburg " 96 | +e.Part= "Benoit Farm, " 97 | +e.Part= "Tikhoretsky, 17" 98 | 99 | if options.menu 100 | +e.UL.Content 101 | each item in options.menu 102 | +e.Item: +e.A.Link.ui-Link-(href=item.href): +e.Content= item.name 103 | 104 | - var action = options.action || data.action 105 | if action 106 | +e.ActionWrap 107 | +e.A.Action.ui-Button_Action(href=action.href) 108 | if action.icon 109 | +svg-icon('Ticket') 110 | if action.text 111 | = action.text 112 | if action.description 113 | +e.ActionDescription 114 | = "≈ 28,34 US$ or 26,74 € " 115 | 116 | 117 | mixin Footer(options) 118 | - 119 | var options = options || {}; 120 | options.menu = options.menu || [ 121 | { name: 'Code of Conduct', href: (options.isIndex ? "/code-of-conduct/" : false) }, 122 | { name: 'Privacy Policy', href: '#x' } 123 | ] 124 | 125 | +b.FOOTER.Footer 126 | +e.Content 127 | +e.FORM.Subscribe-(action="https://pitercss.us14.list-manage.com/subscribe/post?u=5e93eb3640317ef9257048d9c&id=e052fffa90", method="post") 128 | +e.LABEL.Header(for="Subscribe")= data.subscribe.label 129 | +e.P.Field 130 | +e.INPUT.Input.ui-Input#Subscribe(name="EMAIL", type="email", placeholder=data.subscribe.placeholder, required=true) 131 | +e.BUTTON.Button.ui-Button(type="submit")= data.subscribe.button 132 | 133 | +b.UL.SocialLinks 134 | +e.Item: +e.Link.ui-Link(href="https://twitter.com/pitercss_conf", title="Twitter"): +svg-icon('SocialIcon_twitter') 135 | +e.Item: +e.Link.ui-Link(href="https://www.facebook.com/pitercssconf/", title="Facebook"): +svg-icon('SocialIcon_facebook') 136 | +e.Item: +e.Link.ui-Link(href="https://github.com/pitercss/pitercss.com", title="GitHub"): +svg-icon('SocialIcon_github') 137 | +e.Item_mail: +e.Link.ui-Link(href="mailto:hi@pitercss.com")= "hi@pitercss.com" 138 | 139 | +e.Info 140 | +e.Info-Content 141 | if options.menu 142 | +e.UL.MustRead- 143 | each item in options.menu 144 | +e.Item: +e.Link.ui-Link-(href=item.href): +e.Content= item.name 145 | 146 | +e.P.Copyright-(role="contentinfo")= "© Interaktivnye Obuchayushchie Tekhnologii LLC, 2016—2017" 147 | 148 | +e.Logo(href=(options.isIndex ? false : "/")) 149 | +svg-icon('FooterLogo') 150 | -------------------------------------------------------------------------------- /src/pug/_data.pug: -------------------------------------------------------------------------------- 1 | - 2 | var data = { 3 | date: "June 16th, 2017", 4 | 5 | action: { 6 | text: '1699₽', 7 | icon: true, 8 | description: '1699₽', 9 | href: '/#Ticket' 10 | }, 11 | 12 | menu: [ 13 | { name: "Call for Speakers", href: '/call-for-speakers/' }, 14 | { name: "Code of Conduct", href: '/code-of-conduct/' } 15 | ], 16 | 17 | footerMenu: [ 18 | { name: "Call for Speakers", href: '/call-for-speakers/' }, 19 | { name: "Code of Conduct", href: '/code-of-conduct/' } 20 | ], 21 | 22 | subscribe: { 23 | label: 'Be the first to know', 24 | placeholder: 'Your e-mail', 25 | button: 'Notify me' 26 | }, 27 | 28 | schedule: [ 29 | { 30 | id: "eva-lettner", 31 | picture: "/speakers/eva-lettner.jpg", 32 | name: "Eva Lettner", 33 | company: "ChillBill", 34 | title: "Paint the web with CSS. On creating art with code", 35 | info: "As developers we view code as one thing: a tool to build our projects with. But what if I told you that it can be so much more: CSS can be a paintbrush and HTML your canvas. Lets find out what you can do by misusing a technology you might already know well. In this talk you will learn the basics of creating pure CSS images and animations. You will find out everything about shapes, how to use less markup and why gradients are not just pretty, but pretty useful too. All these learnings will be brought into real life projects to show that nothing you create for fun has to be useless. This talk will hopefully inspire you to view code differently and maybe even to create your own CSS drawings.", 36 | links: [ 37 | { title: "@eva_trostlos", link: "https://twitter.com/eva_trostlos" } 38 | ] 39 | }, 40 | { 41 | id: "patrick-kettner", 42 | picture: "/speakers/patrick-kettner.jpg", 43 | name: "Patrick Kettner", 44 | company: "Microsoft", 45 | title: "Creating Magic With Houdini", 46 | info: "Since the dawn of (internet) time, web developers have been at the mercy of browsers when it comes to features. But what if the black magic they use to create new HTML and CSS properties were given to you? Thats exactly what the Houdini working group is working to provide web developers today! In a futuristic, code heavy session I will show how in the not too distant future, you will be able to create your own custom browser features using low level APIs never before available to developers.", 47 | links: [ 48 | { title: "@patrickkettner", link: "https://twitter.com/patrickkettner" } 49 | ] 50 | }, 51 | { 52 | id: "JenKramer", 53 | time: "10:00", 54 | picture: "https://placehold.it/150x150", 55 | name: "Jen Kramer", 56 | company: "codeacademy", 57 | title: "CSS4 Grid: True Layout Finally Arrives", 58 | info: "How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year?", 59 | links: [ 60 | { title: "about this speaker", link: "https://yandex.ru" } 61 | ] 62 | }, 63 | { 64 | type: "break", 65 | time: "12:00", 66 | title: "short break" 67 | }, 68 | { 69 | id: "JohnatanSnook", 70 | time: "11:00", 71 | picture: "https://placehold.it/150x150", 72 | name: "Johnatan Snook", 73 | company: "Opera", 74 | title: "Responsive Web Applications with Container Queries", 75 | info: "How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year?", 76 | links: [ 77 | { title: "about this speaker", link: "https://yandex.ru" } 78 | ] 79 | }, 80 | { 81 | id: "TimJenkins", 82 | time: "12:15", 83 | picture: "https://placehold.it/150x150", 84 | name: "Tim Jenkins", 85 | company: "Yahoo", 86 | title: "CSS4 Grid: True Layout Finally Arrives", 87 | info: "How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year?", 88 | links: [ 89 | { title: "about this speaker", link: "https://yandex.ru" } 90 | ] 91 | }, 92 | { 93 | type: "break", 94 | time: "14:15", 95 | title: "loooooooooooooooooooooooooooonger break" 96 | }, 97 | { 98 | id: "MichaelRudnick", 99 | time: "13:15", 100 | picture: "https://placehold.it/150x150", 101 | name: "Michael Rudnick", 102 | company: "yandex", 103 | title: "CSS4 Grid: True Layout Finally Arrives", 104 | info: "How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year?", 105 | links: [ 106 | { title: "about this speaker", link: "https://yandex.ru" } 107 | ] 108 | }, 109 | { 110 | type: "break", 111 | time: "20:15", 112 | title: "afterparty" 113 | } 114 | ] 115 | }; 116 | -------------------------------------------------------------------------------- /src/pug/_metrika.pug: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/scripts/loadfonts.js: -------------------------------------------------------------------------------- 1 | // Detect WOFF2, via https://github.com/filamentgroup/woff2-feature-test 2 | var supportsWoff2=function(A){if(!('FontFace'in A)||'function'!=typeof A.FontFace)return!1;var t=new FontFace('t','url("data:application/font-woff2;base64,d09GMgABAAAAAADcAAoAAAAAAggAAACWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABk4ALAoUNAE2AiQDCAsGAAQgBSAHIBtvAcieB3aD8wURQ+TZazbRE9HvF5vde4KCYGhiCgq/NKPF0i6UIsZynbP+Xi9Ng+XLbNlmNz/xIBBqq61FIQRJhC/+QA/08PJQJ3sK5TZFMlWzC/iK5GUN40psgqvxwBjBOg6JUSJ7ewyKE2AAaXZrfUB4v+hze37ugJ9d+DeYqiDwVgCawviwVFGnuttkLqIMGivmDg") format("woff2")',{});return t.load()['catch'](function(){}),'loading'==t.status||'loaded'==t.status}(this); 3 | 4 | // Lazy loading the fonts 5 | var h = document.getElementsByTagName('head')[0]; 6 | var link = document.createElement('link'); 7 | link.href = '/woff' + (supportsWoff2 ? '2' : '') + '.css'; 8 | link.type = 'text/css'; 9 | link.rel = 'stylesheet'; 10 | h.appendChild(link); 11 | -------------------------------------------------------------------------------- /src/speakers/eva-lettner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/speakers/eva-lettner.jpg -------------------------------------------------------------------------------- /src/speakers/patrick-kettner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pitercss/2017-source/ee87f74274dae722a51655559fef94c150034d41/src/speakers/patrick-kettner.jpg -------------------------------------------------------------------------------- /src/styles.styl: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @require 'styles/lib/*.styl' 4 | @require 'styles/generic/*.styl' 5 | @require 'styles/elements/*.styl' 6 | @require 'styles/ui/*.styl' 7 | @require 'styles/components/*.styl' 8 | @require 'styles/pages/*.styl' 9 | @require 'styles/utilities/*.styl' 10 | -------------------------------------------------------------------------------- /src/styles/components/Badge.styl: -------------------------------------------------------------------------------- 1 | .Badge 2 | position: relative 3 | display: flex 4 | flex-direction: column 5 | 6 | width: $Sizes.BadgeWidth 7 | height: $Sizes.BadgeHeight 8 | 9 | background: #FFF 10 | box-shadow: 0 35px 70px -35px rgba(#000, 0.3) 11 | 12 | &:before 13 | content: "" 14 | 15 | display: block 16 | 17 | width: 20px 18 | height: 20px 19 | margin: 36px auto 0 20 | 21 | border-radius: 50% 22 | 23 | background: $_BrandColors.Green 24 | 25 | +at-large() 26 | background-image: linear-gradient(to right, #F6F6F6 50%, $_BrandColors.Green 0) 27 | 28 | &-Name 29 | overflow: hidden 30 | margin: 0 28px 31 | 32 | white-space: nowrap 33 | 34 | font-family: $Fonts.Bold 35 | font-size: 26px 36 | line-height: 34px 37 | 38 | &-Name + &-Info 39 | margin-top: 4px 40 | 41 | &-Info 42 | overflow: hidden 43 | margin: 0 28px 0 90px 44 | 45 | white-space: nowrap 46 | 47 | font-size: 20px 48 | line-height: 34px 49 | 50 | &-Label 51 | flex-grow: 1 52 | background: #fcfcfc url('images/square.svg') 0 0 repeat 53 | 54 | & > .ui-Icon_Logo_ticket 55 | display: block 56 | margin: 8px 0 51px 28px 57 | 58 | & > .ui-Icon_Logo_ticketClose 59 | display: block 60 | margin: 30px 28px 28px 61 | 62 | & > .ui-Icon-Image 63 | margin-left: auto 64 | 65 | .BadgeColor 66 | display: inline-block 67 | 68 | padding: 0.8rem 1.8rem 69 | margin: 0 0.4rem 70 | 71 | border-radius: 9em 72 | -------------------------------------------------------------------------------- /src/styles/components/Content.styl: -------------------------------------------------------------------------------- 1 | .Content 2 | &.Page-Content 3 | padding: 3.5rem 0 8rem 4 | 5 | +at-small() 6 | padding-top: 0 7 | 8 | & > * // Making it possible to override on children 9 | width: $Sizes.ContentWidth 10 | max-width: 100% 11 | max-width: calc(100% - 5rem) 12 | margin: 0 auto 13 | 14 | +at-small() 15 | max-width: calc(100% - 8rem) 16 | 17 | & > * + * 18 | margin-top: 3.5rem 19 | 20 | & h1, 21 | & h2, 22 | & h3, 23 | & h4, 24 | & h5, 25 | & h6 26 | font-family: $Fonts.Bold 27 | 28 | &:not(:first-child) 29 | margin-top: 2rem 30 | 31 | & + p 32 | margin-top: 0 33 | 34 | & > small 35 | display: block 36 | 37 | margin-top: 10px 38 | 39 | text-transform: uppercase 40 | font-size: 1.5rem 41 | letter-spacing: 0 42 | 43 | +at-small() 44 | font-size: 2.3rem 45 | 46 | & h1 47 | margin-top: 2rem 48 | margin-bottom: 2rem 49 | 50 | font-size: 8.6rem 51 | line-height: 9.7rem 52 | letter-spacing: -4.5px 53 | color: $Colors.PageHeader 54 | 55 | +at-small() 56 | font-size: 7.2rem 57 | line-height: 8.6rem 58 | letter-spacing: -1.25px 59 | 60 | && h2 61 | margin-top: 3.5rem 62 | 63 | font-size: 3.4rem 64 | line-height: 4.8rem 65 | 66 | +at-small() 67 | font-size: 4.2rem 68 | line-height: 5.8rem 69 | 70 | & h3 71 | font-size: 2.6rem 72 | line-height: 3.8rem 73 | 74 | +at-small() 75 | font-size: 3.6rem 76 | line-height: 5rem 77 | 78 | & h4 79 | font-family: $Fonts.Normal 80 | font-size: 2rem 81 | line-height: 3rem 82 | 83 | +at-small() 84 | font-size: 3rem 85 | line-height: 4.4rem 86 | 87 | & p + p 88 | margin-top: 1rem 89 | 90 | & p.is-large 91 | padding: 1.5rem 0 92 | 93 | font-size: 3.4rem 94 | line-height: 4.8rem 95 | 96 | +at-small() 97 | font-size: 4.2rem 98 | line-height: 5.8rem 99 | 100 | & small, 101 | & p.is-small 102 | font-size: 1.4rem 103 | line-height: 2.4rem 104 | 105 | +at-small() 106 | font-size: 2.3rem 107 | line-height: 3.6rem 108 | 109 | & strong, 110 | & b 111 | font-family: $Fonts.Bold 112 | 113 | & img 114 | max-width: 100% 115 | 116 | & figure 117 | margin-top: 8rem 118 | margin-bottom: 6rem 119 | 120 | & img 121 | display: block 122 | 123 | & figcaption 124 | margin-top: 1.5rem 125 | 126 | font-size: 1.4rem 127 | line-height: 2.4rem 128 | 129 | +at-small() 130 | font-size: 2.3rem 131 | line-height: 3.6rem 132 | 133 | 134 | & ul, 135 | & ol 136 | margin-top: 1.5rem 137 | margin-bottom: 1rem 138 | 139 | & ul, 140 | & ol 141 | margin-top: 1rem 142 | 143 | & li 144 | padding-left: 2rem 145 | 146 | & + li 147 | margin-top: 1.5rem 148 | 149 | &:before 150 | content: '' 151 | 152 | float: left 153 | margin-left: -2rem 154 | 155 | & ol 156 | counter-reset: list-item 157 | 158 | & ul > li:before 159 | vertical-align: middle 160 | width: 0.6rem 161 | height: 0.6rem 162 | margin-top: 0.6em 163 | margin-right: 1.4rem 164 | 165 | background: $Colors.Marker 166 | 167 | & ol > li 168 | counter-increment: list-item 169 | 170 | &:before 171 | content: counter(list-item) "." 172 | width: 1.25em 173 | 174 | & li ul > li, 175 | & li ol > li 176 | font-size: 1.4rem 177 | line-height: 2.4rem 178 | margin-top: 1rem 179 | 180 | +at-small() 181 | font-size: 2.3rem 182 | line-height: 3.6rem 183 | 184 | & li ul > li:before 185 | content: none 186 | 187 | & li ol > li 188 | padding-left: 0 189 | 190 | &:before 191 | margin-left: 0 192 | width: auto 193 | margin-right: .4em 194 | 195 | 196 | & table 197 | margin-top: 6rem 198 | margin-bottom: 6rem 199 | 200 | text-align: left 201 | 202 | & thead 203 | border-bottom: 2px solid 204 | 205 | font-size: 2.6rem 206 | font-family: $Fonts.Bold 207 | 208 | color: $Colors.TableHeader 209 | 210 | & > tr > td, 211 | & > tr > th 212 | padding-bottom: 0.5rem 213 | 214 | & td, 215 | & th 216 | padding-top: 2rem 217 | 218 | &:not(:first-child) 219 | text-align: right 220 | padding-left: 2rem 221 | 222 | & hr 223 | margin-top: 3rem 224 | margin-bottom: 3rem 225 | 226 | border: solid $Colors.Divider 227 | border-width: 1px 0 0 228 | 229 | & blockquote 230 | position: relative 231 | 232 | box-sizing: border-box 233 | padding-left: 8rem 234 | margin-top: 5rem 235 | margin-bottom: 5rem 236 | 237 | font-size: 2.6rem 238 | line-height: 3.7rem 239 | font-family: $Fonts.Bold 240 | 241 | &:before 242 | content: "«" 243 | 244 | position: absolute 245 | top: -0.04em 246 | left: 0 247 | 248 | box-sizing: border-box 249 | padding-right: 0.4em 250 | width: 8rem 251 | 252 | text-align: right 253 | font-size: 2em 254 | 255 | color: $Colors.Quote 256 | 257 | & > p:last-of-type:after 258 | content: "»" 259 | 260 | position: relative 261 | top: -1px 262 | 263 | margin-left: 0.4em 264 | font-size: 2em 265 | vertical-align: -0.15em 266 | 267 | color: $Colors.Quote 268 | 269 | 270 | & cite 271 | display: block 272 | margin-top: 1.5rem 273 | 274 | font-size: 2.6rem 275 | line-height: 3.2rem 276 | 277 | &.is-small 278 | font-size: 2rem 279 | line-height: 3.2rem 280 | 281 | & cite 282 | font-size: 1.5rem 283 | line-height: 2.2rem 284 | 285 | &.is-large 286 | font-size: 3.4rem 287 | line-height: 4.7rem 288 | 289 | & cite 290 | font-size: 2.6rem 291 | line-height: 4.7rem 292 | -------------------------------------------------------------------------------- /src/styles/components/Counters.styl: -------------------------------------------------------------------------------- 1 | iframe[name=google_conversion_frame] 2 | position: absolute 3 | bottom: 0 4 | -------------------------------------------------------------------------------- /src/styles/components/Footer.styl: -------------------------------------------------------------------------------- 1 | .Footer 2 | font-size: 1.4rem 3 | line-height: 2.4rem 4 | 5 | box-shadow: 0 -1px $Colors.Divider 6 | 7 | +at-small() 8 | font-size: 2.3rem 9 | line-height: 3.3rem 10 | 11 | &-Content 12 | display: flex 13 | align-items: center 14 | 15 | width: $Sizes.PageWidth 16 | max-width: 100% 17 | max-width: calc(100% - 5rem) 18 | height: $Sizes.FooterHeight 19 | padding-bottom: $Sizes.FooterPadding 20 | margin: 0 auto 21 | 22 | +at-small() 23 | display: block 24 | height: auto 25 | max-width: calc(100% - 8rem) 26 | padding-top: 5rem 27 | 28 | & > * 29 | display: inline-block 30 | 31 | &-Subscribe 32 | display: block 33 | 34 | align-self: flex-end 35 | flex-shrink: 1 36 | flex-grow: 1 37 | flex-basis: 50% 38 | 39 | margin-bottom: 1rem 40 | 41 | +at-small() 42 | margin-bottom: 4rem 43 | 44 | &-Field 45 | +at-small() 46 | display: flex 47 | 48 | &-Header 49 | display: block 50 | width: 100% 51 | 52 | font-size: 2rem 53 | line-height: 3rem 54 | margin-bottom: 0.6rem 55 | 56 | +at-small() 57 | font-size: 2.3rem 58 | 59 | 60 | &-Input 61 | +at-small() 62 | flex-grow: 1 63 | 64 | &-Button 65 | margin-left: 1.6rem 66 | 67 | &-Copyright 68 | position: relative 69 | 70 | color: $Colors.Misc 71 | 72 | +at-large() 73 | height: 2.4rem 74 | padding-left: 1.5rem 75 | 76 | +at-small() 77 | padding-right: 82px 78 | 79 | &-Part 80 | display: block 81 | 82 | &-Logo 83 | color: $Colors.Logo 84 | margin-top: auto 85 | margin-left: 50px 86 | margin-bottom: 0.8rem 87 | 88 | color: $Colors.Logo_closing 89 | 90 | +at-small() 91 | float: right 92 | margin-left: 0 93 | margin-top: -70px 94 | 95 | & .ui-Icon_FooterLogo .ui-Icon-Image 96 | width: 76px 97 | height: 70px 98 | 99 | &-Info 100 | display: flex 101 | align-self: stretch 102 | flex-direction: column 103 | flex-wrap: wrap 104 | justify-content: flex-end 105 | align-items: flex-end 106 | flex-shrink: 1 107 | flex-grow: 1 108 | flex-basis: calc(50% - 10rem) 109 | 110 | &-Content 111 | +at-small() 112 | width: 100% 113 | 114 | &-MustRead 115 | display: flex 116 | align-self: stretch 117 | 118 | +at-small() 119 | flex-direction: column 120 | 121 | margin-left: -1.5rem 122 | margin-bottom: 4rem 123 | 124 | &-Item 125 | display: inline-block 126 | display: flex 127 | 128 | +at-large() 129 | height: $Sizes.FooterHeight - 2.4rem 130 | 131 | &-Link 132 | position: relative 133 | display: inline-block 134 | display: flex 135 | align-items: center 136 | 137 | white-space: nowrap 138 | 139 | padding: 0 1.5rem 140 | 141 | +at-large() 142 | margin-bottom: -1rem 143 | 144 | &:not([href]) > .ui-Link-Content 145 | padding-left: 13px 146 | padding-right: 13px 147 | margin: 0 -13px 148 | 149 | line-height: 2.2rem 150 | 151 | color: $Colors.ActiveItemText 152 | background: $Colors.ActiveItem 153 | 154 | border-radius: 99px 155 | -------------------------------------------------------------------------------- /src/styles/components/Form.styl: -------------------------------------------------------------------------------- 1 | .Form 2 | +at-large() 3 | display: flex 4 | flex-wrap: wrap 5 | 6 | +at-small() 7 | margin-top: 4.6rem 8 | 9 | & > * 10 | flex-basis: calc(50% - 2.4rem) 11 | flex-grow: 1 12 | margin-bottom: 1.6rem 13 | 14 | +at-large() 15 | margin-right: 2.4rem 16 | 17 | +at-small() 18 | margin-bottom: 4rem 19 | 20 | &-Label 21 | position: relative 22 | display: flex 23 | flex-direction: column 24 | 25 | &-Text 26 | order: -1 27 | font-size: 1.4rem 28 | color: #77808A 29 | 30 | +at-small() 31 | font-size: 2.3rem 32 | 33 | &-Error 34 | font-size: 1.4rem 35 | color: $Colors.Input_error 36 | 37 | &:hover &-Text, 38 | :focus + &-Text 39 | color: $_BrandColors.Green 40 | 41 | &-Label > &-Input 42 | display: block 43 | width: 100% 44 | 45 | & .ui-Input 46 | height: 3.2rem 47 | padding-right: 24px 48 | padding-bottom: 1.4rem 49 | line-height: @height - @padding-bottom 50 | box-shadow: inset 0 -2px 0 51 | 52 | &.with-error 53 | box-shadow: inset 0 -2px 0 $Colors.Input_error 54 | 55 | &:hover, 56 | &:focus 57 | box-shadow: inset 0 -2px 0 $_BrandColors.Green 58 | 59 | &-Status 60 | position: absolute 61 | top: 25px 62 | right: 0 63 | width: 24px 64 | text-align: center 65 | 66 | +at-small() 67 | top: 32px 68 | width: 44px 69 | 70 | &-Status > .ui-Icon 71 | display: none 72 | 73 | +at-small() 74 | & > .ui-Icon-Image 75 | width: 40px 76 | height: 40px 77 | 78 | .with-error + * + &-Status > .ui-Icon_Error, 79 | .is-valid + * + &-Status > .ui-Icon_Valid 80 | display: inline-block 81 | 82 | 83 | & .ui-Link 84 | font-size: 1.4rem 85 | 86 | &-PaymentSystem 87 | display: flex 88 | 89 | box-shadow: inset 0 0 0 2px #B4BDC7 90 | 91 | +at-small() 92 | margin-bottom: 1rem 93 | 94 | &-Input 95 | position: absolute 96 | clip: rect(1px,1px,1px,1px) 97 | 98 | &-Item 99 | flex-basis: 50% 100 | flex-grow: 1 101 | 102 | &-View 103 | cursor: pointer 104 | 105 | display: flex 106 | align-items: center 107 | justify-content: center 108 | 109 | height: 48px 110 | 111 | color: #B4BDC7 112 | 113 | +at-small() 114 | height: 96px 115 | 116 | :focus + & 117 | box-shadow: 0 0 0 3px $_BrandColors.Green 118 | 119 | :not(:checked) + &:hover 120 | color: #77808A 121 | 122 | :checked + & 123 | cursor: default 124 | 125 | background: #77808A 126 | color: #FFF 127 | 128 | +at-small() 129 | & .ui-Icon_YandexKassa .ui-Icon-Image 130 | width: 220px 131 | height: 48px 132 | 133 | & .ui-Icon_PayPal .ui-Icon-Image 134 | width: 166px 135 | height: 44px 136 | 137 | & .PriceInfo 138 | flex-basis: 100% 139 | 140 | &-Disclaimer 141 | flex-basis: 100% 142 | 143 | margin-top: 5px 144 | 145 | text-align: right 146 | 147 | font-size: 1.4rem 148 | 149 | color: #77808A 150 | 151 | +at-small() 152 | text-align: center 153 | 154 | &-Action 155 | height: 70px 156 | padding-top: 0.4rem 157 | margin-top: 23px 158 | 159 | font-size: 2.6rem 160 | 161 | +at-small() 162 | height: 110px 163 | font-size: 3.6rem 164 | 165 | &-Promo 166 | min-width: 175px 167 | margin-top: 4.8rem 168 | 169 | +at-large() 170 | flex-basis: 0 171 | 172 | width: 175px 173 | 174 | +at-small() 175 | width: 100% 176 | margin-top: 0 177 | 178 | &-CachlessInfo 179 | margin-top: 1rem 180 | 181 | +at-small() 182 | && 183 | align-self: center 184 | margin-top: 0 185 | 186 | &-Alert 187 | border-left 3px solid #00e2b5 188 | display inline-block 189 | padding .8rem 1.8rem 190 | color #00e2b5 191 | -------------------------------------------------------------------------------- /src/styles/components/Header.styl: -------------------------------------------------------------------------------- 1 | .Header 2 | position: relative 3 | 4 | box-shadow: 0 1px $Colors.Divider 5 | 6 | +at-large() 7 | position: fixed 8 | top: 0 9 | left: 0 10 | right: 0 11 | background: $Colors.Page 12 | 13 | z-index: $z-index.above 14 | 15 | +at-small() 16 | box-shadow: inset 0 ('calc(%s - 1px)' % $Sizes.HeaderHeight_narrow) #FFF, 17 | inset 0 ('calc(%s)' % $Sizes.HeaderHeight_narrow) $Colors.Divider 18 | 19 | &-Content 20 | display: flex 21 | 22 | box-sizing: border-box 23 | width: $Sizes.PageWidth 24 | max-width: 100% 25 | max-width: calc(100% - 5rem) 26 | height: $Sizes.HeaderHeight 27 | padding-top: 4px 28 | margin: 0 auto 29 | 30 | +at-small() 31 | max-width: calc(100% - 8rem) 32 | height: auto 33 | padding-top: 0 34 | 35 | & > * 36 | display: inline-block 37 | 38 | &-Logo 39 | align-self: center 40 | 41 | width: 180px 42 | margin-right: 2.5rem 43 | 44 | font-size: 2rem 45 | line-height: 2.5rem 46 | 47 | +at-small() 48 | position: absolute 49 | top: 2.8rem 50 | 51 | & .ui-Icon 52 | margin-top: -2px 53 | 54 | color: $Colors.Logo 55 | 56 | +at-small() 57 | &-Image 58 | width: 212px 59 | height: 46px 60 | 61 | &-Date 62 | display: block 63 | margin-left: 64px 64 | margin-top: 0.6rem 65 | 66 | font-size: 1.5rem 67 | line-height: 2.3rem 68 | 69 | color: $Colors.LogoText 70 | 71 | +at-small() 72 | margin-left: 77px 73 | -------------------------------------------------------------------------------- /src/styles/components/Nav.styl: -------------------------------------------------------------------------------- 1 | .Nav 2 | display: flex 3 | flex-grow: 1 4 | align-items: center 5 | 6 | +at-small() 7 | flex-wrap: wrap 8 | 9 | & > * 10 | display: inline-block 11 | 12 | &-Address 13 | position: relative 14 | 15 | display: flex 16 | flex-shrink: 0 17 | flex-direction: column 18 | align-self: stretch 19 | justify-content: center 20 | 21 | padding-left: 2rem 22 | margin-right: 3rem 23 | 24 | font-size: 1.4rem 25 | line-height: 2rem 26 | 27 | & .ui-Icon_Pin 28 | position: absolute 29 | right: 100% 30 | top: 3px 31 | margin-right: 0.8rem 32 | 33 | &:not(:hover):not(:focus) .ui-Icon_Pin 34 | color: $Colors.Pin_inactive 35 | 36 | +at-small() 37 | display: none 38 | 39 | &-Part 40 | position: relative 41 | display: block 42 | 43 | &-City 44 | font-family: $Fonts.Bold 45 | 46 | &-ActionWrap 47 | +at-large() 48 | margin-top: -4px 49 | margin-left: 1.5rem 50 | 51 | +at-small() 52 | margin-left: auto 53 | 54 | &-ActionDescription 55 | margin-top: 1rem 56 | 57 | font-size: 1.4rem 58 | line-height: 1 59 | 60 | color: $Colors.ActionButton 61 | 62 | +at-small() 63 | display: none 64 | 65 | &-Action 66 | display: block 67 | height: $Sizes.NavActionHeight 68 | line-height: @height 69 | text-align: center 70 | 71 | +at-small() 72 | height: 6.4rem 73 | line-height: @height + 0.4rem 74 | margin: (($Sizes.HeaderHeight_narrow - @height) / 2) 0 75 | margin-left: auto 76 | padding: 0 2.5rem 77 | 78 | & .ui-Icon 79 | display: none 80 | 81 | &-Content 82 | display: flex 83 | align-self: stretch 84 | flex-wrap: wrap 85 | 86 | margin-left: auto 87 | 88 | font-family: $Fonts.Bold 89 | font-size: 1.5rem 90 | text-transform: uppercase 91 | 92 | +at-small() 93 | order: 1 94 | 95 | width: 100% 96 | min-height: ($Sizes.HeaderHeight - 2rem) 97 | padding: 1rem 0 98 | 99 | font-size: 2.3rem 100 | 101 | && 102 | margin: 0 0 0 -1.5rem 103 | 104 | &:last-child:before 105 | content: "" 106 | height: $Sizes.HeaderHeight_narrow 107 | width: 100% 108 | 109 | &-Item 110 | display: inline-block 111 | display: flex 112 | 113 | &-Link 114 | position: relative 115 | display: inline-block 116 | display: flex 117 | align-items: center 118 | 119 | padding: 0 1.5rem 120 | 121 | letter-spacing: 1px 122 | 123 | &:not([href]) > .ui-Link-Content 124 | padding: 5px 13px 3px 125 | margin: -5px -13px -3px 126 | 127 | line-height: 2.2rem 128 | 129 | color: $Colors.ActiveItemText 130 | background: $Colors.ActiveItem 131 | 132 | border-radius: 99px 133 | 134 | +at-small() 135 | padding: 14px 13px 10px 136 | margin: -14px -13px -10px 137 | 138 | &:first-child 139 | margin-left: 0 140 | 141 | &:not(:hover):not(:focus) > .ui-Link-Content 142 | background-image: none 143 | -------------------------------------------------------------------------------- /src/styles/components/Page.styl: -------------------------------------------------------------------------------- 1 | .Page 2 | overflow-y: scroll 3 | min-width: 666px 4 | 5 | font-family: $Fonts.Normal 6 | 7 | color: $Colors.PageText 8 | 9 | background: $Colors.Page 10 | 11 | -webkit-text-size-adjust: 100% 12 | -ms-text-size-adjust: 100% 13 | 14 | text-rendering: optimizelegibility 15 | -webkit-font-smoothing: subpixel-antialiased 16 | 17 | cursor: default 18 | 19 | &-Body 20 | font-size: $Sizes.BodyText 21 | line-height: $Sizes.LineHeight 22 | 23 | +at-small() 24 | font-size: 3rem 25 | 26 | +at-large() 27 | padding-top: $Sizes.HeaderHeight 28 | 29 | &-Content 30 | position: relative 31 | z-index: $z-index.ground 32 | box-sizing: border-box 33 | min-height: "calc(100vh - %s)" % ($Sizes.HeaderHeight + $Sizes.FooterHeight + $Sizes.FooterPadding) 34 | 35 | cursor: initial 36 | -------------------------------------------------------------------------------- /src/styles/components/PriceInfo.styl: -------------------------------------------------------------------------------- 1 | .PriceInfo 2 | margin-bottom: 0 3 | 4 | &-Controller 5 | position: absolute 6 | clip: rect(1px,1px,1px,1px) 7 | 8 | 9 | &-Content 10 | position: relative 11 | overflow: hidden 12 | 13 | :checked + & 14 | display: none 15 | 16 | &-Close 17 | position: absolute 18 | z-index: $z-index.above 19 | top: 26px 20 | right: 16px 21 | 22 | cursor: pointer 23 | 24 | &:hover, 25 | &:focus 26 | color: $_BrandColors.Purple 27 | 28 | & > .ui-Icon 29 | display: block 30 | 31 | &-PriceChange 32 | position: relative 33 | 34 | display: flex 35 | flex-direction: column 36 | flex-wrap: wrap 37 | 38 | height: 5rem 39 | padding: 20px 14px 40 | border: 4px solid 41 | margin-top: 10px 42 | margin-bottom: 1.6rem 43 | 44 | background: #FFF 45 | 46 | &:before 47 | content: "" 48 | position: absolute 49 | top: -3px 50 | right: 33% 51 | 52 | width: 16px 53 | height: 16px 54 | border: solid 55 | border-width: 4px 0 0 4px 56 | 57 | background: #FFF 58 | background-clip: padding-box 59 | 60 | transform: translateY(0.5px) translate(-50%, -50%) scale(1, 0.8) rotate(45deg) 61 | 62 | &-When 63 | font-size: 1.4rem 64 | line-height: 2rem 65 | 66 | &:nth-of-type(n+2) 67 | color: #B4BDC7 68 | 69 | &-What 70 | font-family: $Fonts.Bold 71 | font-size: 2rem 72 | line-height: 3rem 73 | 74 | &:nth-of-type(n+2) 75 | color: #B4BDC7 76 | -------------------------------------------------------------------------------- /src/styles/components/Schedule.styl: -------------------------------------------------------------------------------- 1 | .Schedule 2 | display: block 3 | 4 | &-Body 5 | display: block 6 | 7 | +at-large() 8 | padding-left: 10rem 9 | 10 | &-Item 11 | position: relative 12 | 13 | display: flex 14 | 15 | +at-large() 16 | visibility: hidden 17 | 18 | padding-top: $Sizes.HeaderHeight 19 | margin-top: -1*$Sizes.HeaderHeight 20 | 21 | +at-small() 22 | border-top: 2px solid $_BrandColors.Green 23 | 24 | flex-wrap: wrap 25 | 26 | &:not(:target):hover 27 | color: $Colors.Link_hover 28 | 29 | &:not(:target) .AdditionalInfo 30 | display: none 31 | 32 | +at-small() 33 | &:not(:target):not(&_break) h4 34 | display: none 35 | 36 | & .AdditionalInfo 37 | +at-small() 38 | margin-left: 180px 39 | 40 | &-Cell 41 | && 42 | visibility: visible 43 | border-top: 2px solid $_BrandColors.Green 44 | padding-top: 2.4rem 45 | padding-bottom: 2.8rem 46 | 47 | +at-small() 48 | border-top: 0 49 | 50 | :target > & 51 | padding-top: 2.8rem 52 | padding-bottom: 4rem 53 | 54 | &_left 55 | flex-shrink: 0 56 | 57 | width: 150px 58 | padding-right: 3rem 59 | 60 | font: 2.6rem/4.8rem $Fonts.Bold 61 | 62 | color: $_BrandColors.Green 63 | 64 | +at-small() 65 | ^[0]-Item_break & 66 | width: auto 67 | margin-right: 3rem 68 | 69 | ^[0]-Item:not(^[0]-Item_break) & 70 | width: 100% 71 | 72 | && 73 | padding: 2.5rem 0 0 74 | 75 | ^[0]-Item:target > & 76 | +at-large() 77 | height: 20.5rem 78 | 79 | ^[0]-Item_break > & 80 | font-size: 1.4rem 81 | line-height: 1 82 | 83 | +at-small() 84 | font-size: 2.3rem 85 | 86 | & img 87 | max-width: none 88 | 89 | &_middle 90 | && 91 | display: flex 92 | flex-direction: column 93 | flex-grow: 1 94 | 95 | padding-top: 2.9rem 96 | 97 | text-align: left !important 98 | 99 | +at-small() 100 | && 101 | display: block 102 | 103 | max-width: calc(100% - 50px) 104 | padding-left: 0 105 | padding-top: 0 106 | 107 | ^[0]-Item_break && 108 | max-width: none 109 | padding-top: 3rem 110 | 111 | & h4 112 | margin: 0 113 | 114 | :target > & 115 | padding-top: 3.3rem 116 | 117 | &_right 118 | display: flex 119 | align-items: center 120 | flex-shrink: 0 121 | 122 | width: 28px 123 | 124 | +at-small() 125 | && 126 | margin-top: -6rem 127 | 128 | ^[0]-Item:target & 129 | align-self: flex-start 130 | 131 | margin-top: -1.5rem 132 | 133 | ^[0]-Item_break > & 134 | padding-top: 3rem 135 | 136 | &&& h3 137 | +at-small() 138 | font-size: 3rem 139 | 140 | &&& h4 141 | margin-top: 0.5rem 142 | 143 | +at-small() 144 | margin-bottom: 2rem 145 | 146 | & &-Item_break h4 147 | margin: 0 148 | 149 | font-family: $Fonts.Bold 150 | font-size: 1.4rem 151 | line-height: 1 152 | 153 | color: $_BrandColors.Green 154 | 155 | +at-small() 156 | font-size: 2.3rem 157 | 158 | & p 159 | max-width: 52rem 160 | 161 | font-size: 1.4rem 162 | line-height: 2.4rem 163 | 164 | +at-small() 165 | font-size: 2.3rem 166 | line-height: 3.6rem 167 | 168 | &-Picture 169 | width: 150px 170 | height: 150px 171 | align-self: flex-start 172 | 173 | display: block 174 | 175 | +at-large() 176 | position: absolute 177 | left: 0 178 | top: $Sizes.HeaderHeight + 8.5rem 179 | 180 | +at-small() 181 | float: left 182 | margin-left: 0 !important 183 | 184 | &-Links 185 | +at-small() 186 | margin-top: 2rem 187 | 188 | +at-large() 189 | margin-top: auto 190 | margin-bottom: -0.8rem 191 | 192 | && p 193 | margin: 0 194 | 195 | &-Toggler 196 | width: 28px 197 | 198 | & .ui-Icon 199 | display: block 200 | 201 | &-Image 202 | margin: auto 203 | 204 | &-On:before 205 | content: "" 206 | 207 | position: absolute 208 | top: 0 209 | left: 0 210 | right: 0 211 | bottom: 0 212 | 213 | +at-large() 214 | top: $Sizes.HeaderHeight 215 | 216 | 217 | ^[0]-Item:target &-On, 218 | ^[0]-Item:not(:target) &-Off 219 | display: none 220 | 221 | &-Name + &-Company:before 222 | content: "__" -------------------------------------------------------------------------------- /src/styles/components/Section.styl: -------------------------------------------------------------------------------- 1 | // So it would be guaranteed that it would override `Content` 2 | @require 'content.styl' 3 | 4 | .Section 5 | width: auto 6 | max-width: none 7 | padding: 3.5rem 0 8 | margin: 0 9 | 10 | &:last-child 11 | padding-bottom: 8rem 12 | 13 | &_Landing.Content 14 | display: flex 15 | padding: 0 16 | 17 | background: $Colors.PreLanding 18 | color: $Colors.PreLandingText 19 | 20 | & > ^[0]-Banner 21 | display: flex 22 | align-items: center 23 | position: relative 24 | 25 | background: url('images/Scissors.jpg') 100% 10px no-repeat 26 | background-size: 325px 850px 27 | 28 | & ::selection 29 | background: $_BrandColors.Purple 30 | 31 | & h1 32 | width: min-content 33 | padding: 0.5em 0 34 | margin: 0 35 | margin-left: -0.025em 36 | margin-right: 4.8rem 37 | 38 | font-size: 16rem 39 | letter-spacing: -3px 40 | line-height: 0.8125 41 | 42 | color: inherit 43 | 44 | +at-small() 45 | font-size: 12.8rem 46 | 47 | & h2 48 | position: absolute 49 | top: 50% 50 | right: 1em 51 | 52 | margin: 0 53 | 54 | font-size: 4.8rem 55 | line-height: 1 56 | 57 | color: $Colors.PageText 58 | 59 | transform: rotate(-90deg) translateX(50%) 60 | transform-origin: 100% 0 61 | 62 | &_Badge 63 | overflow: hidden 64 | 65 | padding-top: 7rem 66 | 67 | background-color: #F6F6F6 68 | 69 | +at-large() 70 | padding-bottom: 9.5rem 71 | background-image: linear-gradient(to right, transparent (0.5*$Sizes.PageWidth - 0.5*$Sizes.BadgeWidth), $_BrandColors.Green 0), 72 | linear-gradient(to right, $_BrandColors.Green, $_BrandColors.Green) 73 | background-size: 50% 100%, (0.5*$Sizes.BadgeWidth + 25px) 100% 74 | background-repeat: no-repeat,no-repeat 75 | background-position: 100%,100% 76 | 77 | 78 | &-BadgeWrap 79 | position: relative 80 | 81 | +at-large() 82 | display: flex 83 | 84 | &-BadgeForm 85 | flex-grow: 1 86 | 87 | +at-large() 88 | margin-right: $Sizes.BadgeWidth + 28px 89 | min-height: $Sizes.BadgeHeight + 48px 90 | 91 | & > * 92 | max-width: 72rem 93 | 94 | &-Badge 95 | +at-small() 96 | padding-top: 88px 97 | margin: 0 -10rem 90px 98 | background-image: linear-gradient($_BrandColors.Green 503px, transparent 0) 99 | 100 | & > .Badge 101 | margin: 0 auto 102 | 103 | +at-large() 104 | position: absolute 105 | top: 4.7rem 106 | right: 0 107 | 108 | margin: 0 109 | 110 | 111 | &_SpeakAndConduct 112 | +at-large() 113 | margin-top: 7rem 114 | 115 | & .ui-Link_Bright 116 | display: inline-block 117 | margin-top: 1rem 118 | 119 | +at-small() 120 | @supports (width: fit-content) 121 | display: block 122 | width: fit-content 123 | margin: 2rem auto 124 | 125 | & .ui-Button_Bright 126 | margin-top: 4rem 127 | 128 | +at-small() 129 | display: block 130 | height: 72px 131 | padding-top: 0.4rem 132 | margin-top: 3rem 133 | margin-bottom: 7rem 134 | 135 | line-height: 66px 136 | 137 | & .ui-Block 138 | height: auto 139 | margin-top: 3.5rem 140 | 141 | 142 | &_Mission 143 | padding-top: 7rem 144 | 145 | +at-large() 146 | & > ^[0]-Banner 147 | min-height: 466px 148 | padding-left: 352px 149 | 150 | background: url('images/Rock.jpg') 0 0 no-repeat 151 | background-size: 296px 466px 152 | 153 | &_Sponsors 154 | text-align: center 155 | 156 | &-Sponsors 157 | display: flex 158 | flex-wrap: wrap 159 | align-items: center 160 | justify-content: center 161 | 162 | padding: 1.25rem 0 163 | 164 | &-Item 165 | && 166 | display: inline-block 167 | padding: 0 168 | margin: 1.25rem 2.8rem 169 | 170 | &:before 171 | display: none 172 | 173 | &-Image 174 | vertical-align: top 175 | -------------------------------------------------------------------------------- /src/styles/components/SocialLinks.styl: -------------------------------------------------------------------------------- 1 | .SocialLinks 2 | position: relative 3 | 4 | display: flex 5 | align-self: stretch 6 | 7 | +at-small() 8 | margin-right: -1.5rem 9 | 10 | &-Item 11 | display: inline-block 12 | display: flex 13 | 14 | +at-large() 15 | overflow: hidden 16 | 17 | &_mail 18 | +at-small() 19 | order: -1 20 | margin-top: 2rem 21 | margin-right: auto 22 | 23 | +at-large() 24 | position: absolute 25 | bottom: 0 26 | left: 0 27 | right: 0 28 | 29 | text-align: center 30 | 31 | &-Link 32 | position: relative 33 | display: inline-block 34 | display: flex 35 | align-items: center 36 | justify-content: center 37 | 38 | color: $Colors.SocialLink 39 | 40 | +at-small() 41 | :not(^[-1]-Item_mail) > & 42 | top: 5rem 43 | padding: 0 1.5rem 44 | 45 | +at-large() 46 | width: 32px 47 | padding: 0 1rem 48 | 49 | ^[0]-Item_mail > & 50 | flex-grow: 1 51 | width: auto 52 | 53 | +at-small() 54 | & .ui-Icon-Image 55 | width: 46px 56 | height: 44px -------------------------------------------------------------------------------- /src/styles/elements/page.styl: -------------------------------------------------------------------------------- 1 | html 2 | font-size: 62.5% // Making 1rem == 10px 3 | -------------------------------------------------------------------------------- /src/styles/elements/selection.styl: -------------------------------------------------------------------------------- 1 | ::selection 2 | background: $Colors.Selection 3 | color: $Colors.SelectionText 4 | -------------------------------------------------------------------------------- /src/styles/generic/resets.styl: -------------------------------------------------------------------------------- 1 | abbr 2 | text-decoration: none 3 | 4 | /* http://meyerweb.com/eric/tools/css/reset/ 5 | v2.0 | 20110126 6 | License: none (public domain) 7 | */ 8 | 9 | html, body, div, span, applet, object, iframe, 10 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11 | a, abbr, acronym, address, big, cite, code, 12 | del, dfn, em, img, ins, kbd, q, s, samp, 13 | small, strike, strong, sub, sup, tt, var, 14 | b, u, i, center, 15 | dl, dt, dd, ol, ul, li, 16 | fieldset, form, label, legend, 17 | table, caption, tbody, tfoot, thead, tr, th, td, 18 | article, aside, canvas, details, embed, 19 | figure, figcaption, footer, header, hgroup, 20 | menu, nav, output, ruby, section, summary, 21 | time, mark, audio, video { 22 | margin: 0; 23 | padding: 0; 24 | border: 0; 25 | font-size: 100%; 26 | font: inherit; 27 | vertical-align: baseline; 28 | } 29 | /* HTML5 display-role reset for older browsers */ 30 | article, aside, details, figcaption, figure, 31 | footer, header, hgroup, menu, nav, section { 32 | display: block; 33 | } 34 | body { 35 | line-height: 1; 36 | } 37 | ol, ul { 38 | list-style: none; 39 | } 40 | blockquote, q { 41 | quotes: none; 42 | } 43 | blockquote:before, blockquote:after, 44 | q:before, q:after { 45 | content: ''; 46 | content: none; 47 | } 48 | table { 49 | border-collapse: collapse; 50 | border-spacing: 0; 51 | } 52 | -------------------------------------------------------------------------------- /src/styles/lib/add-font.styl: -------------------------------------------------------------------------------- 1 | add-font($name, $file, $selector = null, $encoding = 'woff') 2 | @font-face 3 | font-family: $name 4 | font-weight: normal 5 | font-style: normal 6 | src: embedurl($file + '.' + $encoding) format($encoding) 7 | 8 | if $selector 9 | {$selector} 10 | font-family: $name, Helvetica Neue, Helvetica, Arial, sans-serif 11 | font-style: normal 12 | font-weight: normal 13 | -------------------------------------------------------------------------------- /src/styles/lib/constants.styl: -------------------------------------------------------------------------------- 1 | $_BrandColors = { 2 | White: #FFF 3 | Black: #303B40 4 | DarkBlack: #1E1E1C 5 | LightGray: #F7F7F7 6 | Gray: #B4BDC7 7 | DarkGray: #77808A 8 | Green: #00E2B5 9 | Purple: #FF0195 10 | Yellow: #F9C752 11 | Red: #FF6E6E 12 | } 13 | 14 | $Colors = { 15 | PreLanding: $_BrandColors.Green 16 | PreLandingText: $_BrandColors.White 17 | 18 | Page: $_BrandColors.White 19 | PageText: $_BrandColors.Black 20 | PageHeader: $_BrandColors.Green 21 | 22 | ActiveItem: $_BrandColors.Green 23 | ActiveItemText: $_BrandColors.White 24 | 25 | Button: $_BrandColors.Purple 26 | Button_hover: #FF42B0 27 | Button_active: #ED058C 28 | ButtonText: $_BrandColors.White 29 | 30 | ActionButton: $_BrandColors.Purple 31 | ActionButtonText: $_BrandColors.White 32 | 33 | Logo: $_BrandColors.Green 34 | Logo_closing: $_BrandColors.Purple 35 | LogoText: $_BrandColors.DarkBlack 36 | 37 | Link: $_BrandColors.Black 38 | Link_hover: $_BrandColors.Purple 39 | LinkUnderline: rgba($_BrandColors.DarkBlack, 0.2) 40 | LinkUnderline_hover: rgba($_BrandColors.Purple, 0.2) 41 | 42 | Selection: $_BrandColors.Green 43 | SelectionText: $_BrandColors.White 44 | 45 | Divider: rgba($_BrandColors.Black, 0.2) 46 | 47 | SocialLink: $_BrandColors.Gray 48 | 49 | Pin_inactive: $_BrandColors.Gray 50 | 51 | Misc: $_BrandColors.Gray 52 | 53 | Marker: $_BrandColors.Green 54 | 55 | TableHeader: $_BrandColors.Green 56 | 57 | Block: $_BrandColors.LightGray 58 | BlockText: $_BrandColors.Black 59 | DarkBlock: $_BrandColors.DarkGray 60 | DarkBlockText: $_BrandColors.White 61 | 62 | Quote: $_BrandColors.Green 63 | 64 | Input_error: $_BrandColors.Red 65 | } 66 | 67 | $Sizes = { 68 | BodyText: 2rem 69 | LineHeight: 1.6em 70 | PageWidth: 1280px 71 | HeaderHeight: 11.5rem 72 | HeaderHeight_narrow: 12.8rem 73 | ContentWidth: 84rem 74 | FooterHeight: 9.6rem 75 | FooterPadding: 4.4rem 76 | 77 | NavActionHeight: 5rem 78 | ButtonHeight: 3.2rem 79 | ButtonHeight_narrow: 4.8rem 80 | ButtonPaddings: 2.5rem 81 | 82 | BadgeWidth: 370px 83 | BadgeHeight: 555px 84 | } 85 | 86 | $Fonts = {} 87 | 88 | $Fonts['Normal'] = Gotham Pro, Helvetica Neue, sans-serif 89 | $Fonts['Bold'] = Gotham Pro Bold, Helvetica Neue, sans-serif 90 | -------------------------------------------------------------------------------- /src/styles/lib/stops.styl: -------------------------------------------------------------------------------- 1 | at-large() 2 | @media (min-width: 1024px), print 3 | {block} 4 | 5 | at-small() 6 | @media (max-width: 1023px) 7 | {block} 8 | 9 | at-tall() 10 | @media (max-height: 1130px) 11 | {block} 12 | 13 | at-retina() 14 | @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) 15 | {block} 16 | -------------------------------------------------------------------------------- /src/styles/lib/z-index.styl: -------------------------------------------------------------------------------- 1 | $z-index = { 2 | below: -1 3 | ground: 1 4 | above: 10 5 | } -------------------------------------------------------------------------------- /src/styles/pages/CoC.styl: -------------------------------------------------------------------------------- 1 | .Content_CoC 2 | & > ul 3 | +at-large() 4 | display: flex 5 | justify-content: space-between 6 | align-self: flex-start 7 | 8 | & > li 9 | margin-top: 0 10 | 11 | & > p:last-child 12 | margin-top: 4rem 13 | @extends .Content p.is-small 14 | -------------------------------------------------------------------------------- /src/styles/ui/ui-Block.styl: -------------------------------------------------------------------------------- 1 | .ui-Block 2 | box-sizing: border-box 3 | height: 100% 4 | padding: 1.5rem 2.5rem 5 | 6 | color: $Colors.BlockText 7 | background: $Colors.Block 8 | 9 | &_dark 10 | color: $Colors.DarkBlockText 11 | background: $Colors.DarkBlock 12 | 13 | &_transparent 14 | background: transparent 15 | -------------------------------------------------------------------------------- /src/styles/ui/ui-Button.styl: -------------------------------------------------------------------------------- 1 | .ui-Button 2 | position: relative 3 | 4 | display: inline-block 5 | vertical-align: baseline 6 | 7 | box-sizing: border-box 8 | max-width: 100% 9 | height: $Sizes.ButtonHeight 10 | padding: 0 $Sizes.ButtonPaddings 11 | border: none 12 | margin: 0 13 | 14 | text-align: center 15 | white-space: nowrap 16 | text-decoration: none 17 | 18 | font: inherit 19 | line-height: @height 20 | background: transparent 21 | 22 | -moz-appearance: none 23 | cursor: pointer 24 | user-select: none 25 | 26 | color: $Colors.Misc 27 | box-shadow: inset 0 0 0 2px 28 | 29 | +at-small() 30 | height: $Sizes.ButtonHeight_narrow 31 | padding-top: 0.2rem 32 | 33 | line-height: @height 34 | 35 | &::-moz-focus-inner 36 | padding: 0 37 | border: none 38 | 39 | &:hover, 40 | &:focus 41 | outline: none 42 | color: $Colors.Button 43 | 44 | & > .ui-Icon:first-child 45 | margin-right: 1.2rem 46 | margin-top: -3px 47 | 48 | vertical-align: middle 49 | 50 | &_Bright 51 | height: 5rem 52 | line-height: 5rem 53 | 54 | font-family: $Fonts.Bold 55 | 56 | color: $Colors.ActionButton 57 | 58 | box-shadow: inset 0 0 0 3px 59 | 60 | &:hover, 61 | &:focus 62 | color: $Colors.ActionButtonText 63 | background: $Colors.ActionButton 64 | box-shadow: none 65 | 66 | &_Action 67 | font-family: $Fonts.Bold 68 | 69 | color: $Colors.ActionButtonText 70 | background: $Colors.ActionButton 71 | 72 | box-shadow: none 73 | 74 | &:hover, 75 | &:focus 76 | color: $Colors.ActionButtonText 77 | background: $Colors.Button_hover 78 | 79 | &:active 80 | background: $Colors.Button_active 81 | 82 | &[disabled], 83 | a&:not([href]) 84 | cursor: default 85 | pointer-events: none 86 | -------------------------------------------------------------------------------- /src/styles/ui/ui-Cols.styl: -------------------------------------------------------------------------------- 1 | .ui-Cols 2 | &-Item 3 | margin-top: 3.5rem 4 | 5 | +at-large() 6 | display: flex 7 | white-space: nowrap 8 | align-items: stretch 9 | 10 | &:before 11 | content: '' 12 | display: inline-block 13 | margin-left: -3.5rem 14 | 15 | &-Item 16 | display: inline-block 17 | vertical-align: top 18 | 19 | white-space: normal 20 | 21 | width: 50% 22 | padding-left: 3.5rem 23 | margin-top: 0 24 | -------------------------------------------------------------------------------- /src/styles/ui/ui-Icon.styl: -------------------------------------------------------------------------------- 1 | .ui-Icon 2 | position: relative 3 | display: inline-block 4 | vertical-align: middle 5 | text-decoration: none 6 | 7 | &-Image 8 | display: block 9 | 10 | &-Helper 11 | width: 100% 12 | height: 100% 13 | fill: transparent 14 | 15 | @require '../../_icons/sprite.styl' 16 | -------------------------------------------------------------------------------- /src/styles/ui/ui-Input.styl: -------------------------------------------------------------------------------- 1 | .ui-Input 2 | position: relative 3 | 4 | display: inline-block 5 | vertical-align: baseline 6 | 7 | box-sizing: border-box 8 | width: 220px 9 | max-width: 100% 10 | height: $Sizes.ButtonHeight 11 | border: none 12 | padding: 0 13 | margin: 0 14 | 15 | font: inherit 16 | line-height: @height 17 | background: transparent 18 | 19 | -webkit-appearance: none 20 | -moz-appearance: none 21 | cursor: text 22 | 23 | color: inherit 24 | box-shadow: inset 0 -2px 0 $Colors.Misc 25 | border-radius: 0 26 | 27 | +at-small() 28 | height: $Sizes.ButtonHeight_narrow 29 | padding-top: 0.4rem 30 | 31 | line-height: @height + 0.6rem 32 | 33 | &:hover 34 | box-shadow: inset 0 -2px 0 $Colors.Button 35 | 36 | &:focus 37 | outline: none 38 | box-shadow: inset 0 -2px 0 $Colors.Button_active 39 | -------------------------------------------------------------------------------- /src/styles/ui/ui-Link.styl: -------------------------------------------------------------------------------- 1 | .ui-Link 2 | &, 3 | /.Content a:not([class]) 4 | text-decoration: none 5 | 6 | color: $Colors.Link 7 | 8 | &-Content 9 | .ui-Icon + & 10 | margin-left: 1rem 11 | 12 | &, 13 | /.Content a:not([class]), 14 | ^[0]_Bright 15 | padding: 0.35em 0 16 | 17 | background-repeat: repeat-x 18 | background-size: 16px 1px 19 | background-position: 0 calc(50% + 0.75em) 20 | 21 | @supports (background-position: 0 calc(50% + 0.75em)) 22 | ^[0][href] & 23 | background-image: linear-gradient($Colors.LinkUnderline, $Colors.LinkUnderline) 24 | 25 | ^[0][href]:hover &, 26 | ^[0][href]:focus &, 27 | /.Content a:not([class])[href]:hover, 28 | /.Content a:not([class])[href]:focus, 29 | ^[0]_Bright:hover, 30 | ^[0]_Bright:focus 31 | background-image: linear-gradient($Colors.LinkUnderline_hover, $Colors.LinkUnderline_hover) 32 | 33 | 34 | &[href]:hover, 35 | &[href]:focus, 36 | &_Bright, 37 | /.Content a:not([class])[href] 38 | color: $Colors.Link_hover 39 | 40 | & .ui-Icon 41 | margin-top: -0.2em 42 | 43 | &_Bright 44 | font-family: $Fonts.Bold 45 | 46 | color: $Colors.Link_hover 47 | 48 | background-size: 16px 2px 49 | -------------------------------------------------------------------------------- /src/styles/ui/ui-Table.styl: -------------------------------------------------------------------------------- 1 | .ui-Table 2 | & table 3 | width: 550px 4 | -------------------------------------------------------------------------------- /src/styles/utilities/is-hidden.styl: -------------------------------------------------------------------------------- 1 | .is-hidden 2 | display: none !important 3 | 4 | .is-vhidden 5 | visibility: hidden !important 6 | -------------------------------------------------------------------------------- /src/styles/utilities/is-wider.styl: -------------------------------------------------------------------------------- 1 | .is-wider 2 | +at-large() 3 | width: $Sizes.PageWidth 4 | max-width: 100% 5 | max-width: calc(100% - 5rem) 6 | -------------------------------------------------------------------------------- /src/svg/Close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | + 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/svg/Error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/svg/FooterLogo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FooterLogo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/svg/Info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/svg/Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/svg/Logo_ticket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | logo/ticket 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/svg/Logo_ticketClose.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | slash--closed 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/svg/PayPal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | PayPal-logo 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/svg/Pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pin 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/svg/SocialIcon_facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SocialIcon_facebook 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/svg/SocialIcon_github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Fill 3 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/svg/SocialIcon_twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon__twitter 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/svg/Ticket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ticket 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/svg/TogglerOff.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | + 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/svg/TogglerOn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | + 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/svg/Valid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/svg/YandexKassa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12:18:12:18 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/woff.styl: -------------------------------------------------------------------------------- 1 | @require 'styles/lib/add-font.styl' 2 | 3 | add-font('Gotham Pro', 'fonts/gotham-pro-regular', 'woff') 4 | add-font('Gotham Pro Bold', 'fonts/gotham-pro-bold', 'strong, b', 'woff') 5 | -------------------------------------------------------------------------------- /src/woff2.styl: -------------------------------------------------------------------------------- 1 | @require 'styles/lib/add-font.styl' 2 | 3 | add-font('Gotham Pro', 'fonts/gotham-pro-regular', 'woff2') 4 | add-font('Gotham Pro Bold', 'fonts/gotham-pro-bold', 'strong, b', 'woff2') 5 | --------------------------------------------------------------------------------