diff --git a/index.html b/index.html index 34e4c23..de49fa3 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,50 @@ - - - - - - CSS Utilities - - - Home Page - - + + + + + + + CSS Utilities + + + +
+

Beautiful CSS box-shadow examples

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
+
+ + + \ No newline at end of file diff --git a/scss/abstracts/__variables.scss b/scss/abstracts/__variables.scss deleted file mode 100644 index df1c353..0000000 --- a/scss/abstracts/__variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -/// Colors -// body color -$body-color: #fff; -$body-bg-color: #000; diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss new file mode 100644 index 0000000..3b114ff --- /dev/null +++ b/scss/abstracts/_mixins.scss @@ -0,0 +1,22 @@ +// Flex +@mixin flex-between { + display: flex; + justify-content: space-between; +} + +@mixin flex-column { + display: flex; + flex-direction: column; +} + +@mixin flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +// Grid +@mixin grid-center { + display: grid; + place-items: center; +} diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss new file mode 100644 index 0000000..937c605 --- /dev/null +++ b/scss/abstracts/_variables.scss @@ -0,0 +1,4 @@ +/// Colors +// body color +$body-color: black; +$body-bg-color: #fff; diff --git a/scss/base/_reset.scss b/scss/base/_reset.scss index 4ace5c1..c53d568 100644 --- a/scss/base/_reset.scss +++ b/scss/base/_reset.scss @@ -5,7 +5,7 @@ } body { - width: 100vw; + width: 100%; height: 100vh; color: $body-color; background-color: $body-bg-color; diff --git a/scss/pages/_home.scss b/scss/pages/_home.scss index e69de29..7cb0e2c 100644 --- a/scss/pages/_home.scss +++ b/scss/pages/_home.scss @@ -0,0 +1,28 @@ +.container { + padding: 25px; + margin-bottom: 100px; + width: 100%; + min-height: 100%; + @include grid-center; + gap: 50px; + background-color: red; + h1 { + font-size: 4vmax; + text-align: center; + } + .box-container { + width: 100%; + min-height: 100%; + @include grid-center; + gap: 50px; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + .box { + width: 150px; + height: 150px; + @include grid-center; + font-size: 2vmax; + border-radius: 10%; + background-color: yellowgreen; + } + } +} diff --git a/scss/style.scss b/scss/style.scss index bb873b9..31ad376 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,12 +1,4 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - width: 100vw; - height: 100vh; - color: white; - background-color: black; -} +@import "./abstracts/variables"; +@import "./abstracts/mixins"; +@import "./base/reset"; +@import "./pages/home";