├── .gitignore ├── src ├── sass │ ├── _cards.scss │ ├── _defaults.scss │ ├── index.scss │ ├── _variables.scss │ ├── _nav.scss │ └── _section.scss └── pug │ ├── mixins │ └── card.pug │ ├── includes │ └── nav.pug │ ├── layouts │ └── application.pug │ └── pages │ └── index.pug ├── package.json ├── docs ├── css │ └── index.css └── index.html └── gulpfile.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | /node_modules 4 | -------------------------------------------------------------------------------- /src/sass/_cards.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | border-radius: 0px; 3 | 4 | &.card-borderless { 5 | border: 0px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/pug/mixins/card.pug: -------------------------------------------------------------------------------- 1 | mixin card 2 | .card(class!=attributes.class) 3 | .card-block 4 | h4.card-title!= attributes.title 5 | p.card-text 6 | block 7 | -------------------------------------------------------------------------------- /src/sass/_defaults.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Droid Serif', serif; 3 | border-top: 2px solid $half-light-color; 4 | } 5 | 6 | h1, h2, h3, h4, h5, h6 { 7 | font-family: 'Didact Gothic', sans-serif; 8 | } 9 | -------------------------------------------------------------------------------- /src/sass/index.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Comfortaa:300|Droid+Serif'); 2 | 3 | @import 'variables'; 4 | 5 | @import 'cards'; 6 | @import 'defaults'; 7 | @import 'nav'; 8 | @import 'section'; 9 | -------------------------------------------------------------------------------- /src/sass/_variables.scss: -------------------------------------------------------------------------------- 1 | $spacing-unit: .25rem; 2 | 3 | $foreground-color: #292b2c; 4 | $foreground-color-inverse: #ffffff; 5 | $primary-color: #25064C; 6 | $secondary-color: #553285; 7 | $tertiary-color: #9768D1; 8 | $esscence-color: lighten($tertiary-color, 35%); 9 | 10 | $half-dark-color: #36175E; 11 | $half-light-color: #7B52AB; 12 | -------------------------------------------------------------------------------- /src/sass/_nav.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | margin: $spacing-unit * 4 0; 3 | 4 | .navbar-brand { 5 | font-family: 'Comfortaa', cursive; 6 | text-transform: lowercase; 7 | font-weight: 300; 8 | letter-spacing: 1px; 9 | } 10 | 11 | .nav-item { 12 | font-family: 'Didact Gothic', sans-serif; 13 | text-transform: uppercase; 14 | letter-spacing: 1px; 15 | border-left: 1px solid #eeeeee; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/sass/_section.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | padding: $spacing-unit * 4 0; 3 | 4 | &.section-md { 5 | padding: $spacing-unit * 8 0; 6 | } 7 | 8 | &.section-lg { 9 | padding: $spacing-unit * 16 0; 10 | } 11 | 12 | &.section-light { 13 | color: $foreground-color; 14 | } 15 | 16 | &.section-dark { 17 | color: $foreground-color-inverse; 18 | text-shadow: 0px 2px 0px rgba(0,0,0, 0.3); 19 | background: linear-gradient( 45deg, 20 | #F3005C 0%, 21 | #33b6e9 100%); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/pug/includes/nav.pug: -------------------------------------------------------------------------------- 1 | nav.navbar.navbar-toggleable-md.navbar-light 2 | button.navbar-toggler.navbar-toggler-right( type='button' 3 | data-toggle='collapse' 4 | data-target='#navbar-content' 5 | aria-controls='navbar-content' 6 | aria-expanded='false' 7 | aria-label='Toggle navigation') 8 | span.navbar-toggler-icon 9 | 10 | a.navbar-brand(href='#') Coroutine 11 | #navbar-content.collapse.navbar-collapse 12 | ul.navbar-nav.mr-auto 13 | li.nav-item 14 | a.nav-link(href='#') Services 15 | li.nav-item 16 | a.nav-link(href='#') Story 17 | 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coroutine.github.io", 3 | "version": "1.0.0", 4 | "description": "Coroutine website", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/coroutine/coroutine.github.io.git" 12 | }, 13 | "author": "Tim Lowrimore", 14 | "license": "UNLICENSED", 15 | "bugs": { 16 | "url": "https://github.com/coroutine/coroutine.github.io/issues" 17 | }, 18 | "homepage": "https://github.com/coroutine/coroutine.github.io#readme", 19 | "devDependencies": { 20 | "gulp": "^3.9.1", 21 | "gulp-plumber": "^1.1.0", 22 | "gulp-pug": "^3.3.0", 23 | "gulp-sass": "^3.1.0", 24 | "gulp-watch": "^4.3.11", 25 | "live-server": "^1.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /docs/css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Didact+Gothic|Comfortaa:300|Droid+Serif"); 2 | .card { 3 | border-radius: 0px; } 4 | .card.card-borderless { 5 | border: 0px; } 6 | 7 | body { 8 | font-family: 'Droid Serif', serif; 9 | border-top: 2px solid #7B52AB; } 10 | 11 | h1, h2, h3, h4, h5, h6 { 12 | font-family: 'Didact Gothic', sans-serif; } 13 | 14 | .navbar { 15 | margin: 1rem 0; } 16 | .navbar .navbar-brand { 17 | font-family: 'Comfortaa', cursive; 18 | text-transform: lowercase; 19 | font-weight: 300; 20 | letter-spacing: 1px; } 21 | .navbar .nav-item { 22 | font-family: 'Didact Gothic', sans-serif; 23 | text-transform: uppercase; 24 | letter-spacing: 1px; 25 | border-left: 1px solid #eeeeee; } 26 | 27 | .section { 28 | padding: 1rem 0; } 29 | .section.section-md { 30 | padding: 2rem 0; } 31 | .section.section-lg { 32 | padding: 4rem 0; } 33 | .section.section-light { 34 | color: #292b2c; } 35 | .section.section-dark { 36 | color: #ffffff; 37 | text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); 38 | background: linear-gradient(45deg, #F3005C 0%, #33b6e9 100%); } 39 | -------------------------------------------------------------------------------- /src/pug/layouts/application.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | 3 | html(lang='en') 4 | head 5 | title Coroutine 6 | 7 | link( rel='stylesheet' 8 | href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' 9 | integrity='sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ' 10 | crossorigin='anonymous')/ 11 | 12 | link( rel='stylesheet' 13 | href='css/index.css')/ 14 | 15 | script( src='https://code.jquery.com/jquery-3.1.1.slim.min.js' 16 | integrity='sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n' 17 | crossorigin='anonymous') 18 | 19 | script( src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js' 20 | integrity='sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb' 21 | crossorigin='anonymous') 22 | 23 | script( src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js' 24 | integrity='sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn' 25 | crossorigin='anonymous') 26 | 27 | block scripts 28 | 29 | body 30 | include /includes/nav 31 | 32 | block content 33 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | pug = require('gulp-pug'), 3 | sass = require('gulp-sass'), 4 | watch = require('gulp-watch'), 5 | plumber = require('gulp-plumber'); 6 | 7 | var pathMaps = { 8 | pugify: { 9 | src: 'src/pug/pages/**/*.pug', 10 | dest: 'docs/', 11 | watch: 'src/pug/**/*.pug', 12 | basedir: 'src/pug/' 13 | }, 14 | 15 | sassify: { 16 | src: 'src/sass/index.scss', 17 | dest: 'docs/css/', 18 | watch: 'src/sass/**/*.scss' 19 | } 20 | }; 21 | 22 | gulp.task('sassify', function() { 23 | var mapping = pathMaps.sassify; 24 | return gulp 25 | .src(mapping.src) 26 | .pipe(plumber()) 27 | .pipe(sass().on('error', sass.logError)) 28 | .pipe(gulp.dest(mapping.dest)) 29 | }); 30 | 31 | gulp.task('pugify', function() { 32 | var mapping = pathMaps.pugify; 33 | return gulp 34 | .src(mapping.src) 35 | .pipe(plumber()) 36 | .pipe(pug({ basedir: mapping.basedir })) 37 | .pipe(gulp.dest(mapping.dest)) 38 | }); 39 | 40 | gulp.task('watch', function() { 41 | for(var taskName in pathMaps) { 42 | if(pathMaps.hasOwnProperty(taskName)) { 43 | var mapping = pathMaps[taskName]; 44 | console.log("...watching:", mapping.watch, "->", taskName) 45 | gulp.watch(mapping.watch, [taskName]); 46 | } 47 | } 48 | }); 49 | 50 | gulp.task('default', ['pugify', 'sassify']); 51 | -------------------------------------------------------------------------------- /src/pug/pages/index.pug: -------------------------------------------------------------------------------- 1 | extends /layouts/application 2 | include /mixins/card 3 | 4 | block content 5 | section.section.section-lg 6 | .container-fluid 7 | .row 8 | .col-md-12 9 | h1 10 | | Let's build something great together. 11 | 12 | section.section.section-lg 13 | .container-fluid 14 | .row 15 | .col-md-12 16 | .card-deck 17 | +card(title='Product Design' class='card-borderless') 18 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 19 | 20 | +card(title='Prototyping' class='card-borderless') 21 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 22 | 23 | +card(title='Product Development' class='card-borderless') 24 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 25 | 26 | +card(title='Data Analytics' class='card-borderless') 27 | | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 28 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.