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;