Solution - Alberto Chica Santillana

README.md

@@ -17,6 +17,7 @@
 - [Technologies used](#technologies-used)
 - [Project delivery](#project-delivery)
 - [Resources](#resources)
+- [Questions](#questions)
 
 ## Requirements
 
@@ -70,3 +71,107 @@ To deliver this project you must follow the steps indicated in the document:
 - [SASS Guidelines](https://sass-guidelin.es/es/)
 - [Organizing SASS Projects](https://blog.prototypr.io/how-i-organize-sass-projects-e2d7760df86f)
 - [Why don't use @import](https://www.youtube.com/watch?v=CR-a8upNjJ0)
+
+## Questions
+
+•	What is SASS? What does SASS stand for?
+SASS (which stands for ‘Syntactically awesome style sheets’) is an  areo f b 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  areo  style sheets faster.
+
+•	What is a CSS pre-processor?
+
+The pre-processor is  areo f ble for transpiling scss files into browser-readable css code.
+
+•	What does a pre-processor have to do with SASS?
+
+The preprocessor takes  areo f translating scss to css
+
+•	Why use SASS?
+
+Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.
+
+Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
+
+•	SASS has disadvantages? Which are?
+
+o	The developer must have enough time to learn new features present in this preprocessor before using it.
+o	Using Sass may cause losing benefits of browser’s built-in element inspector.
+o	Code has to be compiled
+o	 Difficult  Troubleshooting
+
+
+•	What is a SASS Variable? Explain why are useful
+
+Think of variables as a way to store information that you want to reuse throughout your stylesheet. 
+You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.
+•	Explain the SASS variables property with an example.
+
+
+
+•	What is a mixin? Why is it important? Give an example
+
+A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.
+To create a mixin you use the @mixin directive and give it a name. We've named our mixin transform. We're also using the variable $property inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.
+
+
+
+•	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.
+
+.sass file extension use indentation and .scss use brackets
+
+•	In which cases would we use SCSS? And in which cases would we use SASS?
+
+
+
+•	Explain how traditional CSS and Preprocessed CSS workflows are different.
+
+The preprocessor will translate .scss to .css and the traditional scss will read css files from top to bottom.
+
+•	Can we create functions with SASS? If it is true, give an example.
+
+
+
+
+
+•	What is nesting? Is it useful? Give an example of nesting
+
+When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.
+Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
+
+•	Difference between @use & @import? Give an example
+
+The @import directive allows you to include the content of one file in another. (deprecated)
+
+The new @use is similar to @import. but has some notable differences:
+-	The file is only imported once, no matter how many times you @use it in a project.
+
+-	Variables, mixins, and functions (what Sass calls “members”) that start with an underscore (_) or hyphen (-) are considered private, and not imported.
+
+-	Members from the used file are only made available locally, but not passed along to future imports.
+-	All imported members are namespaced by default.
+
+
+•	How can we import other CSS/SASS files in SASS? Give an example
+
+
+•	Explain the concept of inheritance in SASS.
+
+If you want share a set of CSS properties from one selector to another. 
+•	Why use @extend? Give an example
+
+Using @extend lets you share a set of CSS properties from one selector to another. 
+A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.
+
+
+
+

assets/index.scss

@@ -0,0 +1,2 @@
+@use './scss/components';
+@use './scss/abstract';

assets/js/main.js

@@ -0,0 +1,47 @@
+document.addEventListener("click", (e) => {
+  if (e.target.matches("[data-heart]")) {
+    console.log("heart");
+  }
+});
+
+document.addEventListener("click", (e) => {
+  if (e.target.matches("[arrow-right]")) {
+    console.log("right");
+  }
+});
+
+document.addEventListener("DOMContentLoaded", (e) => {
+  let index = 0;
+  const images = document.querySelector(".image-login").children;
+  images[index].style.opacity = "1";
+  images[index].style.visibility = "visible";
+
+  setInterval(() => {
+    if (index < images.length - 1) {
+      index++;
+    } else {
+      transitionOpacity0(images);
+      index = 0;
+    }
+
+    images[index].style.transition = "opacity 3s";
+    images[index].style.visibility = "visible";
+    images[index].style.opacity = "1";
+
+    if (index > 0) {
+      /* transitionOpacity0(); */
+    }
+  }, 3000);
+});
+
+function transitionOpacity0(images) {
+  for (let index = 0; index < images.length; index++) {
+    if (index == 0) {
+      images[index].style.transition = "opacity 3s";
+      images[index].style.visibility = "visible";
+      images[index].style.opacity = "1";
+    }
+    images[index].style.visibility = "hidden";
+    images[index].style.opacity = "0";
+  }
+}

assets/scss/abstract/_colors.scss

@@ -0,0 +1,8 @@
+$color-facebook: #385185;
+$color-blue-light: #0095f6;
+$color-grey: #8e8e8e;
+$background-main: #fafafa;
+$white: #FFFFFF;
+$border-color-navbar: #dbdbdb;
+$color-letters-post: #262626;
+$color-mention: #00376b;

assets/scss/abstract/_index.scss

@@ -0,0 +1,3 @@
+@forward './colors';
+@forward './variables';
+@forward './mixins';

assets/scss/abstract/_mixins.scss

@@ -0,0 +1,24 @@
+$ncols: 12;
+
+$breakpoints: ('xs': 0,
+    'sm':576px,
+    'md':768px,
+    'lg':992px,
+    'xl':1200px,
+    'xxl':1400px);
+
+@mixin cols($bks, $ncols, $prefix) {
+
+    @each $name,
+    $bk in $bks {
+        @media(min-width: $bk) {
+            @for $i from 1 to $ncols+1 {
+                .#{$prefix}-#{$name}-#{$i} {
+                    width: (($i * 100) / $ncols) * 1%;
+                }
+            }
+        }
+    }
+}
+
+@include cols($breakpoints, $ncols, 'col');

assets/scss/abstract/_variables.scss

@@ -0,0 +1,6 @@
+$font-size-normal: 14px;
+$font-weight-600: 600;
+$font-size-small: 12px;
+$font-size-medium: 18px;
+$font-size-xs: 10px;
+$border-image-perfil: 3px solid rgb(255, 33, 0);

assets/scss/components/_footer.scss

@@ -0,0 +1,19 @@
+@use '../abstract'as a;
+
+.footer {
+    text-align: center;
+
+    &__link {
+        color: a.$color-grey;
+        padding: 0.5rem;
+        font-size: a.$font-size-small;
+        font-weight: 400;
+    }
+
+    &__copyright {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        padding-top: 10px;
+    }
+}

assets/scss/components/_header.scss

@@ -0,0 +1,77 @@
+@use '../abstract/'as a;
+
+.header {
+    max-width: 975px;
+    display: flex;
+    justify-content: center;
+    margin: 0 auto;
+    padding: 0 1rem;
+
+    &__logo {
+        flex-grow: 1;
+        width: 33.33%;
+
+        &__image--resize {
+            max-width: 100px;
+        }
+    }
+
+    &__search {
+        flex-grow: 1;
+        width: 33.33%;
+        line-height: 2.5;
+        height: 28px;
+        display: none;
+
+        @media (min-width: 576px) {
+            display: block;
+        }
+
+        &>input {
+            border: solid 1px #dbdbdb;
+            border-radius: 3px;
+            outline: 0;
+            padding: 3px 10px 3px 26px;
+            background-color: a.$background-main;
+            text-align: center;
+            padding: 4px;
+            font-weight: 300;
+            font-size: a.$font-size-normal;
+        }
+    }
+
+    &__icons {
+        flex-grow: 1;
+        min-width: 215px;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        line-height: 3;
+
+        &__icon {
+            padding: 0 0.5rem;
+        }
+
+        &__icon-span {
+            height: 22px;
+            width: 22px;
+            display: block;
+        }
+
+        &__icon--resize {
+            width: 100%;
+            border-radius: 50%;
+        }
+    }
+}
+
+.navbar {
+    position: fixed;
+    top: 0;
+    align-items: center;
+    width: 100%;
+    padding: 0.5rem 0 0 0;
+    border-bottom: 1px solid a.$border-color-navbar;
+    background-color: a.$white;
+    z-index: 100;
+}

assets/scss/components/_index.scss

@@ -0,0 +1,8 @@
+@forward 'header';
+@forward 'left-login';
+@forward 'login';
+@forward 'posts';
+@forward 'footer';
+@forward 'layout';
+@forward 'reset';
+@forward 'stories';

assets/scss/components/_layout.scss

@@ -0,0 +1,28 @@
+@use '../abstract'as a;
+
+.app{
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-bottom: 10px;
+    background-color: a.$background-main;
+    padding-top: 1rem;
+}
+
+.image-login{
+    width: 50%;
+}
+
+.container-login{
+    width: 50%;
+    max-width: 350px;
+}
+
+.main{
+    margin: 0 auto;
+    max-width: 600px;
+    position: relative;
+    width: 100%;
+}

assets/scss/components/_left-login.scss

@@ -0,0 +1,27 @@
+@use '../abstract/'as a;
+
+.image-login {
+    display: none;
+    height: 618px;
+    background-image: url(/assets/images/image-login.png);
+    flex-basis: 454px;
+    margin-left: -35px;
+    margin-right: -15px;
+    position: relative;
+
+    &>img {
+        height: 434px;
+        left: 147px;
+        opacity: 0;
+        position: absolute;
+        top: 96px;
+        visibility: hidden;
+        width: 248px;
+    }
+}
+
+@media (min-width: 992px) {
+    .image-login {
+        display: block;
+    }
+}