From 00b0936623df9e481ef055f18bb2f8544a2aeed0 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Wed, 28 Jan 2015 14:29:45 -0500 Subject: [PATCH] Split out css into multiple files rename css_paths and js_paths --- bower.json | 3 +- css/base.css | 105 ++++ css/gallery.css | 115 ++++ css/modules/big-links.css | 69 +++ css/modules/call-out.css | 45 ++ css/modules/example.css | 24 + css/modules/hero-gallery.css | 129 +++++ css/modules/page-dot-demos.css | 33 ++ css/modules/prev-next-button-demos.css | 38 ++ css/modules/quick-start.css | 26 + css/modules/site-footer.css | 65 +++ css/modules/syntax-highlight.css | 29 + css/styles.css | 702 ------------------------- css/web-fonts.css | 26 + gulpfile.js | 55 +- notes.md | 1 + package.json | 3 +- templates/page.mustache | 4 +- 18 files changed, 753 insertions(+), 719 deletions(-) create mode 100644 css/base.css create mode 100644 css/gallery.css create mode 100644 css/modules/big-links.css create mode 100644 css/modules/call-out.css create mode 100644 css/modules/example.css create mode 100644 css/modules/hero-gallery.css create mode 100644 css/modules/page-dot-demos.css create mode 100644 css/modules/prev-next-button-demos.css create mode 100644 css/modules/quick-start.css create mode 100644 css/modules/site-footer.css create mode 100644 css/modules/syntax-highlight.css delete mode 100644 css/styles.css create mode 100644 css/web-fonts.css diff --git a/bower.json b/bower.json index 2c15658..7b7dbf8 100644 --- a/bower.json +++ b/bower.json @@ -14,6 +14,7 @@ ], "dependencies": { "imagesloaded": "~3.1.8", - "flickity": "~0.1.0" + "flickity": "~0.1.0", + "normalize.css": "~3.0.2" } } diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..075bd09 --- /dev/null +++ b/css/base.css @@ -0,0 +1,105 @@ +/* base +------------------------- */ + +* { + box-sizing: border-box; +} + +body { + font-family: 'Texta Regular', sans-serif; + color: #333; + line-height: 1.5; + font-size: 19px; + margin: 0; + padding: 0; +} + +a { + color: #6A6; + text-decoration: none; +} + +a:hover { + color: #E90; +} + +b, strong { + font-family: 'Texta Heavy', sans-serif; + font-weight: normal; +} + +em, i { + font-family: 'Texta Italic', sans-serif; + font-style: normal; +} + +h1, h2, h3 { + line-height: 1.2; + font-weight: normal; +} + +h1 { + font-family: 'Texta Heavy', sans-serif; +} + +h2 { + font-size: 2.4em; + border-top: 4px double #DDD; + padding-top: 60px; + margin-top: 80px; +} + +h3 { + font-family: 'Texta Heavy', sans-serif; + font-size: 1.6em; +} + +/* ---- code ---- */ + +pre, code { + font-family: Consolas, Menlo, monospace; + font-size: 15px; + background: #FAFAFA; + border: 1px solid #DDD; + white-space: pre-wrap; +} + +pre { + padding: 10px; + border-radius: 6px; + overflow-x: auto; +} + +code { + padding: 2px 3px; + line-height: 1.2; + border-radius: 3px; +} + +pre code { + padding: 0; + line-height: 1.5; + background: none; + border: none; +} + +/* ---- content ---- */ + +.content-wrap { + max-width: 900px; + margin: 0 auto; + padding: 0 10px; +} + +/* ---- main ---- */ + +.main h2 { + border-top: 4px double #DDD; + padding-top: 60px; + margin-top: 80px; +} + +.main h3 { + border-top: 1px solid #DDD; + padding-top: 30px; +} diff --git a/css/gallery.css b/css/gallery.css new file mode 100644 index 0000000..e491a79 --- /dev/null +++ b/css/gallery.css @@ -0,0 +1,115 @@ +/* demo galleries +------------------------- */ + +.gallery { + background: #FAFAFA; + margin-bottom: 30px; + counter-reset: gallery-cell; +} + +.gallery-cell { + width: 100%; + height: 160px; + background: #8C8; + counter-increment: gallery-cell; +} + +/*.gallery-cell:nth-child(5n+2) { background: #6A6; } +.gallery-cell:nth-child(5n+3) { background: #E8A; } +.gallery-cell:nth-child(5n+4) { background: #FD0; } +.gallery-cell:nth-child(5n) { background: #66A; }*/ + +/*.gallery-cell:nth-child(3n+2) { background: #ED2; } +.gallery-cell:nth-child(3n+0) { background: #E90; }*/ + +.gallery-cell:before { + content: counter(gallery-cell); + display: block; + text-align: center; + line-height: 160px; + font-size: 80px; + font-weight: bold; + color: white; +} + +/*.gallery-cell:nth-child(5n+1):before { color: #868; } +.gallery-cell:nth-child(5n+2):before { color: #875; } +.gallery-cell:nth-child(5n+3):before { color: #686; } +.gallery-cell:nth-child(5n+4):before { color: #588; } +.gallery-cell:nth-child(5n):before { color: #668; }*/ + +.gallery--margin .gallery-cell { + margin-right: 10px; +} + +.half-width-margin .gallery-cell { + width: 50%; + margin-right: 10px; +} + +.various-size .gallery-cell { + width: 33%; + margin-right: 10px; +} +.various-size .gallery-cell.size-180 { width: 180px; } +.various-size .gallery-cell.size-large { width: 75%; } + +.media-queried .gallery-cell { + width: 100%; + margin-right: 2%; +} + +.show-neighbors .gallery-cell { + width: 66%; + margin: 0 5px; +} + +.gallery--contain-demo .gallery-cell { + width: 30%; + margin-right: 2%; +} + +.gallery--auto-play-demo .gallery-cell { margin-right: 2%; } + +.gallery--images-loaded-demo img { + display: block; + height: 160px; +} + +.gallery--images-demo { + margin-bottom: 40px; +} + +.gallery--images-demo img { + display: block; + height: 160px; +} + + +.gallery--watch-demo:after { + content: 'flickity'; + display: none; +} + +.gallery--watch-demo .gallery-cell { + margin-right: 10px; +} + +/* ---- large device media query ---- */ + +@media screen and ( min-width: 768px ) { + + .media-queried .gallery-cell { width: 49%; } + + .gallery--watch-demo:after { + content: ''; + } + + .gallery--watch-demo .gallery-cell { + margin-bottom: 10px; + } + + .gallery--images-demo img { + height: 400px; + } +} diff --git a/css/modules/big-links.css b/css/modules/big-links.css new file mode 100644 index 0000000..1779aa7 --- /dev/null +++ b/css/modules/big-links.css @@ -0,0 +1,69 @@ +/* big links + big buttons at the top of the homepage +------------------------- */ + +.big-links { + list-style: none; + margin: 0 0 60px; + padding: 0; +} + +.big-links:after { + content: ''; + display: block; + clear: both; +} + + +.big-links__item { + margin-bottom: 10px; + font-size: 1.2em; +} + +.big-links__item a { + display: block; + padding: 10px; + border-radius: 5px; +} + +.big-links__item--fill a { + background: #8C8; + color: white; +} + +.big-links__item--fill a:hover { + background: #EC5; +} + +.big-links__item--stroke a { + border: 2px solid #8C8; +} + +.big-links__item--stroke a:hover { border-color: #EC5; } + + +.big-links__link { +} + +.big-links__link:hover { + background: #EC5; + color: white; +} + +/* ---- large device ---- */ + +@media screen and ( min-width: 768px ) { + + .big-links__item { + float: left; + width: 49%; + font-size: 1.4em; + } + + .big-links__item a { + padding: 20px; + } + + .big-links__item:nth-child(2n+1) { margin-right: 2%; } + +} diff --git a/css/modules/call-out.css b/css/modules/call-out.css new file mode 100644 index 0000000..dcab57d --- /dev/null +++ b/css/modules/call-out.css @@ -0,0 +1,45 @@ +/* call out +------------------------- */ + +.call-out { + border: 2px solid #ED2; + padding: 10px 20px 10px 80px; + border-radius: 6px; + position: relative; + margin: 20px 0; +} + +/* (i) */ +.call-out:before { + content: 'i'; + display: block; + width: 40px; + height: 40px; + position: absolute; + left: 20px; + top: 30px; + background: #ED2; + border-radius: 50%; + text-align: center; + color: white; + font-size: 1.9em; + font-family: Consolas, Georgia, serif; + font-style: italic; + line-height: 46px; +} + +.call-out h2 { + margin-top: 0; + padding-top: 10px; + border-top: none; +} + +.call-out--beta-testing p, +.call-out--beta-testing li { + font-size: 1.2em; +} + +.call-out--beta-testing p { line-height: 1.3; } + +.call-out--chill { border-color: #8C8; } +.call-out--chill:before { background: #8C8; } diff --git a/css/modules/example.css b/css/modules/example.css new file mode 100644 index 0000000..92e87f8 --- /dev/null +++ b/css/modules/example.css @@ -0,0 +1,24 @@ +.example { + margin-bottom: 40px; +} + +.example:after { + content: ''; + display: block; + clear: both; +} + +.example__code pre { margin: 0 0 20px; } + +@media screen and ( min-width: 768px ) { + + /* ---- example ---- */ + + .example__code, + .example__demo { + float: left; + width: 48%; + } + .example__code { margin-right: 4%; } + +} \ No newline at end of file diff --git a/css/modules/hero-gallery.css b/css/modules/hero-gallery.css new file mode 100644 index 0000000..57171ad --- /dev/null +++ b/css/modules/hero-gallery.css @@ -0,0 +1,129 @@ +/* hero-gallery +------------------------- */ + +.hero-gallery { + margin-bottom: 80px; + background: #FAFAFA url('http://i.imgur.com/R60qKwS.jpg'); + background-size: cover; +} + +.hero-gallery__cell { + width: 100%; + height: 240px; + color: white; + background: #8C8; + padding: 20px 60px; +} + +.hero-gallery h1 { + font-size: 3.2em; + padding-top: 20px; + margin: 0; +} + +.hero-gallery .tagline { + font-size: 1.4em; + margin: 0; +} + +.hero-gallery__cell--2 { + background: #ED2; +} + +.slogan { + line-height: 1.2; + margin: 0; +} + +.slogan--easy, +.slogan--fun { + font-size: 2.2em; + line-height: 1.1; +} + +.slogan--tagline { + margin-top: 10px; + font-size: 1.2em; + color: #333; +} + +.feature-list { + font-size: 1.8em; + list-style: none; + line-height: 1.2; + margin: 0; + padding: 0; +} + +.feature-list li { + margin-bottom: 10px; +} + +.hero-gallery__cell--3 { + background: #E90; +} + +.hero-gallery__cell--4 { + background: #E5A; +} + +.by-line { + line-height: 1.2; + margin: 0; + font-size: 1.8em; +} + +.by-line--made { + padding-top: 20px; + margin-bottom: 10px; + color: #333; +} + +.by-line--made b { font-family: 'Texta Heavy', sans-serif; } + +/* ---- large device styles ---- */ + +@media screen and ( min-width: 768px ) { + + .hero-gallery__cell { + height: 440px; + padding: 40px 0 0; + } + + .hero-gallery h1 { + font-size: 5.8em; + padding-top: 60px; + } + + .hero-gallery .tagline { + font-size: 2.1em; + } + + .slogan--easy, + .slogan--fun { + font-size: 4.8em; + } + + .slogan--tagline { + margin-top: 20px; + font-size: 2.4em; + } + + .feature-list { + font-size: 3.1em; + } + + .feature-list li { + margin-bottom: 20px; + } + + .by-line { + font-size: 3.1em; + } + + .by-line--made { + padding-top: 40px; + margin-bottom: 20px; + } + +} diff --git a/css/modules/page-dot-demos.css b/css/modules/page-dot-demos.css new file mode 100644 index 0000000..5c856b3 --- /dev/null +++ b/css/modules/page-dot-demos.css @@ -0,0 +1,33 @@ +/* page-dot demos +------------------------- */ + +/* ---- o dots ---- */ + +.gallery--o-dots .flickity-page-dots { + bottom: 0px; +} + +.gallery--o-dots .flickity-page-dots .dot { + width: 12px; + height: 12px; + opacity: 1; + background: transparent; + border: 2px solid white; +} + +.gallery--o-dots .flickity-page-dots .dot.is-selected { + background: white; +} + +/* ---- line-dots ---- */ + +.gallery--line-dots .flickity-page-dots { + bottom: -22px; +} + +.gallery--line-dots .flickity-page-dots .dot { + height: 4px; + width: 40px; + margin: 0; + border-radius: 0; +} diff --git a/css/modules/prev-next-button-demos.css b/css/modules/prev-next-button-demos.css new file mode 100644 index 0000000..62b5c5e --- /dev/null +++ b/css/modules/prev-next-button-demos.css @@ -0,0 +1,38 @@ +/* prev/next button demos +------------------------- */ + +/* ---- gallery--prev-next-big-arrow ---- */ + +.gallery--prev-next-big-arrow .flickity-prev-next-button { + width: 100px; + height: 100px; + background: transparent; +} + +.gallery--prev-next-big-arrow .flickity-prev-next-button .arrow { fill: white; } +.gallery--prev-next-big-arrow .flickity-prev-next-button.no-svg { color: white; } + +/*.gallery--prev-next-big-arrow .flickity-prev-next-button.previous { left: -10px; } +.gallery--prev-next-big-arrow .flickity-prev-next-button.next { right: -10px; }*/ + +.gallery--prev-next-big-arrow .flickity-prev-next-button:disabled { display: none; } + +/* ---- gallery--prev-next-small-outside ---- */ + +.gallery--prev-next-small-outside { + margin-left: 40px; + margin-right: 40px; +} + +.gallery--prev-next-small-outside .flickity-prev-next-button { + width: 30px; + height: 30px; + border-radius: 5px; + background: #333; +} + +.gallery--prev-next-small-outside .flickity-prev-next-button .arrow { fill: white; } +.gallery--prev-next-small-outside .flickity-prev-next-button.no-svg { color: white; } + +.gallery--prev-next-small-outside .flickity-prev-next-button.previous { left: -40px; } +.gallery--prev-next-small-outside .flickity-prev-next-button.next { right: -40px; } diff --git a/css/modules/quick-start.css b/css/modules/quick-start.css new file mode 100644 index 0000000..08ee07d --- /dev/null +++ b/css/modules/quick-start.css @@ -0,0 +1,26 @@ +/* quick start +------------------------- */ + +.quick-start p, +.quick-start li:before { + font-size: 1.2em; + line-height: 1.2; +} + +.quick-start ol { + list-style: none; +} + +.quick-start li { + position: relative; + counter-increment: quick-start-item; +} + +.quick-start li:before { + content: counter(quick-start-item) "."; + position: absolute; + left: -1.2em; + font-size: 1.2em; + font-weight: bold; + font-family: 'Texta Heavy', sans-serif; +} diff --git a/css/modules/site-footer.css b/css/modules/site-footer.css new file mode 100644 index 0000000..fc2407f --- /dev/null +++ b/css/modules/site-footer.css @@ -0,0 +1,65 @@ +/* site footer +------------------------- */ + +.site-footer { + margin-top: 80px; + background: #FAFAFA; + padding: 40px 0 ; +} + +.site-footer p { + font-size: 1.2em; +} + +.other-products:after { + content: ''; + display: block; + clear: both; +} + +.other-products__cell a { + display: block; + position: relative; + padding: 10px 10px 10px 135px;; + border-radius: 6px; + margin-bottom: 20px; + min-height: 120px; + background: #EEE; +} + +.other-products__cell a:hover { + background: #8C8; + color: white; +} + +.other-products__cell img { + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + max-width: 120px; + border-radius: 5px 0 0 5px; +} + +.other-products__cell h3 { + margin: 0 0 0px; +} + +.other-products__cell .description { + font-size: 1.1em; + line-height: 1.2; + margin: 0; +} + +/* ---- large device ---- */ + +@media screen and ( min-width: 768px ) { + + .other-products__cell { + float: left; + width: 49%; + } + + .other-products__cell:nth-child(2n+1) { margin-right: 2%; } +} diff --git a/css/modules/syntax-highlight.css b/css/modules/syntax-highlight.css new file mode 100644 index 0000000..0f34ab5 --- /dev/null +++ b/css/modules/syntax-highlight.css @@ -0,0 +1,29 @@ +/* syntax highlight +------------------------- */ + +code .string, +code .tag .value { color: #072; } +code .number, /* integer */ +code .cp, /* doctype */ +code .literal { color: #07D; } /*boolean*/ +code .keyword { color: #C31; } /* keyword */ +code .kd, /* storage */ +code .attribute { color: #A61; } /* markup attribute */ +code .title { color: #39A; } +code .params { color: #98D; } +code .p { color: #EDB; } /* punctuation */ +code .o { color: #F63; } /* operator */ +code .nb { color: #AA97AC;} /* support */ + +/* comment */ +code .comment { color: #999; font-style: italic; } + +code .tag { color: #37B; } /* Markup open tag */ + +code .id { color: #567; } /* css id */ +code .class { color: #A63; } /* CSS class */ +code .rules { color: #431; } +code .m { color: #DE8E50; } /* CSS value */ +code .nd { color: #9FAD7E; } /* CSS pseudo selector */ +code .hexcolor { color: #F63; } +code .at_rule { color: #088; } diff --git a/css/styles.css b/css/styles.css deleted file mode 100644 index 91d77c5..0000000 --- a/css/styles.css +++ /dev/null @@ -1,702 +0,0 @@ -/* webfonts -------------------------- */ - -@import url("//hello.myfonts.net/count/2d1b53"); - -/* - Just use WOFF2 and WOFF for webfonts - http://css-tricks.com/snippets/css/using-font-face/ */ - -@font-face { - font-family: 'Texta Heavy'; - src: url('../fonts/2D1B55_0_0.woff2') format('woff2'), - url('../fonts/2D1B55_0_0.woff') format('woff'); -} - -@font-face { - font-family: 'Texta Italic'; - src: url('../fonts/2D1B55_1_0.woff2') format('woff2'), - url('../fonts/2D1B55_1_0.woff') format('woff'); -} - -@font-face { - font-family: 'Texta Regular'; - src: url('../fonts/2D1B55_2_0.woff2') format('woff2'), - url('../fonts/2D1B55_2_0.woff') format('woff'); -} - -/* base -------------------------- */ - - -* { - box-sizing: border-box; -} - -body { - font-family: 'Texta Regular', sans-serif; - color: #333; - line-height: 1.5; - font-size: 19px; - margin: 0; - padding: 0; -} - -a { - color: #6A6; - text-decoration: none; -} - -a:hover { - color: #E90; -} - -b, strong { - font-family: 'Texta Heavy', sans-serif; - font-weight: normal; -} - -em, i { - font-family: 'Texta Italic', sans-serif; - font-style: normal; -} - -h1, h2, h3 { - line-height: 1.2; - font-weight: normal; -} - -h1 { - font-family: 'Texta Heavy', sans-serif; -} - -h2 { - font-size: 2.4em; - border-top: 4px double #DDD; - padding-top: 60px; - margin-top: 80px; -} - -h3 { - font-family: 'Texta Heavy', sans-serif; - font-size: 1.6em; -} - -/* ---- content ---- */ - -.content-wrap { - max-width: 900px; - margin: 0 auto; - padding: 0 10px; -} - -/* ---- main ---- */ - -.main h2 { - border-top: 4px double #DDD; - padding-top: 60px; - margin-top: 80px; -} - -.main h3 { - border-top: 1px solid #DDD; - padding-top: 30px; -} - -/* hero-gallery -------------------------- */ - -.hero-gallery { - margin-bottom: 80px; - background: #FAFAFA url('http://i.imgur.com/R60qKwS.jpg'); - background-size: cover; -} - -.hero-gallery__cell { - width: 100%; - height: 240px; - color: white; - background: #8C8; - padding: 20px 60px; -} - -.hero-gallery h1 { - font-size: 3.2em; - padding-top: 20px; - margin: 0; -} - -.hero-gallery .tagline { - font-size: 1.4em; - margin: 0; -} - -.hero-gallery__cell--2 { - background: #ED2; -} - -.slogan { - line-height: 1.2; - margin: 0; -} - -.slogan--easy, -.slogan--fun { - font-size: 2.2em; - line-height: 1.1; -} - -.slogan--tagline { - margin-top: 10px; - font-size: 1.2em; - color: #333; -} - -.feature-list { - font-size: 1.8em; - list-style: none; - line-height: 1.2; - margin: 0; - padding: 0; -} - -.feature-list li { - margin-bottom: 10px; -} - -.hero-gallery__cell--3 { - background: #E90; -} - -.hero-gallery__cell--4 { - background: #E5A; -} - -.by-line { - line-height: 1.2; - margin: 0; - font-size: 1.8em; -} - -.by-line--made { - padding-top: 20px; - margin-bottom: 10px; - color: #333; -} - -.by-line--made b { font-family: 'Texta Heavy', sans-serif; } - -/* ---- big-links ---- */ - -.big-links { - list-style: none; - margin: 0 0 60px; - padding: 0; -} - -.big-links:after { - content: ''; - display: block; - clear: both; -} - - -.big-links__item { - margin-bottom: 10px; - font-size: 1.2em; -} - -.big-links__item a { - display: block; - padding: 10px; - border-radius: 5px; -} - -.big-links__item--fill a { - background: #8C8; - color: white; -} - -.big-links__item--fill a:hover { - background: #EC5; -} - -.big-links__item--stroke a { - border: 2px solid #8C8; -} - -.big-links__item--stroke a:hover { border-color: #EC5; } - - -.big-links__link { -} - -.big-links__link:hover { - background: #EC5; - color: white; -} - -/* ---- call-out ---- */ - -.call-out { - border: 2px solid #ED2; - padding: 10px 20px 10px 80px; - border-radius: 6px; - position: relative; - margin: 20px 0; -} - -.call-out:before { - content: 'i'; - display: block; - width: 40px; - height: 40px; - position: absolute; - left: 20px; - top: 30px; - background: #ED2; - border-radius: 50%; - text-align: center; - color: white; - font-size: 1.9em; - font-family: Consolas, Georgia, serif; - font-style: italic; - line-height: 46px; -} - -.call-out h2 { - margin-top: 0; - padding-top: 10px; - border-top: none; -} - -.call-out--beta-testing p, -.call-out--beta-testing li { - font-size: 1.2em; -} - -.call-out--beta-testing p { line-height: 1.3; } - -.call-out--chill { border-color: #8C8; } -.call-out--chill:before { background: #8C8; } - -.quick-start p, -.quick-start li:before { - font-size: 1.2em; - line-height: 1.2; -} - -.quick-start ol { - list-style: none; -} - -.quick-start li { - position: relative; - counter-increment: quick-start-item; -} - -.quick-start li:before { - content: counter(quick-start-item) "."; - position: absolute; - left: -1.2em; - font-size: 1.2em; - font-weight: bold; - font-family: 'Texta Heavy', sans-serif; -} - -/* example -------------------------- */ - -.example { - margin-bottom: 40px; -} - -.example:after { - content: ''; - display: block; - clear: both; -} - -.example__code pre { margin: 0 0 20px; } - -/* demo galleries -------------------------- */ - -.gallery { - background: #FAFAFA; - margin-bottom: 30px; - counter-reset: gallery-cell; -} - -.gallery-cell { - width: 100%; - height: 160px; - background: #8C8; - counter-increment: gallery-cell; -} - -/*.gallery-cell:nth-child(5n+2) { background: #6A6; } -.gallery-cell:nth-child(5n+3) { background: #E8A; } -.gallery-cell:nth-child(5n+4) { background: #FD0; } -.gallery-cell:nth-child(5n) { background: #66A; }*/ - -/*.gallery-cell:nth-child(3n+2) { background: #ED2; } -.gallery-cell:nth-child(3n+0) { background: #E90; }*/ - -.gallery-cell:before { - content: counter(gallery-cell); - display: block; - text-align: center; - line-height: 160px; - font-size: 80px; - font-weight: bold; - color: white; -} - -/*.gallery-cell:nth-child(5n+1):before { color: #868; } -.gallery-cell:nth-child(5n+2):before { color: #875; } -.gallery-cell:nth-child(5n+3):before { color: #686; } -.gallery-cell:nth-child(5n+4):before { color: #588; } -.gallery-cell:nth-child(5n):before { color: #668; }*/ - -.gallery--margin .gallery-cell { - margin-right: 10px; -} - -.half-width-margin .gallery-cell { - width: 50%; - margin-right: 10px; -} - -.various-size .gallery-cell { - width: 33%; - margin-right: 10px; -} -.various-size .gallery-cell.size-180 { width: 180px; } -.various-size .gallery-cell.size-large { width: 75%; } - -.media-queried .gallery-cell { - width: 100%; - margin-right: 2%; -} - -.show-neighbors .gallery-cell { - width: 66%; - margin: 0 5px; -} - -.gallery--contain-demo .gallery-cell { - width: 30%; - margin-right: 2%; -} - -.gallery--auto-play-demo .gallery-cell { margin-right: 2%; } - -.gallery--images-loaded-demo img { - display: block; - height: 160px; -} - -.gallery--images-demo { - margin-bottom: 40px; -} - -.gallery--images-demo img { - display: block; - height: 160px; -} - - -.gallery--watch-demo:after { - content: 'flickity'; - display: none; -} - -.gallery--watch-demo .gallery-cell { - margin-right: 10px; -} - -/* prev/next demos -------------------------- */ - -/* ---- gallery--prev-next-big-arrow ---- */ - -.gallery--prev-next-big-arrow .flickity-prev-next-button { - width: 100px; - height: 100px; - background: transparent; -} - -.gallery--prev-next-big-arrow .flickity-prev-next-button .arrow { fill: white; } -.gallery--prev-next-big-arrow .flickity-prev-next-button.no-svg { color: white; } - -/*.gallery--prev-next-big-arrow .flickity-prev-next-button.previous { left: -10px; } -.gallery--prev-next-big-arrow .flickity-prev-next-button.next { right: -10px; }*/ - -.gallery--prev-next-big-arrow .flickity-prev-next-button:disabled { display: none; } - -/* ---- gallery--prev-next-small-outside ---- */ - -.gallery--prev-next-small-outside { - margin-left: 40px; - margin-right: 40px; -} - -.gallery--prev-next-small-outside .flickity-prev-next-button { - width: 30px; - height: 30px; - border-radius: 5px; - background: #333; -} - -.gallery--prev-next-small-outside .flickity-prev-next-button .arrow { fill: white; } -.gallery--prev-next-small-outside .flickity-prev-next-button.no-svg { color: white; } - -.gallery--prev-next-small-outside .flickity-prev-next-button.previous { left: -40px; } -.gallery--prev-next-small-outside .flickity-prev-next-button.next { right: -40px; } - -/* page-dot demos -------------------------- */ - -/* ---- o dots ---- */ - -.gallery--o-dots .flickity-page-dots { - bottom: 0px; -} - -.gallery--o-dots .flickity-page-dots .dot { - width: 12px; - height: 12px; - opacity: 1; - background: transparent; - border: 2px solid white; -} - -.gallery--o-dots .flickity-page-dots .dot.is-selected { - background: white; -} - -/* ---- line-dots ---- */ - -.gallery--line-dots .flickity-page-dots { - bottom: -22px; -} - -.gallery--line-dots .flickity-page-dots .dot { - height: 4px; - width: 40px; - margin: 0; - border-radius: 0; -} - -/* site-footer -------------------------- */ - -.site-footer { - margin-top: 80px; - background: #FAFAFA; - padding: 40px 0 ; -} - -.site-footer p { - font-size: 1.2em; -} - -.other-products:after { - content: ''; - display: block; - clear: both; -} - -.other-products__cell a { - display: block; - position: relative; - padding: 10px 10px 10px 135px;; - border-radius: 6px; - margin-bottom: 20px; - min-height: 120px; - background: #EEE; -} - -.other-products__cell a:hover { - background: #8C8; - color: white; -} - -.other-products__cell img { - display: block; - position: absolute; - left: 0; - top: 0; - width: 100%; - max-width: 120px; - border-radius: 5px 0 0 5px; -} - -.other-products__cell h3 { - margin: 0 0 0px; -} - -.other-products__cell .description { - font-size: 1.1em; - line-height: 1.2; - margin: 0; -} - - - -/* media query -------------------------- */ - -@media screen and ( min-width: 768px ) { - - /* ---- hero gallery ---- */ - - .hero-gallery__cell { - height: 440px; - padding: 40px 0 0; - } - - .hero-gallery h1 { - font-size: 5.8em; - padding-top: 60px; - } - - .hero-gallery .tagline { - font-size: 2.1em; - } - - .slogan--easy, - .slogan--fun { - font-size: 4.8em; - } - - .slogan--tagline { - margin-top: 20px; - font-size: 2.4em; - } - - .feature-list { - font-size: 3.1em; - } - - .feature-list li { - margin-bottom: 20px; - } - - .by-line { - font-size: 3.1em; - } - - .by-line--made { - padding-top: 40px; - margin-bottom: 20px; - } - - /* ---- big-links ---- */ - - .big-links__item { - float: left; - width: 49%; - font-size: 1.4em; - } - - .big-links__item a { - padding: 20px; - } - - .big-links__item:nth-child(2n+1) { margin-right: 2%; } - - /* ---- example ---- */ - - .example__code, - .example__demo { - float: left; - width: 48%; - } - .example__code { margin-right: 4%; } - - .media-queried .gallery-cell { width: 49%; } - - .gallery--watch-demo:after { - content: ''; - } - - .gallery--watch-demo .gallery-cell { - margin-bottom: 10px; - } - - .gallery--images-demo img { - height: 400px; - } - - - .other-products__cell { - float: left; - width: 49%; - } - - .other-products__cell:nth-child(2n+1) { margin-right: 2%; } -} - - - - - -/* ---- code ---- */ - -pre, code { - font-family: Consolas, Menlo, monospace; - font-size: 15px; - background: #FAFAFA; - border: 1px solid #DDD; - white-space: pre-wrap; -} - -pre { - padding: 10px; - border-radius: 6px; - overflow-x: auto; -} - -code { - padding: 2px 3px; - line-height: 1.2; - border-radius: 3px; -} - -pre code { - padding: 0; - line-height: 1.5; - background: none; - border: none; -} - -/* ---- syntax highlight ---- */ - -code .string, -code .tag .value { color: #072; } -code .number, /* integer */ -code .cp, /* doctype */ -code .literal { color: #07D; } /*boolean*/ -code .keyword { color: #C31; } /* keyword */ -code .kd, /* storage */ -code .attribute { color: #A61; } /* markup attribute */ -code .title { color: #39A; } -code .params { color: #98D; } -code .p { color: #EDB; } /* punctuation */ -code .o { color: #F63; } /* operator */ -code .nb { color: #AA97AC;} /* support */ - -/* comment */ -code .comment { color: #999; font-style: italic; } - -code .tag { color: #37B; } /* Markup open tag */ - -code .id { color: #567; } /* css id */ -code .class { color: #A63; } /* CSS class */ -code .rules { color: #431; } -code .m { color: #DE8E50; } /* CSS value */ -code .nd { color: #9FAD7E; } /* CSS pseudo selector */ -code .hexcolor { color: #F63; } -code .at_rule { color: #088; } diff --git a/css/web-fonts.css b/css/web-fonts.css new file mode 100644 index 0000000..1501af1 --- /dev/null +++ b/css/web-fonts.css @@ -0,0 +1,26 @@ +/* web fonts +------------------------- */ + +@import url("//hello.myfonts.net/count/2d1b53"); + +/* + Just use WOFF2 and WOFF for webfonts + http://css-tricks.com/snippets/css/using-font-face/ */ + +@font-face { + font-family: 'Texta Heavy'; + src: url('../fonts/2D1B55_0_0.woff2') format('woff2'), + url('../fonts/2D1B55_0_0.woff') format('woff'); +} + +@font-face { + font-family: 'Texta Italic'; + src: url('../fonts/2D1B55_1_0.woff2') format('woff2'), + url('../fonts/2D1B55_1_0.woff') format('woff'); +} + +@font-face { + font-family: 'Texta Regular'; + src: url('../fonts/2D1B55_2_0.woff2') format('woff2'), + url('../fonts/2D1B55_2_0.woff') format('woff'); +} diff --git a/gulpfile.js b/gulpfile.js index ffb63c4..5471546 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,10 +1,32 @@ /*jshint node: true, undef: true, unused: true */ var fs = require('fs'); +var glob = require('glob'); var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); +// ----- getGlobPaths ----- // + +/** + * takes glob src and returns expanded paths + * @param {Array} src + * @returns {Array} paths + */ +function getGlobPaths( src ) { + // copy src + var paths = src.slice(0); + // replace all glob paths with expanded paths + src.forEach( function( path, i ) { + if ( glob.hasMagic( path ) ) { + var files = glob.sync( path ); + // replace glob with paths + paths.splice.apply( paths, [ i, 1 ].concat( files ) ); + } + }); + return paths; +} + // ----- prod assets ----- // var prodAssetsSrc = [ @@ -63,10 +85,15 @@ gulp.task( 'js', function() { // ----- css ----- // var cssSrc = [ + // dependencies + 'bower_components/normalize.css/normalize.css', // flickity 'bower_components/flickity/css/flickity.css', // docs - 'css/styles.css' + 'css/web-fonts.css', + 'css/base.css', + 'css/gallery.css', + 'css/modules/*.css' ]; gulp.task( 'css', function() { @@ -102,20 +129,21 @@ gulp.task( 'partials', function() { }); function buildContent( isDev ) { - var data = { - is_dev: isDev, - cssSrc: cssSrc, - jsSrc: jsSrc - }; - var pageTemplate = fs.readFileSync( 'templates/page.mustache', 'utf8' ); - var buildOptions = { - layout: pageTemplate, - partials: partials - }; // gulp task return function() { + var data = { + is_dev: isDev, + css_paths: getGlobPaths( cssSrc ), + js_paths: jsSrc + }; + + var buildOptions = { + layout: pageTemplate, + partials: partials + }; + gulp.src( contentSrc ) .pipe( frontMatter({ property: 'frontMatter', @@ -127,10 +155,11 @@ function buildContent( isDev ) { }; } +var dependencyTasks = [ 'partials' ]; -gulp.task( 'content', [ 'partials' ], buildContent() ); +gulp.task( 'content', dependencyTasks, buildContent() ); -gulp.task( 'content-dev', [ 'partials' ], buildContent(true) ); +gulp.task( 'content-dev', dependencyTasks, buildContent(true) ); // ----- default ----- // diff --git a/notes.md b/notes.md index d175044..d6e65b3 100644 --- a/notes.md +++ b/notes.md @@ -39,6 +39,7 @@ Options Events Methods Extras + Custom page navigation RequireJS Browserify Video diff --git a/package.json b/package.json index abcafcc..7fa6d6c 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "underscore": "^1.7.0", "handlebars": "^2.0.0", "gulp-front-matter": "^1.2.1", - "gulp-filter": "^2.0.0" + "gulp-filter": "^2.0.0", + "glob": "^4.3.5" }, "devDependencies": {}, "repository": { diff --git a/templates/page.mustache b/templates/page.mustache index 5f684cb..d010b43 100644 --- a/templates/page.mustache +++ b/templates/page.mustache @@ -8,7 +8,7 @@ Flickity · beta {{#if is_dev}} - {{#each cssSrc}} + {{#each css_paths}} {{/each}} {{else}} @@ -60,7 +60,7 @@ {{! .site-footer }} {{#if is_dev}} - {{#each jsSrc}} + {{#each js_paths}} {{/each}} {{else}}