From a88ed4252c7be7785457b25f0c801c11d1453397 Mon Sep 17 00:00:00 2001 From: natata-tutorial Date: Thu, 30 Mar 2023 16:28:58 +0300 Subject: [PATCH 1/2] JS - Dom SideBar --- .../natata-tutorial/js-dom/css/style.css | 308 +++++++++++++++ submissions/natata-tutorial/js-dom/index.html | 61 +++ .../natata-tutorial/js-dom/js/content.js | 35 ++ .../natata-tutorial/js-dom/js/script.js | 26 ++ .../natata-tutorial/js-dom/scss/style.scss | 364 ++++++++++++++++++ 5 files changed, 794 insertions(+) create mode 100644 submissions/natata-tutorial/js-dom/css/style.css create mode 100644 submissions/natata-tutorial/js-dom/index.html create mode 100644 submissions/natata-tutorial/js-dom/js/content.js create mode 100644 submissions/natata-tutorial/js-dom/js/script.js create mode 100644 submissions/natata-tutorial/js-dom/scss/style.scss diff --git a/submissions/natata-tutorial/js-dom/css/style.css b/submissions/natata-tutorial/js-dom/css/style.css new file mode 100644 index 0000000000..b9b2986305 --- /dev/null +++ b/submissions/natata-tutorial/js-dom/css/style.css @@ -0,0 +1,308 @@ +* { + padding: 0; + margin: 0; + border: 0; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +:focus, +:active { + outline: none; +} + +a { + box-shadow: none; +} +a:focus, a:active, a:hover { + outline: none; + box-shadow: 0 1px currentColor; +} + +nav, +footer, +header, +aside { + display: block; +} + +html, +body { + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + font-size: 16px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +input, +button, +textarea { + font-family: inherit; +} + +input::-ms-clear { + display: none; +} + +button { + cursor: pointer; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +a, +a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: 400; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + white-space: nowrap; + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} + +html { + font-size: 14px; +} + +body { + color: #0d393c; + font-family: "Fredoka", sans-serif; + line-height: 22px; + background-color: #f6f5ee; +} + +.page { + min-height: 100%; + min-width: 200px; + display: grid; + grid-template: minmax(50px, auto) 1fr minmax(50px, auto)/1fr; + grid-template-areas: "header" "main" "footer"; +} +.page__header { + grid-area: header; + display: grid; + grid-template: 1fr/1fr minmax(40px, auto) minmax(150px, 720px) minmax(40px, auto) 1fr; + justify-content: center; + align-items: center; + padding: 15px; +} +.page__burger { + grid-column: 2/3; + align-self: center; + justify-self: center; +} +.page__logo { + font-family: "Kristi", cursive; + display: block; + font-size: 3rem; + color: currentColor; + align-self: center; + justify-self: center; + font-display: swap; +} +.page__aside { + position: fixed; + background-color: rgba(255, 255, 255, 0.9137254902); + top: 60px; + left: -100%; + width: 100%; + height: auto; + display: flex; + justify-content: center; + padding: 10px; + transition: all 0.4s ease-in; + z-index: 1; + overflow: auto; +} +.page__main { + grid-area: main; + display: grid; + grid-template: 1fr/1fr minmax(150px, 800px) 1fr; + padding: 15px; +} +.page__footer { + grid-area: footer; + display: grid; + grid-template: 1fr/1fr minmax(100px, 800px) 1fr; + padding: 15px; +} +.page__copyright { + grid-column: 2/3; +} + +.burger__checkbox:checked ~ .burger__button span:nth-child(1) { + top: 11px; + transform: rotate(135deg); +} +.burger__checkbox:checked ~ .burger__button span:nth-child(2) { + opacity: 0; + left: -60px; +} +.burger__checkbox:checked ~ .burger__button span:nth-child(3) { + top: 11px; + transform: rotate(-131deg); +} +.burger__checkbox ~ .burger__button { + box-shadow: none; +} +@media only screen and (min-width: 680px) { + .burger__checkbox ~ .burger__button { + display: none; + } +} +.burger__checkbox:focus ~ .burger__button, .burger__checkbox:active ~ .burger__button, .burger__checkbox:hover ~ .burger__button { + box-shadow: 0 0 5px #999; + border-radius: 50px; +} +.burger__checkbox ~ .page__aside { + left: -100%; +} +@media only screen and (min-width: 680px) { + .burger__checkbox ~ .page__aside { + position: absolute; + left: 0; + width: 200px; + } +} +.burger__checkbox:checked ~ .page__aside { + left: 0; +} +.burger__button { + width: 25px; + height: 25px; + display: block; + position: relative; + transform: rotate(0deg); + transition: 0.5s ease-in-out; + cursor: pointer; +} +.burger__button span:nth-child(1) { + top: 5px; +} +.burger__button span:nth-child(2) { + top: 11px; +} +.burger__button span:nth-child(3) { + top: 17px; +} +.burger__line { + display: block; + position: absolute; + height: 2px; + width: 60%; + background: currentColor; + border-radius: 2px; + opacity: 1; + left: 20%; + transform: rotate(0deg); + transition: 0.25s ease-in-out; +} +@media only screen and (min-width: 680px) { + .burger { + position: relative; + } +} + +.sidenav__title { + font-family: "Kristi", cursive; + font-size: 2rem; + line-height: 2.5rem; +} +.sidenav__item { + color: currentColor; +} + +.content__seciton { + grid-column: 2/3; + display: grid; + grid-template: repeat(5, auto)/repeat(3, 1fr); + gap: 15px; +} +.content__title { + grid-column: 1/4; + grid-row: 1/2; + align-self: center; + justify-self: right; + font-family: "Kristi", cursive; + font-size: 3rem; + line-height: 4.5rem; +} +@media only screen and (min-width: 421px) { + .content__title { + grid-column: 2/4; + font-size: 4rem; + } +} +.content__text { + grid-column: 1/4; + grid-row: 6; + background-color: rgba(255, 255, 255, 0.8274509804); + align-self: center; + justify-self: center; + padding: 15px; +} +@media only screen and (min-width: 421px) { + .content__text { + grid-column: 1/3; + grid-row: 3/5; + } +} +.content__picture { + grid-column: 2/4; + grid-row: 2/5; + width: 100%; + height: auto; +} +@media only screen and (min-width: 421px) { + .content__picture { + grid-column: 2/4; + grid-row: 2/6; + } +} + +.copyright { + align-self: center; + justify-self: center; +} \ No newline at end of file diff --git a/submissions/natata-tutorial/js-dom/index.html b/submissions/natata-tutorial/js-dom/index.html new file mode 100644 index 0000000000..19c3be1139 --- /dev/null +++ b/submissions/natata-tutorial/js-dom/index.html @@ -0,0 +1,61 @@ + + + + + + + Side-menu + + + + + + + + +
+
+
+ + + +
+ + + + +
+
+ + +
+

Art Movements and Styles

+ +
Please select one of items in side-menu
+
+
+ +
+ + + + \ No newline at end of file diff --git a/submissions/natata-tutorial/js-dom/js/content.js b/submissions/natata-tutorial/js-dom/js/content.js new file mode 100644 index 0000000000..e752efc22f --- /dev/null +++ b/submissions/natata-tutorial/js-dom/js/content.js @@ -0,0 +1,35 @@ +"use strict" + +const contentObj = [ + { + id: "cubism", + styleTitle: "Cubism", + styleDescription: "An artistic movement began in 1907 by artists Pablo Picasso and Georges Braque who developed a visual language whose geometric planes challenged the conventions of representation in different types of art, by reinventing traditional subjects such as nudes, landscapes, and still lifes as increasingly fragmented compositions.", + stylePicture: "./images/cubism.jpg", + }, + { + id: "art-deco", + styleTitle: "Art Deco", + styleDescription: "Emerging in France before the First World War, Art Deco exploded in 1925 on the occasion of the Exposition des Arts Décoratifs (Exhibition of Decorative Arts). Blurring the line between different mediums and fields, from architecture and furniture to clothing and jewelry, Art Deco merged modern aesthetic with skillful craftsmanship, advanced technology, and elegant materials.", + stylePicture: "./images/art-deco.jpg", + }, + { + id: "fauvism", + styleTitle: "Fauvism", + styleDescription: "Coined by the critic Louis Vauxcelles, Fauvism (French for “wild beasts”) is one of the early 20th-century art movements. Fauvism is associated especially with Henri Matisse and André Derain, whose works are characterized by strong, vibrant colour and bold brushstrokes over realistic or representational qualities.", + stylePicture: "./images/fauvism.jpg", + }, + { + id: "post-impressionism", + styleTitle: "Post-Impressionism", + styleDescription: "Coined in 1910, the term ‘Post-Impressionism’ describes the reaction against the Impressionists’ naturalistic depiction of light and colour. Artists like Paul Cézanne, Paul Gauguin, and Vincent van Gogh developed personal styles unified by their interest in expressing their emotional and psychological responses to the world through bold colours and often symbolic images.", + stylePicture: "./images/post-impressionism.jpg", + }, + { + id: "pop-art", + styleTitle: "Pop Art", + styleDescription: "Pop Art emerged in the 1950s and was composed of British and American artists who draw inspiration from ‘popular’ imagery and products from commercial culture as opposed to ‘elitist’ fine art. Pop art reached its peak of activity in the 1960s, emphasizing the banal or kitschy elements of everyday life in such forms as mechanically reproduced silkscreens, large-scale facsimiles, and soft pop art sculptures.", + stylePicture: "./images/pop-art.jpg", + }, +]; +export default contentObj; diff --git a/submissions/natata-tutorial/js-dom/js/script.js b/submissions/natata-tutorial/js-dom/js/script.js new file mode 100644 index 0000000000..42323c1799 --- /dev/null +++ b/submissions/natata-tutorial/js-dom/js/script.js @@ -0,0 +1,26 @@ +"use strict" + +import contentObj from "./content.js"; + +const contentTitle = document.querySelector('.content__title'); +const contentText = document.querySelector('.content__text'); +const contentPicture = document.querySelector('.content__picture'); + +const sideNav = document.querySelector('.sidenav'); +const sideNavElements = sideNav.querySelectorAll('.sidenav__item'); +const burgerButton = document.querySelector('.burger__button'); + +sideNavElements.forEach(el => { + el.addEventListener('click', function (event) { + event.preventDefault(); + burgerButton.click(); + const contentId = this.id; + const newContent = contentObj.filter(el => el.id == contentId); + newContent.forEach(el => { + contentTitle.innerHTML = el.styleTitle; + contentText.innerHTML = el.styleDescription; + contentPicture.src = el.stylePicture; + }); + }) +}) + diff --git a/submissions/natata-tutorial/js-dom/scss/style.scss b/submissions/natata-tutorial/js-dom/scss/style.scss new file mode 100644 index 0000000000..c30bc8fcbb --- /dev/null +++ b/submissions/natata-tutorial/js-dom/scss/style.scss @@ -0,0 +1,364 @@ +* { + padding: 0; + margin: 0; + border: 0; +} + +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +:focus, +:active { + outline: none; +} + +a { + box-shadow: none; + &:focus, + &:active, + &:hover { + outline: none; + box-shadow: 0 1px currentColor; + } +} + +nav, +footer, +header, +aside { + display: block; +} + +html, +body { + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + font-size: 16px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +input, +button, +textarea { + font-family: inherit; +} + +input::-ms-clear { + display: none; +} + +button { + cursor: pointer; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +a, +a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: 400; +} + +@mixin devices ($breakpoint) { + //the name of the mixin is devices + + @if $breakpoint ==tablet { + @media only screen and (min-width: 680px) { + @content; + } + } + + @if $breakpoint ==mobile { + @media only screen and (min-width: 421px) { + @content; + } + } +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} + +html { + font-size: 14px; +} + +body{ + color: #0d393c; + font-family: 'Fredoka', sans-serif; + line-height: 22px; + background-color: #f6f5ee; +} + + +.page { + min-height: 100%; + min-width: 200px; + display: grid; + grid-template: minmax(50px, auto) 1fr minmax(50px, auto) / 1fr; + grid-template-areas: + "header" + "main" + "footer"; + + &__header { + grid-area: header; + display: grid; + grid-template: 1fr / 1fr minmax(40px, auto) minmax(150px, 720px) minmax(40px, auto) 1fr; + justify-content: center; + align-items: center; + padding: 15px; + } + + &__burger { + grid-column: 2 / 3; + align-self: center; + justify-self: center; + } + + &__logo { + // grid-column: 4 / 5; + font-family: 'Kristi', cursive; + display: block; + font-size: 3rem; + color: currentColor; + align-self: center; + justify-self: center; + font-display:swap; + } + + &__aside { + position: fixed; + background-color: #ffffffe9; + top: 60px; + left: -100%; + width: 100%; + height: auto; + display: flex; + justify-content: center; + padding: 10px; + transition: all 0.4s ease-in; + z-index: 1; + overflow: auto; + + + + } + + + &__main { + grid-area: main; + display: grid; + grid-template: 1fr / 1fr minmax(150px, 800px) 1fr; + padding: 15px; + } + + &__footer { + grid-area: footer; + display: grid; + grid-template: 1fr / 1fr minmax(100px, 800px) 1fr; + padding: 15px; + } + &__copyright{ + grid-column: 2/3; + + } +} + + + +.burger { + + &__checkbox:checked ~ &__button { + span { + &:nth-child(1) { + top: 11px; + transform: rotate(135deg); + } + + &:nth-child(2) { + opacity: 0; + left: -60px; + } + + &:nth-child(3) { + top: 11px; + transform: rotate(-131deg); + } + } + + } + &__checkbox ~ &__button { + box-shadow: none; + @include devices(tablet) { + display: none; + } + } + + &__checkbox:focus ~ &__button, + &__checkbox:active ~ &__button, + &__checkbox:hover ~ &__button { + box-shadow: 0 0 5px #999; + border-radius: 50px; + } + &__checkbox ~ .page__aside { + left: -100%; + @include devices(tablet) { + position: absolute; + left: 0; + width: 200px; + } + } + + &__checkbox:checked ~ .page__aside { + left: 0; + } + + + + &__button { + width: 25px; + height: 25px; + display: block; + position: relative; + transform: rotate(0deg); + transition: .5s ease-in-out; + cursor: pointer; + + span { + &:nth-child(1) { + top: 5px; + } + &:nth-child(2) { + top: 11px; + } + &:nth-child(3) { + top: 17px; + } + } + } + + &__line { + display: block; + position: absolute; + height: 2px; + width: 60%; + background: currentColor; + border-radius: 2px; + opacity: 1; + left: 20%; + transform: rotate(0deg); + transition: .25s ease-in-out; + } + + @include devices(tablet) { + position: relative; + } +} + +.sidenav{ + &__title{ + font-family: 'Kristi', cursive; + font-size: 2rem; + line-height: 2.5rem; + } + &__item{ + color: currentColor; + } +} + +.content { + + &__seciton { + grid-column: 2/3; + display:grid; + grid-template:repeat(5, auto)/ repeat(3, 1fr); + gap:15px; + } + + &__title { + grid-column: 1/4; + grid-row: 1/2; + align-self: center; + justify-self: right; + font-family: 'Kristi', cursive; + font-size:3rem; + line-height: 4.5rem; + + @include devices(mobile) { + grid-column: 2/4; + font-size: 4rem; + } + } + + &__text { + grid-column: 1/4; + grid-row: 6; + background-color: #ffffffd3; + align-self: center; + justify-self: center; + padding: 15px; + @include devices(mobile) { + grid-column: 1/3; + grid-row: 3/5; + } + } + &__picture { + grid-column: 2/4; + grid-row: 2/5; + width:100%; + height: auto; + @include devices(mobile) { + grid-column: 2/4; + grid-row: 2/6; + } + } +} + + +.copyright { + align-self: center; + justify-self: center; +} \ No newline at end of file From 95d1105bc7c36bd95dcaeeeea4077ea54115cf72 Mon Sep 17 00:00:00 2001 From: natata-tutorial Date: Mon, 3 Apr 2023 04:28:19 +0300 Subject: [PATCH 2/2] fix: event delegation, content shift --- .../natata-tutorial/js-dom/css/style.css | 46 ++- submissions/natata-tutorial/js-dom/index.html | 107 +++--- .../natata-tutorial/js-dom/js/script.js | 79 ++++- .../natata-tutorial/js-dom/scss/_reset.scss | 105 ++++++ .../js-dom/scss/_variables.scss | 81 +++++ .../natata-tutorial/js-dom/scss/style.scss | 308 +++++------------- 6 files changed, 425 insertions(+), 301 deletions(-) create mode 100644 submissions/natata-tutorial/js-dom/scss/_reset.scss create mode 100644 submissions/natata-tutorial/js-dom/scss/_variables.scss diff --git a/submissions/natata-tutorial/js-dom/css/style.css b/submissions/natata-tutorial/js-dom/css/style.css index b9b2986305..8f8dee717b 100644 --- a/submissions/natata-tutorial/js-dom/css/style.css +++ b/submissions/natata-tutorial/js-dom/css/style.css @@ -1,3 +1,29 @@ +@font-face { + src: url("../fonts/Kristi-Regular.woff2") format("woff2"); + font-family: "Kristi"; + font-style: normal; + font-weight: 400; + font-display: swap; +} +@font-face { + font-family: "kristi-fallback1"; + src: local("Brush Script MT"); + size-adjust: 60.85099821%; +} +@font-face { + font-family: "kristi-fallback2"; + src: local("Georgia"); + size-adjust: 60.85099821%; +} +@font-face { + font-family: "Fredoka"; + font-style: normal; + font-weight: 300; + font-stretch: 100%; + font-display: swap; + src: url("../fonts/Fredoka-Regular.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} * { padding: 0; margin: 0; @@ -37,9 +63,6 @@ body { font-size: 100%; line-height: 1; font-size: 16px; - -ms-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; } input, @@ -134,24 +157,24 @@ body { justify-self: center; } .page__logo { - font-family: "Kristi", cursive; + font-family: "Kristi", "kristi-fallback1", "kristi-fallback2", cursive; display: block; font-size: 3rem; + list-style: 4.5rem; color: currentColor; align-self: center; justify-self: center; - font-display: swap; } .page__aside { position: fixed; - background-color: rgba(255, 255, 255, 0.9137254902); + background-color: rgba(255, 255, 255, 0.8274509804); top: 60px; left: -100%; width: 100%; height: auto; display: flex; justify-content: center; - padding: 10px; + padding: 15px; transition: all 0.4s ease-in; z-index: 1; overflow: auto; @@ -246,7 +269,7 @@ body { } .sidenav__title { - font-family: "Kristi", cursive; + font-family: "Kristi", "kristi-fallback1", "kristi-fallback2", cursive; font-size: 2rem; line-height: 2.5rem; } @@ -257,7 +280,7 @@ body { .content__seciton { grid-column: 2/3; display: grid; - grid-template: repeat(5, auto)/repeat(3, 1fr); + grid-template: 80px repeat(4, auto)/repeat(3, 1fr); gap: 15px; } .content__title { @@ -265,7 +288,7 @@ body { grid-row: 1/2; align-self: center; justify-self: right; - font-family: "Kristi", cursive; + font-family: "Kristi", "kristi-fallback1", "kristi-fallback2", cursive; font-size: 3rem; line-height: 4.5rem; } @@ -305,4 +328,7 @@ body { .copyright { align-self: center; justify-self: center; +} +.copyright a { + color: currentColor; } \ No newline at end of file diff --git a/submissions/natata-tutorial/js-dom/index.html b/submissions/natata-tutorial/js-dom/index.html index 19c3be1139..ad88f0afe0 100644 --- a/submissions/natata-tutorial/js-dom/index.html +++ b/submissions/natata-tutorial/js-dom/index.html @@ -1,61 +1,62 @@ - - - - - Side-menu - - - - - - - - -
+ + + + Side-menu + + + + + +
-
- - - -
- - - - +
+ + + +
+ +
- - -
-

Art Movements and Styles

- -
Please select one of items in side-menu
-
+
+

Art Movements and Styles

+ Impression Sunrise +
+ Please select one of items in side-menu +
+
-
- - - - \ No newline at end of file +
+ + + diff --git a/submissions/natata-tutorial/js-dom/js/script.js b/submissions/natata-tutorial/js-dom/js/script.js index 42323c1799..11d627bf85 100644 --- a/submissions/natata-tutorial/js-dom/js/script.js +++ b/submissions/natata-tutorial/js-dom/js/script.js @@ -1,26 +1,69 @@ -"use strict" +"use strict"; import contentObj from "./content.js"; -const contentTitle = document.querySelector('.content__title'); -const contentText = document.querySelector('.content__text'); -const contentPicture = document.querySelector('.content__picture'); +document.addEventListener("DOMContentLoaded", createSidebarList); -const sideNav = document.querySelector('.sidenav'); -const sideNavElements = sideNav.querySelectorAll('.sidenav__item'); -const burgerButton = document.querySelector('.burger__button'); +function createSidebarList() { + + const sideNav = document.querySelector(".sidenav"); + const list = document.createElement("ul"); + list.classList.add("sidenav__list"); + + const listHtml = contentObj + .map((item) => { + return `
  • + ${item.styleTitle} + +
    • `; + }) + .join(""); + list.innerHTML = listHtml; + sideNav.append(list); + sideNav.addEventListener("click", handleSidebarItemClick); + +} + +function handleSidebarItemClick(event) { + + const burgerButton = document.querySelector(".burger__button"); + const sideNavList = document.querySelector(".sidenav__list"); + if (!sideNavList) return; + + if (event.target.closest(".sidenav__item")) { + const currentItem = event.target.closest(".sidenav__item"); + + if (!currentItem.classList.contains("active")) { + const activeItem = sideNavList.querySelector(".active"); + if (activeItem) activeItem.classList.remove("active"); + currentItem.classList.add("active"); + displayContent(currentItem.id); + } -sideNavElements.forEach(el => { - el.addEventListener('click', function (event) { event.preventDefault(); burgerButton.click(); - const contentId = this.id; - const newContent = contentObj.filter(el => el.id == contentId); - newContent.forEach(el => { - contentTitle.innerHTML = el.styleTitle; - contentText.innerHTML = el.styleDescription; - contentPicture.src = el.stylePicture; - }); - }) -}) + } + +} + +function displayContent(contentId) { + + const newContent = contentObj.find((el) => el.id === contentId); + if (!newContent) return; + + const contentSection = document.querySelector(".content__seciton"); + if (!contentSection) return; + + contentSection.innerHTML = ` +

    ${newContent.styleTitle}

    + ${newContent.styleTitle} +
    + ${newContent.styleDescription} +
    `; +} diff --git a/submissions/natata-tutorial/js-dom/scss/_reset.scss b/submissions/natata-tutorial/js-dom/scss/_reset.scss new file mode 100644 index 0000000000..c6d54501d2 --- /dev/null +++ b/submissions/natata-tutorial/js-dom/scss/_reset.scss @@ -0,0 +1,105 @@ +// ************* Reset ****************** +* { + padding: 0; + margin: 0; + border: 0; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +:focus, +:active { + outline: none; +} + +a { + box-shadow: none; + + &:focus, + &:active, + &:hover { + outline: none; + box-shadow: 0 1px currentColor; + } +} + +nav, +footer, +header, +aside { + display: block; +} + +html, +body { + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + font-size: 16px; +} + +input, +button, +textarea { + font-family: inherit; +} + +input::-ms-clear { + display: none; +} + +button { + cursor: pointer; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +a, +a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: 400; +} + +// ************* End Reset ****************** + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} diff --git a/submissions/natata-tutorial/js-dom/scss/_variables.scss b/submissions/natata-tutorial/js-dom/scss/_variables.scss new file mode 100644 index 0000000000..95def6ef05 --- /dev/null +++ b/submissions/natata-tutorial/js-dom/scss/_variables.scss @@ -0,0 +1,81 @@ +// **** Fonts **** + +$font-path: "../fonts"; + +@font-face { + // This is parsed as an interpolated special function. + src: url("#{$font-path}/Kristi-Regular.woff2") format("woff2"); + + font-family: "Kristi"; + font-style: normal; + font-weight: 400; + font-display: swap; +} + +@font-face { + font-family: "kristi-fallback1"; + src: local("Brush Script MT"); + size-adjust: 60.85099821%; +} +@font-face { + font-family: "kristi-fallback2"; + src: local("Georgia"); + size-adjust: 60.85099821%; +} + +@font-face { + font-family: "Fredoka"; + font-style: normal; + font-weight: 300; + font-stretch: 100%; + font-display: swap; + src: url("#{$font-path}/Fredoka-Regular.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +// **** Colors **** + +$font-color: #0d393c; +$background-color: #f6f5ee; +$backgrount-transparent-color: #ffffffd3; +$shadow-color: #999; + +// **** Fonts **** + +$main-font-family: "Fredoka", sans-serif; +$header-font-family: "Kristi", "kristi-fallback1", "kristi-fallback2", cursive; + +// **** Sizes **** + +$main-font-style: 14px; +$main-line-height: 22px; + +$logo-font-style: 3rem; +$logo-line-height: 4.5rem; + +$title-font-style: 3rem; +$title-font-style--mobile: 4rem; +$title-line-height: 4.5rem; + +$subtitle-font-style: 2rem; +$subtitle-line-height: 2.5rem; + +$main-padding: 15px; + +// **** Media Queries **** + +@mixin devices($breakpoint) { + //the name of the mixin is devices + + @if $breakpoint ==tablet { + @media only screen and (min-width: 680px) { + @content; + } + } + + @if $breakpoint ==mobile { + @media only screen and (min-width: 421px) { + @content; + } + } +} diff --git a/submissions/natata-tutorial/js-dom/scss/style.scss b/submissions/natata-tutorial/js-dom/scss/style.scss index c30bc8fcbb..b71e228f68 100644 --- a/submissions/natata-tutorial/js-dom/scss/style.scss +++ b/submissions/natata-tutorial/js-dom/scss/style.scss @@ -1,155 +1,33 @@ -* { - padding: 0; - margin: 0; - border: 0; -} - -*, -*:before, -*:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -:focus, -:active { - outline: none; -} - -a { - box-shadow: none; - &:focus, - &:active, - &:hover { - outline: none; - box-shadow: 0 1px currentColor; - } -} - -nav, -footer, -header, -aside { - display: block; -} - -html, -body { - height: 100%; - width: 100%; - font-size: 100%; - line-height: 1; - font-size: 16px; - -ms-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} - -input, -button, -textarea { - font-family: inherit; -} - -input::-ms-clear { - display: none; -} - -button { - cursor: pointer; -} - -button::-moz-focus-inner { - padding: 0; - border: 0; -} - -a, -a:visited { - text-decoration: none; -} - -a:hover { - text-decoration: none; -} - -ul li { - list-style: none; -} - -img { - vertical-align: top; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: 400; -} - -@mixin devices ($breakpoint) { - //the name of the mixin is devices - - @if $breakpoint ==tablet { - @media only screen and (min-width: 680px) { - @content; - } - } - - @if $breakpoint ==mobile { - @media only screen and (min-width: 421px) { - @content; - } - } -} - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - border: 0; - padding: 0; - white-space: nowrap; - clip-path: inset(100%); - clip: rect(0 0 0 0); - overflow: hidden; -} +@import "variables", "reset"; html { - font-size: 14px; + font-size: $main-font-style; } -body{ - color: #0d393c; - font-family: 'Fredoka', sans-serif; - line-height: 22px; - background-color: #f6f5ee; +body { + color: $font-color; + font-family: $main-font-family; + line-height: $main-line-height; + background-color: $background-color; } - .page { min-height: 100%; min-width: 200px; display: grid; grid-template: minmax(50px, auto) 1fr minmax(50px, auto) / 1fr; grid-template-areas: - "header" - "main" - "footer"; + "header" + "main" + "footer"; &__header { grid-area: header; display: grid; - grid-template: 1fr / 1fr minmax(40px, auto) minmax(150px, 720px) minmax(40px, auto) 1fr; + grid-template: 1fr / 1fr minmax(40px, auto) minmax(150px, 720px) minmax(40px, auto) 1fr; justify-content: center; align-items: center; - padding: 15px; + padding: $main-padding; } &__burger { @@ -157,126 +35,115 @@ body{ align-self: center; justify-self: center; } - + &__logo { // grid-column: 4 / 5; - font-family: 'Kristi', cursive; + font-family: $header-font-family; display: block; - font-size: 3rem; + font-size: $logo-font-style; + list-style: $logo-line-height; color: currentColor; align-self: center; justify-self: center; - font-display:swap; } &__aside { position: fixed; - background-color: #ffffffe9; + background-color: $backgrount-transparent-color; top: 60px; left: -100%; width: 100%; height: auto; display: flex; justify-content: center; - padding: 10px; + padding: $main-padding; transition: all 0.4s ease-in; z-index: 1; overflow: auto; - - - } - &__main { grid-area: main; display: grid; grid-template: 1fr / 1fr minmax(150px, 800px) 1fr; - padding: 15px; + padding: $main-padding; } &__footer { grid-area: footer; display: grid; grid-template: 1fr / 1fr minmax(100px, 800px) 1fr; - padding: 15px; + padding: $main-padding; } - &__copyright{ + &__copyright { grid-column: 2/3; - } } - - .burger { + &__checkbox:checked ~ &__button { + span { + &:nth-child(1) { + top: 11px; + transform: rotate(135deg); + } - &__checkbox:checked ~ &__button { - span { - &:nth-child(1) { - top: 11px; - transform: rotate(135deg); - } - - &:nth-child(2) { - opacity: 0; - left: -60px; - } + &:nth-child(2) { + opacity: 0; + left: -60px; + } - &:nth-child(3) { - top: 11px; - transform: rotate(-131deg); - } - } - + &:nth-child(3) { + top: 11px; + transform: rotate(-131deg); } + } + } &__checkbox ~ &__button { box-shadow: none; @include devices(tablet) { - display: none; - } + display: none; + } } - &__checkbox:focus ~ &__button, + &__checkbox:focus ~ &__button, &__checkbox:active ~ &__button, &__checkbox:hover ~ &__button { - box-shadow: 0 0 5px #999; - border-radius: 50px; - } + box-shadow: 0 0 5px $shadow-color; + border-radius: 50px; + } &__checkbox ~ .page__aside { left: -100%; @include devices(tablet) { - position: absolute; - left: 0; - width: 200px; - } + position: absolute; + left: 0; + width: 200px; + } } &__checkbox:checked ~ .page__aside { left: 0; } - - &__button { width: 25px; height: 25px; display: block; position: relative; transform: rotate(0deg); - transition: .5s ease-in-out; + transition: 0.5s ease-in-out; cursor: pointer; span { - &:nth-child(1) { - top: 5px; - } - &:nth-child(2) { - top: 11px; - } - &:nth-child(3) { - top: 17px; - } + &:nth-child(1) { + top: 5px; + } + &:nth-child(2) { + top: 11px; + } + &:nth-child(3) { + top: 17px; + } } } @@ -290,32 +157,31 @@ body{ opacity: 1; left: 20%; transform: rotate(0deg); - transition: .25s ease-in-out; + transition: 0.25s ease-in-out; } - @include devices(tablet) { - position: relative; - } + @include devices(tablet) { + position: relative; + } } -.sidenav{ - &__title{ - font-family: 'Kristi', cursive; - font-size: 2rem; - line-height: 2.5rem; +.sidenav { + &__title { + font-family: $header-font-family; + font-size: $subtitle-font-style; + line-height: $subtitle-line-height; } - &__item{ + &__item { color: currentColor; } } .content { - &__seciton { grid-column: 2/3; - display:grid; - grid-template:repeat(5, auto)/ repeat(3, 1fr); - gap:15px; + display: grid; + grid-template: 80px repeat(4, auto) / repeat(3, 1fr); + gap: $main-padding; } &__title { @@ -323,42 +189,44 @@ body{ grid-row: 1/2; align-self: center; justify-self: right; - font-family: 'Kristi', cursive; - font-size:3rem; - line-height: 4.5rem; + font-family: $header-font-family; + font-size: $title-font-style; + line-height: $title-line-height; @include devices(mobile) { - grid-column: 2/4; - font-size: 4rem; - } + grid-column: 2/4; + font-size: $title-font-style--mobile; + } } &__text { grid-column: 1/4; grid-row: 6; - background-color: #ffffffd3; + background-color: $backgrount-transparent-color; align-self: center; justify-self: center; - padding: 15px; + padding: $main-padding; @include devices(mobile) { - grid-column: 1/3; - grid-row: 3/5; - } + grid-column: 1/3; + grid-row: 3/5; + } } &__picture { grid-column: 2/4; grid-row: 2/5; - width:100%; + width: 100%; height: auto; @include devices(mobile) { - grid-column: 2/4; - grid-row: 2/6; - } + grid-column: 2/4; + grid-row: 2/6; + } } } - .copyright { align-self: center; justify-self: center; -} \ No newline at end of file + a { + color: currentColor; + } +}