diff --git a/01/style.css b/01/style.css index faa3160d..36f760ee 100644 --- a/01/style.css +++ b/01/style.css @@ -1,23 +1,24 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } .content { - background-color: #fff; - min-height: 320px; - min-width: 320px; - max-width: 600px; - text-align: justify; + background-color: #fff; + min-height: 320px; + min-width: 320px; + max-width: 600px; + text-align: justify; } .content::before { - float: left; - display: block; - content: ''; - height: 0; - border: 150px solid #dcdcdc; - border-right-color: transparent; - border-bottom-color: transparent; -} \ No newline at end of file + float: left; + display: block; + content: ''; + height: 0; + border: 150px solid #dcdcdc; + border-right-color: transparent; + border-bottom-color: transparent; + shape-outside: polygon(0 0, 100% 0, 0 100%); +} diff --git a/02/index.html b/02/index.html index 1e60de72..f8985356 100644 --- a/02/index.html +++ b/02/index.html @@ -1,5 +1,6 @@ + @@ -7,10 +8,14 @@ devmentor.pl - HTML & CSS: RWD - #02 + + +
A
C
B
+ \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..4c02f50c 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,26 +1,28 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } -.a, .b, .c { - border: 3px solid transparent; - min-height: 50px; +.a, +.b, +.c { + border: 3px solid transparent; + min-height: 50px; - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } .a { - border-color: #ffffba + border-color: #ffffba; } .b { - border-color: #ffdfba; + border-color: #ffdfba; } .c { - border-color: #baffc9; + border-color: #baffc9; } \ No newline at end of file diff --git a/02/styles/mobile.css b/02/styles/mobile.css new file mode 100644 index 00000000..96a7d64e --- /dev/null +++ b/02/styles/mobile.css @@ -0,0 +1,23 @@ +body { + display: grid; + grid-template-areas: + 'a-top' + 'a-middle' + 'a-bottom'; + grid-template-rows: + 50vh + 50vh + 50vh; +} + +.a { + grid-area: a-top; +} + +.b { + grid-area: a-middle; +} + +.c { + grid-area: a-bottom; +} diff --git a/02/styles/tablet.css b/02/styles/tablet.css new file mode 100644 index 00000000..44f6806a --- /dev/null +++ b/02/styles/tablet.css @@ -0,0 +1,23 @@ +body { + grid-template-columns: 1fr 1fr; + grid-template-rows: + 50vh + 50vh; + grid-template-areas: + 'a-top a-top' + 'a-bottom a-middle'; + max-width: 1200px; + margin: 0 auto; +} + +.a { + grid-area: a-top; +} + +.b { + grid-area: a-middle; +} + +.c { + grid-area: a-bottom; +} diff --git a/03/img/fog-8519078_1280.jpg b/03/img/fog-8519078_1280.jpg new file mode 100644 index 00000000..725887c1 Binary files /dev/null and b/03/img/fog-8519078_1280.jpg differ diff --git a/03/img/fog-8519078_640.jpg b/03/img/fog-8519078_640.jpg new file mode 100644 index 00000000..8bae3eaf Binary files /dev/null and b/03/img/fog-8519078_640.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..dad056f0 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,39 @@ + + + + + + devmentor.pl - HTML & CSS: RWD - #03 + - -
T
-
P
- V + +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, eaque? Unde quam praesentium esse + saepe minima veritatis, aspernatur officia eligendi perspiciatis aliquam. Expedita vitae repellat natus + officia eligendi molestiae rem quaerat reprehenderit unde, placeat sequi voluptatem itaque, illo magnam. + Iure, necessitatibus totam odio obcaecati accusantium perferendis excepturi, laboriosam deserunt provident + sequi officiis nulla dolor culpa dicta quae maxime? Quaerat, animi.

+
+
+ + + + zimowy las we mgle + +
+ + \ No newline at end of file diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..7c2fa542 --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,7 @@ +body { + grid-template-areas: + 'P V' + 'T T'; + grid-template-columns: 1fr 1fr; + max-width: 1400px; +} diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..6e919e7b --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,46 @@ +body { + display: grid; + grid-template-areas: + 'P' + 'T' + 'V'; +} + +.p { + grid-area: P; + position: relative; + height: 0; + padding-bottom: calc(3 / 4 * 100%); +} + +.p picture, +.p img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.p img { + object-fit: cover; +} + +.t { + grid-area: T; +} + +.v { + grid-area: V; + position: relative; + height: 0; + padding-bottom: calc(315 / 560 * 100%); +} + +.v iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; +} diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..91b55f40 --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,7 @@ +body { + grid-template-columns: minmax(200px, 50vw) auto; + grid-template-areas: + 'P T' + 'V T'; + margin: 0 auto; +} diff --git a/04/index.html b/04/index.html index e3ca9540..a8dd4f66 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,40 @@ + + + + + devmentor.pl - HTML & CSS: RWD - #04 + - + + \ No newline at end of file diff --git a/04/styles/desktop.css b/04/styles/desktop.css new file mode 100644 index 00000000..8d4e6024 --- /dev/null +++ b/04/styles/desktop.css @@ -0,0 +1,68 @@ +.burger-icon { + display: none; +} + +.nav { + flex-direction: row; + margin: 5px; + background-color: transparent; + transform: translateX(0); +} + +.nav__item { + margin-left: 50px; +} + +.nav__link { + color: var(--color-default); + border-top: 3px solid transparent; + transition: color 0.3s, border-top-color 0.3s; +} + +.nav__item:hover > .nav__link { + color: var(--color-active); + border-top-color: var(--color-active); +} + +.nav__link--start { + color: var(--color-active); +} + +.nav__item--dropdown > .nav__link::after { + transform: rotate(-90deg); + transition: transform 0.3s ease; +} + +.nav__item--dropdown:hover > .nav__link::after { + transform: rotate(90deg); +} + +.nav__dropdown { + display: none; + position: absolute; + top: 100%; + left: 0; + margin-left: 0; + background-color: var(--color-default); + min-width: 270px; +} + +.nav__item--dropdown:hover > .nav__dropdown { + display: block; +} + +.dropdown__item { + position: relative; +} + +.nav__link--dropdown { + display: block; + padding: 10px 20px; + color: var(--color-dropdown-text); + text-decoration: none; + text-transform: capitalize; +} + +.nav__link--dropdown:hover { + color: var(--color-active); +} diff --git a/04/styles/mobile.css b/04/styles/mobile.css new file mode 100644 index 00000000..71272fcc --- /dev/null +++ b/04/styles/mobile.css @@ -0,0 +1,90 @@ +:root { + --color-active: rgb(0, 154, 225); + --color-default: rgb(51, 51, 51); + --color-dropdown-text: rgb(246, 246, 246); +} + +body { + overflow: hidden; +} + +.burger-icon { + position: relative; + margin: 30px; + width: 40px; + height: 35px; + border: 0; + border-top: 5px solid var(--color-default); + background: transparent; + transition: 0.3s transform; +} + +.burger-icon::before, +.burger-icon::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-top: 5px solid var(--color-default); + transform: translateY(10px); +} + +.burger-icon::after { + transform: translateY(25px); + transition: 0.3s transform; +} + +.burger-icon:focus { + transform: rotate(45deg) translateY(5px); + border: none; +} + +.burger-icon:focus::after { + transform: rotate(-90deg) translateX(-10px); +} + +.burger-icon:focus ~ .nav, +.nav:hover { + transform: translateX(0); +} + +.nav { + display: flex; + flex-direction: column; + top: 20px; + height: 100%; + width: 100%; + padding: 10px; + background-color: var(--color-default); + transform: translateX(-100%); + transition: 0.3s transform; +} + +.nav__item { + position: relative; + text-transform: uppercase; +} + +.nav__link { + display: inline-block; + padding: 20px; + text-decoration: none; + color: var(--color-dropdown-text); +} + +.nav__item:focus > .nav__link, +.nav__link:focus { + color: var(--color-active); +} + +.nav__item--dropdown > .nav__link::after { + content: '>'; + display: inline-block; + margin-left: 10px; + transform: rotate(90deg); +} + +.nav__dropdown { + margin-left: 50px; +} diff --git a/04/styles/normalize.css b/04/styles/normalize.css new file mode 100644 index 00000000..08675b0b --- /dev/null +++ b/04/styles/normalize.css @@ -0,0 +1,352 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; + padding: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + 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 + ========================================================================== */ + +/** + * 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 + ========================================================================== */ + +/** + * 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; +} diff --git a/04/styles/reset.css b/04/styles/reset.css new file mode 100644 index 00000000..404d9af1 --- /dev/null +++ b/04/styles/reset.css @@ -0,0 +1,293 @@ +html, +body, +body div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +menu, +nav, +section, +time, +mark, +audio, +video, +details, +summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, +article, +aside, +figure, +footer, +header, +nav, +section, +details, +summary { + display: block; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +img { + max-width: 100%; +} + +ul { + list-style: none; +} /* we'll restore bullets as needed for content */ + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +table { + border-collapse: separate; + border-spacing: 0; + text-align: left; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} +td img { + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #999; + margin: 1rem 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre-line; +} + +input[type='radio'] { + vertical-align: text-bottom; +} +input[type='checkbox'] { + vertical-align: bottom; +} + +small { + font-size: 0.8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: 0.8rem; + line-height: 0; + position: relative; +} +sup { + top: -0.5rem; +} +sub { + bottom: -0.25rem; +} + +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +label, +input[type='button'], +input[type='submit'], +input[type='file'], +button { + cursor: pointer; +} + +button, +input, +select, +textarea { + margin: 0; +} + +ins { + background-color: var(--highlight-color); + color: #000; + text-decoration: none; +} +mark { + background-color: var(--highlight-color); + color: #000; + font-style: italic; + font-weight: bold; +} + +blockquote { + padding: 2rem; + border-left: 1px solid #333; +} + +.clearfix:after { + content: ''; + display: table; + clear: both; +} /* https://css-tricks.com/snippets/css/clear-fix/ */ + +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; +} + +p { + text-wrap: pretty; +} + +@media (prefers-reduced-motion: no-preference) { + :has(:target) { + scroll-behavior: smooth; + } +} + +/* ———— END THE GENERIC RESETS ———— */ + +:root { + --font-system: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol'; /* https://css-tricks.com/snippets/css/system-font-stack */ + --text-color: #333; + --featured-color: #03f; + --featured-color-hover: #69f; + --highlight-color: #fcd700; +} + +body { + font-size: 16px; + font-family: var(--font-system); + color: var(--text-color); +} + +a { + color: var(--featured-color); +} +a:hover { + color: var(--featured-color-hover); +} + +@media screen and (max-width: 480px) { +} + +@media print { +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..3bd96ca7 --- /dev/null +++ b/05/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + #05 HTML i CSS: Responsywność + + + +
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+

+

+

+
+
+
+ + + + \ No newline at end of file diff --git a/05/styles/desktop.css b/05/styles/desktop.css new file mode 100644 index 00000000..e3356bb9 --- /dev/null +++ b/05/styles/desktop.css @@ -0,0 +1,62 @@ +.container, +.box, +.content { + padding: 5px; +} + +.header__burger { + display: none; +} + +.box { + max-width: 1000px; +} + +.content { + min-height: 50px; +} + +.header__box { + display: flex; + justify-content: space-between; + padding: 5px 0; +} + +.header__logo { + display: block; + margin-left: 0; + width: 20%; +} + +.header__nav { + order: 0; + width: 40%; + margin-right: 0; + transform: translateX(0); +} + +.article__box { + flex-direction: row; + justify-content: space-between; + padding: 5px 0; +} + +.article__text { + min-height: 300px; + min-width: 49%; +} + +.testimonial__box { + flex-direction: row; + justify-content: space-evenly; +} + +.testimonial__text { + margin: 5px; + min-height: 300px; + width: 33%; +} + +.footer__copyrights { + width: 20%; +} diff --git a/05/styles/mobile.css b/05/styles/mobile.css new file mode 100644 index 00000000..2cc4cea9 --- /dev/null +++ b/05/styles/mobile.css @@ -0,0 +1,119 @@ +.container, +.box, +.content { + margin: 0; + padding: 0; + border: 4px solid; +} + +.container { + border-color: rgb(14, 209, 69); + width: 100%; + margin: 0; +} + +.box { + margin: 0 auto; + border-color: rgb(0, 168, 243); +} + +.content { + min-height: 40px; + background-color: rgb(255, 202, 24); + border-color: rgb(255, 202, 24); +} + +.header__burger { + position: relative; + margin: 5px; + width: 40px; + height: 35px; + border: 0; + border-top: 5px solid rgb(51, 51, 51); + background: transparent; + transition: 0.3s transform; +} + +.header__burger::before, +.header__burger::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-top: 5px solid rgb(51, 51, 51); + transform: translateY(10px); +} + +.header__burger::after { + transform: translateY(25px); + transition: 0.3s transform; +} + +.header__burger:focus { + transform: rotate(45deg) translateY(5px); + border: none; +} + +.header__burger:focus::after { + transform: rotate(-90deg) translateX(-10px); +} + +.header__burger:focus + .header__nav { + transform: translateX(0); +} + +.header__logo { + display: none; +} + +.header__box { + display: grid; + grid-template-columns: 2fr 2fr 1fr 1fr; + place-items: center; +} + +.header__nav { + grid-column: 2; + order: -1; + margin: 5px; + width: 100%; + background-color: rgb(255, 202, 24); + border-color: rgb(255, 202, 24); + transform: translateX(-250%); + transition: 0.3s transform; +} + +.header__burger { + grid-column: 4; +} + +.article__box { + display: flex; + flex-direction: column; + gap: 10px; +} + +.article__text, +.testimonial__text { + min-height: 200px; + width: 100%; +} + +.testimonial__box { + display: flex; + flex-direction: column; + gap: 10px; +} + +.footer__box { + display: flex; + justify-content: center; + align-items: center; +} + +.footer__copyrights { + margin: 5px; + width: 30%; + height: 30px; +} diff --git a/05/styles/normalize.css b/05/styles/normalize.css new file mode 100644 index 00000000..08675b0b --- /dev/null +++ b/05/styles/normalize.css @@ -0,0 +1,352 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; + padding: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + 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 + ========================================================================== */ + +/** + * 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 + ========================================================================== */ + +/** + * 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; +} diff --git a/05/styles/reset.css b/05/styles/reset.css new file mode 100644 index 00000000..404d9af1 --- /dev/null +++ b/05/styles/reset.css @@ -0,0 +1,293 @@ +html, +body, +body div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +menu, +nav, +section, +time, +mark, +audio, +video, +details, +summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +main, +article, +aside, +figure, +footer, +header, +nav, +section, +details, +summary { + display: block; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +img { + max-width: 100%; +} + +ul { + list-style: none; +} /* we'll restore bullets as needed for content */ + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +table { + border-collapse: separate; + border-spacing: 0; + text-align: left; +} +th { + font-weight: bold; + vertical-align: bottom; +} +td { + font-weight: normal; + vertical-align: top; +} +td img { + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #999; + margin: 1rem 0; + padding: 0; +} + +input, +select { + vertical-align: middle; +} + +pre { + white-space: pre-line; +} + +input[type='radio'] { + vertical-align: text-bottom; +} +input[type='checkbox'] { + vertical-align: bottom; +} + +small { + font-size: 0.8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: 0.8rem; + line-height: 0; + position: relative; +} +sup { + top: -0.5rem; +} +sub { + bottom: -0.25rem; +} + +pre, +code, +kbd, +samp { + font-family: monospace, sans-serif; +} + +label, +input[type='button'], +input[type='submit'], +input[type='file'], +button { + cursor: pointer; +} + +button, +input, +select, +textarea { + margin: 0; +} + +ins { + background-color: var(--highlight-color); + color: #000; + text-decoration: none; +} +mark { + background-color: var(--highlight-color); + color: #000; + font-style: italic; + font-weight: bold; +} + +blockquote { + padding: 2rem; + border-left: 1px solid #333; +} + +.clearfix:after { + content: ''; + display: table; + clear: both; +} /* https://css-tricks.com/snippets/css/clear-fix/ */ + +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; +} + +p { + text-wrap: pretty; +} + +@media (prefers-reduced-motion: no-preference) { + :has(:target) { + scroll-behavior: smooth; + } +} + +/* ———— END THE GENERIC RESETS ———— */ + +:root { + --font-system: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol'; /* https://css-tricks.com/snippets/css/system-font-stack */ + --text-color: #333; + --featured-color: #03f; + --featured-color-hover: #69f; + --highlight-color: #fcd700; +} + +body { + font-size: 16px; + font-family: var(--font-system); + color: var(--text-color); +} + +a { + color: var(--featured-color); +} +a:hover { + color: var(--featured-color-hover); +} + +@media screen and (max-width: 480px) { +} + +@media print { +}