diff --git a/README.md b/README.md index 58b6358f0..91807a7e1 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,10 @@ # Static Site: Code Journal & Portfolio +__Learning Goal:__ Practice creating semantic HTML and applying visual styles with CSS. The goal is to explore the relationship between HTML and CSS, and how visual styles add to the semantics and hierarchy established by the foundational HTML. -You will create a _static_ web site using HTML & CSS. This static site will serve as the foundation for later projects, and will contain information about your programming projects and efforts at Ada. - -This is an individual, [stage 2](https://github.com/Ada-Developers-Academy/pedagogy/blob/master/rule-of-three.md) project. - -## Learning Goals: -- Practice creating semantic HTML -- Practice applying visual styles with CSS -- Use both HTML & CSS together to create a comprehensive design +You will create a _static_ web site using HTML & CSS. This static site will serve as the foundation for later projects, and will contain information about your programming projects and efforts at Ada. ## Project Requirements -This is an individual project. It consists of a baseline and a single wave. You are only permitted to use static HTML and CSS for this project. Preprocessors (haml, erb, sass, less, etc.) and Javascript of any time are not allowed. +This is an individual project. It consists of a baseline and a single wave. You are only permitted to use static HTML and CSS for this project. Preprocessors (haml, erb, sass, less, etc.) and Javascript are not allowed. ### Baseline - Create an `index.html` that has the necessary meta information to link a stylesheet called `styles.css`. @@ -27,18 +21,23 @@ This is an individual project. It consists of a baseline and a single wave. You - The site should follow best practices including: - All markup should be semantic, with consideration of hierarchy and accessibility. - CSS should be concise and well formatted - - Images and stylesheets should be kept in their own folders, called `images` and `stylesheets`, respectively. + - Images and stylesheets should be kept in their own folders, called `images` and `styles`, respectively. ### Optional Enhancements - Create a `blog/` or `code-journal/` directory. Within this directory... - create single `html` file for each entry in your blog/journal - - update the nav on the rest of your site to reference each entry as a sublist/subnav. - - update any tags with path references (`img`, `link`, `a` tags) to accomodate for the entries being in a different directory. -- Create any number of additional pages or directories. + - update the nav on the rest of your site to reference each entry as a sublist/subnav + - update any tags with path references (`img`, `link`, `a` tags) to accomodate for the entries being in a different directory +- Create any number of additional pages or directories + +### Hosting +Websites will be hosted using Github Pages. Before creating the repository, read [ Github Pages documentation ](https://pages.github.com/). + ### A Word of Caution Lots of developers find their initial foray into CSS frustrating. Every browser implements the CSS standard a little (or a lot) differently. Learning to manipulate elements and understand the _box model_ takes time. Floats can be especially challenging to developers new to CSS. For this project, focus on understanding the mechanics and semantics of HTML and CSS, and how the two work together. + ### Inspiration 👯 - [http://lizabinante.com/](http://lizabinante.com/) - [http://www.elenichappen.com/](http://www.elenichappen.com/) diff --git a/about.html b/about.html new file mode 100644 index 000000000..30e41c26c --- /dev/null +++ b/about.html @@ -0,0 +1,51 @@ + + + + + 🏳️‍🌈J-C-L:Portfolio + + + + + +
+ + + + + +
+ +
+ +

About Janice...

+

This site, like its owner, is...

+ +
+ work in progress sign +
+
+ + + + + diff --git a/blog.html b/blog.html new file mode 100644 index 000000000..ac23ac40a --- /dev/null +++ b/blog.html @@ -0,0 +1,88 @@ + + + + + 🏳️‍🌈J-C-L:Portfolio + + + + + +
+ + + + + +
+ +
+ +
+
+ +

Happy-Making Things:

+ +
+ +
+ +
+
+ +
+

Folk Dancing:

+

+ "Hearties avast gally jib brigantine scourge of the seven seas hardtack weigh anchor coxswain Gold Road. Yo-ho-ho port driver pillage booty scuttle reef ballast barkadeer hang the jib. Spanker jury mast line weigh anchor yardarm American Main bilge aft jib crow's nest." +

+
+ + +
+
+ +
+

Puzzles:

+

+ "Do what you can, with what you have, where you are. First we form habits, then they form us. Conquer your bad habits, or they will eventually conquer you. Imagine you only have one year to live. What important things would you be doing? How would you be allotting your time to accomplish the most you could? This exercise is one method of going after your priorities." +

+
+ + + +
+
+ +
+

Travel

+

+ "For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us." +

+
+
+
+
+ + + + + diff --git a/images/Blue-owl.jpg b/images/Blue-owl.jpg new file mode 100644 index 000000000..5ce10ec00 Binary files /dev/null and b/images/Blue-owl.jpg differ diff --git a/images/Colorful-bird-1.jpg b/images/Colorful-bird-1.jpg new file mode 100644 index 000000000..b0ecdf06b Binary files /dev/null and b/images/Colorful-bird-1.jpg differ diff --git a/images/DanceMath.jpg b/images/DanceMath.jpg new file mode 100644 index 000000000..ccedd48d9 Binary files /dev/null and b/images/DanceMath.jpg differ diff --git a/images/EinsteinFishQuote.jpeg b/images/EinsteinFishQuote.jpeg new file mode 100644 index 000000000..219ddaeb5 Binary files /dev/null and b/images/EinsteinFishQuote.jpeg differ diff --git a/images/EinsteinFishQuote2.jpeg b/images/EinsteinFishQuote2.jpeg new file mode 100644 index 000000000..74afbd7ba Binary files /dev/null and b/images/EinsteinFishQuote2.jpeg differ diff --git a/images/FormulaBlackboard1.jpeg b/images/FormulaBlackboard1.jpeg new file mode 100644 index 000000000..f6fe75142 Binary files /dev/null and b/images/FormulaBlackboard1.jpeg differ diff --git a/images/Fractal-1.jpeg b/images/Fractal-1.jpeg new file mode 100644 index 000000000..2e04a5393 Binary files /dev/null and b/images/Fractal-1.jpeg differ diff --git a/images/Fractal-2.jpeg b/images/Fractal-2.jpeg new file mode 100644 index 000000000..ea750e5e5 Binary files /dev/null and b/images/Fractal-2.jpeg differ diff --git a/images/Fractal-3.jpeg b/images/Fractal-3.jpeg new file mode 100644 index 000000000..caa4497aa Binary files /dev/null and b/images/Fractal-3.jpeg differ diff --git a/images/Fractal-4.jpeg b/images/Fractal-4.jpeg new file mode 100644 index 000000000..5abf5d3eb Binary files /dev/null and b/images/Fractal-4.jpeg differ diff --git a/images/Fractal-5.jpeg b/images/Fractal-5.jpeg new file mode 100644 index 000000000..52b5a1c6f Binary files /dev/null and b/images/Fractal-5.jpeg differ diff --git a/images/Fractal-6.jpg b/images/Fractal-6.jpg new file mode 100644 index 000000000..569140aad Binary files /dev/null and b/images/Fractal-6.jpg differ diff --git a/images/India-1.jpg b/images/India-1.jpg new file mode 100755 index 000000000..60ca397fb Binary files /dev/null and b/images/India-1.jpg differ diff --git a/images/JandMdancing.jpg b/images/JandMdancing.jpg new file mode 100644 index 000000000..a4c963cd3 Binary files /dev/null and b/images/JandMdancing.jpg differ diff --git a/images/LillyPadFrog.jpg b/images/LillyPadFrog.jpg new file mode 100755 index 000000000..476259722 Binary files /dev/null and b/images/LillyPadFrog.jpg differ diff --git a/images/MandalaDance13.jpg b/images/MandalaDance13.jpg new file mode 100644 index 000000000..3bccb4a97 Binary files /dev/null and b/images/MandalaDance13.jpg differ diff --git a/images/MandalaDance30.jpg b/images/MandalaDance30.jpg new file mode 100644 index 000000000..37c1be085 Binary files /dev/null and b/images/MandalaDance30.jpg differ diff --git a/images/Owl-1.jpg b/images/Owl-1.jpg new file mode 100644 index 000000000..5f320ebad Binary files /dev/null and b/images/Owl-1.jpg differ diff --git a/images/Owl-2.jpg b/images/Owl-2.jpg new file mode 100644 index 000000000..e823ff12d Binary files /dev/null and b/images/Owl-2.jpg differ diff --git a/images/Owl-3.jpg b/images/Owl-3.jpg new file mode 100644 index 000000000..7e44988fe Binary files /dev/null and b/images/Owl-3.jpg differ diff --git a/images/Owl-family.jpg b/images/Owl-family.jpg new file mode 100644 index 000000000..02d777898 Binary files /dev/null and b/images/Owl-family.jpg differ diff --git a/images/mandelbrot-set_1.png b/images/mandelbrot-set_1.png new file mode 100644 index 000000000..5a7922088 Binary files /dev/null and b/images/mandelbrot-set_1.png differ diff --git a/images/mandelbrot-set_2.jpeg b/images/mandelbrot-set_2.jpeg new file mode 100644 index 000000000..f5c754812 Binary files /dev/null and b/images/mandelbrot-set_2.jpeg differ diff --git a/images/mandelbrot-set_3.jpeg b/images/mandelbrot-set_3.jpeg new file mode 100644 index 000000000..af112f729 Binary files /dev/null and b/images/mandelbrot-set_3.jpeg differ diff --git a/images/mandelbrot-set_4.jpeg b/images/mandelbrot-set_4.jpeg new file mode 100644 index 000000000..583f6c605 Binary files /dev/null and b/images/mandelbrot-set_4.jpeg differ diff --git a/images/math-object.gif b/images/math-object.gif new file mode 100644 index 000000000..70bd3d506 Binary files /dev/null and b/images/math-object.gif differ diff --git a/images/mystery-hunt-2014-1.jpg b/images/mystery-hunt-2014-1.jpg new file mode 100644 index 000000000..c791b5dde Binary files /dev/null and b/images/mystery-hunt-2014-1.jpg differ diff --git a/images/mystery-hunt-2014-2.jpg b/images/mystery-hunt-2014-2.jpg new file mode 100644 index 000000000..dc1eeecd8 Binary files /dev/null and b/images/mystery-hunt-2014-2.jpg differ diff --git a/images/mystery-hunt-2014-3.jpg b/images/mystery-hunt-2014-3.jpg new file mode 100644 index 000000000..a9dd15bef Binary files /dev/null and b/images/mystery-hunt-2014-3.jpg differ diff --git a/images/mystery-hunt-2014-4.jpg b/images/mystery-hunt-2014-4.jpg new file mode 100644 index 000000000..2e96f6680 Binary files /dev/null and b/images/mystery-hunt-2014-4.jpg differ diff --git a/images/rick-shaw-1.jpeg b/images/rick-shaw-1.jpeg new file mode 100644 index 000000000..f35ffae94 Binary files /dev/null and b/images/rick-shaw-1.jpeg differ diff --git a/images/ride-share-monkey.jpg b/images/ride-share-monkey.jpg new file mode 100755 index 000000000..2f27e8e19 Binary files /dev/null and b/images/ride-share-monkey.jpg differ diff --git a/images/ride-share.jpg b/images/ride-share.jpg new file mode 100755 index 000000000..1bef26b26 Binary files /dev/null and b/images/ride-share.jpg differ diff --git a/images/scrabble-1.jpeg b/images/scrabble-1.jpeg new file mode 100644 index 000000000..78adced32 Binary files /dev/null and b/images/scrabble-1.jpeg differ diff --git a/images/scrabble-2.jpeg b/images/scrabble-2.jpeg new file mode 100644 index 000000000..d5ebe61de Binary files /dev/null and b/images/scrabble-2.jpeg differ diff --git a/images/scrabble-3.jpeg b/images/scrabble-3.jpeg new file mode 100644 index 000000000..0177f3b10 Binary files /dev/null and b/images/scrabble-3.jpeg differ diff --git a/images/solar-system-1.png b/images/solar-system-1.png new file mode 100644 index 000000000..cd51b8140 Binary files /dev/null and b/images/solar-system-1.png differ diff --git a/images/solar-system-2.jpeg b/images/solar-system-2.jpeg new file mode 100644 index 000000000..c79559b57 Binary files /dev/null and b/images/solar-system-2.jpeg differ diff --git a/images/solar-system-3.jpeg b/images/solar-system-3.jpeg new file mode 100644 index 000000000..4f38aaaaf Binary files /dev/null and b/images/solar-system-3.jpeg differ diff --git a/images/solar-system-4.jpeg b/images/solar-system-4.jpeg new file mode 100644 index 000000000..f9a490ef2 Binary files /dev/null and b/images/solar-system-4.jpeg differ diff --git a/images/solar-system-5.jpg b/images/solar-system-5.jpg new file mode 100644 index 000000000..2ee506bc4 Binary files /dev/null and b/images/solar-system-5.jpg differ diff --git a/images/solar-system-6.jpg b/images/solar-system-6.jpg new file mode 100644 index 000000000..cbd1d01d2 Binary files /dev/null and b/images/solar-system-6.jpg differ diff --git a/images/solar-system-7.jpg b/images/solar-system-7.jpg new file mode 100644 index 000000000..396f67205 Binary files /dev/null and b/images/solar-system-7.jpg differ diff --git a/images/solar-system-square.jpg b/images/solar-system-square.jpg new file mode 100644 index 000000000..c71524211 Binary files /dev/null and b/images/solar-system-square.jpg differ diff --git a/images/taxi-1.jpeg b/images/taxi-1.jpeg new file mode 100644 index 000000000..6102971c0 Binary files /dev/null and b/images/taxi-1.jpeg differ diff --git a/images/taxi-2.jpeg b/images/taxi-2.jpeg new file mode 100644 index 000000000..f52db1974 Binary files /dev/null and b/images/taxi-2.jpeg differ diff --git a/images/under-constrcution-1.jpeg b/images/under-constrcution-1.jpeg new file mode 100644 index 000000000..9c3f162ea Binary files /dev/null and b/images/under-constrcution-1.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..255a6af19 --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + + 🏳️‍🌈J-C-L:Portfolio + + + + + +
+ + + + + +
+ +
+ +
+ Owl flying +
+ +
+

Welcome...

+

“If you are a dreamer come in,
+ If you are a dreamer, a wisher, a liar,
+ A hope-er a pray-er a magic-bean-buyer...
+ If youre a pretender, come sit by my fire
+ For we have some flax golden tales to spin.
+ Come in!
+ Come in!”
+

+

― Shel Silverstein

+
+ +
+

+ A ship in port is safe, but that's not what ships are built for. +

+

- Grace Hopper

+
+ +
+ + + + + + diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 000000000..f1e89e421 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,81 @@ + + + + + 🏳️‍🌈J-C-L:Portfolio + + + + + +
+ + + + + +
+ +
+ +
+
+ +

PROJECTS

+ +
+ +
+ +
+ +
+ + + +
+ +
+ + + + + +
+ +
+ + +
+
+
+ + + + + diff --git a/stylesheets/main.css b/stylesheets/main.css new file mode 100644 index 000000000..33d094595 --- /dev/null +++ b/stylesheets/main.css @@ -0,0 +1,339 @@ + +@import url('https://fonts.googleapis.com/css?family=Rokkitt'); +@import url('https://fonts.googleapis.com/css?family=Sacramento'); + +header, footer { + font-family: "Sacramento"; + font-size: 1rem; +} +header ul{ + font-size: 1.4rem; +} + +main{ + font-family: "Rokkitt"; + font-size: 1.3rem; +} + +main h1{ + font-size: 3.5rem; +} + +header { + position: fixed; + top: 0px; + width: 100%; + height: 5.6rem; + background-color: black; + z-index:1000; + opacity: 0.85; +} + +/*.black-under-header{ +background-color: black; +position:absolute; +top: 0; +width: 100%; +height: 5.6rem; +}*/ + +a:link { + color: #1820e6; +} + +a:visited{ + color: #5481f2; +} + +a:hover { + color: lightblue; +} + +.logo { + margin-top: 0; + float:left; + width: 40%; +} + +.logo img{ + float:left; + height: 5.6rem; + max-width: 40%; + margin-right: 4%; +} + +.logo div{ + display:inline-block; + margin-top: 5px; +} + +.name h2{ + margin: 0} +} + + +.logo img { + display: inline-block; + vertical-align: top; +} + +header nav { + margin-right: 3%; + float:right; +} + +header ul { + margin: 2.225rem 0 0 0; + list-style-type: none; + height:5.6rem; +} + +header li { + padding-right:25px; + display: inline-block; +} + +a { + text-decoration: none; +} + + +body{ + background-image:url(http://weather.jimlittle.net/web/pages/backgrounds/gradient_background2.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + margin-top:5.6rem; + padding-bottom:3rem; +} + +.owl{ + position: absolute; + right:.1%; + top:10%; + transform: scale(0.6, 0.6); +} + +.welcome-message { + padding: 3rem; + text-align: left; + width: 40%; + margin-top: 6rem; + margin-left: 10%; + color:white; +} + +.ships{ + color:white; + float:right; + font-size: 1.4rem; + margin-right: 7%; + margin-top: 10%; +} + +/************************************/ + +.projects-title{ + margin-top: 8.5rem; + text-align: center; +} + +.all-images{ + position:relative; +} + +.project-image section, .post-image section{ + display: inline-block; + width: 26%; + height: 22vw; + border: 3px solid black; + border-radius: 30%; + overflow:hidden; +} + +.first-project, .first-post{ + /*Unfortunately, css does not seem to support alt text for background images.*/ + background-image:url(../images/scrabble-2.jpeg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + top: 0vw; + left: 5%; +} + +.project section { + background-color: white; + border:none; + border-radius: 0; + height: 4vw; + line-height: 4vw; + margin-top: 4vw; + padding-bottom: 9.27vw; + position: relative; + text-align:center; + opacity: 0; + width: 100%; +} + + +.hidden:hover { + color:black; + font-size: 2rem; + opacity: .6; + transition: opacity .5s ease-in-out; +} + +.second-project, .second-post{ + background-image:url(../images/ride-share-monkey.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + top: 15vw; + left: 37%; +} + +.third-project, .third-post{ + background-image:url(../images/solar-system-6.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: absolute; + top: 30vw; + left:69%; +} + +.project-image img{ + width:100%; +} + +/*************************************/ + +footer section{ + border-top: 1.5px solid black; + height: 7vw; +} + +#footer-portfolio{ + margin-top: 83vw; +} + +#footer-index{ + margin-top: 50vw; +} + +#footer-blog{ + margin-top: 90vw; +} + +#footer-about{ + margin-top: 30vw; +} + +footer h4, footer p{ + margin: 0 0 0 5%; + display: inline; + font-size: 1.5rem; +} + +footer h4{ + font-size: 1.2rem; +} + +.thank-you{ + line-height: 7vw; + padding-left: 23%; +} + +.footer-name{ + display: block; + line-height: .1vw; +} + +/*************************************/ + +.blog-title{ + margin-top: 8.5rem; + padding-left: 5%; +} + + +.first-post{ + background-image:url(../images/MandalaDance30.jpg); +} + +.second-post{ + background-image:url(../images/mystery-hunt-2014-1.jpg); +} + +.third-post{ + background-image:url(../images/India-1.jpg); +} + +.first-post{ + position: absolute; + top: 0vw; + left: 5%; +} + +.second-post{ + position: absolute; + top: 0vw; + left: 5%; +} + +.first-post{ + position: absolute; + top: 0vw; + left: 5%; +} + +.second-post{ + position: absolute; + top: 25vw; + left: 5%; +} + +.third-post{ + position: absolute; + top: 50vw; + left: 5%; +} + +section.post:hover{ + opacity:.5; +} + +article.post{ + display:inline; + float:right; + margin-top: 2vw; + margin-bottom: 4vw; + padding-right: 5%; + width:60%; +} + + +/*************************************/ + +.about h1{ + margin-top: 10vw; + margin-left: 10vw; +} + +.about h2{ + margin-left: 20vw; +} + +.about section{ + width:50%; + height:auto; + margin-left: auto; + margin-right: auto; + margin-top: 5vw; +} + +.about img{ + width:100%; +} diff --git a/stylesheets/normalize.css b/stylesheets/normalize.css new file mode 100644 index 000000000..29be5587a --- /dev/null +++ b/stylesheets/normalize.css @@ -0,0 +1,463 @@ + + +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +/* Document + ========================================================================== */ + +html { + font-family: sans-serif; /* 1 */ + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +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 + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/** + * 1. Remove the bottom border in Firefox 39-. + * 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 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * 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 style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * 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 + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 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; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * 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; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 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 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +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 and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[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 IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +}