diff --git a/index.html b/index.html index 9ae606a..51fb79c 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,15 @@ WDD 230: Web Frontend Development + +
-
- Matt -

Matthew Anderson

-
+ Matt +

Matthew Anderson

WDD 230: Web Frontend Development

+

Learning Activities

diff --git a/styles/base.css b/styles/base.css index 3abf259..6be7f4f 100644 --- a/styles/base.css +++ b/styles/base.css @@ -1,315 +1,95 @@ - html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - } - - body { - margin: 0; - } - main { +/* Common styles from aaa */ + +body { + font-family: 'Roboto', sans-serif; + margin: auto; +} + +hr.paralel { + border-top: .25rem solid #000000; +} + +header { + background-color: #8efbff; + margin: auto; + text-align: center; + justify-content: space-around; + display: flex; + padding: .5rem; +} + +header h1 { + padding-top: 3rem; + font-size: 3rem; + text-align: center; + vertical-align: middle; + color: white; + outline-color: black; + outline-width: 5px; +} + +nav { + background-color: black; + text-align: center; +} + +nav a { + color: white; + display: block; + padding: .5rem; + font-size: 2rem; +} + +main { + margin: auto; + text-align: center; + margin: 1rem; +} + +.card { + outline: auto; + outline-color: black; +} + +.card li { + list-style-type: none; +} + +.card h3 { + padding: .5rem; + font-size: 2rem; + background-color: #8efbff; + color: white; + margin-top: 0; +} + +footer { + font-family: 'Roboto', sans-serif; + background-color: #8efbff; + color: white; +} + +footer p { display: block; - } - - h1 { + text-align: center; + font-size: 1.5rem; +} + +/* Styles from aab - merged with aaa */ + +html { + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +h1 { font-size: 2em; margin: 0.67em 0; - } - +} - hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ - } - - /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - - pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ - } - - /* Text-level semantics - ========================================================================== */ - - /** - * Remove the gray background on active links in IE 10. - */ - - a { - background-color: transparent; - } - - /** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - - abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ - } - - /** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - - b, - strong { - font-weight: bolder; - } - - /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - - code, - kbd, - samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ - } - - /** - * Add the correct font size in all browsers. - */ - - small { - font-size: 80%; - } - - /** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sub { - bottom: -0.25em; - } - - sup { - top: -0.5em; - } - - /* Embedded content - ========================================================================== */ - - /** - * Remove the border on images inside links in IE 10. - */ - - img { - border-style: none; - } - - /* Forms - ========================================================================== */ - - /** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - - button, - input, - optgroup, - select, - textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ - } - - /** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - - button, - input { /* 1 */ +hr { + box-sizing: content-box; + height: 0; overflow: visible; - } - - /** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - - button, - select { /* 1 */ - text-transform: none; - } - - /** - * Correct the inability to style clickable types in iOS and Safari. - */ - - button, - [type="button"], - [type="reset"], - [type="submit"] { - -webkit-appearance: button; - } - - /** - * Remove the inner border and padding in Firefox. - */ - - button::-moz-focus-inner, - [type="button"]::-moz-focus-inner, - [type="reset"]::-moz-focus-inner, - [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; - } - - /** - * Restore the focus styles unset by the previous rule. - */ - - button:-moz-focusring, - [type="button"]:-moz-focusring, - [type="reset"]:-moz-focusring, - [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; - } - - /** - * Correct the padding in Firefox. - */ - - fieldset { - padding: 0.35em 0.75em 0.625em; - } - - /** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - - legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ - } - - /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - - progress { - vertical-align: baseline; - } - - /** - * Remove the default vertical scrollbar in IE 10+. - */ - - textarea { - overflow: auto; - } - - /** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - - [type="checkbox"], - [type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - } - - /** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - - [type="number"]::-webkit-inner-spin-button, - [type="number"]::-webkit-outer-spin-button { - height: auto; - } - - /** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - - [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ - } - - /** - * Remove the inner padding in Chrome and Safari on macOS. - */ - - [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - } - - /** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - - ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ - } - - /* Interactive - ========================================================================== */ - - /* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - - details { - display: block; - } - - /* - * Add the correct display in all browsers. - */ - - summary { - display: list-item; - } - - /* Misc - ========================================================================== */ - - /** - * Add the correct display in IE 10+. - */ - - template { - display: none; - } - - /** - * Add the correct display in IE 10. - */ - - [hidden] { - display: none; - } \ No newline at end of file +} + diff --git a/stylesold/base.css b/stylesold/base.css deleted file mode 100644 index 74d01c6..0000000 --- a/stylesold/base.css +++ /dev/null @@ -1,66 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: "Sansita", sans-serif; - margin: 0; /* Added from snippet D */ -} - -/* mobile **************************/ -header { - background-color: #bbb; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; - border: 1px solid rgba(0, 0, 0, 0.1); - margin-bottom: 3rem; /* Added from snippet D */ -} - -header, -main { - max-width: 767px; - margin: 0 auto; -} - -h1 { - font-size: 2rem; - margin: 0.67em 0; /* Added from snippet D */ -} - -nav { - background-color: #36454f; - margin: 0 auto; - max-width: 800px; -} -nav ul { - list-style-type: none; -} -nav a { - display: block; - color: #fff; - text-align: center; - padding: 1rem; - text-decoration: none; -} - -nav a:hover { - border: 1px solid #fff; -} - -.active { - color: yellow; -} - -/* Larger Views ******************************/ -@media (min-width: 640px) { - nav ul { - display: flex; - } - nav ul li { - flex: 1 1 100%; - } -} diff --git a/stylesold/baseold.css b/stylesold/baseold.css new file mode 100644 index 0000000..36f3cd8 --- /dev/null +++ b/stylesold/baseold.css @@ -0,0 +1,97 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Sansita", sans-serif; + margin: 0; /* Added from snippet D */ +} + +/* HEADER */ +header { + background-color: #bbb; + margin: auto; + display: flex; + align-items: center; + justify-content: space-around; + padding: 20px; + border: 1px solid rgba(0, 0, 0, 0.1); +} + + +header h1{ + padding-top: 3rem; + font-size: 3rem; + text-align: center; + vertical-align: middle; +} + +/* NAVIGATION */ + +nav { + background-color: #36454f; + margin: 0 auto; + max-width: 800px; +} +nav ul { + list-style-type: none; +} +nav a { + display: block; + color: #fff; + text-align: center; + padding: 1rem; + text-decoration: none; +} + +nav a:hover { + border: 1px solid #fff; +} + +h1 { + font-size: 2rem; + margin: 0; +} + +/* MAIN */ + +main { + margin: auto; + text-align: center; + margin: 2rem; +} +.card{ + outline: auto; + outline-color: #54b3f3; + outline-offset: 1%; + + align-self:last baseline; +} + +.card li{ + list-style-type: null; +} +.card h3{ + font-size: large; + margin: 0; +} + +/* FOOTER */ + +footer { + background-color: #bbb; + color: #fff; + text-shadow: #36454f 2px; +} + +/* Larger Views ******************************/ +@media (min-width: 640px) { + nav ul { + display: flex; + } + nav ul li { + flex: 1 1 100%; + } +} diff --git a/stylesold/baseold2.css b/stylesold/baseold2.css new file mode 100644 index 0000000..3abf259 --- /dev/null +++ b/stylesold/baseold2.css @@ -0,0 +1,315 @@ + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + body { + margin: 0; + } + main { + display: block; + } + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file