diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..b350876a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +root = true + +[*] +end_of_line = lf +insert_final_newline = true + +# Matches multiple files with brace expansion notation +[*.{js,jsx,html,sass,css}] +charset = utf-8 +indent_style = tab +indent_size = 4 +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false \ No newline at end of file diff --git a/README.md b/README.md index f5895e0b..ee0e684e 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,5 @@ assignment_markup_warmup_sprint And 1 and 2! And 1, and 2...! [An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com) + +Name: Kevin Lezama \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..1c50881d --- /dev/null +++ b/css/main.css @@ -0,0 +1,223 @@ +/* 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, strong, 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; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +*, +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; +} + +body { + font-family: 'Roboto Condensed', sans-serif; + line-height: 1.5; +} + +header { + font-size: 1.125em; + font-weight: 400; + text-transform: capitalize; + width: 100%; + padding: 10px; + font-size: 15px; + font-weight: 400; + background: #FFE497; + border-bottom: 1px solid #939393; +} + +.intro { + position: relative; + width: 100%; + height: 100px; + text-align: center; + background: #B4D6A6; +} + .intro .center { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 80%; + } + .intro h1 { + font-size: 1.75em; + font-weight: 700; + } + .intro h4 { + font-style: italic; + } + +/* -------------- MAIN CONTENT LAYOUT -------------- */ +#main-content { + width: 90%; + margin: 0 auto; +} + #main-content .blog-post { + margin: 10px 0; + padding: 8px; + font-size: 1em; + font-weight: 300; + text-align: justify; + background: #A0C3C8; + border: 1px solid #000; + border-radius: 4px; + } + #main-content .blog-post .post-title { + font-size: 1.375em; + font-weight: 400; + text-transform: capitalize; + text-align: center; + } + #main-content .post-date { + text-align: center; + } + #main-content .topic { + font-size: 1.125em; + font-weight: 400; + text-transform: capitalize; + } + #main-content .topic:nth-of-type(2) { + margin-top: 8px; + } + +/* Tablets */ +@media (min-width: 720px) and (min-width: 720px) { + #main-content { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + } + #main-content .blog-post { + margin: 2%; + } + #main-content .blog-post:nth-of-type(1) { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 35%; + -ms-flex-preferred-size: 35%; + flex-basis: 35%; + } + #main-content .blog-post:nth-of-type(2) { + -webkit-flex-basis: 45%; + -ms-flex-preferred-size: 45%; + flex-basis: 45%; + height: 250px; + } + } + +/* Desktops */ +@media (min-width: 991px) and (min-width: 991px) { + #main-content { + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + } + #main-content .distraction { + display: block; + margin: 13px 1%; + height: 500px; + border-radius: 4px; + } + #main-content .blog-post { + -webkit-box-flex: 0; + -webkit-flex: 0 1 32%; + -ms-flex: 0 1 32%; + flex: 0 1 32%; + margin: 13px 1%; + } + #main-content .blog-post:nth-of-type(1) { + min-height: 450px; + } + #main-content .blog-post:nth-of-type(2) { + height: 270px; + } + #main-content .blog-post:nth-of-type(3) { + max-height: 480px; + } + } + +/* Ad not present in mobile view */ +.distraction { + padding-top: 8%; + display: none; + font-size: 1.375em; + text-align: center; + background: #d4a5bc; +} + .distraction img { + max-width: 80%; + margin-top: 1%; + } + +/* ------------- FOOTER -------------- */ +footer { + padding: 8px; + font-size: 14px; + font-weight: 300; + text-align: justify; + background: #9DC4F8; +} diff --git a/css/mixins/_blog-post.css b/css/mixins/_blog-post.css new file mode 100644 index 00000000..e69de29b diff --git a/css/mixins/_borderbox.css b/css/mixins/_borderbox.css new file mode 100644 index 00000000..e69de29b diff --git a/css/mixins/_center.css b/css/mixins/_center.css new file mode 100644 index 00000000..e69de29b diff --git a/css/mixins/_default.css b/css/mixins/_default.css new file mode 100644 index 00000000..e69de29b diff --git a/css/mixins/_desktop.css b/css/mixins/_desktop.css new file mode 100644 index 00000000..e69de29b diff --git a/css/mixins/_logo.css b/css/mixins/_logo.css new file mode 100644 index 00000000..e69de29b diff --git a/css/mixins/_tablets.css b/css/mixins/_tablets.css new file mode 100644 index 00000000..e69de29b diff --git a/css/mixins/blog-post.css b/css/mixins/blog-post.css new file mode 100644 index 00000000..e69de29b diff --git a/css/mixins/post-title.css b/css/mixins/post-title.css new file mode 100644 index 00000000..e69de29b diff --git a/css/mixins/tablets/_main-content.css b/css/mixins/tablets/_main-content.css new file mode 100644 index 00000000..e69de29b diff --git a/css/reset/_reset.css b/css/reset/_reset.css new file mode 100644 index 00000000..10aa26f5 --- /dev/null +++ b/css/reset/_reset.css @@ -0,0 +1,46 @@ +/* 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, strong, 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; } + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } + +body { + line-height: 1; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } diff --git a/css/variables/_colors.css b/css/variables/_colors.css new file mode 100644 index 00000000..e69de29b diff --git a/css/variables/_text.css b/css/variables/_text.css new file mode 100644 index 00000000..e69de29b diff --git a/images/amazing-animal-beautiful-beautifull.jpg b/images/amazing-animal-beautiful-beautifull.jpg new file mode 100644 index 00000000..0299703a Binary files /dev/null and b/images/amazing-animal-beautiful-beautifull.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..3b28202b --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + The Lorem Micro Blog + + + + +
+ +
+ +
+
+

The Lorem Micro Blog

+

By Foo Bar

+
+
+ +
+
+

Check out my perfectly centered ad!

+ +
+ +
+

A Most Posty Post

+

Written 1/3/2000

+ +
First thoughts...
+

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

+ +
Addtional thoughts...
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco

+
+ +
+

Another Posty Post

+

Written 1/2/2000

+ +
Only thoughts...
+

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

+
+ +
+

A Posty Post

+

Written 1/1/2000

+ +
Be it resolved
+

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

+ +

Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat

+
+
+ + + + diff --git a/prepros-6.config b/prepros-6.config new file mode 100644 index 00000000..6111d31a --- /dev/null +++ b/prepros-6.config @@ -0,0 +1,271 @@ +{ + "name": "assignment_markup_warmup", + "firstRun": false, + "exportConfig": true, + "fileConfigs": [ + { + "path": "styles.css", + "configJson": "{\"autoCompile\":false,\"forceCompile\":false,\"customOutput\":\"\",\"sourceMap\":false,\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-cssnext\":{\"enabled\":false},\"compiler-minify-css\":{\"enabled\":true},\"outputSuffix\":\"-dist\"}" + } + ], + "fileTree": { + "expandedDirs": [ + "sass", + "css" + ], + "hideSystemFiles": true, + "systemFiles": [ + ".*", + "desktop.ini", + "prepros.config", + "$RECYCLE.BIN", + "prepros.cfg", + "prepros-6.config", + "Prepros Export" + ], + "hideUnwatchedFiles": false + }, + "imports": [ + { + "path": "sass/main.scss", + "imports": [ + "sass/reset/_reset.scss", + "sass/mixins/_borderbox.scss", + "sass/mixins/_default.scss", + "sass/mixins/_center.scss", + "sass/mixins/_logo.scss", + "sass/mixins/_blog-post.scss", + "sass/mixins/_post-title.scss", + "sass/mixins/_tablets.scss", + "sass/mixins/_desktop.scss", + "sass/variables/_colors.scss", + "sass/variables/_text.scss" + ] + } + ], + "projectView": { + "selectedView": "file-tree" + }, + "fileWatcher": { + "enabled": true, + "watchedExtensions": [ + "less", + "sass", + "scss", + "styl", + "md", + "markdown", + "coffee", + "js", + "jade", + "haml", + "slim", + "ls", + "kit", + "png", + "jpg", + "jpeg", + "ts", + "pug", + "css", + "html", + "htm", + "php" + ] + }, + "pathFilters": [ + "node_modules", + ".*", + "bower_components", + "prepros.config", + "Prepros Export", + "prepros-6.config", + "prepros.cfg", + "wp-admin", + "wp-includes" + ], + "server": { + "port": 7880, + "assignNewPortAutomatically": true, + "enable": true, + "proxy": { + "enable": false, + "url": "" + } + }, + "browser-sync": { + "enable": false, + "clicks": true, + "forms": true, + "scroll": true + }, + "live-reload": { + "enable": true, + "animate": true, + "delay": 0 + }, + "ftp-deploy": { + "connectionType": "ftp", + "remotePath": "", + "uploadTimeout": 20000, + "uploadOnChange": false, + "ftp": { + "secure": false, + "host": "", + "port": 21, + "user": "", + "password": "" + }, + "sftp": { + "host": "", + "port": 22, + "usePrivateKey": false, + "username": "", + "password": "", + "privateKey": "", + "passphrase": "" + }, + "pathFilters": [ + "config.rb", + "prepros.config", + "prepros-6.config", + "node_modules", + "Prepros Export", + ".git", + ".idea", + ".sass-cache", + ".hg", + ".svn", + ".cache", + ".DS_Store", + "*.sass", + "*.scss", + "*.less", + "*.pug", + "*.jade", + "*.styl", + "*.haml", + "*.slim", + "*.coffee", + "*.ls", + "*.kit", + "*.ts" + ], + "history": [] + }, + "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}", + "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}", + "autoprefixer": { + "browsers": "last 5 versions" + }, + "file-type-pug": "{\"compilers\":[\"pug\"]}", + "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}", + "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}", + "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}", + "file-type-markdown": "{\"compilers\":[\"markdown\"]}", + "file-type-haml": "{\"compilers\":[\"haml\"]}", + "file-type-slim": "{\"compilers\":[\"slim\"]}", + "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}", + "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}", + "file-type-kit": "{\"compilers\":[\"kit\"]}", + "uglify-js": { + "ie8": false, + "compress": { + "sequences": true, + "properties": true, + "dead_code": true, + "drop_debugger": true, + "unsafe": false, + "unsafe_comps": false, + "unsafe_math": false, + "unsafe_proto": false, + "unsafe_regexp": false, + "conditionals": true, + "comparisons": true, + "evaluate": true, + "booleans": true, + "loops": true, + "unused": true, + "toplevel": false, + "top_retain": "", + "hoist_funs": true, + "hoist_vars": false, + "if_return": true, + "join_vars": true, + "cascade": true, + "collapse_vars": true, + "reduce_vars": true, + "warnings": true, + "negate_iife": true, + "pure_getters": false, + "pure_funcs": [], + "drop_console": false, + "expression": false, + "keep_fargs": true, + "keep_fnames": false, + "passes": 1, + "keep_infinity": false, + "side_effects": true, + "global_defs": [] + }, + "output": { + "ascii_only": false, + "beautify": false, + "bracketize": false, + "comments": "", + "indent_level": 4, + "indent_start": 0, + "inline_script": false, + "keep_quoted_props": false, + "max_line_len": false, + "preamble": "", + "preserve_line": false, + "quote_keys": false, + "quote_style": 0, + "semicolons": true, + "shebang": true, + "width": 80 + } + }, + "cssnext": { + "customProperties": true, + "applyRule": true, + "calc": false, + "nesting": true, + "customMedia": true, + "mediaQueriesRange": true, + "customSelectors": true, + "attributeCaseInsensitive": true, + "colorRebeccapurple": true, + "colorHwb": true, + "colorGray": true, + "colorHexAlpha": true, + "colorFunction": true, + "fontVariant": true, + "filter": true, + "initial": true, + "rem": true, + "pseudoElements": true, + "pseudoClassMatches": true, + "pseudoClassNot": true, + "pseudoClassAnyLink": true, + "colorRgba": true, + "overflowWrap": true + }, + "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"]}", + "babel": { + "useBabelRc": true, + "presets": { + "babel-preset-es2015": true + }, + "plugins": { + "babel-plugin-syntax-jsx": true, + "babel-plugin-transform-react-jsx": true, + "babel-plugin-transform-async-to-generator": true, + "babel-plugin-transform-class-properties": true, + "babel-plugin-transform-object-rest-spread": true + } + }, + "file-type-png": "{\"compilers\":[\"png\"]}", + "file-type-jpg": "{\"compilers\":[\"jpg\"]}" +} \ No newline at end of file diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 00000000..24452e51 --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,99 @@ +@import "reset/_reset"; +@import "mixins/_borderbox"; +@import "mixins/_default"; +@import "mixins/_center"; +@import "mixins/_logo"; +@import "mixins/_blog-post"; +@import "mixins/_post-title"; +@import "mixins/_tablets"; +@import "mixins/_desktop"; +@import "variables/_colors"; +@import "variables/_text"; + +@include borderbox; + +body { + @include default; +} + +header { + @include logo; + width: 100%; + padding: 10px; + font-size: 15px; + font-weight: 400; + background: $header-bkg; + border-bottom: 1px solid $header-border; +} + +.intro { + @include vert-hori-center; + position: relative; + width: 100%; + height: 100px; + text-align: center; + background: $intro-bkg; + + h1 { + font-size: 1.75em; + font-weight: 700; + } + + h4 { + font-style: italic; + } +} + +/* -------------- MAIN CONTENT LAYOUT -------------- */ +#main-content { +@include blog-post; + width: 90%; + margin: 0 auto; + + .post-date { + text-align: $text-center; + } + + .topic { + font-size: $topic; + font-weight: 400; + text-transform: capitalize; + &:nth-of-type(2) { + margin-top: 8px; + } + } +} + +/* Tablets */ +@media (min-width: 720px) { + @include tab; +} + +/* Desktops */ +@media (min-width: 991px) { + @include desk; +} + + +/* Ad not present in mobile view */ +.distraction { + padding-top: 8%; + display: none; + font-size: 1.375em; + text-align: center; + background: #d4a5bc; + + & img { + max-width: 80%; + margin-top: 1%; + } +} + +/* ------------- FOOTER -------------- */ +footer { + padding: 8px; + font-size: 14px; + font-weight: 300; + text-align: justify; + background: $foot-color; +} diff --git a/sass/mixins/_blog-post.scss b/sass/mixins/_blog-post.scss new file mode 100644 index 00000000..4c0b140a --- /dev/null +++ b/sass/mixins/_blog-post.scss @@ -0,0 +1,15 @@ +@import "variables/_colors"; + +@mixin blog-post { + .blog-post { + @include post-title; + margin: 10px 0; + padding: 8px; + font-size: 1em; + font-weight: 300; + text-align: justify; + background: $blog-bkg; + border: 1px solid $black; + border-radius: 4px; + } +} diff --git a/sass/mixins/_borderbox.scss b/sass/mixins/_borderbox.scss new file mode 100644 index 00000000..7d4623d3 --- /dev/null +++ b/sass/mixins/_borderbox.scss @@ -0,0 +1,10 @@ +@mixin borderbox { + *, + *:before, + *:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + } +} diff --git a/sass/mixins/_center.scss b/sass/mixins/_center.scss new file mode 100644 index 00000000..e4f9dbe8 --- /dev/null +++ b/sass/mixins/_center.scss @@ -0,0 +1,9 @@ +@mixin vert-hori-center { + .center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80%; + } +} diff --git a/sass/mixins/_default.scss b/sass/mixins/_default.scss new file mode 100644 index 00000000..c59cf0ec --- /dev/null +++ b/sass/mixins/_default.scss @@ -0,0 +1,4 @@ +@mixin default { + font-family: 'Roboto Condensed', sans-serif; + line-height: 1.5; +} diff --git a/sass/mixins/_desktop.scss b/sass/mixins/_desktop.scss new file mode 100644 index 00000000..fc5ce573 --- /dev/null +++ b/sass/mixins/_desktop.scss @@ -0,0 +1,23 @@ +@mixin desk { + @media (min-width: 991px) { + #main-content { + flex-wrap: nowrap; /* mixin or variable */ + + .distraction { + display: block; + margin: 13px 1%; + height: 500px; + border-radius: 4px; + } + + .blog-post { + flex: 0 1 32%; + margin: 13px 1%; + + &:nth-of-type(1) {min-height: 450px;} + &:nth-of-type(2) {height: 270px;} + &:nth-of-type(3) {max-height: 480px;} + } // end blog-post + } // end main-content + } // end of query +} diff --git a/sass/mixins/_logo.scss b/sass/mixins/_logo.scss new file mode 100644 index 00000000..8cc73610 --- /dev/null +++ b/sass/mixins/_logo.scss @@ -0,0 +1,5 @@ +@mixin logo { + font-size: 1.125em; + font-weight: 400; + text-transform: capitalize; +} diff --git a/sass/mixins/_post-title.scss b/sass/mixins/_post-title.scss new file mode 100644 index 00000000..dfeaeb28 --- /dev/null +++ b/sass/mixins/_post-title.scss @@ -0,0 +1,10 @@ +@import "variables/_text"; + +@mixin post-title { + .post-title { + font-size: 1.375em; + font-weight: 400; + text-transform: capitalize; + text-align: $text-center; + } +} diff --git a/sass/mixins/_tablets.scss b/sass/mixins/_tablets.scss new file mode 100644 index 00000000..975aa6f6 --- /dev/null +++ b/sass/mixins/_tablets.scss @@ -0,0 +1,23 @@ +@mixin tab { + @media (min-width: 720px) { + #main-content { + width: 100%; + display: flex; + flex-flow: row wrap; + + .blog-post { + margin: 2%; + + &:nth-of-type(1) { + flex-grow: 1; + flex-basis: 35%; + } + + &:nth-of-type(2) { + flex-basis: 45%; + height: 250px; + } + } + } // end main-content + } // end query +} diff --git a/sass/reset/_reset.scss b/sass/reset/_reset.scss new file mode 100644 index 00000000..03b65899 --- /dev/null +++ b/sass/reset/_reset.scss @@ -0,0 +1,48 @@ +/* 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, strong, 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; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/sass/variables/_colors.scss b/sass/variables/_colors.scss new file mode 100644 index 00000000..89f169e9 --- /dev/null +++ b/sass/variables/_colors.scss @@ -0,0 +1,6 @@ +$header-border: #939393; +$header-bkg: #FFE497; +$intro-bkg: #B4D6A6; +$blog-bkg: #A0C3C8; +$black: #000; +$foot-color: #9DC4F8; diff --git a/sass/variables/_text.scss b/sass/variables/_text.scss new file mode 100644 index 00000000..826b7368 --- /dev/null +++ b/sass/variables/_text.scss @@ -0,0 +1,2 @@ +$text-center: center; +$topic: 1.125em;