@@ 5,17 5,11 @@
1. Requeriments:
```
- gem install sass
+ pacman -S sassc
```
2. Generate CSS from SASS:
- ```
- sass -t compressed --sourcemap=none sass/estilos.sass:css/estilos.min.css
- ```
-
-3. Show CSS to SASS live
-
- ```
- sass --watch -t compressed --sourcemap=none sass/estilos.sass:css/estilos.min.css
+ ```console
+ sassc -t compressed sass/estilos.sass css/estilos.min.css
```
@@ 1,1 0,0 @@
-html{scroll-behavior:smooth}body{background:#fff;font-family:"liberation serif","times new roman",calibri,carlito,sans-serif,serif;font-size:16px}.contenedor{width:90%;max-width:1000px;margin:auto;overflow:hidden}header{background:url("./../images/BG.jpg") #68bdea;background-repeat:no-repeat;background-position:center;max-height:600px}header .menu{margin:40px 0px;text-align:right}header .menu a{margin:0px 20px;color:#fff;padding-bottom:9px;display:inline-block;text-decoration:none;border-bottom:2px solid transparent;font-size:1rem}header .menu a:hover{border-bottom:2px solid #fff}header .contenedor-texto{display:flex;justify-content:center;align-content:center;margin:190px 0px}header .contenedor-texto .texto{border:2px solid rgba(255,255,255,0.5);border-radius:3px;display:inline-block;text-align:center;padding:20px 60px}header .contenedor-texto .texto h1,header .contenedor-texto .texto h2{color:#fff;font-weight:300;margin:0px}header .contenedor-texto .texto .nombre{margin-bottom:10px;font-size:3.125rem;line-height:50px}header .contenedor-texto .texto .profesion{font-size:1.5rem;line-height:25px}main .contenedor{overflow:visible}main .acerca-de{text-align:center}main .acerca-de .foto{margin-top:-60px}main .acerca-de .foto img{vertical-align:top;border-radius:50%;border:5px solid rgba(255,255,255,0.2)}main .acerca-de .texto{color:#5a5a5a;font-weight:600;font-size:1rem;line-height:30px;width:80%;margin:40px auto 60px auto}main .acerca-de .texto .titulo{font-size:2.125rem;margin-bottom:40px;font-weight:300;color:#dd820d;text-align:center}main .acerca-de .texto .bold{color:#3895ea;text-decoration:underline}main .trabajos{background:#f2f2f2;padding:60px 0}main .trabajos .contenedor{overflow:hidden}main .trabajos .titulo{font-size:2.125rem;line-height:34px;margin-bottom:40px;font-weight:300;color:#323068;text-align:center}main .trabajos .contenedor-trabajos{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}main .trabajos .contenedor-trabajos .trabajo{width:23%;margin-bottom:40px}main .trabajos .contenedor-trabajos .trabajo .thumb{width:100%;margin-bottom:10px}main .trabajos .contenedor-trabajos .trabajo .thumb img{width:100%;vertical-align:top;border-radius:3px}main .trabajos .contenedor-trabajos .trabajo .descripcion{text-align:center}main .trabajos .contenedor-trabajos .trabajo .descripcion .nombre{font-weight:700;color:#3895ea;margin-bottom:10px}main .trabajos .contenedor-trabajos .trabajo .descripcion .nombre a{text-decoration:none;color:#3895ea}main .trabajos .contenedor-trabajos .trabajo .descripcion .categoria{font-size:.8rem;color:#636363}footer .contacto{padding:60px 0}footer .contacto .titulo{font-size:2.125rem;line-height:34px;margin-bottom:40px;font-weight:300;color:#3895ea;text-align:center}footer .contacto .formulario{display:flex;flex-wrap:wrap;justify-content:space-between}footer .contacto .formulario input[type="text"],footer .contacto .formulario input[type="email"]{background:#f3f4f7;border:2px solid #cecece;border-radius:5px;padding:15px 20px;font-size:1.125rem;color:#a4a4a4}footer .contacto .formulario textarea{background:#f3f4f7;border:2px solid #cecece;border-radius:5px;padding:15px 20px;font-size:1.25rem;color:#a4a4a4}footer .contacto .formulario input[type="text"]:focus,footer .contacto .formulario input[type="email"]:focus{border:2px solid #3895ea}footer .contacto .formulario textarea:focus{border:2px solid #3895ea}footer .contacto .formulario input[type="text"],footer .contacto .formulario input[type="email"]{width:45%;margin-bottom:15px}footer .contacto .formulario textarea{width:100%;height:100px;max-width:100%;min-height:100px;max-height:300px;margin-bottom:15px}footer .contacto .formulario .error{display:none;margin-top:20px;border-radius:3px;background:#fc636b;color:#fff;padding:15px 10px;padding-left:40px;width:100%}footer .contacto .formulario .boton{margin:auto;background:#3895ea;color:#fff;border:none;border-radius:3px;padding:15px 40px;cursor:pointer}footer .contacto .formulario .boton:hover{background:#387bea}footer .contacto .alert.success{color:#3895ea;white-space:pre-line}footer .contacto .alert.danger{color:#ee4c58;white-space:pre-line}footer .redes-sociales-libres{background:#1e2b38;padding:60px 0}footer .redes-sociales-libres .contenedor{display:flex;justify-content:center}footer .redes-sociales-libres a{color:#fff;text-align:center;width:100px;display:block;padding:15px 0;border-radius:3px;font-size:1.8rem;margin:0 20px}footer .redes-sociales-libres a svg{fill:currentcolor;width:24px}footer .redes-sociales-libres .diaspora:hover{background:#010101}footer .redes-sociales-libres .gnusocial:hover{background:#a42833}footer .redes-sociales-libres .gitlab:hover{background:#e24329}footer .redes-sociales-libres .libregit:hover{background:#333}footer .redes-sociales-libres .mediagoblin:hover{background:#775fa3}footer .redes-sociales-libres .notabug:hover{background:#244664}footer .redes-sociales-libres .peertube:hover{background:#f1680d}footer .copyleft{background:#192633;padding:5px 0}footer .copyleft p{color:#fff;text-align:center;font-size:.75rem}footer .copyleft p a{color:#3895ea;text-decoration:none}footer .copyleft p svg{width:.5rem;fill:currentcolor}@media screen and (max-width: 985px){footer .contacto .formulario input[type="text"],footer .contacto .formulario input[type="email"]{width:44%}}@media screen and (max-width: 830px){footer .contacto .formulario input[type="text"],footer .contacto .formulario input[type="email"]{width:42%}}@media screen and (max-width: 800px){header .menu{text-align:center}main .trabajos .contenedor-trabajos .trabajo{width:46%}footer .contacto .formulario [type="text"],[type="email"]{width:100%}}@media screen and (max-width: 630px){footer .contacto .formulario input[type="text"],footer .contacto .formulario input[type="email"]{width:100%}}@media screen and (max-width: 500px){header .contenedor-texto .texto .nombre{font-size:35px}header .contenedor-texto .texto .profesion{font-size:18px}footer .redes-sociales-libres .contenedor{flex-wrap:wrap;padding:20px 0}}@media screen and (max-width: 320px){footer .contacto .formulario input[type="text"],footer .contacto .formulario input[type="email"]{width:84%}footer .copyleft p{font-size:.6rem}}