diff --git a/01/style.css b/01/style.css index faa3160d..862e5ee8 100644 --- a/01/style.css +++ b/01/style.css @@ -19,5 +19,7 @@ height: 0; border: 150px solid #dcdcdc; border-right-color: transparent; - border-bottom-color: transparent; + border-bottom-color: transparent; + + shape-outside: polygon(100% 0, 0 100%, 0 0); } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..48efaa3f 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -4,7 +4,9 @@ box-sizing: border-box; } -.a, .b, .c { +.a, +.b, +.c { border: 3px solid transparent; min-height: 50px; @@ -23,4 +25,41 @@ .c { border-color: #baffc9; +} + + + +/* Mobile */ + +body { + display: grid; + grid-template-areas: + "a" + "b" + "c"; + grid-template-rows: repeat(3, 50vh); +} + +.a { + grid-area: a; +} + +.b { + grid-area: b; +} + +.c { + grid-area: c; +} + +/* Tablet */ + +@media screen and (min-width: 601px) { + body { + grid-template-areas: + ". a a ." + ". c b ."; + grid-template-columns: auto minmax(auto, 600px) minmax(auto, 600px) auto; + grid-template-rows: repeat(2, 50vh); + } } \ No newline at end of file diff --git a/03/images/picture-1200w.jpg b/03/images/picture-1200w.jpg new file mode 100644 index 00000000..cf8fb63e Binary files /dev/null and b/03/images/picture-1200w.jpg differ diff --git a/03/images/picture-1900w.jpg b/03/images/picture-1900w.jpg new file mode 100644 index 00000000..a99c22c8 Binary files /dev/null and b/03/images/picture-1900w.jpg differ diff --git a/03/images/picture-300w.jpg b/03/images/picture-300w.jpg new file mode 100644 index 00000000..314e0254 Binary files /dev/null and b/03/images/picture-300w.jpg differ diff --git a/03/images/picture-3800w.jpg b/03/images/picture-3800w.jpg new file mode 100644 index 00000000..6a078dc6 Binary files /dev/null and b/03/images/picture-3800w.jpg differ diff --git a/03/images/picture-600w.jpg b/03/images/picture-600w.jpg new file mode 100644 index 00000000..f9a036ca Binary files /dev/null and b/03/images/picture-600w.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..de843590 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,124 @@ + - - + + + + + + devmentor.pl - HTML & CSS: RWD - #03 + - -
T
-
P
- V + +
+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita quibusdam quia aliquid inventore repellat + labore ipsam tempore quidem dolor, ea corrupti eaque pariatur quam, facere accusantium cupiditate ab ratione + quas! + Quo tenetur quasi illum quaerat minima tempora dolores temporibus, dignissimos mollitia dolor, saepe, ad + voluptatibus quibusdam perspiciatis. Nihil, impedit corrupti alias et eveniet laborum vero, adipisci, + numquam hic molestiae facilis? + Totam neque necessitatibus, corporis quasi unde cupiditate temporibus non, ab similique obcaecati, + distinctio porro. Nihil, modi, reiciendis adipisci vero libero ratione enim facilis voluptatibus aliquid + obcaecati, nesciunt assumenda amet nemo? + Officia eos, quis magni minus quas nam natus sit obcaecati expedita repellendus asperiores nemo doloribus! + Debitis optio velit numquam laboriosam nisi recusandae minima explicabo porro, fugit fugiat sint! Dicta, + aliquam. + Dolor quaerat itaque repellat ipsam minima fuga eius hic doloremque saepe numquam, culpa aspernatur + repellendus! Repudiandae culpa atque corrupti, voluptas quasi dicta recusandae animi, labore vitae esse + ipsum natus voluptates. + Facilis impedit odio amet beatae nostrum iusto ipsa tenetur eius, fuga sint illo enim debitis aperiam + temporibus rerum itaque cum officia, provident aliquid odit velit architecto dolores voluptatibus dolorem! + Non! + Eveniet blanditiis quidem alias earum corporis iure consectetur debitis eius fuga mollitia, ipsam rerum, + excepturi placeat laudantium ea iste labore omnis fugit. Consectetur rem tempore ipsum iure qui voluptatibus + similique. + Mollitia incidunt, iusto dolore nam nulla aliquam cupiditate perspiciatis numquam nemo quibusdam nisi! + Quaerat quis eius maiores porro ex omnis eos eaque, animi fugiat, labore iure qui sit ipsam repellat? + Vel quam eaque veniam libero, iusto voluptate earum maiores. Totam veritatis aspernatur dolorem nulla nemo + ab eos, quis temporibus animi, repellat error, accusantium iusto quod itaque laboriosam reprehenderit + voluptatum perferendis? + Alias nisi explicabo dicta fugiat iusto natus excepturi, consectetur porro expedita debitis tempore + obcaecati dolorum nesciunt. Magni, quo. Voluptate impedit optio placeat veniam molestiae nulla debitis + perferendis ab quos? Alias? + Repudiandae harum odit dolorem repellendus animi! Quae id esse deleniti tempore sed quasi accusantium dolor + quisquam minus! Ducimus, tenetur voluptatum labore nostrum debitis, eligendi sunt asperiores corrupti, + veritatis magnam vero. + Magni debitis repellendus nemo quam hic. Ipsa voluptas perspiciatis dignissimos voluptatum quisquam quod, + est reiciendis hic, suscipit iusto nihil minima maxime tenetur officia, deleniti sunt eligendi. Maiores a ea + repudiandae. + Laborum repellendus unde culpa dolorum? Illum explicabo sequi tenetur unde voluptatibus tempora doloribus + minima maxime corrupti magnam doloremque consequuntur molestias ipsum, velit delectus modi nisi omnis + praesentium veniam nobis harum. + Temporibus dolor totam consectetur accusantium explicabo natus quisquam! Nihil voluptatem accusantium + mollitia consequatur nam, repudiandae delectus quae eveniet, adipisci minus, totam tempora quo architecto + labore dicta saepe est laudantium? Ipsum. + Aliquid esse ipsam veniam! Iure explicabo vel eligendi nulla quaerat ipsum ullam dolorum facilis? Neque ut + dolorem minus expedita quis reiciendis blanditiis consectetur quasi, dignissimos id aspernatur quos at + facilis? +

+
+
+ + + + + + + + Obrazek P + +
+ + \ No newline at end of file diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..eaf42d41 --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,12 @@ +body { + display: grid; + grid-template-areas: + ". p t ." + ". v t ."; + grid-template-rows: repeat(2, 50vh); + grid-template-columns: auto minmax(200px, calc(1400px /2)) minmax(auto, calc(1400px /2)) auto; +} + +.t p { + column-count: 2; +} \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..9d515a40 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -4,7 +4,28 @@ box-sizing: border-box; } -.p, .t, .v { +.p img { + max-width: 100%; +} + +.v div { + height: 0; + padding-bottom: calc(1045/1840 *100%); + position: relative; + width: 100%; +} + +.v iframe { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.p, +.t, +.v { border: 3px solid transparent; min-height: 50px; @@ -14,13 +35,16 @@ } .p { - border-color: #ffffba + border-color: #ffffba; + grid-area: p; } .t { border-color: #ffdfba; + grid-area: t; } .v { border-color: #baffc9; + grid-area: v; } \ No newline at end of file diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..11cbbb8d --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,13 @@ +body { + display: grid; + grid-template-areas: + "p" + "t" + "v"; + grid-template-rows: repeat(3, 100vh); +} + +.t p { + column-count: 1; + text-align: justify; +} \ No newline at end of file diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..29570976 --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,14 @@ +body { + display: grid; + grid-template-areas: + "p t" + "v t"; + grid-template-rows: repeat(2, 50vh); + grid-template-columns: minmax(200px, 50%) auto; +} + +.t p { + column-count: 1; + column-rule: 1px solid black; + text-align: justify; +} \ No newline at end of file diff --git a/04/Version1/css/main.css b/04/Version1/css/main.css new file mode 100644 index 00000000..8b0c7350 --- /dev/null +++ b/04/Version1/css/main.css @@ -0,0 +1,447 @@ +@charset "UTF-8"; +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 ———— */ +body { + color: #333333; + padding: 0; + background-color: #F6F6F6; + display: grid; + grid-template-areas: "nav" "cont"; + grid-template-rows: 15vh 85vh; +} +@media (min-width: 601px) { + body { + padding-top: 10px; + grid-template-areas: ". nav ." ". cont ."; + grid-template-columns: auto minmax(auto, 1300px) auto; + grid-template-rows: 100px calc(100vh - 100px); + } +} + +a { + text-decoration: none; + color: inherit; +} + +.navigation { + background-color: white; + grid-area: nav; + max-height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; +} +.navigation__burger { + height: 100%; +} +.navigation__burger img { + max-height: 100%; + width: auto; +} +.navigation:has(input:checked) .navigation__list { + display: flex; +} +.navigation__list { + position: absolute; + width: 100%; + height: calc(100dvh - 15vh); + display: none; + flex-direction: column; + top: 100%; + left: 0; +} +.navigation__list-item { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + cursor: pointer; + text-transform: uppercase; + font-size: 1.3em; +} +.navigation__list-item:hover { + color: #009AE1; +} +.navigation__sublist { + color: rgba(255, 255, 255, 0.566); + display: none; + position: initial; + flex-direction: column; + width: 100%; + height: 67%; + text-transform: capitalize; + background-color: #333333; +} +.navigation__sublist-item { + display: flex; + align-items: center; + cursor: pointer; + padding-left: 60%; + flex: 1; +} +.navigation__sublist-item:hover { + color: white; +} +.navigation__list-item:has(.navigation__sublist):hover .navigation__sublist { + display: flex; +} +.navigation__list-item:has(.navigation__sublist):hover { + flex: 3; + justify-content: space-evenly; +} +.navigation__list-item:has(.navigation__sublist):hover a { + flex: 1; + display: flex; + align-items: center; +} +@media (min-width: 601px) { + .navigation__burger { + display: none; + } + .navigation__list { + display: flex; + width: 100%; + position: initial; + flex-direction: row; + justify-content: flex-start; + transform: none; + } + .navigation__list-item { + justify-content: center; + width: 160px; + height: 100%; + flex: none; + position: relative; + } + .navigation__list-item::after { + width: 0; + content: ""; + position: absolute; + background-color: #009AE1; + height: 3px; + top: 0; + left: 50%; + transform: translateX(-50%); + transition: width 250ms ease-in-out; + } + .navigation__list-item:hover::after { + width: 100%; + } + .navigation__list-item:has(.navigation__sublist)::before { + content: ">"; + font-size: 1em; + position: absolute; + left: 80%; + top: 37%; + transform: rotateZ(270deg); + transition: all 250ms ease-in-out; + } + .navigation__list-item:has(.navigation__sublist):hover::before { + transform: rotateZ(90deg); + left: 81%; + } + .navigation__sublist { + width: max-content; + height: max-content; + position: absolute; + top: 100%; + left: 0; + } + .navigation__sublist-item { + width: max-content; + height: 100px; + padding: 0 1.2em; + } + .navigation__list-item:has(.navigation__sublist) { + position: relative; + } + .navigation__list-item:has(.navigation__sublist):hover .navigation__sublist { + display: block; + } + .navigation__list-item:has(.navigation__sublist):hover { + flex: none; + justify-content: space-evenly; + } + .navigation__list-item:has(.navigation__sublist):hover a { + flex: none; + display: flex; + align-items: center; + } +} + +/*# sourceMappingURL=main.css.map */ diff --git a/04/Version1/css/main.css.map b/04/Version1/css/main.css.map new file mode 100644 index 00000000..c05389e8 --- /dev/null +++ b/04/Version1/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../src/base/_reset.scss","../src/base/_global.scss","../src/abstracts/_variables.scss","../src/abstracts/_mixins.scss","../src/components/_navigation.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAkEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;AChRA;EACE,OCHgB;EDIhB;EACA,kBCJQ;EDKR;EACA,qBACE;EAEF;;AETE;EFCJ;IAWI;IACA,qBACE;IAEF;IACA;;;;AAIJ;EACE;EACA;;;AGtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE,OFjDoB;;AEoDtB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBF3Dc;;AE8DhB;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;ADtFF;EC4FA;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA,kBFvHkB;IEwHlB;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA","file":"main.css"} \ No newline at end of file diff --git a/04/Version1/images/burger-menu.svg b/04/Version1/images/burger-menu.svg new file mode 100644 index 00000000..ba43facf --- /dev/null +++ b/04/Version1/images/burger-menu.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/04/Version1/index.html b/04/Version1/index.html new file mode 100644 index 00000000..bf3ee9fd --- /dev/null +++ b/04/Version1/index.html @@ -0,0 +1,56 @@ + + + + + + + + + devmentor.pl - HTML & CSS: RWD - #04 + + + + + + + + \ No newline at end of file diff --git a/04/Version1/src/abstracts/_mixins.scss b/04/Version1/src/abstracts/_mixins.scss new file mode 100644 index 00000000..529681ad --- /dev/null +++ b/04/Version1/src/abstracts/_mixins.scss @@ -0,0 +1,7 @@ +@mixin respond($breakpoint) { + @if $breakpoint ==desktop { + @media (min-width: 601px) { + @content; + } + } +} \ No newline at end of file diff --git a/04/Version1/src/abstracts/_variables.scss b/04/Version1/src/abstracts/_variables.scss new file mode 100644 index 00000000..459bcc2e --- /dev/null +++ b/04/Version1/src/abstracts/_variables.scss @@ -0,0 +1,3 @@ +$nav-item--highlighted: #009AE1; +$nav__sublist-bg: #333333; +$body-bg: #F6F6F6; \ No newline at end of file diff --git a/04/Version1/src/base/_global.scss b/04/Version1/src/base/_global.scss new file mode 100644 index 00000000..a5568871 --- /dev/null +++ b/04/Version1/src/base/_global.scss @@ -0,0 +1,27 @@ +@use "./../abstracts/mixins" as *; +@use "./../abstracts/variables" as *; + +body { + color: $nav__sublist-bg; + padding: 0; + background-color: $body-bg; + display: grid; + grid-template-areas: + "nav" + "cont"; + grid-template-rows: 100vh 100vh; + + @include respond(desktop) { + padding-top: 10px; + grid-template-areas: + ". nav ." + ". cont ."; + grid-template-columns: auto minmax(auto, 1300px) auto; + grid-template-rows: 100px calc(100vh - 100px); + } +} + +a { + text-decoration: none; + color: inherit; +} \ No newline at end of file diff --git a/04/Version1/src/base/_reset.scss b/04/Version1/src/base/_reset.scss new file mode 100644 index 00000000..64b00480 --- /dev/null +++ b/04/Version1/src/base/_reset.scss @@ -0,0 +1,276 @@ +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: .8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: .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 ———— */ \ No newline at end of file diff --git a/04/Version1/src/components/_navigation.scss b/04/Version1/src/components/_navigation.scss new file mode 100644 index 00000000..9809a3fd --- /dev/null +++ b/04/Version1/src/components/_navigation.scss @@ -0,0 +1,181 @@ +@use "./../abstracts/mixins" as *; +@use "./../abstracts/variables" as *; + +.navigation { + background-color: white; + grid-area: nav; + max-height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + + &__burger { + height: 100%; + } + + &__burger img { + max-height: 100%; + width: auto; + } + + &:has(input:checked) .navigation__list { + display: flex; + } + + &__list { + position: absolute; + width: 100%; + height: 100%; + display: none; + flex-direction: column; + top: 100%; + left: 0; + } + + &__list-item { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + cursor: pointer; + text-transform: uppercase; + font-size: 1.3em; + } + + &__list-item:hover { + color: $nav-item--highlighted; + } + + &__sublist { + color: rgba(255, 255, 255, 0.566); + display: none; + position: initial; + flex-direction: column; + width: 100%; + height: 67%; + text-transform: capitalize; + background-color: $nav__sublist-bg; + } + + &__sublist-item { + display: flex; + align-items: center; + cursor: pointer; + padding-left: 60%; + flex: 1; + } + + &__sublist-item:hover { + color: white; + } + + &__list-item:has(&__sublist) { + &:hover .navigation__sublist { + display: flex; + } + + &:hover { + flex: 3; + justify-content: space-evenly; + } + + &:hover a { + flex: 1; + display: flex; + align-items: center; + } + } + + + @include respond(desktop) { + &__burger { + display: none; + } + + &__list { + display: flex; + width: 100%; + position: initial; + flex-direction: row; + justify-content: flex-start; + transform: none; + } + + &__list-item { + justify-content: center; + width: 160px; + height: 100%; + flex: none; + position: relative; + } + + &__list-item::after { + width: 0; + content: ""; + position: absolute; + background-color: $nav-item--highlighted; + height: 3px; + top: 0; + left: 50%; + transform: translateX(-50%); + transition: width 250ms ease-in-out; + } + + &__list-item:hover::after { + width: 100%; + } + + &__list-item:has(&__sublist)::before { + content: ">"; + font-size: 1em; + position: absolute; + left: 80%; + top: 37%; + transform: rotateZ(270deg); + transition: all 250ms ease-in-out; + } + + &__list-item:has(&__sublist):hover::before { + transform: rotateZ(90deg); + left: 81%; + } + + &__sublist { + width: max-content; + height: max-content; + position: absolute; + top: 100%; + left: 0; + } + + &__sublist-item { + width: max-content; + height: 100px; + padding: 0 1.2em; + } + + &__list-item:has(&__sublist) { + position: relative; + + &:hover .navigation__sublist { + display: block; + } + + &:hover { + flex: none; + justify-content: space-evenly; + } + + &:hover a { + flex: none; + display: flex; + align-items: center; + } + } + } + +} \ No newline at end of file diff --git a/04/Version1/src/main.scss b/04/Version1/src/main.scss new file mode 100644 index 00000000..0729ff55 --- /dev/null +++ b/04/Version1/src/main.scss @@ -0,0 +1,5 @@ +@use "./base/reset"; +@use "./base/global"; +@use "./abstracts/mixins"; +@use "./abstracts/variables"; +@use "./components/navigation"; \ No newline at end of file diff --git a/04/Version2/css/main.css b/04/Version2/css/main.css new file mode 100644 index 00000000..492423ac --- /dev/null +++ b/04/Version2/css/main.css @@ -0,0 +1,447 @@ +@charset "UTF-8"; +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 ———— */ +body { + color: #333333; + padding: 0; + background-color: #F6F6F6; + display: grid; + grid-template-areas: "nav" "cont"; + grid-template-rows: 100vh 100vh; +} +@media (min-width: 601px) { + body { + padding-top: 10px; + grid-template-areas: ". nav ." ". cont ."; + grid-template-columns: auto minmax(auto, 1300px) auto; + grid-template-rows: 100px calc(100vh - 100px); + } +} + +a { + text-decoration: none; + color: inherit; +} + +.navigation { + background-color: white; + grid-area: nav; + max-height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; +} +.navigation__burger { + height: 100%; +} +.navigation__burger img { + max-height: 100%; + width: auto; +} +.navigation:has(input:checked) .navigation__list { + display: flex; +} +.navigation__list { + position: absolute; + width: 100%; + height: 100%; + display: none; + flex-direction: column; + top: 100%; + left: 0; +} +.navigation__list-item { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + cursor: pointer; + text-transform: uppercase; + font-size: 1.3em; +} +.navigation__list-item:hover { + color: #009AE1; +} +.navigation__sublist { + color: rgba(255, 255, 255, 0.566); + display: none; + position: initial; + flex-direction: column; + width: 100%; + height: 67%; + text-transform: capitalize; + background-color: #333333; +} +.navigation__sublist-item { + display: flex; + align-items: center; + cursor: pointer; + padding-left: 60%; + flex: 1; +} +.navigation__sublist-item:hover { + color: white; +} +.navigation__list-item:has(.navigation__sublist):hover .navigation__sublist { + display: flex; +} +.navigation__list-item:has(.navigation__sublist):hover { + flex: 3; + justify-content: space-evenly; +} +.navigation__list-item:has(.navigation__sublist):hover a { + flex: 1; + display: flex; + align-items: center; +} +@media (min-width: 601px) { + .navigation__burger { + display: none; + } + .navigation__list { + display: flex; + width: 100%; + position: initial; + flex-direction: row; + justify-content: flex-start; + transform: none; + } + .navigation__list-item { + justify-content: center; + width: 160px; + height: 100%; + flex: none; + position: relative; + } + .navigation__list-item::after { + width: 0; + content: ""; + position: absolute; + background-color: #009AE1; + height: 3px; + top: 0; + left: 50%; + transform: translateX(-50%); + transition: width 250ms ease-in-out; + } + .navigation__list-item:hover::after { + width: 100%; + } + .navigation__list-item:has(.navigation__sublist)::before { + content: ">"; + font-size: 1em; + position: absolute; + left: 80%; + top: 37%; + transform: rotateZ(270deg); + transition: all 250ms ease-in-out; + } + .navigation__list-item:has(.navigation__sublist):hover::before { + transform: rotateZ(90deg); + left: 81%; + } + .navigation__sublist { + width: max-content; + height: max-content; + position: absolute; + top: 100%; + left: 0; + } + .navigation__sublist-item { + width: max-content; + height: 100px; + padding: 0 1.2em; + } + .navigation__list-item:has(.navigation__sublist) { + position: relative; + } + .navigation__list-item:has(.navigation__sublist):hover .navigation__sublist { + display: block; + } + .navigation__list-item:has(.navigation__sublist):hover { + flex: none; + justify-content: space-evenly; + } + .navigation__list-item:has(.navigation__sublist):hover a { + flex: none; + display: flex; + align-items: center; + } +} + +/*# sourceMappingURL=main.css.map */ diff --git a/04/Version2/css/main.css.map b/04/Version2/css/main.css.map new file mode 100644 index 00000000..4cd3161f --- /dev/null +++ b/04/Version2/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../Version1/src/base/_reset.scss","../../Version1/src/base/_global.scss","../../Version1/src/abstracts/_variables.scss","../../Version1/src/abstracts/_mixins.scss","../../Version1/src/components/_navigation.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAkEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;AChRA;EACE,OCHgB;EDIhB;EACA,kBCJQ;EDKR;EACA,qBACE;EAEF;;AETE;EFCJ;IAWI;IACA,qBACE;IAEF;IACA;;;;AAIJ;EACE;EACA;;;AGtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE,OFjDoB;;AEoDtB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBF3Dc;;AE8DhB;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;ADtFF;EC4FA;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA,kBFvHkB;IEwHlB;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA","file":"main.css"} \ No newline at end of file diff --git a/04/Version2/images/burger-menu.svg b/04/Version2/images/burger-menu.svg new file mode 100644 index 00000000..ba43facf --- /dev/null +++ b/04/Version2/images/burger-menu.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/04/Version2/index.html b/04/Version2/index.html new file mode 100644 index 00000000..efee3d5f --- /dev/null +++ b/04/Version2/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + + devmentor.pl - HTML & CSS: RWD - #04 + + + + + + + + \ No newline at end of file diff --git a/04/Version2/styles/global.css b/04/Version2/styles/global.css new file mode 100644 index 00000000..e6b0ca7b --- /dev/null +++ b/04/Version2/styles/global.css @@ -0,0 +1,15 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +li { + list-style: none; +} + +a { + display: block; + text-decoration: none; + color: inherit; +} \ No newline at end of file diff --git a/04/Version2/styles/mobile.css b/04/Version2/styles/mobile.css new file mode 100644 index 00000000..72a1acf8 --- /dev/null +++ b/04/Version2/styles/mobile.css @@ -0,0 +1,67 @@ +.navigation { + position: relative; +} + +.navigation__burger img { + width: 40px; +} + +.navigation__burger { + cursor: pointer; + position: absolute; + right: 20px; + top: 10px; +} + +#dropdown-checkbox { + display: none; +} + +.navigation input:checked + .navigation__list { + display: block; +} + +.navigation__list { + display: block; + padding: 60px 30px 0 30px; + background-color: blanchedalmond; +} + +.navigation__list-item a { + padding: 2em 3em; +} + +.navigation__list-item:hover { + color: blue; +} + +.navigation__sublist { + display: none; +} + +.navigation__list-item:hover > .navigation__sublist { + display: block; +} + +.navigation__sublist-item a { + padding: 1em 1.5em; +} + +.navigation__list-item { + text-transform: uppercase; + text-align: center; + font-size: 1.3em; +} + +.navigation__sublist-item { + color: rgba(0, 0, 0, 0.48); + text-transform: capitalize; +} + +.navigation__sublist-item:hover { + color: black; +} + +.navigation__list { + display: none; +} \ No newline at end of file diff --git a/04/Version2/styles/tablet.css b/04/Version2/styles/tablet.css new file mode 100644 index 00000000..131de797 --- /dev/null +++ b/04/Version2/styles/tablet.css @@ -0,0 +1,49 @@ +.navigation__burger { + display: none; +} + +.navigation { + width: 90%; + margin: 0 auto; + position: initial; +} + +.navigation__list { + display: flex; + justify-content: flex-start; + padding: 0; + margin: 20px; +} + +.navigation__list-item { + position: relative; +} + +.navigation__list-item:hover .navigation__sublist { + position: absolute; +} + +.navigation__list-item::after { + content: ''; + width: 0; + height: 3px; + background-color: chocolate; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + transition: width 250ms ease-in-out; +} + +.navigation__list-item:hover::after { + width: 100%; +} + +.navigation__sublist { + background-color: blanchedalmond; +} + +.navigation__sublist-item { + text-align: left; + padding-left: 1.5em; +} \ No newline at end of file diff --git a/04/index.html b/04/index.html deleted file mode 100644 index e3ca9540..00000000 --- a/04/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - devmentor.pl - HTML & CSS: RWD - #04 - - - - - - - \ No newline at end of file diff --git a/05/desktop.png b/05/assets/desktop.png similarity index 100% rename from 05/desktop.png rename to 05/assets/desktop.png diff --git a/05/mobile.png b/05/assets/mobile.png similarity index 100% rename from 05/mobile.png rename to 05/assets/mobile.png diff --git a/05/transform.png b/05/assets/transform.png similarity index 100% rename from 05/transform.png rename to 05/assets/transform.png diff --git a/05/css/main.css b/05/css/main.css new file mode 100644 index 00000000..d065afdd --- /dev/null +++ b/05/css/main.css @@ -0,0 +1,369 @@ +@charset "UTF-8"; +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 ———— */ +.row, +.cell, +.container { + margin: 3px; + padding: 3px; +} + +.row { + outline: 3px solid #0ED145; +} + +.cell { + background-color: #FFCA18; + min-height: 50px; +} + +.container { + height: calc(100% - 6px); + outline: 3px solid #00A8F3; +} +@media (min-width: 801px) { + .container { + max-width: 1300px; + margin: 0 auto; + } +} + +body { + display: grid; + grid-template-areas: "head" "s-first" "s-second" "foot"; + grid-template-rows: 100px calc(50vh - 100px) calc(50vh - 100px) 100px; +} + +.heading { + grid-area: head; + position: relative; +} +.heading__container { + display: flex; + justify-content: center; + align-items: center; +} +.heading__logo { + min-width: 120px; +} +.heading__burger-icon { + width: 40px; + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); +} +.heading__list { + display: none; +} +@media (min-width: 801px) { + .heading__list { + display: block; + min-width: 400px; + } + .heading__burger-icon { + display: none; + } + .heading__container { + justify-content: space-between; + } +} + +.first-section__container, +.second-section__container { + display: flex; + flex-direction: column; + gap: 5px; +} +.first-section__content, +.second-section__content { + flex: 1; +} +@media (min-width: 801px) { + .first-section__container, + .second-section__container { + flex-direction: row; + } +} + +.foot__container { + display: flex; + justify-content: center; + align-items: center; +} +.foot__heading { + min-width: 240px; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/05/css/main.css.map b/05/css/main.css.map new file mode 100644 index 00000000..354c9730 --- /dev/null +++ b/05/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../src/base/_reset.scss","../src/base/_global.scss","../src/abstracts/_variables.scss","../src/abstracts/_mixins.scss","../src/components/_heading.scss","../src/components/_sections.scss","../src/components/_foot.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAkEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;AChRA;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;;;AAGF;EACE,kBCfc;EDgBd;;;AAGF;EACE;EACA;;AEnBE;EFiBJ;IAMI;IACA;;;;AAIJ;EACE;EACA,qBACE;EAIF;;;AGnCF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;ADvBA;EC4BA;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;;;ACpCJ;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AFTA;EEcA;AAAA;IACE;;;;AChBJ;EACE;EACA;EACA;;AAGF;EACE","file":"main.css"} \ No newline at end of file diff --git a/05/images/burger-menu.svg b/05/images/burger-menu.svg new file mode 100644 index 00000000..ba43facf --- /dev/null +++ b/05/images/burger-menu.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..f78d37b1 --- /dev/null +++ b/05/index.html @@ -0,0 +1,52 @@ + + + + + + + + Layout | RWD + + + +
+ +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/05/src/abstracts/_mixins.scss b/05/src/abstracts/_mixins.scss new file mode 100644 index 00000000..7ee3a7f6 --- /dev/null +++ b/05/src/abstracts/_mixins.scss @@ -0,0 +1,7 @@ +@mixin response($breakpoint) { + @if $breakpoint ==desktop { + @media (min-width: 801px) { + @content; + } + } +} \ No newline at end of file diff --git a/05/src/abstracts/_variables.scss b/05/src/abstracts/_variables.scss new file mode 100644 index 00000000..037646f8 --- /dev/null +++ b/05/src/abstracts/_variables.scss @@ -0,0 +1,4 @@ +$cell-bg-color: #FFCA18; +$row-outline-color: #0ED145; +$container-outline-color: #00A8F3; +$margin-padding: 6px; \ No newline at end of file diff --git a/05/src/base/_global.scss b/05/src/base/_global.scss new file mode 100644 index 00000000..ba74dd17 --- /dev/null +++ b/05/src/base/_global.scss @@ -0,0 +1,39 @@ +@use './../abstracts/variables' as *; +@use './../abstracts/mixins' as *; + +.row, +.cell, +.container { + margin: 3px; + padding: 3px; +} + +.row { + outline: 3px solid $row-outline-color; +} + +.cell { + background-color: $cell-bg-color; + min-height: 50px; +} + +.container { + height: calc(100% - $margin-padding); + outline: 3px solid $container-outline-color; + + // DESKTOP + @include response(desktop) { + max-width: 1300px; + margin: 0 auto; + } +} + +body { + display: grid; + grid-template-areas: + "head" + "s-first" + "s-second" + "foot"; + grid-template-rows: 100px calc(100vh / 2 - 100px) calc(100vh / 2 - 100px) 100px; +} \ No newline at end of file diff --git a/05/src/base/_reset.scss b/05/src/base/_reset.scss new file mode 100644 index 00000000..64b00480 --- /dev/null +++ b/05/src/base/_reset.scss @@ -0,0 +1,276 @@ +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: .8rem; +} + +strong { + font-weight: bold; +} + +sub, +sup { + font-size: .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 ———— */ \ No newline at end of file diff --git a/05/src/components/_foot.scss b/05/src/components/_foot.scss new file mode 100644 index 00000000..9c2e175e --- /dev/null +++ b/05/src/components/_foot.scss @@ -0,0 +1,11 @@ +.foot { + &__container { + display: flex; + justify-content: center; + align-items: center; + } + + &__heading { + min-width: 240px; + } +} \ No newline at end of file diff --git a/05/src/components/_heading.scss b/05/src/components/_heading.scss new file mode 100644 index 00000000..b1fde89a --- /dev/null +++ b/05/src/components/_heading.scss @@ -0,0 +1,44 @@ +@use './../abstracts/mixins' as *; + +.heading { + grid-area: head; + position: relative; + + &__container { + display: flex; + justify-content: center; + align-items: center; + } + + &__logo { + min-width: 120px; + } + + &__burger-icon { + width: 40px; + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + } + + &__list { + display: none; + } + + // DESKTOP + @include response(desktop) { + &__list { + display: block; + min-width: 400px; + } + + &__burger-icon { + display: none; + } + + &__container { + justify-content: space-between; + } + } +} \ No newline at end of file diff --git a/05/src/components/_sections.scss b/05/src/components/_sections.scss new file mode 100644 index 00000000..6d84173d --- /dev/null +++ b/05/src/components/_sections.scss @@ -0,0 +1,21 @@ +@use './../abstracts/mixins' as *; + +.first-section, +.second-section { + &__container { + display: flex; + flex-direction: column; + gap: 5px; + } + + &__content { + flex: 1; + } + + // DESKTOP + @include response(desktop) { + &__container { + flex-direction: row; + } + } +} \ No newline at end of file diff --git a/05/src/main.scss b/05/src/main.scss new file mode 100644 index 00000000..1d53b6c8 --- /dev/null +++ b/05/src/main.scss @@ -0,0 +1,6 @@ +@use './abstracts/mixins'; +@use './base/reset'; +@use './base/global'; +@use './components/heading'; +@use './components/sections'; +@use './components/foot'; \ No newline at end of file