diff --git a/Loann-Shane/README.md b/Loann-Shane/README.md new file mode 100644 index 0000000..a89285e --- /dev/null +++ b/Loann-Shane/README.md @@ -0,0 +1,13 @@ ++### A project for Code Fellows B25 by Loann Lam and Shane Kalles. ++ ++Refactor a team's project. ++ ++We refactored Levi and Galen's CSS project. We found many redundant naming schemes within the main element. Most were to style each article rather than think of each as modular. We continued to use the column choice that they had made. ++ ++We were able to remove a bit of CSS code from the main and normalizer files. and found that we could remove extra class names and refer to the element tags and make our style choices to the children or classes from there. ++ ++Resources: ++* [UX Design](http://www.anotheruiguy.com/ux-design-dev/_book/) ++* [CSS Selectors](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048) ++ + diff --git a/Loann-Shane/index.html b/Loann-Shane/index.html new file mode 100644 index 0000000..df60142 --- /dev/null +++ b/Loann-Shane/index.html @@ -0,0 +1,61 @@ + + + + Core CSS Test + + + + + + + +
+
+ +
+ + +
+ +
+
+
+
+
+ +

Article Title

+

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 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Read More...

+
+
+ +

Article Title

+

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 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Read More...

+
+
+ +

Article Title

+

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 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Read More...

+
+
+ +
+ + diff --git a/Loann-Shane/main.css b/Loann-Shane/main.css new file mode 100644 index 0000000..ff1bb09 --- /dev/null +++ b/Loann-Shane/main.css @@ -0,0 +1,149 @@ +/* COLUMN SETUP */ +.col { + float: left; + margin: 1% 0 1% 3%; +} +.col:first-child { margin-left: 0; } + +/****** BASE STYLES ********/ + +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +body { + color: #333; + font: 14px/21px 'Open Sans', 'Roboto', Helvetica, sans-serif,;; +} +a, a:visited { + color: #000000; + text-decoration: underline; +} +a:hover, a.on { + color: purple; + background-color: lightgray; +} + +/****** HEADER ********/ + +header{ + width: 100%; + background-color: white; +} +.widget img { + margin-left: 4%; +} +.widget__header { + float: right; + margin: 2% 5% 2% 0; + background-color: white; +} +.widget__input { + display: inline-block; + border: none; + border-bottom: 1px solid #999; +} +.widget__input--btn { + display: inline-block; + width: 20px; + background-color: transparent; + background-image: url('search_btn@2x.png'); + background-size: 20px; + background-repeat: no-repeat; + border: none; +} + +/****** NAVIGATION ********/ + +nav { + width: 100%; + background-color: hsla(170, 50%, 50%, 1); +} +nav a { + text-align: center; + display: inline-block; + background-color: #eee; + margin: 1% 3% 1% 3%; + text-transform: uppercase; + padding: 1% 2%; + text-decoration: none; +} +nav a:hover { + background-color: white; + color: black; +} + +/****** BLOG POSTS ********/ + +.article-roll { + width: 100%; + position: relative; + display: inline-block; + background-color: lightgrey; +} +.article-roll__blog-post { + padding: 1% 3%; + margin: 2%; + background-color: white; +} +.article-roll__blog-post img { + width: 35%; + float: right; + margin: 0 0 20% 5%; +} + +/****** ASIDES ********/ + +.module-roll { + width: 100%; + background-color: hsla(170, 50%, 50%, 1); +} +.module-roll__item { + background-color: hsla(170, 50%, 95%, 1); + padding: 4% 8%; + margin: 4%; +} + +/* GRID OF EIGHT */ +.span_8_of_8 { + width: 100%; +} +.span_5_of_8 { + width: 56%; +} +.span_3_of_8 { + width: 35%; +} + +/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ + +@media only screen and (max-width: 480px) { + .col { + margin: 1% 0 1% 0%; + } +} + +@media only screen and (max-width: 480px) { + .span_8_of_8 { + width: 100%; + } + .span_5_of_8 { + width: 100%; + } + .span_3_of_8 { + width: 100%; + } + nav{ + margin: 1%; + } + nav a { + display: block; + text-align: center; + width: 100% + } + .widget__input, + .widget__input--btn{ + display: none; + } +} diff --git a/Loann-Shane/normalize.min.css b/Loann-Shane/normalize.min.css new file mode 100644 index 0000000..b8c4730 --- /dev/null +++ b/Loann-Shane/normalize.min.css @@ -0,0 +1,202 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +figure, +header, +main, +nav, +section, + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +input { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} diff --git a/Loann-Shane/placeholder_logo.png b/Loann-Shane/placeholder_logo.png new file mode 100644 index 0000000..92c2e5b Binary files /dev/null and b/Loann-Shane/placeholder_logo.png differ diff --git a/Loann-Shane/search_btn@2x.png b/Loann-Shane/search_btn@2x.png new file mode 100644 index 0000000..72042b4 Binary files /dev/null and b/Loann-Shane/search_btn@2x.png differ