solution: Brahim Benalia & Santiago Verdugo

README.md

@@ -6,18 +6,150 @@
   <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
 </p>
 
-> Sass (which stands for 'Syntactically awesome style sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more
->
 > The purpose of this project is to learn the basics of SASS and put them into practice by building a visual replica of Instagram
 
 ## Index <!-- omit in toc -->
 
+- [Theory](#theory)
 - [Requirements](#requirements)
 - [Repository](#repository)
 - [Technologies used](#technologies-used)
 - [Project delivery](#project-delivery)
 - [Resources](#resources)
 
+## Theory
+
+### What is SASS? What does SASS stand for?
+
+SASS (which stands for 'Syntactically awesome style sheets’) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.
+
+### What is a CSS pre-processor?
+
+A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.
+
+### What does a pre-processor have to do with SASS?
+
+SASS is one of a bunch of CSS pre-processor
+
+### Why use SASS?
+
+Here are seven benefits of using SASS:
+
+- Uses the same CSS syntax
+- Use of variables
+- Nested syntax
+- It includes mixins
+- Use of modules
+- It has a large community and is well documented
+- If you know SASS, you can customize Bootstrap 4
+
+### SASS has disadvantages? Which are?
+
+- The developer must have enough time to learn new features present in this preprocessor before using it.
+- Using Sass may cause losing benefits of browser’s built-in element inspector.
+- Code has to be compiled
+- Difficult Troubleshooting
+
+### What is a SASS Variable? Explain why are useful
+
+A variable allows you us store a value or a set of values, and to reuse these variables throughout our SASS files as many times we want and wherever we want. Easy, powerful, and useful.
+
+### Explain the SASS variables property with an example.
+
+```css
+$blue: #004bb4;
+$ubuntu-font: "Ubuntu", "Arial", "Helvetica", sans-serif;
+$nunito-font: "Nunito", "Arial", "Helvetica", sans-serif;
+```
+
+```css
+h1 {
+  font: $ubuntu-font;
+  color: $blue;
+}
+a {
+  font: $nunito-font;
+  background-color: $blue;
+  padding: 6px;
+}
+```
+
+### What is a mixin? Why is it important? Give an example
+
+Mixins are like functions in other programming languages. They return a value or set of values and can take parameters including default values. Note that SASS also has functions, so do not confuse a mixin with a function.
+
+For example:
+
+```css
+@mixin set-font($family: "Ubuntu", $weight: 400, $style: normal) {
+  font-family: $family, "Arial", "Helvetica", sans-serif;
+  font-style: $style;
+  font-weight: $weight;
+}
+```
+
+```css
+h1 {
+  @include set-font;
+  color: $blue;
+}
+```
+
+### What is SCSS? Give an example
+
+SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax. It is the new version of SASS.
+
+### What is SASS? Give an example
+
+Indented (simply called 'Sass'): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it's quicker to write. It’s the old version of SASS, but it will never be deprecated!
+
+### What is the difference between .scss and .sass syntax.
+
+Example.sass - sass is the older syntax
+
+```css
+$font-stack: Helvetica,sans-serif;
+$primary-color:#333;
+body{
+font:100% $font-stack;
+color:$primary-color;
+}
+Extension *.scss
+Requires the use of {}
+Requires the use of ;
+```
+
+Example.scss - sassy css is the new syntax as of Sass 3
+
+```css
+$font-stack: Helvetica,sans-serif
+$primary-color:#333
+body
+font:100% $font-stack
+color:$primary-color
+Extension *.sass
+Does not requires the use of {}
+Does not requires the use of ;
+```
+
+### In which cases would we use SCSS? And in which cases would we use SASS?
+
+In large projects where there is a lot of code we will use SCSS, and if we have a little code we can use SASS to
+
+### Explain how traditional CSS and Preprocessed CSS workflows are different.
+
+### Can we create functions with SASS? If it is true, give an example.
+
+### What is nesting? Is it useful? Give an example of nesting
+
+### Difference between @use & @import? Give an example
+
+### How can we import other CSS/SASS files in SASS? Give an example
+
+### Explain the concept of inheritance in SASS.
+
+### Why use @extend? Give an example
+
 ## Requirements
 
 - You must use variables at least once in the project.

assets/js/_home.scss

@@ -0,0 +1,67 @@
+.stories {
+  display: flex;
+  justify-content: space-around;
+  margin: 2rem 0;
+
+  img {
+    @include circleBorderRadius(3px, $brColorStory);
+    height: 5rem;
+    width: 5rem;
+  }
+}
+
+.post {
+  border: $thinBorder;
+  max-width: 700px;
+  margin: 2.5rem auto;
+
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $yPadding $xPadding;
+    img {
+      @include circleBorderRadius(0px, $brColor);
+      height: 2.5rem;
+      width: 2.5rem;
+      margin-right: 0.5rem;
+    }
+    div {
+      display: flex;
+      align-items: center;
+    }
+    > p {
+      opacity: 0.6;
+    }
+  }
+
+  &__image {
+    overflow: hidden;
+  }
+
+  &__icons {
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    padding: 1.5rem;
+    div {
+      display: flex;
+      i {
+        margin-right: 1rem;
+      }
+    }
+  }
+
+  &__likes {
+    padding: $yPadding $xPadding;
+  }
+
+  &__message {
+    padding: $yPadding $xPadding;
+  }
+
+  &__comments {
+    padding: $yPadding $xPadding;
+    opacity: 0.6;
+  }
+}

assets/sass/base/_general.scss

@@ -0,0 +1,10 @@
+@use "../helpers/variables" as *;
+
+main {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+body {
+  background-color: $backgroundColor;
+}

assets/sass/base/_index.scss

@@ -0,0 +1,3 @@
+@forward 'reset';
+@forward 'typography';
+@forward 'general';

assets/sass/base/_mixins.scss

@@ -0,0 +1,28 @@
+@mixin circleBorderRadius($borderWidth, $borderColor) {
+  border: $borderWidth solid $borderColor;
+  border-radius: 50%;
+}
+
+
+@mixin generalInput {
+  background-color: $backgroundColor;
+  font-weight: 600;
+  font-size: 12px;
+  border-radius: 6px;
+  border: $globalBorder;
+  height: 40px;
+
+}
+
+
+@mixin loginButton{
+  border: none;
+  height: 30px;
+  color: white;
+  font-weight: 600;
+  border: 5px $globalBorder solid;
+  border-radius: 5px;
+  width: 76%;
+  margin-top: 4%;
+  background-color: $inactiveButtonColor;
+}

assets/sass/base/_reset.scss

@@ -0,0 +1,7 @@
+*,
+*::after,
+*::before{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}

assets/sass/base/_responsive.scss

@@ -0,0 +1,5 @@
+@media only screen and (max-width: 768px) {
+    .leftContainer {
+      display: no;
+    }
+  }

assets/sass/base/_typography.scss

@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+
+
+
+// text propierties
+
+h4{
+    font-weight: 500;
+    color: #5295F6;
+    font-size: 15px;
+}

assets/sass/components/_index.scss

@@ -0,0 +1,3 @@
+@forward 'input';
+@forward 'page/login/main/buttons/downloadBttn';
+@forward 'page';

assets/sass/components/_input.scss

@@ -0,0 +1,22 @@
+@use "../helpers/variables" as *;
+@use "../helpers/mixins" as *;
+
+.input {
+  @include generalInput();
+  padding-left: 3%;
+  align-items: center;
+  margin: 2%;
+  width: 74%;
+  margin-left: 13%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  &:focus{
+    border: 1px orange solid;
+  }
+
+  ::placeholder {
+    font-size: 10px;
+    opacity: 1;
+  }
+}

assets/sass/components/page/_index.scss

@@ -0,0 +1,2 @@
+@forward 'login';
+@forward 'home';

assets/sass/components/page/home/_index.scss

@@ -0,0 +1,2 @@
+@forward 'posts';
+@forward 'stories';

assets/sass/components/page/home/_posts.scss

@@ -0,0 +1,50 @@
+@use "../../../helpers/variables" as *;
+@use "../../../helpers/mixins" as *;
+@use "../../../helpers/extension" as *;
+
+.post {
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $yPadding $xPadding;
+    img {
+      @include circleBorderRadius(0px, $brColor);
+      height: 2.5rem;
+      width: 2.5rem;
+      margin-right: 0.5rem;
+    }
+    div {
+      display: flex;
+      align-items: center;
+    }
+    > p {
+      opacity: 0.6;
+    }
+  }
+
+  &__image {
+    overflow: hidden;
+  }
+
+  &__icons {
+    font-size: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    padding: 1.5rem;
+    div {
+      display: flex;
+      i {
+        margin-right: 1rem;
+      }
+    }
+
+    &__comments {
+      opacity: 0.6;
+    }
+    .fa-heart {
+      font-weight: bold;
+      color: red;
+    }
+  }
+}