├── src ├── CNAME ├── assets │ ├── event.sass │ ├── landing.sass │ └── script.js ├── images │ ├── tlc │ │ ├── preview.png │ │ ├── banner-aa.png │ │ ├── banner-bb.png │ │ ├── banner-cc.png │ │ ├── banner-d.png │ │ ├── banner-e.png │ │ ├── banner-f.png │ │ ├── banner-g.png │ │ ├── square-a.png │ │ ├── square-b.png │ │ ├── square-c.png │ │ ├── square-d.png │ │ ├── square-e.png │ │ ├── square-f.png │ │ ├── square-g.png │ │ ├── square-h.png │ │ ├── square-h2.png │ │ ├── square-i.png │ │ └── square-giveaway.png │ ├── workshops │ │ ├── b.jpg │ │ ├── satinka-1.jpg │ │ ├── takeitslow.jpg │ │ ├── typekita-1.jpg │ │ ├── typekita-2.jpg │ │ ├── typekita-3.jpg │ │ ├── wednesday-2.jpg │ │ └── wednesday.jpg │ ├── logo │ │ ├── monogram.png │ │ ├── favicon-32.png │ │ ├── monogram-black.png │ │ └── monogram-white.png │ └── list.jade ├── 404.jade ├── index.jade ├── dvo.jade ├── home.jade └── tlc.jade ├── .gitignore ├── sass ├── event │ ├── _base.sass │ ├── hint.sass │ ├── full-image.sass │ ├── course-item.sass │ ├── tlc-heading.sass │ ├── register-heading.sass │ ├── panorama-section.sass │ ├── container.sass │ ├── info-card.sass │ ├── social-list.sass │ ├── cta-button.sass │ ├── ss-form.sass │ └── duo-layout.sass ├── mixins │ ├── ms.sass │ ├── clearfix.sass │ ├── button.sass │ ├── type.sass │ └── textarea-style.sass ├── _variables.sass ├── helpers │ └── margin.sass ├── base │ ├── brand-logo.sass │ ├── follow-us.sass │ ├── base.sass │ └── menu.sass ├── common.sass ├── event.sass ├── vendor │ ├── burger.scss │ └── sassy-math.scss └── landing.sass ├── superstatic.json ├── includes ├── menu-block.jade ├── social-list.jade └── tlc-form.jade ├── .travis.yml ├── metalsmith.js ├── package.json ├── layouts ├── event.jade └── base.jade └── README.md /src/CNAME: -------------------------------------------------------------------------------- 1 | bcds.design 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /public 3 | -------------------------------------------------------------------------------- /src/assets/event.sass: -------------------------------------------------------------------------------- 1 | @import ../../sass/event.sass 2 | -------------------------------------------------------------------------------- /sass/event/_base.sass: -------------------------------------------------------------------------------- 1 | // todo: move stuff from base.sass 2 | -------------------------------------------------------------------------------- /src/assets/landing.sass: -------------------------------------------------------------------------------- 1 | @import ../../sass/landing.sass 2 | -------------------------------------------------------------------------------- /superstatic.json: -------------------------------------------------------------------------------- 1 | { 2 | "cwd": "public", 3 | "cleanUrls": true 4 | } 5 | -------------------------------------------------------------------------------- /src/images/tlc/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/preview.png -------------------------------------------------------------------------------- /src/images/workshops/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/workshops/b.jpg -------------------------------------------------------------------------------- /src/images/logo/monogram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/logo/monogram.png -------------------------------------------------------------------------------- /src/images/tlc/banner-aa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/banner-aa.png -------------------------------------------------------------------------------- /src/images/tlc/banner-bb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/banner-bb.png -------------------------------------------------------------------------------- /src/images/tlc/banner-cc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/banner-cc.png -------------------------------------------------------------------------------- /src/images/tlc/banner-d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/banner-d.png -------------------------------------------------------------------------------- /src/images/tlc/banner-e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/banner-e.png -------------------------------------------------------------------------------- /src/images/tlc/banner-f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/banner-f.png -------------------------------------------------------------------------------- /src/images/tlc/banner-g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/banner-g.png -------------------------------------------------------------------------------- /src/images/tlc/square-a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-a.png -------------------------------------------------------------------------------- /src/images/tlc/square-b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-b.png -------------------------------------------------------------------------------- /src/images/tlc/square-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-c.png -------------------------------------------------------------------------------- /src/images/tlc/square-d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-d.png -------------------------------------------------------------------------------- /src/images/tlc/square-e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-e.png -------------------------------------------------------------------------------- /src/images/tlc/square-f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-f.png -------------------------------------------------------------------------------- /src/images/tlc/square-g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-g.png -------------------------------------------------------------------------------- /src/images/tlc/square-h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-h.png -------------------------------------------------------------------------------- /src/images/tlc/square-h2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-h2.png -------------------------------------------------------------------------------- /src/images/tlc/square-i.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-i.png -------------------------------------------------------------------------------- /src/404.jade: -------------------------------------------------------------------------------- 1 | --- 2 | to: /home 3 | --- 4 | doctype html 5 | meta(http-equiv='refresh' content=(`0; ${to}`)) 6 | -------------------------------------------------------------------------------- /src/images/logo/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/logo/favicon-32.png -------------------------------------------------------------------------------- /src/index.jade: -------------------------------------------------------------------------------- 1 | --- 2 | to: /home 3 | --- 4 | doctype html 5 | meta(http-equiv='refresh' content=(`0; ${to}`)) 6 | -------------------------------------------------------------------------------- /sass/mixins/ms.sass: -------------------------------------------------------------------------------- 1 | @function ms($exponent, $base: 1.25) 2 | @return unquote(exponent($base, $exponent) + 'em') 3 | -------------------------------------------------------------------------------- /src/images/logo/monogram-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/logo/monogram-black.png -------------------------------------------------------------------------------- /src/images/logo/monogram-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/logo/monogram-white.png -------------------------------------------------------------------------------- /src/images/tlc/square-giveaway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/tlc/square-giveaway.png -------------------------------------------------------------------------------- /src/images/workshops/satinka-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/workshops/satinka-1.jpg -------------------------------------------------------------------------------- /src/images/workshops/takeitslow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/workshops/takeitslow.jpg -------------------------------------------------------------------------------- /src/images/workshops/typekita-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/workshops/typekita-1.jpg -------------------------------------------------------------------------------- /src/images/workshops/typekita-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/workshops/typekita-2.jpg -------------------------------------------------------------------------------- /src/images/workshops/typekita-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/workshops/typekita-3.jpg -------------------------------------------------------------------------------- /src/images/workshops/wednesday-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/workshops/wednesday-2.jpg -------------------------------------------------------------------------------- /src/images/workshops/wednesday.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rstacruz/bcds/master/src/images/workshops/wednesday.jpg -------------------------------------------------------------------------------- /sass/mixins/clearfix.sass: -------------------------------------------------------------------------------- 1 | @mixin clearfix 2 | &:after 3 | content: '' 4 | display: table 5 | clear: both 6 | zoom: 1 7 | -------------------------------------------------------------------------------- /src/dvo.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | meta(http-equiv="refresh" content="0; url=https://docs.google.com/forms/d/e/1FAIpQLSd0ZA-uagte3Bm_fGcZAAAQkHE9j66eC0vXFoFNTq2UmRpxiA/viewform?usp=send_form") 3 | -------------------------------------------------------------------------------- /sass/_variables.sass: -------------------------------------------------------------------------------- 1 | $text: #40454a 2 | $black: #111 3 | $copper: #BF6D33 4 | $decopper: desaturate(#BF6D33, 30%) 5 | $tan: #292424 6 | $ecru: desaturate(#E0D1CB, 20%) 7 | $lighttan: lighten($tan, 30%) 8 | $lightertan: lighten($tan, 50%) 9 | 10 | $stroke-width: 3px 11 | -------------------------------------------------------------------------------- /sass/mixins/button.sass: -------------------------------------------------------------------------------- 1 | @mixin button 2 | margin-top: 1em 3 | background: $copper 4 | color: white 5 | border: 0 6 | padding: 16px 64px 7 | +caps-type 8 | 9 | &:focus, 10 | &:hover 11 | background: lighten($copper, 10%) 12 | 13 | @media (max-width: 768px) 14 | padding: 12px 24px 15 | -------------------------------------------------------------------------------- /sass/event/hint.sass: -------------------------------------------------------------------------------- 1 | .hint--top, .hint--bottom 2 | &:before 3 | margin-top: -12px 4 | margin-left: -8px 5 | border-radius: 2px 6 | 7 | &:before, &:after 8 | transition-duration: 10ms 9 | 10 | &:after 11 | box-shadow: none 12 | border-radius: 2px 13 | text-shadow: none 14 | margin-left: -55px 15 | -------------------------------------------------------------------------------- /sass/helpers/margin.sass: -------------------------------------------------------------------------------- 1 | :root:root 2 | ._top-collapse 3 | margin-top: 0 4 | 5 | ._copper 6 | color: $copper 7 | 8 | ._padded-2x 9 | padding: 32px 0 10 | @media (min-width: 769px) 11 | padding: 128px 0 12 | 13 | ._hide 14 | display: none 15 | 16 | ._no-desktop 17 | @media (min-width: 769px) 18 | display: none 19 | -------------------------------------------------------------------------------- /sass/event/full-image.sass: -------------------------------------------------------------------------------- 1 | .full-image 2 | margin: 2em -200px 2em -128px 3 | background: $ecru 4 | 5 | > img 6 | width: 100% 7 | display: block 8 | border: solid 16px white 9 | 10 | @media (max-width: 769px) 11 | margin: 2em -16px 12 | 13 | > img 14 | border: 0 15 | 16 | &.-cropped 17 | max-height: 200px 18 | overflow: hidden 19 | 20 | -------------------------------------------------------------------------------- /sass/base/brand-logo.sass: -------------------------------------------------------------------------------- 1 | .brand-logo 2 | display: inline-block 3 | width: 64px 4 | height: 64px 5 | background-image: url('../images/logo/monogram.png') 6 | background-size: 100% 100% 7 | 8 | &.-white 9 | background-image: url('../images/logo/monogram-white.png') 10 | 11 | &.-black 12 | background-image: url('../images/logo/monogram-black.png') 13 | 14 | @media (max-width: 481px) 15 | width: 48px 16 | height: 48px 17 | -------------------------------------------------------------------------------- /sass/common.sass: -------------------------------------------------------------------------------- 1 | @import '../node_modules/normalize.css/normalize' 2 | @import '../node_modules/iconfonts/stylesheets/ionicons' 3 | @import 'vendor/sassy-math' 4 | @import 'vendor/burger' 5 | @import 'variables' 6 | @import 'mixins/ms' 7 | @import 'mixins/type' 8 | @import 'mixins/textarea-style' 9 | @import 'mixins/clearfix' 10 | @import 'mixins/button' 11 | @import 'base/base' 12 | @import 'base/brand-logo' 13 | @import 'base/menu' 14 | @import 'base/follow-us' 15 | -------------------------------------------------------------------------------- /sass/event.sass: -------------------------------------------------------------------------------- 1 | @import 'common' 2 | @import 'event/_base' 3 | @import 'event/cta-button' 4 | @import 'event/container' 5 | @import 'event/course-item' 6 | @import 'event/duo-layout' 7 | @import 'event/full-image' 8 | @import 'event/hint' 9 | @import 'event/info-card' 10 | @import 'event/tlc-heading' 11 | @import 'event/panorama-section' 12 | @import 'event/social-list' 13 | @import 'event/ss-form' 14 | @import 'event/register-heading' 15 | @import 'helpers/margin' 16 | -------------------------------------------------------------------------------- /includes/menu-block.jade: -------------------------------------------------------------------------------- 1 | .menu-block 2 | input#menu(type='checkbox') 3 | .menu-bar 4 | label.menu-toggle(for='menu') 5 | div 6 | label.menu-screen(for='menu') 7 | .menu-dropdown 8 | .follow-us 9 | | Follow us: 10 | a(href='https://instagram.com/wearebcds') 11 | span @wearebcds 12 | | More to come soon! 13 | br 14 | | For inquiries: 15 | a.-small(href='mailto:workshops@bcds.design') 16 | span workshops@bcds.design 17 | -------------------------------------------------------------------------------- /sass/event/course-item.sass: -------------------------------------------------------------------------------- 1 | .course-item 2 | & 3 | margin: 0 4 | padding: 0 5 | border: 0 6 | 7 | border-top: solid 1px rgba($copper, .2) 8 | border-bottom: solid 1px rgba($copper, .2) 9 | padding: 16px 0 10 | 11 | @media (min-width: 1201px) 12 | margin-left: -64px 13 | padding-left: 64px 14 | margin-right: -128px 15 | padding-right: 128px 16 | 17 | & + & 18 | border-top: 0 19 | 20 | h4, p 21 | margin: 0 22 | 23 | h4 24 | font-size: ms(2) 25 | color: $decopper 26 | +subheading-type 27 | text-transform: none 28 | -------------------------------------------------------------------------------- /sass/mixins/type.sass: -------------------------------------------------------------------------------- 1 | @mixin body-type 2 | font-family: karla, sans-serif 3 | font-weight: 400 4 | 5 | @mixin caps-type 6 | font-family: karla, sans-serif 7 | font-weight: 700 8 | letter-spacing: .1em 9 | text-transform: uppercase 10 | 11 | @mixin heading-type 12 | font-family: freight-big-pro, serif 13 | font-weight: 700 14 | 15 | @mixin subheading-type-alt 16 | font-family: brandon grotesque, brandon-grotesque, sans-serif 17 | font-weight: 700 18 | 19 | @mixin subheading-type 20 | font-family: brandon-grotesque, sans-serif 21 | letter-spacing: 0 22 | font-weight: 300 23 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '4' 4 | script: 5 | - npm run build 6 | - test -e public/index.html 7 | - test -e public/CNAME 8 | after_success: 9 | - if [ "$TRAVIS_BRANCH" = "master" -a "$TRAVIS_PULL_REQUEST" = "false" ]; then ./node_modules/.bin/git-update-ghpages -e; fi 10 | cache: 11 | directories: 12 | - node_modules 13 | addons: 14 | apt: 15 | sources: 16 | - ubuntu-toolchain-r-test 17 | packages: 18 | - g++-4.8 19 | env: 20 | global: 21 | - CXX: g++-4.8 22 | - GIT_NAME: Travis CI 23 | - GIT_EMAIL: nobody@nobody.org 24 | - GITHUB_REPO: rstacruz/bcds 25 | - GIT_SOURCE: public 26 | -------------------------------------------------------------------------------- /sass/event/tlc-heading.sass: -------------------------------------------------------------------------------- 1 | .tlc-heading 2 | white-space: nowrap 3 | margin: 5em 0 1em 0 4 | padding: 0 5 | font-size: 1em 6 | line-height: 1.5 7 | 8 | > b, 9 | > span 10 | display: block 11 | 12 | > b 13 | font-size: ms(7) 14 | 15 | > span 16 | font-size: ms(3) 17 | 18 | @media (min-width: 769px) 19 | margin: 8em 0 6em 0 20 | line-height: 1.4 21 | 22 | > b 23 | font-size: ms(8) 24 | 25 | > span 26 | font-size: ms(2) 27 | 28 | @media (min-width: 941px) 29 | > span 30 | font-size: ms(3) 31 | 32 | @media (min-width: 1025px) 33 | > span 34 | font-size: ms(4) 35 | -------------------------------------------------------------------------------- /metalsmith.js: -------------------------------------------------------------------------------- 1 | var Metalsmith = require('metalsmith') 2 | 3 | var app = Metalsmith(__dirname) 4 | .source('./src') 5 | .destination('./public') 6 | .metadata({ 7 | staticImages: images(), 8 | pretty: true // indented jade output 9 | }) 10 | .use(require('metalsmith-ignore')('**/_*.*')) 11 | .use(require('metalsmith-jstransformer')()) 12 | .use(require('metalsmith-sense-sass')()) 13 | 14 | if (module.parent) { 15 | module.exports = app 16 | } else { 17 | app.build(function (err) { if (err) throw err }) 18 | } 19 | 20 | function images () { 21 | var glob = require('glob') 22 | return glob.sync('src/images/**/*.{jpg,png}') 23 | .map((img) => img.replace(/^src/, '')) 24 | } 25 | -------------------------------------------------------------------------------- /sass/base/follow-us.sass: -------------------------------------------------------------------------------- 1 | .follow-us 2 | line-height: 1.5 3 | +caps-type 4 | @media (min-width: 769px) 5 | font-size: ms(-1) 6 | 7 | a, a:visited 8 | display: block 9 | text-align: center 10 | color: white 11 | +heading-type 12 | font-size: ms(3) 13 | margin: 32px 0 14 | line-height: 1.1 15 | 16 | &.-small 17 | +body-type 18 | font-size: 1em 19 | text-transform: none 20 | 21 | a:hover, a:focus 22 | > span 23 | background: rgba($copper, .1) 24 | 25 | a > span 26 | display: inline-block 27 | border: solid 4px white 28 | padding: 16px 24px 29 | 30 | a.-small > span 31 | border: solid 2px lighten($tan, 40%) 32 | 33 | -------------------------------------------------------------------------------- /sass/event/register-heading.sass: -------------------------------------------------------------------------------- 1 | .register-heading 2 | @media (min-width: 769px) 3 | margin-bottom: 3em 4 | 5 | > h2, 6 | > p 7 | margin: 0 8 | padding: 0 9 | 10 | > h2 11 | +heading-type 12 | margin: 0 13 | padding: 0 14 | color: white 15 | font-size: ms(5) 16 | line-height: 1.1 17 | 18 | @media (max-width: 768px) 19 | font-size: ms(3) 20 | 21 | 22 | > p 23 | font-size: ms(0) 24 | 25 | > .lead 26 | +caps-type 27 | color: $copper 28 | font-size: ms(-1) 29 | margin-top: .8em 30 | margin-bottom: 1.1em 31 | 32 | > button 33 | margin-top: 2em 34 | 35 | .register-info 36 | @media (min-width: 769px) 37 | margin-top: 3em 38 | -------------------------------------------------------------------------------- /sass/event/panorama-section.sass: -------------------------------------------------------------------------------- 1 | .panorama-section 2 | $color: darken($tan, 5%) 3 | $image: 'https://unsplash.it/1400/900/?image=914' 4 | background: linear-gradient(180deg - 15deg, rgba($color, 1), rgba($color, .98) 50%, rgba($color, .7)), url($image) center center / cover 5 | background-color: $color 6 | color: $lightertan 7 | background-attachment: fixed 8 | position: relative 9 | padding-top: 32px 10 | padding-bottom: 32px 11 | 12 | @media (min-width: 961px) 13 | &:after 14 | content: '' 15 | position: absolute 16 | left: 32px * 2 17 | top: 32px 18 | right: 32px 19 | bottom: 32px 20 | pointer-events: none 21 | border: solid $stroke-width $copper 22 | 23 | strong 24 | color: white 25 | -------------------------------------------------------------------------------- /sass/event/container.sass: -------------------------------------------------------------------------------- 1 | .sidecontainer 2 | +clearfix 3 | width: auto 4 | margin: 0 16px 5 | 6 | @media (min-width: 769px) 7 | margin: 0 8 | max-width: 480px 9 | 10 | .container 11 | +clearfix 12 | max-width: 780px 13 | margin: 0 auto 14 | 15 | @media (max-width: 780px) 16 | width: auto 17 | margin: 0 16px 18 | 19 | .widecontainer 20 | +clearfix 21 | width: auto 22 | margin: 0 16px 23 | 24 | @media (min-width: 481px) 25 | width: auto 26 | margin: 0 32px 27 | margin-left: 96px 28 | 29 | @media (min-width: 769px) 30 | max-width: 700px 31 | margin: 0 auto 32 | 33 | @media (min-width: 1200px) 34 | max-width: 960px 35 | margin: 0 auto 36 | 37 | .md-col-6 38 | @media (min-width: 1200px) 39 | width: 60% 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bcds", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "env NODE_ENV=production node metalsmith.js", 8 | "start": "metalsmith-start" 9 | }, 10 | "author": "Rico Sta. Cruz ", 11 | "license": "MIT", 12 | "dependencies": { 13 | "glob": "7.0.3", 14 | "iconfonts": "0.8.0", 15 | "jstransformer-jade": "0.1.0", 16 | "jstransformer-markdown-it": "0.2.2", 17 | "metalsmith": "2.1.0", 18 | "metalsmith-ignore": "0.1.2", 19 | "metalsmith-jstransformer": "0.7.1", 20 | "metalsmith-sense-sass": "2.0.0", 21 | "metalsmith-start": "2.0.1", 22 | "normalize.css": "4.2.0" 23 | }, 24 | "devDependencies": { 25 | "git-update-ghpages": "1.3.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /includes/social-list.jade: -------------------------------------------------------------------------------- 1 | mixin social-list(page, klass) 2 | - siteUrl = 'http://bcds.design' 3 | ul.social-list(class=(klass)) 4 | li.facebook.hint--bottom(data-hint='Share on Facebook') 5 | a(href=('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(siteUrl + page.url)), target='share') 6 | span.text Like 7 | = ' ' 8 | li.twitter.hint--bottom(data-hint='Share on Twitter') 9 | a(href=('https://twitter.com/intent/tweet?text=' + encodeURIComponent(`${page.description} ${siteUrl + page.url}`)), target='share') 10 | span.text Tweet 11 | = ' ' 12 | li.googleplus.hint--bottom(data-hint='Share on Google Plus') 13 | a(href=('https://plus.google.com/share?url=' + encodeURIComponent(siteUrl + page.url)), target='share') 14 | span.text +1 15 | -------------------------------------------------------------------------------- /sass/event/info-card.sass: -------------------------------------------------------------------------------- 1 | .lol-lol 2 | color: lighten($tan, 50%) 3 | 4 | .info-card 5 | color: lighten($tan, 50%) 6 | 7 | margin-top: 156px 8 | margin-bottom: 156px 9 | 10 | max-width: 280px 11 | border: solid $stroke-width $lighttan 12 | padding: 32px 13 | line-height: 1.6 14 | 15 | > .title 16 | color: white 17 | +caps-type 18 | text-transform: uppercase 19 | letter-spacing: .1em 20 | 21 | display: block 22 | font-size: ms(0) 23 | margin: 0 24 | padding: 0 25 | padding-bottom: 16px 26 | margin-bottom: 16px 27 | position: relative 28 | 29 | &:after 30 | content: '' 31 | display: block 32 | position: absolute 33 | bottom: -0.5 * $stroke-width 34 | right: 0 35 | left: -64px - 32px 36 | border-bottom: solid $stroke-width $lighttan 37 | -------------------------------------------------------------------------------- /src/assets/script.js: -------------------------------------------------------------------------------- 1 | onmount('p', function () { 2 | unorphan(this) 3 | }) 4 | 5 | onmount('[href="#register"]', function () { 6 | on(this, 'click', function (e) { 7 | openRegisterForm() 8 | }) 9 | }) 10 | 11 | onmount('[role~="register"]', function () { 12 | on(this, 'click', function (e) { 13 | e.preventDefault() 14 | openRegisterForm() 15 | }) 16 | }) 17 | 18 | function openRegisterForm () { 19 | document.querySelector('[role~="register"]').className += ' _hide' 20 | 21 | var form = document.querySelector('#register-form') 22 | form.className = form.className.replace(/_hide/g, '') 23 | 24 | var footer = document.querySelector('.register-info') 25 | footer.className = footer.className.replace(/_hide/g, '') 26 | 27 | setTimeout(function () { 28 | form.querySelector('input').focus() 29 | }, 25) 30 | } 31 | 32 | onmount() 33 | 34 | function on (el, event, handler) { 35 | if (el.addEventListener) { 36 | el.addEventListener(event, handler) 37 | } else { 38 | el.attachEvent('on' + event, function () { 39 | handler.call(el) 40 | }) 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/images/list.jade: -------------------------------------------------------------------------------- 1 | extends ../../layouts/base.jade 2 | block head 3 | link(rel='stylesheet', href='/assets/event.css') 4 | style. 5 | body { background: white; } 6 | .image-link { 7 | display: block; 8 | float: left; 9 | margin: 16px; 10 | width: 300px; 11 | background: #eee; 12 | font-weight: normal; 13 | font-size: 12px; 14 | color: #333; 15 | box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); } 16 | 17 | .image-link > .image { 18 | display: block; 19 | line-height: 128px; 20 | text-align: center; 21 | padding: 8px; 22 | height: 144px; } 23 | 24 | .image-link > .image > img { 25 | display: inline-block; 26 | vertical-align: middle; 27 | width: auto; 28 | max-height: 128px; } 29 | 30 | .image-link > .description { 31 | display: block; 32 | background: white; 33 | padding: 8px 16px; 34 | font-weight: bold; } 35 | 36 | block body 37 | each image in staticImages 38 | a.image-link(href=(image)) 39 | span.image 40 | img(src=(image)) 41 | span.description= image 42 | -------------------------------------------------------------------------------- /layouts/event.jade: -------------------------------------------------------------------------------- 1 | - rootClass = 'layout-event' 2 | 3 | extends base.jade 4 | include ../includes/social-list.jade 5 | 6 | block head 7 | title= title 8 | link(rel='stylesheet', href='/assets/event.css') 9 | meta(content='website', property='og:type') 10 | meta(content=(title), property='og:title') 11 | meta(content=(title), name='description') 12 | meta(content=(description), property='og:description') 13 | meta(content=(description), name='description') 14 | each image in og_images 15 | meta(content=(image), property='og:image') 16 | meta(content=(image), name='twitter:image') 17 | meta(property='og:image:width', content='940') 18 | meta(property='og:image:height', content='492') 19 | 20 | block body 21 | include ../includes/menu-block.jade 22 | .duo-layout 23 | .duo-ornament 24 | .duo-images 25 | block images 26 | 27 | .duo-aside 28 | +social-list({ url: '/tlc', title, description }) 29 | .sidecontainer 30 | block prelude 31 | 32 | .duo-content 33 | a.watermark.brand-logo.-black(href='/home') 34 | .sidecontainer 35 | block content 36 | 37 | .duo-content.-full 38 | block intermission 39 | 40 | .duo-content 41 | .sidecontainer 42 | block after 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [bcds.design](http://bcds.design) 2 | 3 | The website in [bcds.design](http://bcds.design). 4 | 5 | [![Status](https://travis-ci.org/rstacruz/bcds.svg?branch=master)](https://travis-ci.org/rstacruz/bcds "See test builds") 6 | 7 | ## Development setup 8 | 9 | Install [Node.js](https://nodejs.org/) (at least v4.0), and then: 10 | 11 | ``` 12 | npm install 13 | ``` 14 | 15 | Then: 16 | 17 | ``` 18 | npm start 19 | ``` 20 | 21 | ## Deployment 22 | 23 | **Just update the `master` branch;** Travis will automatically deploy it to 24 | GitHub pages. Otherwise, run `npm run build` and publish the `public/` files 25 | somewhere. 26 | 27 | ## How it's made 28 | 29 | Built using Metalsmith. Required reading: 30 | 31 | - [Metalsmith](http://metalsmith.io/) static site generator 32 | - [Jade](http://jade-lang.com/) HTML templating 33 | - [Sass](http://sass-lang.com/) stylesheets 34 | 35 | ## Thanks 36 | 37 | **bcds** © 2015+, Rico Sta. Cruz. Released under the [MIT] License.
38 | Authored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]). 39 | 40 | > [ricostacruz.com](http://ricostacruz.com)  ·  41 | > GitHub [@rstacruz](https://github.com/rstacruz)  ·  42 | > Twitter [@rstacruz](https://twitter.com/rstacruz) 43 | 44 | [MIT]: http://mit-license.org/ 45 | [contributors]: http://github.com/rstacruz/bcds/contributors 46 | -------------------------------------------------------------------------------- /sass/event/social-list.sass: -------------------------------------------------------------------------------- 1 | // 2 | // .social-list -- social share icons 3 | // 4 | 5 | .social-list 6 | &, li 7 | margin: 0 8 | padding: 0 9 | 10 | & 11 | margin-left: -22px 12 | 13 | &.-top-collapse 14 | margin-top: -16px 15 | 16 | li 17 | display: inline-block 18 | 19 | a 20 | display: inline-block 21 | padding: 6px 22 | text-align: center 23 | box-shadow: none 24 | 25 | a:before, a:after 26 | transition: all 100ms linear 27 | 28 | .text 29 | display: none 30 | 31 | a:before 32 | font-family: 'Ionicons' 33 | font-weight: normal 34 | font-style: normal 35 | font-size: 18px 36 | width: 40px 37 | height: 40px 38 | line-height: 40px 39 | display: inline-block 40 | text-align: center 41 | border: solid 2px transparent 42 | border-radius: 50% 43 | 44 | @mixin socialiconify($color, $content, $filled) 45 | & 46 | color: darken($ecru, 10%) 47 | 48 | &:hover, 49 | &:focus 50 | color: $color 51 | &:before 52 | content: $filled 53 | &:hover:before, 54 | &:focus:before 55 | border-color: $color 56 | content: $filled 57 | 58 | .facebook a 59 | +socialiconify(#4c66a4, '\f230', '\f231') 60 | &:hover:before, &:focus:before 61 | background: #4c66a4 62 | color: white 63 | 64 | .twitter a 65 | +socialiconify(dodgerblue, '\f242', '\f243') 66 | .googleplus a 67 | +socialiconify(#f53, '\f234', '\f235') 68 | -------------------------------------------------------------------------------- /sass/mixins/textarea-style.sass: -------------------------------------------------------------------------------- 1 | @mixin textarea-placeholder 2 | color: $copper 3 | font-weight: normal 4 | opacity: .2 5 | font-family: serif 6 | font-style: italic 7 | 8 | @mixin textarea-placeholder-focus 9 | opacity: .1 10 | 11 | @mixin textarea-selection 12 | background: rgba($decopper, .3) 13 | color: $black 14 | 15 | @mixin textarea-style 16 | border: 0 17 | height: 40px 18 | background: transparent 19 | color: $decopper 20 | border-bottom: solid 1px mix($decopper, $black, 20%) 21 | background-color: rgba(darken($black, 50%), .3) 22 | padding: 6px 12px 23 | padding-left: 0 24 | border-bottom: 0 25 | border-radius: 0 26 | 27 | font-size: ms(1) 28 | font-weight: bold 29 | padding-left: 16px 30 | 31 | border-bottom: solid 1px $decopper 32 | background: transparent 33 | padding-left: 0 34 | 35 | &:hover 36 | border-bottom-color: lighten($decopper, 20%) 37 | 38 | &:focus 39 | // border-bottom-color: $decopper 40 | border-radius: 3px 41 | color: $black 42 | background-color: desaturate(rgba($decopper, .1), 50%) 43 | background-color: white 44 | box-shadow: 0 0 10px rgba($copper, .3), 0 0 0 1px $copper 45 | border-bottom-color: transparent 46 | // transition: background-color 50ms ease 47 | outline: 0 48 | padding-left: 12px 49 | 50 | &::placeholder 51 | +textarea-placeholder 52 | 53 | &:focus::placeholder 54 | +textarea-placeholder-focus 55 | 56 | &::selection 57 | +textarea-selection 58 | -------------------------------------------------------------------------------- /sass/event/cta-button.sass: -------------------------------------------------------------------------------- 1 | .cta-box 2 | margin: 2em 0 3 | position: relative 4 | z-index: 300 5 | 6 | @media (min-width: 769px) 7 | margin: 3em 0 8 | margin-left: -64px - 16px 9 | 10 | .cta-button 11 | display: inline-block 12 | background: $black 13 | text-decoration: none 14 | height: 80px 15 | line-height: 80px 16 | padding: 0 48px 0 0 17 | +subheading-type 18 | font-size: ms(0) 19 | text-transform: uppercase 20 | letter-spacing: .2em 21 | white-space: nowrap 22 | 23 | @media (min-width: 769px) 24 | box-shadow: -16px 16px 0 white 25 | 26 | @media (max-width: 768px) 27 | padding-right: 24px 28 | height: 56px 29 | line-height: 56px 30 | 31 | &, &:visited 32 | color: white 33 | 34 | &:before 35 | +ion-icon('chevron-right') 36 | vertical-align: top 37 | font-size: 32px 38 | display: inline-block 39 | width: 80px 40 | height: 80px 41 | text-indent: .2em 42 | line-height: 80px 43 | background: $copper 44 | color: white 45 | text-align: center 46 | margin-right: 48px 47 | 48 | @media (max-width: 768px) 49 | width: 56px 50 | height: 56px 51 | line-height: 56px 52 | margin-right: 24px 53 | font-size: 16px 54 | 55 | &.-lite 56 | background: rgba($lighttan, .05) 57 | color: $black 58 | +caps-type 59 | 60 | &:hover, 61 | &:focus 62 | background: $copper 63 | color: white 64 | 65 | &:before 66 | background: darken($copper, 10%) 67 | 68 | .cta-button-2 69 | +button 70 | -------------------------------------------------------------------------------- /layouts/base.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | //   Follow us on Instagram.                      . 3 | //    ,-                         .         .      . 4 | //   /,- \ . , , ,-. ,-. ,-. ,-. |-. ,-. ,-| ,-.  . 5 | //   |,-|| |/|/  |-' ,-| |   |-' | | |   | | `-   . 6 | //   \`-^/ ' '   `-' `-^ '   `-' ^-' `-' `-^ `-'  . 7 | //    `-'                                         . 8 | html 9 | head 10 | meta(charset='utf-8') 11 | meta(name='viewport', content='width=device-width') 12 | script(src='https://cdn.polyfill.io/v2/polyfill.min.js') 13 | 14 | != '' 22 | 23 | script(src='https://use.typekit.net/zna7tmd.js') 24 | script try{Typekit.load({async:true});}catch(e){} 25 | 26 | link(rel='shortcut icon', type='image/png', href='/images/logo/favicon.png') 27 | 28 | block head 29 | 30 | body 31 | block body 32 | 33 | -// unorphan@1.2.1 34 | script(src='https://brcdn.org/h7Ny1jA2SLbtHlIWXf2OQNjwFbk.js') 35 | -// onmount@1.1.0 36 | script(src='https://brcdn.org/g2yw2PlSsIHvageAGeFZc9QVppM.js') 37 | script(src='/assets/script.js') 38 | script. 39 | if (window.location.hostname.indexOf('bcds.design')===window.location.hostname.length-11){ 40 | (function(b,c,d,s,x,y,z){b['GoogleAnalyticsObject']=x;b[x]=b[x]||function(){ (b[x].q=b[x].q||[]).push(arguments)},b[x].l=1*new Date();y=c.createElement(d), z=c.getElementsByTagName(d)[0];y.async=1;y.src=s;z.parentNode.insertBefore(y,z) })(window,document,'script','//www.google-analytics.com/analytics.js','ga') 41 | ga('create','UA-71920014-1','auto');ga('send','pageview')} 42 | -------------------------------------------------------------------------------- /sass/base/base.sass: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700') 2 | @import url('//cdn.jsdelivr.net/hint.css/1.3.2/hint.min.css') 3 | 4 | +ion-font 5 | 6 | * 7 | box-sizing: border-box 8 | 9 | html 10 | text-rendering: optimizeLegibility 11 | -webkit-font-smoothing: antialiased 12 | -moz-osx-font-smoothing: grayscale 13 | line-height: 1.8 14 | +body-type 15 | color: $text 16 | 17 | html, body 18 | min-height: 100% 19 | margin: 0 20 | padding: 0 21 | 22 | html 23 | overflow-x: hidden 24 | 25 | @media (max-width: 769px) 26 | html 27 | font-size: 13px 28 | 29 | h1, h2, h3, p, ul, ol, blockquote 30 | margin-top: 1.5em 31 | margin-bottom: 1.5em 32 | 33 | h1 34 | padding-top: 1em 35 | +heading-type 36 | font-size: ms(6) 37 | line-height: 1.2 38 | color: $black 39 | 40 | > b 41 | font-size: ms(3) 42 | display: block 43 | line-height: 1 44 | 45 | h2 46 | padding-top: 1em 47 | +heading-type 48 | font-size: ms(4) 49 | line-height: 1.2 50 | color: $black 51 | margin-bottom: .5em 52 | margin-top: 1em 53 | 54 | > b 55 | font-size: ms(2) 56 | display: block 57 | line-height: 1 58 | 59 | @media (max-width: 768px) 60 | margin-top: 1 61 | padding-top: 0 62 | 63 | h3 64 | margin-top: 3.5em 65 | margin-bottom: 1em 66 | color: $black 67 | font-size: ms(0) + (ms(1) - ms(0)) / 2 68 | +caps-type 69 | text-transform: uppercase 70 | letter-spacing: .1em 71 | padding-right: 20% 72 | 73 | & + p 74 | margin-top: -.8em 75 | 76 | @media (max-width: 768px) 77 | margin-top: 1.5em 78 | font-size: ms(1) 79 | margin-bottom: 0 80 | 81 | & + p 82 | margin-top: .5em 83 | 84 | h4 85 | color: $black 86 | +caps-type 87 | font-size: ms(-1) 88 | @media (min-width: 769px) 89 | padding-right: 30% 90 | 91 | .brief 92 | +subheading-type 93 | font-size: ms(3) 94 | color: $lighttan 95 | line-height: 1.4 96 | 97 | a, 98 | a:visited 99 | color: $copper 100 | font-weight: bold 101 | text-decoration: none 102 | 103 | a:hover, 104 | a:focus 105 | color: lighten($copper, 10%) 106 | 107 | ul 108 | margin-left: 0 109 | padding-left: 2em 110 | 111 | strong 112 | font-weight: bold 113 | color: $black 114 | -------------------------------------------------------------------------------- /sass/event/ss-form.sass: -------------------------------------------------------------------------------- 1 | // Google Docs form 2 | // 3 | // #ss-form.ss-question-list 4 | // ol.ss-question-list 5 | // .ss-form-question 6 | // .ss-item (ss-item-required ss-text) 7 | // .ss-form-entry 8 | // label.ss-q-item-label 9 | // .ss-q-title 10 | // | Name: 11 | // label.ss-required-asterisk * 12 | // 13 | // .ss-q-help (ss-secondary-text) 14 | // | First name, last name 15 | // 16 | // -// short 17 | // input.ss-q-short(type='text') 18 | // 19 | // -// long 20 | // textarea.ss-q-long 21 | // 22 | // -// choices 23 | // ul.ss-choices 24 | // li.ss-choice-item 25 | // label 26 | // span.ss-choice-item-control 27 | // input(type='radio') 28 | // span.ss-choice-label 29 | // | Yes 30 | // 31 | 32 | .ss-question-list 33 | .ss-form-question 34 | line-height: 1.6 35 | 36 | .ss-form-question + .ss-form-question 37 | margin-top: 48px 38 | 39 | // Question + hint 40 | .ss-q-item-label 41 | margin-bottom: 12px 42 | display: block 43 | 44 | // Question name 45 | .ss-q-title 46 | +subheading-type-alt 47 | font-size: ms(1) 48 | color: white 49 | display: inline 50 | margin-right: 16px 51 | 52 | // Hint 53 | .ss-q-help 54 | font-size: ms(-1) 55 | display: inline 56 | 57 | // "This is a required question" 58 | .required-message 59 | display: none 60 | 61 | .ss-q-short, 62 | .ss-q-long 63 | +textarea-style 64 | width: 100% 65 | 66 | .ss-q-long 67 | min-height: 6em 68 | 69 | .ss-password-warning 70 | display: none 71 | 72 | .ss-q-other 73 | +textarea-style 74 | display: block 75 | padding: 0 76 | margin-left: 34px 77 | margin-top: 8px 78 | height: 32px 79 | font-size: ms(-1) 80 | 81 | &:focus 82 | padding: 0 8px 83 | 84 | .ss-choices, 85 | .ss-choice-item 86 | list-style-type: none 87 | 88 | .ss-choice-label 89 | margin-left: 16px 90 | color: $ecru 91 | 92 | .ss-required-asterisk 93 | color: $copper 94 | position: relative 95 | top: .2em 96 | margin-left: 2px 97 | 98 | // Submit 99 | .jfk-button 100 | +button 101 | -------------------------------------------------------------------------------- /sass/base/menu.sass: -------------------------------------------------------------------------------- 1 | $menu-width: 400px 2 | 3 | // 4 | // The burger menu. 5 | // 6 | // .menu-block 7 | // .menu-toggle 8 | // .menu-screen 9 | // .menu-dropdown 10 | // 11 | .menu-block 12 | > [type='checkbox'] 13 | display: none 14 | 15 | @media (max-width: 768px) 16 | .menu-bar 17 | position: fixed 18 | top: 0 19 | left: 0 20 | width: 100% 21 | height: 32px 22 | border-bottom: solid 1px rgba($decopper, .1) 23 | background: white 24 | z-index: 4 25 | 26 | // The burger 27 | .menu-toggle 28 | position: fixed 29 | top: 0 30 | left: 0 31 | z-index: 25 32 | cursor: pointer 33 | width: 32px + 20px * 2 34 | height: 32px + 32px * 2 35 | padding: 32px 20px 36 | transform: translate3d(0, 0, 0) 37 | transition: transform 300ms ease-out 38 | 39 | > div 40 | position: relative 41 | +burger($color: $lighttan, $width: 20px, $height: 2px, $gutter: 3px, $border-radius: 2px) 42 | 43 | &:hover > div 44 | &, &:before, &:after 45 | background-color: lighten($lighttan, 30%) 46 | 47 | @media (max-width: 768px) 48 | width: 100% 49 | height: 32px 50 | padding: 0 51 | 52 | > div 53 | top: 10px 54 | left: 16px 55 | 56 | // The menu 57 | .menu-dropdown 58 | display: block 59 | position: fixed 60 | left: 0 61 | top: 0 62 | bottom: 0 63 | background: $lighttan 64 | z-index: 20 65 | transition: transform 300ms ease-out 66 | color: white 67 | 68 | text-align: center 69 | padding: 200px 32px 70 | 71 | @media (max-width: 768px) 72 | padding: 64px 16px 73 | 74 | & 75 | transform: translate3d(-100%, 0, 0) 76 | width: 100% 77 | 78 | @media (min-width: 480px) 79 | transform: translate3d(-$menu-width, 0, 0) 80 | width: $menu-width 81 | 82 | // The blackness 83 | .menu-screen 84 | background: black 85 | background: linear-gradient(90deg + 30deg, rgba(black, .5), rgba(black, 1)) 86 | opacity: 0 87 | transition: opacity 300ms linear 88 | position: fixed 89 | top: 0 90 | left: 0 91 | width: 100% 92 | height: 100% 93 | z-index: 20 94 | pointer-events: none 95 | 96 | input:checked ~ .menu-toggle 97 | background: transparent 98 | 99 | input:checked ~ .menu-toggle > div 100 | +burger-to-cross($color: white) 101 | 102 | input:checked ~ .menu-dropdown 103 | transform: translate3d(0, 0, 0) 104 | 105 | input:checked ~ .menu-screen 106 | opacity: .7 107 | pointer-events: auto 108 | -------------------------------------------------------------------------------- /src/home.jade: -------------------------------------------------------------------------------- 1 | extends ../layouts/base.jade 2 | 3 | block head 4 | title BCDS — Better Creative Design Society 5 | link(rel='stylesheet', href='/assets/landing.css') 6 | 7 | block body 8 | include ../includes/menu-block.jade 9 | .landing-layout 10 | .landing-hero 11 | .container 12 | .brand-logo 13 | 14 | .links-block 15 | h3 Better Creative Design Society 16 | p. 17 | #[a(href='https://instagram.com/wearebcds') wearebcds] 18 | #[i.icon-instagram] 19 | #[i.space] 20 | #[a(href='https://facebook.com/wearebcds') wearebcds] 21 | #[i.icon-facebook] 22 | #[i.space] 23 | #[a(href='mailto:workshops@bcds.design') workshops@bcds.design] 24 | #[i.icon-email] 25 | 26 | .tagline. 27 | Let’s write something beautiful #[br]together. Let’s infuse a part of our souls into hand-written ink. We’re here to pass our passion of calligraphy to you #[em.amp &] to the world. We are BCDS. 28 | 29 | 30 | .signatures-list 31 | .signatures-item 32 | h3 Jelvin Base 33 | p #[a(href='https://instagram.com/jelvin') @jelvin] 34 | 35 | .signatures-item 36 | h3 Carl Chua 37 | p #[a(href='https://instagram.com/carligraphy') @carligraphy] 38 | 39 | .signatures-item 40 | h3 John Ed De Vera 41 | p #[a(href='https://instagram.com/battery_full') @battery_full] 42 | 43 | .signatures-item 44 | h3 Rico Sta. Cruz 45 | p #[a(href='https://instagram.com/rstacruz') @rstacruz] 46 | 47 | .landing-workshops 48 | .container 49 | h3.title Upcoming workshops 50 | 51 | .workshop-item 52 | span.details To be announced 53 | 54 | .landing-workshops 55 | .container 56 | h3.title Recent workshops 57 | 58 | .workshop-item 59 | h4.title 60 | a(href='.'). 61 | Pagtitipon 4 62 | span.details at Warehouse 8 63 | p.date. 64 | Sep 24, 2016 65 | 66 | .workshop-item.-done 67 | h4.title 68 | a(href='tlc'). 69 | TLC—Typography, Lettering & Calligraphy 70 | span.details at Racket Room Collective 71 | p.date. 72 | Jan 16 & 23, 2016 73 | 74 | .workshop-item.-done 75 | h4.title 76 | a(href='.'). 77 | Gothic Calligraphy 78 | span.details at Type Kita 79 | p.date. 80 | Dec 13, 2015 81 | 82 | .workshop-item.-done 83 | h4.title 84 | a(href='.'). 85 | Brush Lettering and Hand Lettering 86 | span.details at Type Kita 87 | p.date. 88 | Dec 12, 2015 89 | -------------------------------------------------------------------------------- /sass/event/duo-layout.sass: -------------------------------------------------------------------------------- 1 | .duo-layout 2 | position: relative 3 | background: white 4 | 5 | @media (max-width: 768px) 6 | padding-top: 32px 7 | 8 | > .duo-images, 9 | > .duo-ornament, 10 | > .duo-aside 11 | position: absolute 12 | left: 0 13 | top: 0 14 | width: 100% 15 | height: 100% 16 | 17 | > .duo-images 18 | @media (min-width: 769px) 19 | width: 50% 20 | 21 | > .duo-ornament 22 | @media (max-width: 768px) 23 | display: none 24 | 25 | > .duo-aside 26 | width: 50% 27 | height: 100% 28 | @media (max-width: 768px) 29 | display: none 30 | 31 | > .duo-content 32 | position: relative 33 | z-index: 1 34 | margin-left: 50% 35 | width: 50% 36 | 37 | @media (max-width: 768px) 38 | margin-left: 0 39 | width: 100% 40 | 41 | &.-full 42 | margin-left: 0 43 | width: 100% 44 | z-index: 10 45 | 46 | // 47 | // Ornamental borders 48 | // 49 | 50 | .duo-ornament 51 | pointer-events: none 52 | 53 | &:before, 54 | &:after 55 | content: '' 56 | top: 32px 57 | left: 64px 58 | bottom: 32px 59 | right: 32px 60 | position: absolute 61 | 62 | // Left 63 | &:before 64 | right: 50% 65 | border: solid $stroke-width $lighttan 66 | border-right: 0 67 | opacity: .8 68 | z-index: 1 69 | 70 | // Right 71 | &:after 72 | left: 50% 73 | border: solid $stroke-width mix($ecru, white, 40%) 74 | border-left: 0 75 | opacity: 1 76 | z-index: 10 77 | 78 | .duo-content 79 | & 80 | padding: 64px 81 | padding-top: 72px 82 | 83 | @media (max-width: 768px) 84 | padding: 16px 0 85 | 86 | & + &:not(.-full) 87 | padding-top: 0 88 | 89 | &.-full 90 | padding: 0 91 | 92 | 93 | > .watermark 94 | position: absolute 95 | top: 80px 96 | right: 80px 97 | 98 | @media (max-width: 768px) 99 | top: 16px 100 | right: 16px 101 | 102 | .duo-aside 103 | padding: 64px 104 | padding-top: 72px 105 | padding-left: 64px + 64px 106 | color: white 107 | 108 | .duo-images 109 | background: $tan 110 | overflow: hidden 111 | 112 | @media (max-width: 768px) 113 | display: none 114 | 115 | img 116 | width: 100% 117 | display: block 118 | margin: 0 119 | opacity: .22 120 | transition: opacity 250ms linear 121 | 122 | .highlighted-image 123 | & 124 | background: $tan 125 | position: relative 126 | z-index: 2 127 | padding: 32px 0 32px 64px 128 | 129 | > img 130 | opacity: 1 131 | width: 100% 132 | height: 100% 133 | display: block 134 | 135 | &:after 136 | content: '' 137 | position: absolute 138 | display: block 139 | top: 0 140 | left: 0 141 | width: 100% 142 | height: 100% 143 | background: linear-gradient(90deg + 25deg, rgba($tan, 0), rgba($tan, .5)) 144 | -------------------------------------------------------------------------------- /sass/vendor/burger.scss: -------------------------------------------------------------------------------- 1 | // https://raw.githubusercontent.com/jorenvanhee/sass-burger/master/_burger.scss 2 | // https://github.com/jorenvanhee/sass-burger 3 | 4 | // Burger parts 5 | // 6 | // (---) top -> &::before 7 | // [---] middle -> & 8 | // (---) bottom -> &::after 9 | 10 | 11 | // Vendor prefixes 12 | $sass-burger-add-vendor-prefixes: true !default; 13 | 14 | // Burger 15 | @mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) { 16 | $burger-height: $height !global; 17 | $burger-gutter: $gutter !global; 18 | 19 | position: relative; 20 | margin-top: $height + $gutter; 21 | margin-bottom: $height + $gutter; 22 | 23 | @if $sass-burger-add-vendor-prefixes { 24 | -webkit-user-select: none; 25 | -moz-user-select: none; 26 | -ms-user-select: none; 27 | } 28 | user-select: none; 29 | 30 | &, &::before, &::after { 31 | display: block; 32 | width: $width; 33 | height: $height; 34 | background-color: $color; 35 | @if $border-radius != 0 { 36 | border-radius: $border-radius; 37 | } 38 | 39 | @if $sass-burger-add-vendor-prefixes { 40 | -webkit-transition-property: background-color, -webkit-transform; 41 | -moz-transition-property: background-color, -moz-transform; 42 | -o-transition-property: background-color, -o-transform; 43 | } 44 | transition-property: background-color, transform; 45 | 46 | @if $sass-burger-add-vendor-prefixes { 47 | -webkit-transition-duration: $transition-duration; 48 | -moz-transition-duration: $transition-duration; 49 | -o-transition-duration: $transition-duration; 50 | } 51 | transition-duration: $transition-duration; 52 | } 53 | 54 | &::before, &::after { 55 | position: absolute; 56 | content: ""; 57 | } 58 | 59 | &::before { 60 | top: -($height + $gutter); 61 | } 62 | 63 | &::after { 64 | top: $height + $gutter; 65 | } 66 | } 67 | 68 | 69 | // Select parts of the burger 70 | @mixin burger-parts { 71 | &, &::before, &::after { 72 | @content; 73 | } 74 | } 75 | 76 | @mixin burger-top { 77 | &::before { 78 | @content; 79 | } 80 | } 81 | 82 | @mixin burger-middle { 83 | & { 84 | @content; 85 | } 86 | } 87 | 88 | @mixin burger-bottom { 89 | &::after { 90 | @content; 91 | } 92 | } 93 | 94 | 95 | // Burger animations 96 | @mixin burger-to-cross($color: auto) { 97 | & { 98 | background-color: transparent; 99 | } 100 | @if ($color != auto) { 101 | &::before, &::after { 102 | background-color: $color; 103 | } 104 | } 105 | &::before { 106 | @if $sass-burger-add-vendor-prefixes { 107 | -webkit-transform: translateY($burger-gutter + $burger-height) rotate(45deg); 108 | -moz-transform: translateY($burger-gutter + $burger-height) rotate(45deg); 109 | -ms-transform: translateY($burger-gutter + $burger-height) rotate(45deg); 110 | -o-transform: translateY($burger-gutter + $burger-height) rotate(45deg); 111 | } 112 | transform: translateY($burger-gutter + $burger-height) rotate(45deg); 113 | } 114 | &::after { 115 | @if $sass-burger-add-vendor-prefixes { 116 | -webkit-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 117 | -moz-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 118 | -ms-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 119 | -o-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 120 | } 121 | transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /sass/landing.sass: -------------------------------------------------------------------------------- 1 | @import 'common' 2 | 3 | @media (min-width: 769px) 4 | .menu-toggle 5 | background-color: darken($tan, 10%) 6 | height: 48px 7 | width: 48px 8 | padding: 18px 14px 9 | top: 16px 10 | left: 16px 11 | transition: background-color 0ms linear 250ms 12 | 13 | input:checked ~ .menu-toggle 14 | background-color: transparent 15 | transition: none 16 | 17 | html, body 18 | background-color: darken($tan, 10%) 19 | color: $lighttan 20 | 21 | .container 22 | max-width: 960px 23 | margin: 0 auto 24 | padding: 32px 25 | padding-left: 64px 26 | 27 | @media (max-width: 768px) 28 | padding: 16px 29 | 30 | .landing-layout 31 | $color: darken($tan, 10%) 32 | @media (min-width: 900px) 33 | background: linear-gradient(to top, rgba($color, .9), $color 900px, $color), url('https://unsplash.it/1400/900?image=612') left bottom / 100% auto no-repeat, $color 34 | position: relative 35 | padding-top: 32px 36 | padding-bottom: 32px 37 | 38 | @media (min-width: 769px) 39 | padding-top: 128px 40 | padding-bottom: 128px 41 | 42 | &:before 43 | content: '' 44 | display: block 45 | position: absolute 46 | top: 32px 47 | right: 32px 48 | bottom: 32px 49 | left: 32px 50 | border: solid 8px darken($tan, 5%) 51 | pointer-events: none 52 | 53 | .landing-hero > .container 54 | > .brand-logo 55 | width: 64px 56 | height: 64px 57 | 58 | @media (max-width: 768px) 59 | width: 48px 60 | height: 48px 61 | 62 | > .tagline 63 | margin: 64px 0 128px 0 64 | +heading-type 65 | font-size: ms(5) 66 | color: white 67 | line-height: 1.2 68 | 69 | padding-right: 100% * 1/8 70 | 71 | @media (max-width: 768px) 72 | font-size: ms(3) 73 | margin-bottom: 0 74 | margin-top: 16px 75 | br 76 | display: none 77 | 78 | // > em 79 | // font-style: normal 80 | // opacity: .2 81 | 82 | @mixin link-block 83 | & 84 | font-size: ms(-1) 85 | 86 | > p, 87 | > h3 88 | margin: 0 89 | padding: 0 90 | font-size: 1em 91 | text-transform: uppercase 92 | 93 | > h3 94 | +caps-type 95 | color: $lighttan 96 | 97 | .icon-email:before, 98 | .icon-facebook:before, 99 | .icon-instagram:before 100 | font-size: 12px 101 | margin-left: .12em 102 | position: relative 103 | top: -1px 104 | 105 | .icon-instagram:before 106 | +ion-icon('social-instagram') 107 | 108 | .icon-facebook:before 109 | +ion-icon('social-facebook') 110 | 111 | .icon-email:before 112 | +ion-icon('paper-airplane') 113 | 114 | .space 115 | display: inline-block 116 | width: 1em 117 | 118 | .links-block 119 | +link-block 120 | margin: 64px 0 121 | 122 | @media (max-width: 768px) 123 | margin: 32px 0 124 | 125 | .signatures-list 126 | > .signatures-item 127 | margin: 16px 0 128 | 129 | @media (min-width: 769px) 130 | display: flex 131 | margin: 64px 0 132 | 133 | > .signatures-item 134 | flex: 0 0 25% 135 | padding-right: 24px 136 | margin: 0 137 | 138 | .signatures-item 139 | +link-block 140 | 141 | .landing-workshops > .container 142 | > .title 143 | color: white 144 | +subheading-type 145 | font-size: ms(2) 146 | text-transform: none 147 | margin: 0 148 | padding: 0 149 | line-height: 1.3 150 | margin-bottom: 16px 151 | 152 | .workshop-item 153 | +clearfix 154 | border-top: solid 1px rgba($decopper, .2) 155 | padding: 16px 0 156 | color: $lighttan 157 | 158 | > h4, 159 | > p 160 | margin: 0 161 | padding: 0 162 | 163 | > h4 > a 164 | +caps-type 165 | margin-right: .1em 166 | 167 | > .title 168 | font-size: ms(0) 169 | color: $lighttan 170 | text-transform: none 171 | font-weight: normal 172 | 173 | > .title > a 174 | +caps-type 175 | 176 | > .title > .details 177 | margin-left: .2em 178 | letter-spacing: 0 179 | 180 | @media (min-width: 769px) 181 | > .title 182 | float: left 183 | 184 | > .date 185 | float: right 186 | text-align: right 187 | 188 | em.amp 189 | font-style: italic 190 | font-family: baskerville, serif 191 | font-weight: normal 192 | -------------------------------------------------------------------------------- /sass/vendor/sassy-math.scss: -------------------------------------------------------------------------------- 1 | // SASSY MATH 2 | // https://github.com/at-import/Sassy-math/blob/master/compass/stylesheets/_math.scss 3 | 4 | @charset "UTF-8"; 5 | 6 | ////////////////////////////// 7 | // Variables 8 | ////////////////////////////// 9 | $pi: 3.1415926535897932384626433832795028841971693993751; 10 | $π: $pi; 11 | $e: 2.71828182845904523536028747135266249775724709369995; 12 | 13 | $iter: 50; 14 | 15 | ////////////////////////////// 16 | // Random Number 17 | // Working from http://xkcd.com/221/ 18 | // Chosen by fair dice roll. 19 | // Guarenteed to be random. 20 | ////////////////////////////// 21 | @function rand() { 22 | @return 4; 23 | } 24 | 25 | ////////////////////////////// 26 | // Percent 27 | ////////////////////////////// 28 | @function percent($number) { 29 | @return $number * 0.01; 30 | } 31 | 32 | ////////////////////////////// 33 | // Exponent 34 | ////////////////////////////// 35 | @function exponent($base, $exponent) { 36 | // reset value 37 | $value: $base; 38 | // positive intergers get multiplied 39 | @if $exponent > 1 { 40 | @for $i from 2 through $exponent { 41 | $value: $value * $base; } } 42 | // negitive intergers get divided. A number divided by itself is 1 43 | @if $exponent < 1 { 44 | @for $i from 0 through -$exponent { 45 | $value: $value / $base; } } 46 | // return the last value written 47 | @return $value; 48 | } 49 | 50 | @function pow($base, $exponent) { 51 | @return exponent($base, $exponent); 52 | } 53 | 54 | ////////////////////////////// 55 | // Factorial 56 | ////////////////////////////// 57 | @function factorial($number) { 58 | // reset value 59 | $value: 1; 60 | // positive intergers get multiplied 61 | @if $number > 0 { 62 | @for $i from 1 through $number { 63 | $value: $value * $i; 64 | } 65 | } 66 | @return $value; 67 | } 68 | 69 | @function fact($number) { 70 | @return factorial($number); 71 | } 72 | 73 | 74 | ////////////////////////////// 75 | // Polynomial Approximation 76 | ////////////////////////////// 77 | // Maclaurin series can be used to estimate Sine and Consine 78 | @function maclaurin($start, $key, $number) { 79 | $value: $start; 80 | $add: 0; 81 | 82 | @for $i from 1 through $iter { 83 | @if $add == 0 { 84 | $value: $value - ( exponent($number, $key) / factorial($key) ); 85 | $add: 1; 86 | } 87 | @else { 88 | $value: $value + ( exponent($number, $key) / factorial($key) ); 89 | $add: 0; 90 | } 91 | 92 | $key: $key + 2; 93 | } 94 | 95 | @return $value; 96 | } 97 | // Taylor series can be used to estiamte ln 98 | @function taylor($number) { 99 | @return taylor; 100 | } 101 | 102 | ////////////////////////////// 103 | // Basic Trig Functions 104 | ////////////////////////////// 105 | // Bundled in Compass: http://compass-style.org/reference/compass/helpers/trig/ 106 | // References for implementing using MacLaurin series below: 107 | 108 | //@function sin($number, $unit: 'deg') { 109 | // @if $unit == 'deg' { 110 | // $number: deg-to-rad($number); 111 | // } 112 | // @return maclaurin($number, 3, $number); 113 | //} 114 | // 115 | //@function cos($number, $unit: 'deg') { 116 | // @if $unit == 'deg' { 117 | // $number: deg-to-rad($number); 118 | // } 119 | // @return maclaurin(1, 2, $number); 120 | //} 121 | // 122 | //// Trig Identity: Tangent = Sine divided by Cosine. 123 | //@function tan($number, $unit: 'deg') { 124 | // @if $unit == 'deg' { 125 | // $number: deg-to-rad($number); 126 | // } 127 | // @return sin($number) / cos($number); 128 | //} 129 | 130 | ////////////////////////////// 131 | // Reciprocal Trig Functions 132 | ////////////////////////////// 133 | @function csc($number, $unit: 'deg') { 134 | @if $unit == 'deg' { 135 | $number: deg-to-rad($number); 136 | } 137 | @return 1 / sin($number); 138 | } 139 | 140 | @function scs($number, $unit: 'deg') { 141 | @if $unit == 'deg' { 142 | $number: deg-to-rad($number); 143 | } 144 | @return 1 / cos($number); 145 | } 146 | 147 | @function cot($number, $unit: 'deg') { 148 | @if $unit == 'deg' { 149 | $number: deg-to-rad($number); 150 | } 151 | @return 1 / tan($number); 152 | } 153 | 154 | ////////////////////////////// 155 | // Hyperbolic Functions 156 | ////////////////////////////// 157 | @function sinh($number) { 158 | $top: exponent($e, (2 * $number)) - 1; 159 | $bottom: 2 * exponent($e, $number); 160 | @return $top / $bottom; 161 | } 162 | 163 | @function cosh($number) { 164 | $top: exponent($e, (2 * $number)) + 1; 165 | $bottom: 2 * exponent($e, $number); 166 | @return $top / $bottom; 167 | } 168 | 169 | @function tanh($number) { 170 | $top: exponent($e, (2 * $number)) - 1; 171 | $bottom: exponent($e, (2 * $number)) + 1; 172 | @return $top / $bottom; 173 | } 174 | 175 | ////////////////////////////// 176 | // Reciprocal Hyperbolic Functions 177 | ////////////////////////////// 178 | @function csch($number) { 179 | @return 1 / sinh($number); 180 | } 181 | 182 | @function sech($number) { 183 | @return 1 / cosh($number); 184 | } 185 | 186 | @function coth($number) { 187 | @return 1/ tanh($number); 188 | } 189 | 190 | 191 | @function log($number) { 192 | @return $number; 193 | } 194 | 195 | @function ln($number) { 196 | @if $number > 0 and $number < 1 { 197 | $value: 0; 198 | @for $i from 1 through $iter { 199 | $value: $value + ( pow(-1, $i) * pow(-1 * (1 - $number), $i)) / $i; 200 | } 201 | $value: -1 * $value; 202 | 203 | @return $value; 204 | } 205 | @else if $number == 1 { 206 | @return 0; 207 | } 208 | @else { 209 | @return ERROR; 210 | @warn ln input must be greater than zero and less than or equal to 1; 211 | } 212 | } 213 | 214 | 215 | ////////////////////////////// 216 | // Degree/Radian Conversion 217 | ////////////////////////////// 218 | @function deg-to-rad($number) { 219 | @return $number * $pi / 180deg; 220 | } 221 | 222 | @function rad-to-deg($number) { 223 | @return $number * 180deg / $pi; 224 | } 225 | 226 | ////////////////////////////// 227 | // Root Functions 228 | ////////////////////////////// 229 | // Basic General-Purpose Root Function 230 | @function n-root($number, $n) { 231 | @if $number < 1 { 232 | @return ERROR; 233 | @warn ROOT ERROR; 234 | } 235 | // If a whole number, generate it quickly 236 | @for $i from 1 through $number { 237 | @if exponent($i, $n) == $number { 238 | @return $i; 239 | } 240 | } 241 | // Else, run through other options 242 | @for $i from 1 through $number * 1000 / 2 { 243 | @if round(exponent($i / 1000, $n) * 100) == round($number * 100) { 244 | @return $i / 1000; 245 | } 246 | } 247 | } 248 | 249 | @function root($number, $n) { 250 | @return n-root($number, $n); 251 | } 252 | 253 | // Square Roots 254 | @function √($number) { 255 | @return sqrt($number); 256 | } 257 | 258 | @function sqrt($number) { 259 | $guess: rand(); 260 | $root: $guess; 261 | @for $i from 1 through $iter { 262 | $root: $root - (pow($root, 2) - $number) / (2 * $root); 263 | } 264 | @return $root; 265 | } 266 | 267 | ////////////////////////////// 268 | // Golden Ratio 269 | ////////////////////////////// 270 | @function golden() { 271 | @return 1/2 + sqrt(5) / 2; 272 | } 273 | @function ϕ() { 274 | @return golden(); 275 | } 276 | 277 | $golden-ratio: golden(); 278 | $ϕ: $golden-ratio; 279 | 280 | ////////////////////////////// 281 | // Is Int and Is Float 282 | ////////////////////////////// 283 | @function is-int($number) { 284 | @if type-of($number) != 'number' { 285 | @warn '#{$number} is not a number! It cannot be an integer if it is not a number!'; 286 | @return false; 287 | } 288 | @if $number - floor($number) != 0 { 289 | @return false; 290 | } 291 | @else { 292 | @return true; 293 | } 294 | } 295 | 296 | @function is-float($number) { 297 | @if type-of($number) != 'number' { 298 | @warn '#{$number} is not a number! It cannot be an decimal if it is not a number!'; 299 | @return false; 300 | } 301 | @if $number - floor($number) != 0 { 302 | @return true; 303 | } 304 | @else { 305 | @return false; 306 | } 307 | } 308 | 309 | @function is-decimal($number) { 310 | @return is-float($number); 311 | } 312 | -------------------------------------------------------------------------------- /src/tlc.jade: -------------------------------------------------------------------------------- 1 | --- 2 | title: TLC Workshop 3 | description: Typography, Lettering and Calligraphy Workshop — Jan 16 + 23 4 | og_images: 5 | - http://bcds.design/images/tlc/banner-bb.png 6 | - http://bcds.design/images/tlc/preview.png 7 | - http://bcds.design/images/tlc/banner-aa.png 8 | - http://bcds.design/images/tlc/banner-cc.png 9 | --- 10 | 11 | extends ../layouts/event.jade 12 | 13 | -// ------------------------------------------------------------------------------ 14 | 15 | block images 16 | img(src='images/workshops/wednesday-2.jpg') 17 | img(src='images/workshops/typekita-1.jpg') 18 | img(src='images/workshops/takeitslow.jpg') 19 | .highlighted-image 20 | img(src='images/workshops/satinka-1.jpg') 21 | img(src='images/workshops/b.jpg') 22 | img(src='images/workshops/typekita-2.jpg') 23 | img(src='images/workshops/typekita-3.jpg') 24 | 25 | each i in [0, 1] 26 | img(src='images/workshops/wednesday-2.jpg') 27 | img(src='images/workshops/typekita-3.jpg') 28 | img(src='images/workshops/satinka-1.jpg') 29 | img(src='images/workshops/b.jpg') 30 | img(src='images/workshops/typekita-2.jpg') 31 | 32 | -// ------------------------------------------------------------------------------ 33 | 34 | block prelude 35 | .info-card 36 | h4.title Jan 16 & 23, 2016 37 | | 1PM - 5PM, Saturdays#[br] 38 | | Racket Room Collective, QC 39 | 40 | -// ------------------------------------------------------------------------------ 41 | 42 | block content 43 | h4._copper._top-collapse. 44 | Better Creative Design Society 45 | 46 | h1.tlc-heading 47 | b TLC 48 | span Typography, Lettering &#[br] Calligraphy Workshop 49 | 50 | +register-now-button 51 | 52 | h3._no-desktop. 53 | Jan 16 & 23, 2016 54 | 55 | p._no-desktop. 56 | 1PM — 5PM, Saturdays#[br] 57 | Racket Room Collective, QC 58 | 59 | p.full-image.-cropped._no-desktop 60 | img(src='images/workshops/wednesday.jpg') 61 | 62 | p.brief. 63 | An intensive two-day bootcamp on the art of hand-crafting beautiful letters—materials included. 64 | 65 | h3. 66 | What you'll learn 67 | 68 | p. 69 | The TLC Workshop is a 2-day workshop that aims to give you an in-depth view at letters and what certain styles represent. In this workshop, we will share to you the basic foundations of different letterforms as well as design and layout considerations when doing typography, lettering, and calligraphy pieces. The workshop will focus on hand lettering, brush lettering, Gothic calligraphy, and layout & design along with exercises and projects that will cater to the topics. 70 | 71 | +register-now-button('-lite', '_no-desktop') 72 | 73 | p.full-image.-cropped._no-desktop 74 | img(src='images/workshops/typekita-2.jpg') 75 | 76 | h2#outline. 77 | Course outline 78 | 79 | blockquote.course-item 80 | h4. 81 | Day 1: Hand Lettering 101 82 | p. 83 | Master the art of drawing letterforms. In this subject, we will learn the principles of typography and how they can be applied to make dramatic lettering pieces by hand. 84 | 85 | blockquote.course-item 86 | h4. 87 | Day 1: Gothic Calligraphy 88 | p. 89 | Learn the wonderful art of writing blackletter calligraphy using broad-nibbed pens. We will provide #[a(href='http://pilotpen.us/categories/calligraphy-pens/parallel-pen/') Parallel Pens] as part of the workshop materials. 90 | 91 | blockquote.course-item 92 | h4. 93 | Day 2: Brush Lettering 94 | p. 95 | You will learn how to maximize the use brushes and brush pens to draw expressive script letters. We will provide Zig Kuretake brush pens, #[a(href='https://kuretakezig.us/pens/brush-pen-22/') bristle tips] and #[a(href='https://kuretakezig.us/pens/bimoji/') felt tips], as part of the materials. 96 | 97 | blockquote.course-item 98 | h4. 99 | Day 2: Typography layouts 100 | p. 101 | Learn the secrets on building well-composed art pieces. 102 | 103 | +register-now-button('-lite') 104 | 105 | p.full-image.-cropped._no-desktop 106 | img(src='images/workshops/typekita-1.jpg') 107 | 108 | h3#materials. 109 | Materials included 110 | 111 | p. 112 | There won't be a need to bring anything but an eagerness to learn. Of course, you're more than welcome to bring your own tools too, if you prefer! We will be providing the following materials, hand-picked by the BCDS team: 113 | 114 | ul 115 | li Pilot Parallel pen 116 | li Various brush pens 117 | li Basic drawing tools (rules, pencils, erasers) 118 | li Lots of paper 119 | 120 | h3#mentors. 121 | Your mentors 122 | 123 | p. 124 | The BCDS team is a group of visual artists with a passion for typography. We are: 125 | 126 | ul 127 | li Jelvin Base (#[a(href='https://instagram.com/jelvin') @jelvin]) 128 | li Carl Chua (#[a(href='https://instagram.com/carligraphy') @carligraphy]) 129 | li John Ed De Vera (#[a(href='https://instagram.com/battery_full') @battery_full]) 130 | li Rico Sta. Cruz (#[a(href='https://instagram.com/rstacruz') @rstacruz]) 131 | 132 | +register-now-button('-lite') 133 | 134 | +social-list({ url: '/tlc', title, description }) 135 | 136 | -// ------------------------------------------------------------------------------ 137 | 138 | block intermission 139 | +reservation-block 140 | .register-heading 141 | h2 Reserve your seat 142 | p.lead Only 25 seats available 143 | p. 144 | Registrations are now closed. Follow our #[a(href='https://facebook.com/wearebcds') Facebook] page and #[a(href='https://instagram.com/wearebcds') Instagram] feed for updates on future workshop schedules! 145 | -// p. 146 | -// Workshop fee is #[strong P 5,500], which includes #[strong 2 days of training], materials, worksheets, food and other goodies. We accept payments over bank deposit. 147 | 148 | -// button.cta-button-2(role='register'). 149 | -// Reserve your seat 150 | 151 | -// include ../includes/tlc-form.jade 152 | 153 | -// .register-info._hide 154 | -// p. 155 | -// Workshop fee is #[strong P 5,500]. After you submit this form, we'll contact you in 48 hours with instructions on bank deposit payment. 156 | 157 | -// p. 158 | -// Also, please take note that workshop fee is NON-REFUNDABLE. However, in the event that one needs to back out/withdraw from the class, the fee may be transferable to another person and can be used on the same workshop date. It is the responsibility of the withdrawing student to look for his/her replacement and to provide the organizer with the substitute student's information. 159 | 160 | -// ------------------------------------------------------------------------------ 161 | 162 | block after 163 | h2#venue. 164 | The venue 165 | 166 | p. 167 | #[a(href='http://www.racketroomcollective.com') Racket Room Collective] is a coworking space in Quezon City (#[a(href='https://goo.gl/maps/82mduWgtmTP2') view map]). Located along Sgt Esguerra Avenue, it's the perfect place for creative gatherings. 168 | 169 | p.full-image.-cropped._no-desktop 170 | img(src='images/workshops/takeitslow.jpg') 171 | 172 | h3. 173 | Additional info 174 | 175 | p. 176 | All signups will be on a first-come, first-served basis. However, completing this registration does not guarantee a seat for you. Upon registration, participants will be emailed payment details. Registrants will have 3 days to complete their payment in order to secure their slot for the session. Non-payment within the provided period will mean forfeiting one's slot. Please note that there will be only a number of slots for the workshop. 177 | 178 | +register-now-button 179 | 180 | h3. 181 | Inquiries 182 | 183 | p. 184 | For questions and inquiries, email us at 185 | #[a(href='mailto:workshops@bcds.design') workshops@bcds.design]. 186 | 187 | -// ------------------------------------------------------------------------------ 188 | -// Helpers 189 | 190 | mixin reservation-block 191 | #register.panorama-section 192 | .widecontainer._padded-2x 193 | .md-col-6 194 | block 195 | 196 | mixin register-now-button(buttonClass, klass) 197 | p.cta-box(class=klass) 198 | a.cta-button(href='#register' class=buttonClass). 199 | Register now 200 | -------------------------------------------------------------------------------- /includes/tlc-form.jade: -------------------------------------------------------------------------------- 1 | form#register-form._hide(action='https://docs.google.com/forms/d/1eWR3AyJ-7Mb8nK5vjkyr_bitMK27pBbZnVzrdqSz1zE/formResponse?embedded=true', method='POST', target='_self') 2 | ol.ss-question-list(role='list', style='padding-left: 0') 3 | .ss-form-question.errorbox-good(role='listitem') 4 | .ss-item.ss-item-required.ss-text(dir='auto') 5 | .ss-form-entry 6 | label.ss-q-item-label(for='entry_404801151') 7 | .ss-q-title 8 | | Name 9 | label(for='itemView.getDomIdToLabel()', aria-label='(Required field)') 10 | span.ss-required-asterisk(aria-hidden='true') * 11 | .ss-q-help.ss-secondary-text(dir='auto') Last name, First name 12 | input#entry_404801151.ss-q-short(name='entry.404801151', value='', dir='auto', aria-label='Name LAST NAME, FIRST NAME ', aria-required='true', required='', title='', type='text') 13 | #47641860_errorMessage.error-message 14 | .required-message This is a required question 15 | .ss-form-question.errorbox-good(role='listitem') 16 | .ss-item.ss-item-required.ss-text(dir='auto') 17 | .ss-form-entry 18 | label.ss-q-item-label(for='entry_963868519') 19 | .ss-q-title 20 | | Mobile Number 21 | label(for='itemView.getDomIdToLabel()', aria-label='(Required field)') 22 | span.ss-required-asterisk(aria-hidden='true') * 23 | .ss-q-help.ss-secondary-text(dir='auto') Kindly double check your details. 24 | input#entry_963868519.ss-q-short(name='entry.963868519', value='', dir='auto', aria-label='Mobile Number Kindly double check your details. ', aria-required='true', required='', title='', type='text') 25 | #2025713591_errorMessage.error-message 26 | .required-message This is a required question 27 | .ss-form-question.errorbox-good(role='listitem') 28 | .ss-item.ss-item-required.ss-text(dir='auto') 29 | .ss-form-entry 30 | label.ss-q-item-label(for='entry_1433857633') 31 | .ss-q-title 32 | | Email Address 33 | label(for='itemView.getDomIdToLabel()', aria-label='(Required field)') 34 | span.ss-required-asterisk(aria-hidden='true') * 35 | .ss-q-help.ss-secondary-text(dir='auto') Kindly double check your details. 36 | input#entry_1433857633.ss-q-short(name='entry.1433857633', value='', dir='auto', aria-label='Email Address Kindly double check your details. ', aria-required='true', required='', title='', type='text') 37 | #130266573_errorMessage.error-message 38 | .required-message This is a required question 39 | .ss-form-question.errorbox-good(role='listitem') 40 | .ss-item.ss-text(dir='auto') 41 | .ss-form-entry 42 | label.ss-q-item-label(for='entry_1959526584') 43 | .ss-q-title 44 | | Alternate Email Address 45 | .ss-q-help.ss-secondary-text(dir='auto') We'll use this email in case your primary email can't be contacted. 46 | input#entry_1959526584.ss-q-short(name='entry.1959526584', value='', dir='auto', aria-label="Alternate Email Address We'll use this email in case your primary email can't be contacted. ", title='', type='text') 47 | #1304820026_errorMessage.error-message 48 | .required-message This is a required question 49 | .ss-form-question.errorbox-good(role='listitem') 50 | .ss-item.ss-paragraph-text(dir='auto') 51 | .ss-form-entry 52 | label.ss-q-item-label(for='entry_699257160') 53 | .ss-q-title 54 | | Typography, Lettering and Calligraphy Proficiency 55 | .ss-q-help.ss-secondary-text(dir='auto') 56 | | Please give us a short description about your experience in typography, lettering, and/or calligraphy. e.g. left-handed, advanced proficiency in brush lettering. 57 | textarea#entry_699257160.ss-q-long(placeholder="I've had an interest in writing since...", name='entry.699257160', rows='8', cols='0', dir='auto', aria-label='Typography, Lettering and Calligraphy Proficiency Please give us a short description about your experience in typography, lettering, and/or calligraphy. e.g. left-handed, advanced proficiency in brush lettering. ') 58 | #1550703538_errorMessage.error-message 59 | .required-message This is a required question 60 | .ss-form-question.errorbox-good(role='listitem') 61 | .ss-item.ss-item-required.ss-radio(dir='auto') 62 | .ss-form-entry 63 | label.ss-q-item-label(for='entry_1671161667') 64 | .ss-q-title 65 | | Have you attended any typography, lettering and/or calligraphy related workshops before? 66 | label(for='itemView.getDomIdToLabel()', aria-label='(Required field)') 67 | span.ss-required-asterisk(aria-hidden='true') * 68 | .ss-q-help.ss-secondary-text(dir='auto') 69 | ul.ss-choices(role='radiogroup', aria-label='Have you attended any typography, lettering and/or calligraphy related workshops before? ') 70 | li.ss-choice-item 71 | label 72 | span.ss-choice-item-control.goog-inline-block 73 | input#group_1666934103_1.ss-q-radio(name='entry.1666934103', value='Yes', role='radio', aria-label='Yes', required='', aria-required='true', type='radio') 74 | span.ss-choice-label Yes 75 | li.ss-choice-item 76 | label 77 | span.ss-choice-item-control.goog-inline-block 78 | input#group_1666934103_2.ss-q-radio(name='entry.1666934103', value='No', role='radio', aria-label='No', required='', aria-required='true', type='radio') 79 | span.ss-choice-label No 80 | #1671161667_errorMessage.error-message 81 | .required-message This is a required question 82 | .ss-form-question.errorbox-good(role='listitem') 83 | .ss-item.ss-paragraph-text(dir='auto') 84 | .ss-form-entry 85 | label.ss-q-item-label(for='entry_1630593199') 86 | .ss-q-title 87 | | If Yes, what are the workshops that you have attended? 88 | .ss-q-help.ss-secondary-text(dir='auto') If there's none, please input NA 89 | textarea#entry_1630593199.ss-q-long(name='entry.1630593199', rows='8', cols='0', dir='auto', aria-label="If Yes, what are the workshops that you have attended? If there's none, please input NA ") 90 | #264167349_errorMessage.error-message 91 | .required-message This is a required question 92 | .ss-form-question.errorbox-good(role='listitem') 93 | .ss-item.ss-item-required.ss-checkbox(dir='auto') 94 | .ss-form-entry 95 | label.ss-q-item-label(for='entry_777105160') 96 | .ss-q-title 97 | | How did you learn about the workshop? 98 | label(for='itemView.getDomIdToLabel()', aria-label='(Required field)') 99 | span.ss-required-asterisk(aria-hidden='true') * 100 | .ss-q-help.ss-secondary-text(dir='auto') 101 | ul.ss-choices.ss-choices-required(role='group', aria-label='How did you learn about the workshop? ') 102 | li.ss-choice-item 103 | label 104 | span.ss-choice-item-control.goog-inline-block 105 | input#group_1199294931_1.ss-q-checkbox(name='entry.1199294931', value='BCDS IG Account', role='checkbox', aria-required='true', type='checkbox') 106 | span.ss-choice-label BCDS IG Account 107 | li.ss-choice-item 108 | label 109 | span.ss-choice-item-control.goog-inline-block 110 | input#group_1199294931_2.ss-q-checkbox(name='entry.1199294931', value='BCDS FB Account', role='checkbox', aria-required='true', type='checkbox') 111 | span.ss-choice-label BCDS FB Account 112 | li.ss-choice-item 113 | label 114 | span.ss-choice-item-control.goog-inline-block 115 | input#group_1199294931_3.ss-q-checkbox(name='entry.1199294931', value="Instructor's IG/FB", role='checkbox', aria-required='true', type='checkbox') 116 | span.ss-choice-label Instructor's IG/FB 117 | li.ss-choice-item 118 | label 119 | span.ss-choice-item-control.goog-inline-block 120 | input#group_1199294931_4.ss-q-checkbox(name='entry.1199294931', value='Referral / Invite by a friend/colleague', role='checkbox', aria-required='true', type='checkbox') 121 | span.ss-choice-label Referral / Invite by a friend/colleague 122 | li.ss-choice-item 123 | label 124 | span.ss-choice-item-control.goog-inline-block 125 | input#group_1199294931_5.ss-q-checkbox.ss-q-other-toggle(name='entry.1199294931', value='__other_option__', role='checkbox', aria-required='true', type='checkbox') 126 | span.ss-choice-label Other: 127 | span.ss-q-other-container.goog-inline-block 128 | input#entry_1199294931_other_option_response.ss-q-other(name='entry.1199294931.other_option_response', value='', dir='auto', aria-label='Other', type='text') 129 | #777105160_errorMessage.error-message 130 | .required-message This is a required question 131 | input(name='draftResponse', value='[,,"4693773078926380377"]\ 132 | ', type='hidden') 133 | input(name='pageHistory', value='0', type='hidden') 134 | input(name='fvv', value='0', type='hidden') 135 | input(name='fbzx', value='4693773078926380377', type='hidden') 136 | .ss-item.ss-navigate 137 | table#navigation-table 138 | tbody 139 | tr 140 | td#navigation-buttons.ss-form-entry.goog-inline-block(dir='ltr') 141 | input#ss-submit.jfk-button.jfk-button-action(name='submit', value='Submit', type='submit') 142 | .ss-password-warning.ss-secondary-text Never submit passwords through Google Forms. 143 | --------------------------------------------------------------------------------