Refactor: Decompose .contacts into separate component

astik-dev · Apr 14, 2024 · c6ec6da · c6ec6da
1 parent ed8e59d
commit c6ec6da
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 69 deletions.
diff --git a/src/components/contacts/_contacts.html b/src/components/contacts/_contacts.html
@@ -0,0 +1,15 @@
+<section class="contacts">
+ <div class="contacts__container title-content">
+
+ <h2 id="contacts">Contacts</h2>
+
+ <div class="contacts__items">
+
+ @@for (var i = 0; i < 2; i++) {
+ <a href="#" class="contacts__item contacts__item_empty"></a>
+ }
+
+ </div>
+
+ </div>
+</section>
diff --git a/src/components/contacts/_contacts.scss b/src/components/contacts/_contacts.scss
@@ -0,0 +1,63 @@
+@use "../../scss/abstracts/variables" as *;
+@use "../../scss/abstracts/mixins" as *;
+
+
+.contacts {
+
+ &__container {
+ @include container(750px, $section-gap);
+ }
+
+ &__items {
+ @include flex(flex, row, 20px, flex-start, center);
+ flex-wrap: wrap; 
+ }
+
+ &__item {
+ @include flex(flex, row, 0, center, center);
+ width: 60px;
+ height: 60px;
+
+ background: #1E293B;
+ border-radius: 50px;
+
+ transition: $anim;
+
+ img {
+ width: 25px;
+ height: 25px;
+ }
+ }
+}
+
+@media (hover: hover) {
+ .contacts {
+
+ &__item:hover {
+ background: #2C66C3;
+ }
+ }
+}
+
+@media (max-width: 575.5px) {
+ .contacts {
+
+ &__container {
+ padding-top: $section-gap-min;
+ }
+
+ &__items {
+ gap: 10px;
+ }
+
+ &__item {
+ width: 50px;
+ height: 50px;
+
+ img {
+ width: 22px;
+ height: 22px;
+ }
+ }
+ }
+}
diff --git a/src/pages/index.html b/src/pages/index.html
@@ -54,16 +54,8 @@
 
  @@include('./../components/reviews/_reviews.html')
 
- <section class="main__contacts contacts">
- <div class="contacts__container title-content">
- <h2 id="contacts">Contacts</h2>
- <div class="contacts__items">
- <a href="#" class="contacts__item contacts__item_empty"></a>
- <a href="#" class="contacts__item contacts__item_empty"></a>
- <a href="#" class="contacts__item contacts__item_empty"></a>
- </div>
- </div>
- </section>
+ @@include('./../components/contacts/_contacts.html')
+
  </main>
 
  @@include('./../components/footer/_footer-privacy-link.html')

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -12,6 +12,7 @@
 @use "../components/projects/projects";
 @use "../components/skills/skills";
 @use "../components/reviews/reviews";
+@use "../components/contacts/contacts";
 @use "../components/footer/footer";
 
 
@@ -64,65 +65,6 @@
 
 
 
-.contacts {
-
- &__container {
- @include container(750px, $section-gap);
- }
- &__items {
- @include flex(flex, row, 20px, flex-start, center);
- flex-wrap: wrap; 
- }
- &__item {
- @include flex(flex, row, 0, center, center);
- width: 60px;
- height: 60px;
-
- background: #1E293B;
- border-radius: 50px;
-
- transition: $anim;
-
- img {
- width: 25px;
- height: 25px;
- }
- }
-}
-
-@media (hover: hover) {
- .contacts {
-
- &__item:hover {
- background: #2C66C3;
- }
- }
-}
-
-@media (max-width: 575.5px) {
- .contacts {
-
- &__container {
- padding-top: $section-gap-min;
- }
-
- &__items {
- gap: 10px;
- }
- &__item {
- width: 50px;
- height: 50px;
-
- img {
- width: 22px;
- height: 22px;
- }
- }
- }
-}
-
-
-
 .privacy {
 
  &__container {