diff options
Diffstat (limited to 'templates/sass')
| -rw-r--r-- | templates/sass/_front.sass | 228 | ||||
| -rw-r--r-- | templates/sass/_libresocial.sass | 68 | ||||
| -rw-r--r-- | templates/sass/_mediaqueries.sass | 41 | ||||
| -rw-r--r-- | templates/sass/_tipografia.sass | 18 | ||||
| -rw-r--r-- | templates/sass/estilos.sass | 14 |
5 files changed, 369 insertions, 0 deletions
diff --git a/templates/sass/_front.sass b/templates/sass/_front.sass new file mode 100644 index 0000000..4448941 --- /dev/null +++ b/templates/sass/_front.sass @@ -0,0 +1,228 @@ +body + background: #fff + font-family: "Open Sans", sans-serif + font-size: 16px + +.contenedor + width: 90% + max-width: 1000px + margin: auto + overflow: hidden + +/* ---- ---- HEADER ---- ---- */ + +header + background: url("./../images/BG.jpg") #68bdea + background-repeat: no-repeat + background-position: center + max-height: 600px + .menu + margin: 40px 0px + text-align: right + a + margin: 0px 20px + color: #fff + padding-bottom: 9px + display: inline-block + text-decoration: none + border-bottom: 2px solid transparent + font-size: 1rem + &:hover + border-bottom: 2px solid #fff + .contenedor-texto + display: flex + justify-content: center + align-content: center + margin: 190px 0px + .texto + border: 2px solid rgba(255, 255, 255, 0.5) + border-radius: 3px + display: inline-block + text-align: center + padding: 20px 60px + h1, h2 + color: #fff + font-weight: 300 + margin: 0px + .nombre + margin-bottom: 10px + font-size: 3.125rem + line-height: 50px + .profesion + font-size: 1.5rem + line-height: 25px + +/* ---- ---- MAIN ---- ---- */ + +main + .contenedor + overflow: visible + .acerca-de + text-align: center + .foto + margin-top: -60px + img + vertical-align: top + border-radius: 50% + border: 5px solid rgba(255, 255, 255, 0.2) + .texto + color: #5a5a5a + font-weight: 600 + font-size: 1rem + line-height: 30px + width: 80% + margin: 40px auto 60px auto + .titulo + font-size: 2.125rem + margin-bottom: 40px + font-weight: 300 + color: #dd820d + text-align: center + .bold + color: #3895ea + text-decoration: underline + .trabajos + background: #f2f2f2 + padding: 60px 0 + .contenedor + overflow: hidden + .titulo + font-size: 2.125rem + line-height: 34px + margin-bottom: 40px + font-weight: 300 + color: #323068 + text-align: center + .contenedor-trabajos + display: flex + flex-direction: row + flex-wrap: wrap + justify-content: space-between + .trabajo + width: 23% + margin-bottom: 40px + .thumb + width: 100% + margin-bottom: 10px + img + width: 100% + vertical-align: top + border-radius: 3px + .descripcion + text-align: center + .nombre + font-weight: 700 + color: #3895ea + margin-bottom: 10px + a + text-decoration: none + color: #3895ea + .categoria + font-size: 0.8rem + color: #636363 + +/* ---- ---- FOOTER ---- ---- */ + +footer + .contacto + padding: 60px 0 + .titulo + font-size: 2.125rem + line-height: 34px + margin-bottom: 40px + font-weight: 300 + color: #3895ea + text-align: center + .formulario + display: flex + flex-wrap: wrap + justify-content: space-between + input + &[type="text"], &[type="email"] + background: #f3f4f7 + border: 2px solid #cecece + border-radius: 5px + padding: 15px 20px + font-size: 1.125rem + color: #a4a4a4 + textarea + background: #f3f4f7 + border: 2px solid #cecece + border-radius: 5px + padding: 15px 20px + font-size: 1.25rem + color: #a4a4a4 + input + &[type="text"]:focus, &[type="email"]:focus + border: 2px solid #3895ea + textarea:focus + border: 2px solid #3895ea + input + &[type="text"], &[type="email"] + width: 45% + margin-bottom: 15px + textarea + width: 100% + height: 100px + max-width: 100% + min-height: 100px + max-height: 300px + margin-bottom: 15px + .error + display: none + margin-top: 20px + border-radius: 3px + background: #fc636b + color: #fff + padding: 15px 10px + padding-left: 40px + width: 100% + .boton + margin: auto + background: #3895ea + color: #fff + border: none + border-radius: 3px + padding: 15px 40px + cursor: pointer + &:hover + background: #387bea + .redes-sociales-libres + background: #1e2b38 + padding: 60px 0 + .contenedor + display: flex + justify-content: center + a + color: #fff + text-align: center + width: 100px + display: block + padding: 15px 0 + border-radius: 3px + font-size: 1.8rem + margin: 0 20px + .diaspora:hover + background: #010101 + .gnusocial:hover + background: #a42833 + .gitlab:hover + background: #e24329 + .libregit:hover + background: #333333 + .mediagoblin:hover + background: #775fa3 + .notabug:hover + background: #244664 + .peertube:hover + background: #f1680d + .copyleft + background: #192633 + padding: 5px 0 + p + color: #fff + text-align: center + font-size: 0.75rem + a + color: #3895ea + text-decoration: none diff --git a/templates/sass/_libresocial.sass b/templates/sass/_libresocial.sass new file mode 100644 index 0000000..84e2ff8 --- /dev/null +++ b/templates/sass/_libresocial.sass @@ -0,0 +1,68 @@ +//variables +$libresocial-path: "../fonts" + +@font-face + font-family: 'libresocial' + src: url('#{$libresocial-path}/libresocial/libresocial.woff') format("woff"), url('#{$libresocial-path}/libresocial/libresocial.ttf') format("truetype"), url('#{$libresocial-path}/libresocial/libresocial.svg') format("svg") + font-weight: normal + font-style: normal + +[class^="icon-"]:before, [class*=" icon-"]:before + font-family: "libresocial" + font-style: normal + font-weight: normal + speak: none + display: inline-block + text-decoration: inherit + width: 1em + margin-right: .2em + text-align: center + /* opacity: .8; */ + /* For safety - reset parent styles, that can break glyph codes */ + font-variant: normal + text-transform: none + /* fix buttons height, for twitter bootstrap */ + line-height: 1em + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ + +.icon-diaspora:before + content: '\e800' + +.icon-friendica:before + content: '\e801' + +.icon-gitlab:before + content: '\e802' + +.icon-gnusocial:before + content: '\e803' + +.icon-hubzilla:before + content: '\e804' + +.icon-mastodon:before + content: '\e805' + +.icon-mediagoblin:before + content: '\e806' + +.icon-notabug:before + content: '\e807' + +.icon-pump:before + content: '\e808' + +.icon-tox:before + content: '\e809' + +.icon-xmpp:before + content: '\e810' diff --git a/templates/sass/_mediaqueries.sass b/templates/sass/_mediaqueries.sass new file mode 100644 index 0000000..4e521de --- /dev/null +++ b/templates/sass/_mediaqueries.sass @@ -0,0 +1,41 @@ +@media screen and (max-width: 985px) + footer .contacto .formulario input + &[type="text"], &[type="email"] + width: 44% + +@media screen and (max-width: 830px) + footer .contacto .formulario input + &[type="text"], &[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"], &[type="email"] + width: 100% + +@media screen and (max-width: 500px) + header .contenedor-texto .texto + .nombre + font-size: 35px + .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"], &[type="email"] + width: 84% + footer + .copyleft + p + font-size: 0.60rem diff --git a/templates/sass/_tipografia.sass b/templates/sass/_tipografia.sass new file mode 100644 index 0000000..46262af --- /dev/null +++ b/templates/sass/_tipografia.sass @@ -0,0 +1,18 @@ +//variables +$font-path: "../fonts" + +/* latin */ +@font-face + font-family: 'Open Sans' + font-style: normal + font-weight: 400 + src: local("Open Sans"), local("OpenSans"), url('#{$font-path}/opensans/ops/latin.woff2') format("woff2") + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215 + +/* latin */ +@font-face + font-family: 'Open Sans' + font-style: normal + font-weight: 600 + src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url('#{$font-path}/opensans/opssemibold/latin.woff2') format("woff2") + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215 diff --git a/templates/sass/estilos.sass b/templates/sass/estilos.sass new file mode 100644 index 0000000..d494fb3 --- /dev/null +++ b/templates/sass/estilos.sass @@ -0,0 +1,14 @@ +// Estilos para Portafolio +// License AGPLv3 or later + +/* ---- Tipografía ---- */ +@import tipografia + +/* ---- LibreSocial ---- */ +@import libresocial + +/* ---- Frontend ---- */ +@import front + +/* ---- MEDIA QUERIES ---- */ +@import mediaqueries |