From 0da3ee21328e103d29333188b7d35e832ec58fc8 Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Mon, 5 Oct 2015 16:31:42 -0700 Subject: [PATCH 01/72] Rename and add new readme --- README.me | 21 +++++++++++++++++++++ readme.md => instructions.md | 0 2 files changed, 21 insertions(+) create mode 100644 README.me rename readme.md => instructions.md (100%) diff --git a/README.me b/README.me new file mode 100644 index 0000000..f966341 --- /dev/null +++ b/README.me @@ -0,0 +1,21 @@ +Mean Stack 1 + +BEM - Naming convention. Block element modifier (css tricks) https://css-tricks.com/bem-101/ +comp - intelly-blog-III@2x.psd + +TO DO +Express server - zach + +Public + - index.html Molly + - js dir + - css dir + -sass dir - Molly +server.js - zach +gulpfile - Molly +package.json +README +Procfile - zach + + + diff --git a/readme.md b/instructions.md similarity index 100% rename from readme.md rename to instructions.md From 783d0b9b4826e166812a5f5f08de7c4cd5d97969 Mon Sep 17 00:00:00 2001 From: Molly Kent Date: Mon, 5 Oct 2015 18:44:15 -0700 Subject: [PATCH 02/72] Set up basic file structure --- Gulpfile.js | 14 +++++ public/404.html | 14 +++++ public/css/.gitkeep | 0 public/index.html | 15 ++++++ public/js/index.js | 0 public/sass/main.scss | 0 public/sass/modules/_reset.scss | 96 +++++++++++++++++++++++++++++++++ 7 files changed, 139 insertions(+) create mode 100644 Gulpfile.js create mode 100644 public/404.html create mode 100644 public/css/.gitkeep create mode 100644 public/index.html create mode 100644 public/js/index.js create mode 100644 public/sass/main.scss create mode 100644 public/sass/modules/_reset.scss diff --git a/Gulpfile.js b/Gulpfile.js new file mode 100644 index 0000000..65a66bd --- /dev/null +++ b/Gulpfile.js @@ -0,0 +1,14 @@ + +var gulp = require("gulp"); + +var sass = require("gulp-sass"); + +gulp.task("sass", function() { + gulp.src("public/sass/**/*.scss") + .pipe(sass().on("error", sass.logError)) + .pipe(gulp.dest("./public/css/")); +}); + +gulp.task("watch", ["sass"], function() { + gulp.watch("public/sass/**/*.scss", ["sass"]); +}); diff --git a/public/404.html b/public/404.html new file mode 100644 index 0000000..85a5a9c --- /dev/null +++ b/public/404.html @@ -0,0 +1,14 @@ + + + + + + 404 - Page Not Found + + + + + +

404: Page Not Found

+ + \ No newline at end of file diff --git a/public/css/.gitkeep b/public/css/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..466c637 --- /dev/null +++ b/public/index.html @@ -0,0 +1,15 @@ + + + + + + Crud Blog + + + + + +

Hello world! This is HTML5 Boilerplate.

+ + + \ No newline at end of file diff --git a/public/js/index.js b/public/js/index.js new file mode 100644 index 0000000..e69de29 diff --git a/public/sass/main.scss b/public/sass/main.scss new file mode 100644 index 0000000..e69de29 diff --git a/public/sass/modules/_reset.scss b/public/sass/modules/_reset.scss new file mode 100644 index 0000000..ef9e538 --- /dev/null +++ b/public/sass/modules/_reset.scss @@ -0,0 +1,96 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain)*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + box-sizing: border-box; + &:focus { + outline: 0; + } +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + /*display: block;*/ +} +html,body +{ + width: 100%; + overflow-x: hidden; +} +body { + line-height: 1; + width: 100%; +} +ol, ul { + list-style-type: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/*&&&& Mods &&&&*/ +a { + text-decoration: none; + color: inherit; + &:hover { + cursor: pointer; + } +} +section, img, nav, figure { + max-width: 100%; +} +button, input[type="button"] { + // adapted from Codepen: http://codepen.io/terkel/pen/dvejH + // removes browser button style defaults + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: none; + border: 0; + // padding: 1em; + color: inherit; + cursor: pointer; + font: inherit; + overflow: visible; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} +.clearfix { + zoom: 1; +} +.clearfix:before, .clearfix:after { + content: "\0020"; + display: block; + height: 0; + overflow: hidden; +} +.clearfix:after { + clear: both; +} \ No newline at end of file From a8fd527049039097d98812339f28311ec1f1306d Mon Sep 17 00:00:00 2001 From: Molly Kent Date: Mon, 5 Oct 2015 19:01:03 -0700 Subject: [PATCH 03/72] Install Gulp and Sass, run npm init --- .gitignore | 29 ++--------------------------- package.json | 23 +++++++++++++++++++++++ public/sass/main.scss | 1 + 3 files changed, 26 insertions(+), 27 deletions(-) create mode 100644 package.json diff --git a/.gitignore b/.gitignore index 123ae94..d047077 100644 --- a/.gitignore +++ b/.gitignore @@ -1,27 +1,2 @@ -# Logs -logs -*.log - -# Runtime data -pids -*.pid -*.seed - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directory -# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git -node_modules +*/css/**/*.css +node_modules/ \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..8aab1cf --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "mean-stack-1", + "version": "0.1.0", + "description": "Simple CRUD app to demonstrate the MEAN stack", + "main": "Gulpfile.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/mollyfish/mean-stack-1.git" + }, + "author": "Molly Kent ", + "license": "MIT", + "bugs": { + "url": "https://github.com/mollyfish/mean-stack-1/issues" + }, + "homepage": "https://github.com/mollyfish/mean-stack-1#readme", + "devDependencies": { + "gulp": "^3.9.0", + "gulp-sass": "^2.0.4" + } +} diff --git a/public/sass/main.scss b/public/sass/main.scss index e69de29..18c7dce 100644 --- a/public/sass/main.scss +++ b/public/sass/main.scss @@ -0,0 +1 @@ +@import "modules/reset.scss"; \ No newline at end of file From e45271e8e2a6e738b02cc911f451062cbe15211d Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Mon, 5 Oct 2015 23:19:32 -0700 Subject: [PATCH 04/72] Remove .DS_Store, add mongoose, express and express server This will add .DS_Store to the gitignore file, add mongoose and express dependencies to the json file and add the basic express server --- .gitignore | 3 ++- package.json | 4 ++++ server.js | 16 ++++++++++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 server.js diff --git a/.gitignore b/.gitignore index d047077..23f5e3e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ */css/**/*.css -node_modules/ \ No newline at end of file +node_modules/ +.DS_Store diff --git a/package.json b/package.json index 8aab1cf..c54a711 100644 --- a/package.json +++ b/package.json @@ -19,5 +19,9 @@ "devDependencies": { "gulp": "^3.9.0", "gulp-sass": "^2.0.4" + }, + "dependencies": { + "express": "^4.13.3", + "mongoose": "^4.1.10" } } diff --git a/server.js b/server.js new file mode 100644 index 0000000..bcadd07 --- /dev/null +++ b/server.js @@ -0,0 +1,16 @@ +var express = require('express'); +var app = express(); + +app.get('/', function(req, res){ + res.sendFile('public/index.html', {root: __dirname + '/'}); +}); + +var port = process.env.PORT || 3000; + +var server = app.listen(port, 'localhost', function() { + var host = server.address().address; + var port = server.address().port; + console.log('Server running on: http://localhost:%s',port); +}); + + From 7426bef60dc1b5f7f79867175dac03e0a4c4bbbd Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Mon, 5 Oct 2015 23:21:47 -0700 Subject: [PATCH 05/72] Add procfile --- Procfile | 1 + 1 file changed, 1 insertion(+) create mode 100644 Procfile diff --git a/Procfile b/Procfile new file mode 100644 index 0000000..489b270 --- /dev/null +++ b/Procfile @@ -0,0 +1 @@ +web: node server.js From bbf03aed4b8aff95edf6053efc9d205a4de273a5 Mon Sep 17 00:00:00 2001 From: Molly Kent Date: Tue, 6 Oct 2015 08:14:42 -0700 Subject: [PATCH 06/72] Add 404 response to server.js --- package.json | 1 + server.js | 13 ++++++++++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index c54a711..5992063 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "homepage": "https://github.com/mollyfish/mean-stack-1#readme", "devDependencies": { + "express": "^4.13.3", "gulp": "^3.9.0", "gulp-sass": "^2.0.4" }, diff --git a/server.js b/server.js index bcadd07..0325025 100644 --- a/server.js +++ b/server.js @@ -2,7 +2,16 @@ var express = require('express'); var app = express(); app.get('/', function(req, res){ - res.sendFile('public/index.html', {root: __dirname + '/'}); + res.status(200).sendFile('public/index.html', {root: __dirname + '/'}); +}); +app.get('/index', function(req, res){ + res.status(200).sendFile('public/index.html', {root: __dirname + '/'}); +}); +app.get('/index.html', function(req, res){ + res.status(200).sendFile('public/index.html', {root: __dirname + '/'}); +}); +app.get('/*', function(req, res){ + res.status(404).sendFile('public/404.html', {root: __dirname + '/'}); }); var port = process.env.PORT || 3000; @@ -12,5 +21,3 @@ var server = app.listen(port, 'localhost', function() { var port = server.address().port; console.log('Server running on: http://localhost:%s',port); }); - - From 63b59073127c3892e4c8a113deccf0b657aaf6c4 Mon Sep 17 00:00:00 2001 From: Molly Kent Date: Tue, 6 Oct 2015 08:35:13 -0700 Subject: [PATCH 07/72] Add root directory to server so it can find stylesheets --- .gitignore | 1 + public/buttons.html | 0 public/sass/main.scss | 5 ++++- public/sass/partials/buttons.scss | 1 + server.js | 2 +- 5 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 public/buttons.html create mode 100644 public/sass/partials/buttons.scss diff --git a/.gitignore b/.gitignore index 23f5e3e..03501cb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ */css/**/*.css node_modules/ .DS_Store + diff --git a/public/buttons.html b/public/buttons.html new file mode 100644 index 0000000..e69de29 diff --git a/public/sass/main.scss b/public/sass/main.scss index 18c7dce..a45c65d 100644 --- a/public/sass/main.scss +++ b/public/sass/main.scss @@ -1 +1,4 @@ -@import "modules/reset.scss"; \ No newline at end of file +@import "modules/reset.scss"; + + +@import "partials/buttons.scss"; \ No newline at end of file diff --git a/public/sass/partials/buttons.scss b/public/sass/partials/buttons.scss new file mode 100644 index 0000000..c48cce0 --- /dev/null +++ b/public/sass/partials/buttons.scss @@ -0,0 +1 @@ +//comment \ No newline at end of file diff --git a/server.js b/server.js index bcadd07..d2f8b27 100644 --- a/server.js +++ b/server.js @@ -1,6 +1,6 @@ var express = require('express'); var app = express(); - +app.use(express.static(__dirname + '/public')); app.get('/', function(req, res){ res.sendFile('public/index.html', {root: __dirname + '/'}); }); From 9fe851749f99ed7a934d868935d7cdbbed44af62 Mon Sep 17 00:00:00 2001 From: Molly Kent Date: Tue, 6 Oct 2015 08:39:58 -0700 Subject: [PATCH 08/72] Break to show Mark a different branch --- public/buttons.html | 15 +++++++++++++++ public/sass/partials/buttons.scss | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/public/buttons.html b/public/buttons.html index e69de29..c976253 100644 --- a/public/buttons.html +++ b/public/buttons.html @@ -0,0 +1,15 @@ + + + + + + Crud Blog + + + + + + Read More + + + \ No newline at end of file diff --git a/public/sass/partials/buttons.scss b/public/sass/partials/buttons.scss index c48cce0..94b857f 100644 --- a/public/sass/partials/buttons.scss +++ b/public/sass/partials/buttons.scss @@ -1 +1 @@ -//comment \ No newline at end of file +//comment From 9bf61221077545040af4a8482923926f964285cf Mon Sep 17 00:00:00 2001 From: Molly Kent Date: Tue, 6 Oct 2015 08:44:42 -0700 Subject: [PATCH 09/72] Add public folder as default folder --- public/css/main.scss | 0 server.js | 7 ++----- 2 files changed, 2 insertions(+), 5 deletions(-) create mode 100644 public/css/main.scss diff --git a/public/css/main.scss b/public/css/main.scss new file mode 100644 index 0000000..e69de29 diff --git a/server.js b/server.js index 0325025..97492d6 100644 --- a/server.js +++ b/server.js @@ -1,13 +1,10 @@ var express = require('express'); var app = express(); - +app.use(express.static(__dirname + '/public')); app.get('/', function(req, res){ res.status(200).sendFile('public/index.html', {root: __dirname + '/'}); }); -app.get('/index', function(req, res){ - res.status(200).sendFile('public/index.html', {root: __dirname + '/'}); -}); -app.get('/index.html', function(req, res){ +app.get('/index*', function(req, res){ res.status(200).sendFile('public/index.html', {root: __dirname + '/'}); }); app.get('/*', function(req, res){ From b096b80f8355a2c7482ce27920ef07683da6d03c Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Tue, 6 Oct 2015 09:54:48 -0700 Subject: [PATCH 10/72] Add icomoon icons --- public/index.html | 2 +- public/sass/_icon-fonts.scss | 39 ++++++++++++++++++++++++++++++++++++ public/sass/main.scss | 3 ++- 3 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 public/sass/_icon-fonts.scss diff --git a/public/index.html b/public/index.html index 466c637..4ee364f 100644 --- a/public/index.html +++ b/public/index.html @@ -12,4 +12,4 @@

Hello world! This is HTML5 Boilerplate.

- \ No newline at end of file + diff --git a/public/sass/_icon-fonts.scss b/public/sass/_icon-fonts.scss new file mode 100644 index 0000000..655798c --- /dev/null +++ b/public/sass/_icon-fonts.scss @@ -0,0 +1,39 @@ +@font-face { + font-family: 'icomoon'; + src:url('fonts/icomoon.eot?j42c1j'); + src:url('fonts/icomoon.eot?j42c1j#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?j42c1j') format('truetype'), + url('fonts/icomoon.woff?j42c1j') format('woff'), + url('fonts/icomoon.svg?j42c1j#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +$icons: +(menu '\20') +(google-plus '\e800') +(facebook '\e801') +(twitter '\e802') +(linkedin '\e803') +(pinterest '\e804') +; + +@each $icon in $icons { + .icon-#{nth($icon, 1)}:before { + content:nth($icon, 2); + } +} diff --git a/public/sass/main.scss b/public/sass/main.scss index 18c7dce..83f8e00 100644 --- a/public/sass/main.scss +++ b/public/sass/main.scss @@ -1 +1,2 @@ -@import "modules/reset.scss"; \ No newline at end of file +@import "modules/reset.scss"; +@import "icon-fonts"; From 011b71da13ac1cd673723420f3eb94b40aaa6333 Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Tue, 6 Oct 2015 10:02:51 -0700 Subject: [PATCH 11/72] Add icon circle style --- public/index.html | 3 +++ public/sass/_icon-fonts.scss | 14 ++++++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 4ee364f..94d297a 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,9 @@

Hello world! This is HTML5 Boilerplate.

+
+ +
diff --git a/public/sass/_icon-fonts.scss b/public/sass/_icon-fonts.scss index 655798c..78b2788 100644 --- a/public/sass/_icon-fonts.scss +++ b/public/sass/_icon-fonts.scss @@ -17,8 +17,8 @@ font-variant: normal; text-transform: none; line-height: 1; - - /* Better Font Rendering =========== */ + // Needs color variable + color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -37,3 +37,13 @@ $icons: content:nth($icon, 2); } } + +.icon-style { + width: 21px; + height: 21px; + // Needs color variable + border: 1px solid black; + border-radius: 50%; + // Needs color variable + background-color: black; +} From 9f5480f816822fa23e323bebf316a9801763eb88 Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Tue, 6 Oct 2015 10:09:48 -0700 Subject: [PATCH 12/72] Revise icon circle style --- public/index.html | 3 --- public/sass/_icon-fonts.scss | 6 +++--- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/public/index.html b/public/index.html index 94d297a..4ee364f 100644 --- a/public/index.html +++ b/public/index.html @@ -10,9 +10,6 @@

Hello world! This is HTML5 Boilerplate.

-
- -
diff --git a/public/sass/_icon-fonts.scss b/public/sass/_icon-fonts.scss index 78b2788..0f2f1e1 100644 --- a/public/sass/_icon-fonts.scss +++ b/public/sass/_icon-fonts.scss @@ -16,7 +16,7 @@ font-weight: normal; font-variant: normal; text-transform: none; - line-height: 1; + line-height: 4; // Needs color variable color: white; -webkit-font-smoothing: antialiased; @@ -39,11 +39,11 @@ $icons: } .icon-style { - width: 21px; - height: 21px; + font-size: 100%; // Needs color variable border: 1px solid black; border-radius: 50%; + padding: .3em; // Needs color variable background-color: black; } From 5a10e2d25530b4627fc88f5048f88093cb87dc10 Mon Sep 17 00:00:00 2001 From: Molly Kent Date: Tue, 6 Oct 2015 10:14:48 -0700 Subject: [PATCH 13/72] Make button components, Typography and Color modules --- public/buttons.html | 28 ++++++++++------- public/index.html | 24 +++++++------- public/sass/main.scss | 3 ++ public/sass/modules/_colors.scss | 19 +++++++++++ public/sass/modules/_typography.scss | 47 ++++++++++++++++++++++++++++ public/sass/partials/_buttons.scss | 44 ++++++++++++++++++++++++++ public/sass/partials/buttons.scss | 1 - 7 files changed, 141 insertions(+), 25 deletions(-) create mode 100644 public/sass/modules/_colors.scss create mode 100644 public/sass/modules/_typography.scss create mode 100644 public/sass/partials/_buttons.scss delete mode 100644 public/sass/partials/buttons.scss diff --git a/public/buttons.html b/public/buttons.html index c976253..153e1c2 100644 --- a/public/buttons.html +++ b/public/buttons.html @@ -1,15 +1,19 @@ - - - - Crud Blog - - - - - - Read More - - + + + + Buttons + + + + + + Read More + Prev + Contact Now + Learn More + 1 + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 466c637..bb91b23 100644 --- a/public/index.html +++ b/public/index.html @@ -1,15 +1,15 @@ - - - - Crud Blog - - - - - -

Hello world! This is HTML5 Boilerplate.

- - + + + + Crud Blog + + + + + +

Hello world! This is HTML5 Boilerplate.

+ + \ No newline at end of file diff --git a/public/sass/main.scss b/public/sass/main.scss index a45c65d..dcd9686 100644 --- a/public/sass/main.scss +++ b/public/sass/main.scss @@ -1,4 +1,7 @@ @import "modules/reset.scss"; +@import "modules/colors.scss"; +@import "modules/typography.scss"; + @import "partials/buttons.scss"; \ No newline at end of file diff --git a/public/sass/modules/_colors.scss b/public/sass/modules/_colors.scss new file mode 100644 index 0000000..d34fb34 --- /dev/null +++ b/public/sass/modules/_colors.scss @@ -0,0 +1,19 @@ +$color1: #000; +$color2: lighten($color1, 60%); +$color3: #fff; +$color4: #97f1e7; + +$text-color-dark: $color1; +$text-color-med: $color2; +$text-color-light: $color3; +$text-color-theme: $color4; + +$background-color-dark: $color1; +$background-color-med: $color2; +$background-color-light: $color3; +$background-color-theme: $color4; + +$border-color-dark: $color1; +$border-color-med: $color2; +$border-color-light: $color3; +$border-color-theme: $color4; diff --git a/public/sass/modules/_typography.scss b/public/sass/modules/_typography.scss new file mode 100644 index 0000000..952035e --- /dev/null +++ b/public/sass/modules/_typography.scss @@ -0,0 +1,47 @@ +@font-face { + font-family: 'Ubuntu Light'; + font-weight: 300; + src: local('Ubuntu Light'), local('Ubuntu-Light'), url(https://fonts.gstatic.com/s/ubuntu/v8/_aijTyevf54tkVDLy-dlnJBw1xU1rKptJj_0jans920.woff2) format('woff2'); +} +@font-face { + font-family: 'Ubuntu Light Italic'; + font-style: italic; + font-weight: 300; + src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'), url(https://fonts.gstatic.com/s/ubuntu/v8/DZ_YjBPqZ88vcZCcIXm6Vogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'); +} +@font-face { + font-family: 'Ubuntu'; + font-weight: 400; + src: local('Ubuntu'), url(https://fonts.gstatic.com/s/ubuntu/v8/zvCUQcxqeoKhyOlbifSAaevvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'); +} +@font-face { + font-family: 'Ubuntu Medium'; + font-weight: 500; + src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(https://fonts.gstatic.com/s/ubuntu/v8/OsJ2DjdpjqFRVUSto6IffJBw1xU1rKptJj_0jans920.woff2) format('woff2'); +} +@font-face { + font-family: 'Ubuntu Bold'; + font-weight: 700; + src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(https://fonts.gstatic.com/s/ubuntu/v8/0ihfXUL2emPh0ROJezvraJBw1xU1rKptJj_0jans920.woff2) format('woff2'); +} + +$main-font-light: 'Ubuntu Light', sans-serif; +$main-font-light-italic: 'Ubuntu Light Italic', sans-serif; +$main-font-regular: 'Ubuntu', sans-serif; +$main-font-medium: 'Ubuntu Medium', sans-serif; +$main-font-bold: 'Ubuntu Bold', sans-serif; + +@font-face { + font-family: 'Roboto Slab Light'; + font-weight: 300; + src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url(https://fonts.gstatic.com/s/robotoslab/v6/dazS1PrQQuCxC3iOAJFEJdTIkQYohD4BpHvJ3NvbHoA.woff2) format('woff2'); +} + +@font-face { + font-family: 'Roboto Slab'; + font-weight: 400; + src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37Zogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'); +} + +$accent-font-light: 'Roboto Slab Light', serif; +$accent-font-regular: 'Roboto Slab', serif; diff --git a/public/sass/partials/_buttons.scss b/public/sass/partials/_buttons.scss new file mode 100644 index 0000000..b1e241f --- /dev/null +++ b/public/sass/partials/_buttons.scss @@ -0,0 +1,44 @@ +.btn { + font-family: $main-font-medium; + display: inline-block; + padding: 0.75em 1em; + border: 1px solid $border-color-med; + border-radius: 0.25em; + text-align: center; + &:hover { + cursor: pointer; + } +} +.btn__text { + text-transform: uppercase; + width: 10em; +} +.btn__number { + padding-left: 1em; + padding-right: 1em; +} +.btn--dark { + background-color: $background-color-dark; + color: $text-color-light; + &:hover { + background-color: $background-color-light; + color: $text-color-dark; + } +} +.btn--light { + background-color: $background-color-light; + color: $text-color-dark; + &:hover { + background-color: $background-color-dark; + color: $text-color-light; + } +} +.btn--theme { + background-color: $background-color-theme; + color: $text-color-light; + border: 1px solid $border-color-light; + &:hover { + background-color: $background-color-light; + color: $text-color-theme; + } +} \ No newline at end of file diff --git a/public/sass/partials/buttons.scss b/public/sass/partials/buttons.scss deleted file mode 100644 index 94b857f..0000000 --- a/public/sass/partials/buttons.scss +++ /dev/null @@ -1 +0,0 @@ -//comment From d3832b616341f73daf414f520729911b13d5b860 Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Tue, 6 Oct 2015 10:27:18 -0700 Subject: [PATCH 14/72] Revise icon circle style --- public/icons.html | 20 ++++++++++++++++++++ public/sass/_icon-fonts.scss | 14 +++++++++++--- 2 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 public/icons.html diff --git a/public/icons.html b/public/icons.html new file mode 100644 index 0000000..252dda8 --- /dev/null +++ b/public/icons.html @@ -0,0 +1,20 @@ + + + + + + Icon Components + + + + + + + + + + + + + + diff --git a/public/sass/_icon-fonts.scss b/public/sass/_icon-fonts.scss index 0f2f1e1..1d5eeb9 100644 --- a/public/sass/_icon-fonts.scss +++ b/public/sass/_icon-fonts.scss @@ -16,7 +16,7 @@ font-weight: normal; font-variant: normal; text-transform: none; - line-height: 4; + line-height: 2; // Needs color variable color: white; -webkit-font-smoothing: antialiased; @@ -40,10 +40,18 @@ $icons: .icon-style { font-size: 100%; - // Needs color variable - border: 1px solid black; border-radius: 50%; padding: .3em; // Needs color variable background-color: black; } +.icon-pinterest:before { + font-size: 150%; + color: black; +} +.icon-menu:before { + font-size: 150%; + color: black; +} + + From bfc8e630b4b7c05243e3d7b319c0ec16e70aeb3e Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Tue, 6 Oct 2015 10:30:06 -0700 Subject: [PATCH 15/72] Add icon.html component --- public/icons.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/icons.html b/public/icons.html index 252dda8..3af543e 100644 --- a/public/icons.html +++ b/public/icons.html @@ -11,10 +11,10 @@ - - - - + + + + From b8cecc37d004933bc43683ad94b6bec3a02439a0 Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Tue, 6 Oct 2015 10:55:44 -0700 Subject: [PATCH 16/72] Fix font imports --- public/css/fonts/icons.eot | Bin 0 -> 2716 bytes public/css/fonts/icons.svg | 20 ++++++++++++++++++++ public/css/fonts/icons.ttf | Bin 0 -> 2552 bytes public/css/fonts/icons.woff | Bin 0 -> 2628 bytes public/sass/modules/_icon-fonts.scss | 14 +++++++------- 5 files changed, 27 insertions(+), 7 deletions(-) create mode 100755 public/css/fonts/icons.eot create mode 100755 public/css/fonts/icons.svg create mode 100755 public/css/fonts/icons.ttf create mode 100755 public/css/fonts/icons.woff diff --git a/public/css/fonts/icons.eot b/public/css/fonts/icons.eot new file mode 100755 index 0000000000000000000000000000000000000000..9a0fa1c2e248fa2497b5a1bdaafb41b786aa99b2 GIT binary patch literal 2716 zcmai0OKcNI82)E=ZO4hdj^o%)LU4BN#Lf%j#9ptHfVJTf14&3A;6g!Q=RpEZ;xq{; zs8H>tJ(NSKs;Wimfdf)6sG^SxrH4KAR5(qrAn0wasS!fge0VNteN@W z|3BZ1XXo=ufWMsp1So871a1;085-RzXSQa0nCZX1RR33+b&&YWS@2)yCpf(qPR9%bTF{uy6>Q7#*P;!}7A21m+I8u&UVdT)%*auKxk zY>*-_N{?am((#zfqbslharjG}F5M-WS zsRey)TV|}K3`C>a3vE@~o<_Jp*Io`AbMWBA(vwDss#L>i{w^ zf77vXptH3aUDFX%9iwcGXY9m=Xe6k-5^7^0f&p1I{}-o43BEQCtHzAegnO((9~^}< zcohIiw9`mfp#ItrP4*H+ApY7wFpSt+vhFOEQ_)zQ$f>lF#W5O7DqIN7jQvTagWZ8( zhy=MfiAB?l3fN;Ua>O6;C;dq|DbwBkr{1jJb)rAEGd&o$yY2Q0f3+*tHk_TFvd)oq1dZ4-YXw;pm354n!avj~Lyd5vzb_kBX(Gz_=W5mvf+9eX9 z;|C6$rKE7+z&Uc)*eey`0YbF0&Z)TnxbGxv-$`&0Ui>K$TzwyrBlPyZb9k0+iuZi( z+qXG5x38eBszlccZl7lSKSjj106Fv*h$G7Yb;OB@W*`{nVkW={R-(2Gkrq%FjUj3l z!6i+=Wpw4Cajz&PTuu9%8%K9_4)sVJ?SE&!5OaHy?F|Wk@sO~?Q(5b*ed}QQy(8{= zS7hi|zVoABKRZgAWItVXdpX~pmYN1fs9EY6>U7n)xNy(WM4h}-Ion8tDmuI*@I0m2 zG(sD$3AZ#$lHDQd_eQ*_Xe4ZBgp|ZV zSvwHy&r7tgxSG@ZbNPh#etqsx^!}=jEz{bXVV$aHq~5ke<2|d7h_`F034KAJ?vI*q|NQLTrYh&|Xt=MVUd)W_R`PvKfohHru9DCS zMJ0&RBKxP%8^GdgH+*PG{q>Pp+MBY#Nh1W2X+bhvi(y zPU&nsnht04srazc6wQuyNUD!_@UAwSgX01#nY|17DKnJ5o1OBMsG8xmYL` z*uaBfa=kzE@VsZwUr@y^1%RJ>zWCrFpR{p4k2=wXN5-!sAoZ zmuHKMo8M^LS`L)vm&NI+`KiU?^3qy;kN^Mx literal 0 HcmV?d00001 diff --git a/public/css/fonts/icons.svg b/public/css/fonts/icons.svg new file mode 100755 index 0000000..c199b2b --- /dev/null +++ b/public/css/fonts/icons.svg @@ -0,0 +1,20 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/css/fonts/icons.ttf b/public/css/fonts/icons.ttf new file mode 100755 index 0000000000000000000000000000000000000000..51b47e4eb4060e68f2864f09f40bec5c427cccbc GIT binary patch literal 2552 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 literal 0 HcmV?d00001 diff --git a/public/sass/modules/_icon-fonts.scss b/public/sass/modules/_icon-fonts.scss index 9c5c385..e54bd8d 100644 --- a/public/sass/modules/_icon-fonts.scss +++ b/public/sass/modules/_icon-fonts.scss @@ -1,16 +1,16 @@ @font-face { - font-family: 'icomoon'; - src:url('fonts/icomoon.eot?j42c1j'); - src:url('fonts/icomoon.eot?j42c1j#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?j42c1j') format('truetype'), - url('fonts/icomoon.woff?j42c1j') format('woff'), - url('fonts/icomoon.svg?j42c1j#icomoon') format('svg'); + font-family: 'icons'; + src:url('fonts/icons.eot?j42c1j'); + src:url('fonts/icons.eot?j42c1j#iefix') format('embedded-opentype'), + url('fonts/icons.ttf?j42c1j') format('truetype'), + url('fonts/icons.woff?j42c1j') format('woff'), + url('fonts/icons.svg?j42c1j#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { - font-family: 'icomoon'; + font-family: 'icons'; speak: none; font-style: normal; font-weight: normal; From 74f036902ce60d9570448a85be660dc8f342e8b7 Mon Sep 17 00:00:00 2001 From: Molly Kent Date: Tue, 6 Oct 2015 12:00:18 -0700 Subject: [PATCH 17/72] Create Connection Link module and component --- public/connection-links.html | 24 ++++++++++++++ public/css/main.scss | 0 public/icons.html | 2 +- public/sass/main.scss | 2 ++ public/sass/modules/_flexbox.scss | 8 +++++ public/sass/partials/_connection-links.scss | 35 +++++++++++++++++++++ 6 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 public/connection-links.html delete mode 100644 public/css/main.scss create mode 100644 public/sass/modules/_flexbox.scss create mode 100644 public/sass/partials/_connection-links.scss diff --git a/public/connection-links.html b/public/connection-links.html new file mode 100644 index 0000000..7f899a8 --- /dev/null +++ b/public/connection-links.html @@ -0,0 +1,24 @@ + + + + + + Connection Links + + + + + + + Follow Us + + + Like Us + + + Connect + + + + + diff --git a/public/css/main.scss b/public/css/main.scss deleted file mode 100644 index e69de29..0000000 diff --git a/public/icons.html b/public/icons.html index 3af543e..7a02893 100644 --- a/public/icons.html +++ b/public/icons.html @@ -13,7 +13,7 @@ - + diff --git a/public/sass/main.scss b/public/sass/main.scss index 228768b..f9757c4 100644 --- a/public/sass/main.scss +++ b/public/sass/main.scss @@ -1,8 +1,10 @@ @import "modules/reset.scss"; +@import "modules/flexbox.scss"; @import "modules/colors.scss"; @import "modules/typography.scss"; @import "modules/icon-fonts"; +@import "partials/connection-links.scss"; @import "partials/icons.scss"; @import "partials/buttons.scss"; diff --git a/public/sass/modules/_flexbox.scss b/public/sass/modules/_flexbox.scss new file mode 100644 index 0000000..f4d50d4 --- /dev/null +++ b/public/sass/modules/_flexbox.scss @@ -0,0 +1,8 @@ +@mixin flex-container($direction,$wrap) { + display:flex; + flex-direction: $direction; + flex-wrap: $wrap; + justify-content: center; + align-content: center; + align-items: center; +} \ No newline at end of file diff --git a/public/sass/partials/_connection-links.scss b/public/sass/partials/_connection-links.scss new file mode 100644 index 0000000..5dd4167 --- /dev/null +++ b/public/sass/partials/_connection-links.scss @@ -0,0 +1,35 @@ +.connection-links { + position: relative; + width: 8em; + height: 8em; + border: 1px solid $border-color-med; + border-radius: 50%; + &:hover { + background-color: $background-color-theme; + color: $text-color-light; + .connection-links__icon:before { + background-color: $background-color-light; + color: $text-color-dark; + } + } +} +.connection-links__text { + @include flex-container(row,nowrap); + padding: 1em; + font-family: $main-font-bold; + text-align: center; + text-transform: uppercase; +} +.connection-links__icon:before { + @include flex-container(row,nowrap); + position: absolute; + top: -0.4em; + left: -0.4em; + border: 1px solid $border-color-dark; + border-radius: 50%; + width: 35%; + height: 35%; + font-size: 120%; + color: $text-color-light; + background-color: $background-color-dark; +} \ No newline at end of file From 96ef30407881a016ff9f7c05fe0e55320831fddb Mon Sep 17 00:00:00 2001 From: Zachary Gordon Date: Tue, 6 Oct 2015 12:14:44 -0700 Subject: [PATCH 18/72] Add footer elements --- public/footer.html | 23 +++++++++++++++++++++ public/icons.html | 34 +++++++++++++++---------------- public/sass/main.scss | 1 + public/sass/partials/_footer.scss | 6 ++++++ 4 files changed, 47 insertions(+), 17 deletions(-) create mode 100644 public/footer.html create mode 100644 public/sass/partials/_footer.scss diff --git a/public/footer.html b/public/footer.html new file mode 100644 index 0000000..76628b5 --- /dev/null +++ b/public/footer.html @@ -0,0 +1,23 @@ + + + + + + Footer + + + + + +