From 27d293c87b211aa3cc7b06652f0d0e8060e4607e Mon Sep 17 00:00:00 2001 From: Melnyk Date: Fri, 23 Feb 2024 19:34:44 +0200 Subject: [PATCH] add solution --- src/index.html | 27 +++++++++++++++++---------- src/styles/blocks/block.scss | 27 +++++++++++++++++++++++++++ src/styles/blocks/page.scss | 3 +++ src/styles/main.scss | 7 ++++--- src/styles/normalize.scss | 4 ++++ src/styles/utils/variables.scss | 3 +++ 6 files changed, 58 insertions(+), 13 deletions(-) create mode 100644 src/styles/blocks/block.scss create mode 100644 src/styles/blocks/page.scss create mode 100644 src/styles/normalize.scss create mode 100644 src/styles/utils/variables.scss diff --git a/src/index.html b/src/index.html index e8ae736a0..db7afe4d0 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,20 @@ - - - - - Antisnake - - - -

Antisnake

- + + + + + Antisnake + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ diff --git a/src/styles/blocks/block.scss b/src/styles/blocks/block.scss new file mode 100644 index 000000000..2707205d5 --- /dev/null +++ b/src/styles/blocks/block.scss @@ -0,0 +1,27 @@ +.blocks { + display: grid; + grid-template-columns: repeat(auto-fit, minmax($min-block-width, 1fr)); + + @media screen and (min-width: 900px) { + & { + grid-template-columns: repeat(3, 1fr); + } + } + + &__block { + display: grid; + background-color: $color; + height: $block-height; + color: white; + font-size: 100px; + justify-content: center; + align-items: center; + } +} + +@for $i from 1 through 6 { + $percents: ($i - 1) * 20%; + .blocks :nth-child(#{$i}) { + background-color: mix(black, red, $percents); + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..8e9830899 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,3 @@ +html { + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f1..0f78b3d17 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,4 @@ -body { - margin: 0; -} +@import "./blocks/page"; +@import "./normalize"; +@import "./utils/variables"; +@import "./blocks/block"; diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss new file mode 100644 index 000000000..ea1e941c3 --- /dev/null +++ b/src/styles/normalize.scss @@ -0,0 +1,4 @@ +body { + margin: 0; + padding: 0; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..8c5ef4dcb --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,3 @@ +$block-height: 300px; +$min-block-width: 300px; +$color: red;