diff --git a/readme.md b/readme.md index 3a460b48..aca07fb4 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,6 @@ # Frontend practice with catalog page using grid Replace `` with your Github username and copy the links to Pull Request description: -- [DEMO LINK](https://.github.io/layout_catalog_grid/) + - [DEMO LINK](https://kyrylomanko.github.io/layout_catalog_grid/) > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github) diff --git a/src/index.html b/src/index.html index af41a22d..3058b188 100644 --- a/src/index.html +++ b/src/index.html @@ -17,35 +17,35 @@
- diff --git a/src/styles/_catalog.scss b/src/styles/_catalog.scss deleted file mode 100644 index a63c46d7..00000000 --- a/src/styles/_catalog.scss +++ /dev/null @@ -1,22 +0,0 @@ -.catalog { - display: flex; - flex-wrap: wrap; - - max-width: 944px; - margin: 0 auto; - - &__card { - display: flex; - justify-content: center; - align-items: center; - width: 200px; - height: 300px; - border: 1px solid #ccc; - border-radius: 5px; - margin-bottom: 48px; - } - - &__card:not(:nth-child(4n)) { - margin-right: 48px; - } -} diff --git a/src/styles/blocks/_catalog.scss b/src/styles/blocks/_catalog.scss new file mode 100644 index 00000000..03b990b6 --- /dev/null +++ b/src/styles/blocks/_catalog.scss @@ -0,0 +1,28 @@ +.catalog { + display: grid; + justify-content: center; + margin: 0 auto; + gap: 48px; + grid-template-columns: repeat(4, $card-width); + + @media (max-width: 1023px) { + grid-template-columns: repeat(3, $card-width); + } + + @media (max-width: 767px) { + grid-template-columns: repeat(2, $card-width); + } + + @media (max-width: 487px) { + grid-template-columns: repeat(1, $card-width); + } + + &__card { + display: grid; + place-items: center; + width: $card-width; + height: 300px; + border: 1px solid #ccc; + border-radius: 5px; + } +} diff --git a/src/styles/_header.scss b/src/styles/blocks/_header.scss similarity index 100% rename from src/styles/_header.scss rename to src/styles/blocks/_header.scss diff --git a/src/styles/main.scss b/src/styles/main.scss index cf7e6948..b1efb878 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,14 +1,6 @@ -html { - font-family: Roboto, sans-serif; -} +@import "./utils/reset"; +@import "./utils/variables"; -body { - margin: 0; -} -* { - box-sizing: border-box; -} - -@import "_header.scss"; -@import "_catalog.scss"; +@import "./blocks/header"; +@import "./blocks/catalog"; diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 00000000..3bb07cca --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,11 @@ +html { + font-family: Roboto, sans-serif; +} + +body { + margin: 0; +} + +* { + box-sizing: border-box; +} diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 00000000..cd5f0adb --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1 @@ +$card-width: 200px;