Stampa es una familia tipográfica de íconos diseñada para trabajar con Pyxis, el framework gráfico de la e[ad].
+Stampa es una familia tipográfica de íconos diseñada para trabajar con Pyxis, el framework gráfico de la e[ad].
descargar Stampa Webfontdescargar Íconos Stampa
diff --git a/less/basic.less b/less/basic.less
index 166b179..c4ef569 100644
--- a/less/basic.less
+++ b/less/basic.less
@@ -39,7 +39,7 @@ h1{
h2{
color: @color-stampa;
font-size: 31px;
- font-weight: 500;
+ font-weight: 900;
color: rgba(69, 71, 71, 1);
clear: both;
margin-top: 70px;
@@ -48,12 +48,12 @@ h2{
h3{
color: @color-stampa;
font-size: 19px;
- font-weight: 100;
+ font-weight: 900;
}
h4 {
font-size: 19px;
- font-weight: 400;
+ font-weight: 900;
color: @color-stampa;
}
@@ -66,34 +66,21 @@ h5 {
margin-bottom: 105px;
}
+p{
+ line-height: 140%;
+}
+
a,ul,li{
text-decoration: none;
list-style: none;
}
-h4 a:link{
- font-weight: 400;
- color:@color-stampa;
-}
-
-h4 a:visited{
- color:@color-stampa;
-}
-
-h4 a:hover{
- color:@color-stampa;
-}
-
-h4 a:active{
- color:@color-stampa;
-}
.content{
width: 75%;
margin: auto;
a{
&:link{
- font-weight: 400;
color:@color-stampa;
}
&:visited{
@@ -113,6 +100,10 @@ h4 a:active{
margin: 0px auto;
}
+.version{
+ font-size: 12px;
+ color: @color-blanco;
+}
/* Header y footer */
@@ -214,34 +205,17 @@ table td span{
code{
display: inline-block;
font-family: @mono;
- background-color: white;
+ white-space: pre;
+ background-color: fade(@color-negro, 70);
padding: .3ex 1ex;
- color: rgba(69, 71, 71, 1);
- border: solid rgba(226, 226, 226, 1) 1px;
- .border-radius(4px);
+ color: @color-blanco;
+ text-shadow: -1px -1px 0 @color-negro;
+ .border-radius(6px);
font-size: 14px;
-}
-
-.gist{
-margin: 0px 0px !important;
-font-size: 11px !important;
-}
-
-.gist-file{
-border: none !important;
-}
-
-.gist-meta{
-border: 1px solid @color-gris;
-padding: 12px !important;
-
-}
-
-.gist-data{
-padding: 15px !important;
-border: 1px solid @color-gris;
-background-color: @color-blanco;
-border-bottom: none !important;
+ &.bloque{
+ padding: .5em 1em;
+ width: 100%
+ }
}
diff --git a/package.json b/package.json
index 91a6dd7..ca22d47 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "Stampa",
"title": "Stampa",
"description": "íconos de la escuela e[ad]",
- "version": "4.0.0",
+ "version": "4.0.1",
"homepage": "http://eadpucv.github.io/stampa/",
"author": {
"name": "Varios",
diff --git a/pages/usos.md b/pages/usos.md
index ebf0672..d4d2422 100644
--- a/pages/usos.md
+++ b/pages/usos.md
@@ -4,58 +4,57 @@ title: Usos
---
-
-
-
-
-
-
-
+
-
diff --git a/style/basic.css b/style/basic.css
index a184385..1429038 100644
--- a/style/basic.css
+++ b/style/basic.css
@@ -1 +1 @@
-@import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic);@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro: 200,300,400);@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);@media (max-width:800px){h1{font-size:110px;text-shadow:3px 4px 0 rgba(0,0,0,.3)}h2{font-size:30px}.wrap{max-width:550px}nav li{margin-right:22%}.github-btn{display:none}.gigante{font-size:140px}.ejemplo{font-size:15px;line-height:20px;float:none;text-align:top;display:block;border-right:0;border-bottom:solid #e2e2e2 5px;width:95%;max-height:auto;margin-right:none;margin-bottom:30px;padding:15px 0 45px}}@media (max-width:640px){h2{font-size:24px;margin-top:30px}.wrap{max-width:78%}nav li{margin-right:21%}.github-btn{display:none}.gigante{font-size:100px}footer{margin-top:90px}.tres-columnas{-moz-column-count:2;-moz-column-gap:30px;-webkit-column-count:2;-webkit-column-gap:30px}}@media (max-width:480px){h1{font-size:70px;text-shadow:none}h2{font-size:18px;margin-top:15px}h4{font-size:16px}.wrap{max-width:84%}.content{width:84%}nav li{margin-right:17%;color:#0969A2;font-size:14px;font-weight:400}.github-btn{display:none}.gigante{display:none}header{min-height:200px}footer{margin-top:90px;max-height:70px;bottom:0}.caja-icono{float:none;width:90%;height:auto;background-color:#e2e2e2;display:block;margin:5px 0;padding:5px;float:left}.caja-icono p{font-size:14px;font-weight:400;line-height:10px}.caja-icono i{font-size:21px;line-height:10px}.gist{display:none}.tres-columnas{-moz-column-count:1;-webkit-column-count:1}}body{font-family:Merriweather,Georgia,serif;font-weight:300;font-size:16px;background-color:#f9faea;color:#000;min-width:100%;margin:0 auto}h1{color:#fff;font-weight:700;font-size:130px;margin:0;text-shadow:5px 5px 0 rgba(0,0,0,.3);padding-top:18px;padding-bottom:18px}h2{color:#228bf3;font-size:31px;font-weight:500;color:#454747;clear:both;margin-top:70px}h3{color:#228bf3;font-size:19px;font-weight:100}h4{font-size:19px;font-weight:400;color:#228bf3}h5{font-size:14px;clear:both;padding:5px 15px;border:solid #228bf3 1px;max-width:105px;margin-bottom:105px}a,ul,li{text-decoration:none;list-style:none}h4 a:link{font-weight:400;color:#228bf3}h4 a:visited{color:#228bf3}h4 a:hover{color:#228bf3}h4 a:active{color:#228bf3}.content{width:75%;margin:auto}.content a:link{font-weight:400;color:#228bf3}.content a:visited{color:#228bf3}.content a:hover{color:#228bf3}.content a:active{color:#228bf3}.wrap{max-width:680px;margin:0 auto}header{margin-top:-16px}header,footer{background-color:#228bf3;display:block;padding-top:20px;padding-bottom:20px}header *,footer *{color:rgba(249,249,243,.8);text-align:center}header h1,footer h1,header .icn,footer .icn{color:#f9f9f3}header a,footer a{font-weight:700;color:#f9f9f3}footer{margin-top:150px;font-size:11px;font-weight:300;text-align:center;clear:both}nav{font-family:'Source Sans Pro',Helvetica,sans;font-weight:700;background-color:#f9faea;height:42px;padding-top:15px;margin:0}nav ul{margin:0}nav ul li{float:left;margin-right:80px;font-size:20px;font-weight:500}nav ul li :hover{text-shadow:2px 2px 0 #f9f9f3}nav ul li .icn{color:inherit}nav ul li:last-child{margin-right:0}nav ul li a{color:#228bf3}table{width:100%;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px}table th{text-align:left;color:#A5CFE8}table th,table td{padding:10px}table td span{color:inherit}code{display:inline-block;font-family:'Droid Sans Mono';background-color:#fff;padding:.3ex 1ex;color:#454747;border:solid #e2e2e2 1px;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px;font-size:14px}.gist{margin:0 0!important;font-size:11px!important}.gist-file{border:0!important}.gist-meta{border:1px solid #85857b;padding:12px!important}.gist-data{padding:15px!important;border:1px solid #85857b;background-color:#f9f9f3;border-bottom:0!important}.caja-icono{width:100px;height:70px;background-color:#f9f9f3;display:block;border-radius:5px;text-align:center;margin:7px;padding:5px;float:left}.caja-icono i{color:#131312}.caja-icono p{font-family:'Droid Sans Mono';text-align:center;font-size:10px;color:#131312;text-shadow:1px 1px 0 #f9f9f3}.caja-icono:last-child{margin-bottom:60px}.tres-columnas{-moz-column-count:3;-moz-column-gap:20px;-webkit-column-count:3;-webkit-column-gap:20px}.lista-icono{font-size:18px}.clear{clear:both}.divide{border-bottom:1px solid #85857b}.prueba{font-size:50px;font-weight:400}.efecto{text-shadow:1px 1px 0 rgba(185,162,103,.9);border:.2px dashed #fff;box-shadow:2px 2px 4px 1px rgba(0,0,0,.2);padding:2px 10px;color:rgba(214,194,102,.4)}.centrado{text-align:center}.btn{display:inline-block;white-space:nowrap;font-family:'Source Sans Pro',Helvetica,sans;font-weight:100!important;font-size:28px;margin:40px 20px 60px;background-color:#228bf3;color:#f9f9f3!important;letter-spacing:-.06ex;text-decoration:none;padding:.4em 1em;text-transform:lowercase;-webkit-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;border-radius:6px;box-shadow:5px 5px 0 rgba(0,0,0,.2)}.btn .icn{font-family:Stampa;font-weight:400;letter-spacing:normal}.btn:hover{color:#f9f9f3!important;background-color:#228bf3}.xxl{font-size:72px}.rojo{color:#d91419}.naranja{color:#de6708}.azul{color:#2d5ebc}
\ No newline at end of file
+@import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic);@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro: 200,300,400);@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);@media (max-width:800px){h1{font-size:110px;text-shadow:3px 4px 0 rgba(0,0,0,.3)}h2{font-size:30px}.wrap{max-width:550px}nav li{margin-right:22%}.github-btn{display:none}.gigante{font-size:140px}.ejemplo{font-size:15px;line-height:20px;float:none;text-align:top;display:block;border-right:0;border-bottom:solid #e2e2e2 5px;width:95%;max-height:auto;margin-right:none;margin-bottom:30px;padding:15px 0 45px}}@media (max-width:640px){h2{font-size:24px;margin-top:30px}.wrap{max-width:78%}nav li{margin-right:21%}.github-btn{display:none}.gigante{font-size:100px}footer{margin-top:90px}.tres-columnas{-moz-column-count:2;-moz-column-gap:30px;-webkit-column-count:2;-webkit-column-gap:30px}}@media (max-width:480px){h1{font-size:70px;text-shadow:none}h2{font-size:18px;margin-top:15px}h4{font-size:16px}.wrap{max-width:84%}.content{width:84%}nav li{margin-right:17%;color:#0969A2;font-size:14px;font-weight:400}.github-btn{display:none}.gigante{display:none}header{min-height:200px}footer{margin-top:90px;max-height:70px;bottom:0}.caja-icono{float:none;width:90%;height:auto;background-color:#e2e2e2;display:block;margin:5px 0;padding:5px;float:left}.caja-icono p{font-size:14px;font-weight:400;line-height:10px}.caja-icono i{font-size:21px;line-height:10px}.gist{display:none}.tres-columnas{-moz-column-count:1;-webkit-column-count:1}}body{font-family:Merriweather,Georgia,serif;font-weight:300;font-size:16px;background-color:#f9faea;color:#000;min-width:100%;margin:0 auto}h1{color:#fff;font-weight:700;font-size:130px;margin:0;text-shadow:5px 5px 0 rgba(0,0,0,.3);padding-top:18px;padding-bottom:18px}h2{color:#228bf3;font-size:31px;font-weight:900;color:#454747;clear:both;margin-top:70px}h3{color:#228bf3;font-size:19px;font-weight:900}h4{font-size:19px;font-weight:900;color:#228bf3}h5{font-size:14px;clear:both;padding:5px 15px;border:solid #228bf3 1px;max-width:105px;margin-bottom:105px}p{line-height:140%}a,ul,li{text-decoration:none;list-style:none}.content{width:75%;margin:auto}.content a:link{color:#228bf3}.content a:visited{color:#228bf3}.content a:hover{color:#228bf3}.content a:active{color:#228bf3}.wrap{max-width:680px;margin:0 auto}.version{font-size:12px;color:#f9f9f3}header{margin-top:-16px}header,footer{background-color:#228bf3;display:block;padding-top:20px;padding-bottom:20px}header *,footer *{color:rgba(249,249,243,.8);text-align:center}header h1,footer h1,header .icn,footer .icn{color:#f9f9f3}header a,footer a{font-weight:700;color:#f9f9f3}footer{margin-top:150px;font-size:11px;font-weight:300;text-align:center;clear:both}nav{font-family:'Source Sans Pro',Helvetica,sans;font-weight:700;background-color:#f9faea;height:42px;padding-top:15px;margin:0}nav ul{margin:0}nav ul li{float:left;margin-right:80px;font-size:20px;font-weight:500}nav ul li :hover{text-shadow:2px 2px 0 #f9f9f3}nav ul li .icn{color:inherit}nav ul li:last-child{margin-right:0}nav ul li a{color:#228bf3}table{width:100%;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px}table th{text-align:left;color:#A5CFE8}table th,table td{padding:10px}table td span{color:inherit}code{display:inline-block;font-family:'Droid Sans Mono';white-space:pre;background-color:rgba(19,19,18,.7);padding:.3ex 1ex;color:#f9f9f3;text-shadow:-1px -1px 0 #131312;-webkit-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;border-radius:6px;font-size:14px}code.bloque{padding:.5em 1em;width:100%}.caja-icono{width:100px;height:70px;background-color:#f9f9f3;display:block;border-radius:5px;text-align:center;margin:7px;padding:5px;float:left}.caja-icono i{color:#131312}.caja-icono p{font-family:'Droid Sans Mono';text-align:center;font-size:10px;color:#131312;text-shadow:1px 1px 0 #f9f9f3}.caja-icono:last-child{margin-bottom:60px}.tres-columnas{-moz-column-count:3;-moz-column-gap:20px;-webkit-column-count:3;-webkit-column-gap:20px}.lista-icono{font-size:18px}.clear{clear:both}.divide{border-bottom:1px solid #85857b}.prueba{font-size:50px;font-weight:400}.efecto{text-shadow:1px 1px 0 rgba(185,162,103,.9);border:.2px dashed #fff;box-shadow:2px 2px 4px 1px rgba(0,0,0,.2);padding:2px 10px;color:rgba(214,194,102,.4)}.centrado{text-align:center}.btn{display:inline-block;white-space:nowrap;font-family:'Source Sans Pro',Helvetica,sans;font-weight:100!important;font-size:28px;margin:40px 20px 60px;background-color:#228bf3;color:#f9f9f3!important;letter-spacing:-.06ex;text-decoration:none;padding:.4em 1em;text-transform:lowercase;-webkit-border-radius:6px;-moz-border-radius:6px;-o-border-radius:6px;border-radius:6px;box-shadow:5px 5px 0 rgba(0,0,0,.2)}.btn .icn{font-family:Stampa;font-weight:400;letter-spacing:normal}.btn:hover{color:#f9f9f3!important;background-color:#228bf3}.xxl{font-size:72px}.rojo{color:#d91419}.naranja{color:#de6708}.azul{color:#2d5ebc}
\ No newline at end of file
Íconos alineados con el texto
+Íconos alineados con el texto
-
- Los íconos de Stampa pueden ser usados en cualquier parrafo usando la etiqueta <i> para tener un HTML válido para todos los navegadores.
-
-
icn-acto |
- - | acto acto |
- - |
Íconos de mayor tamaño
- -
- A los íconos se les puede incorporar las clases sm md lg y xl; que varían su tamaño en relación con el parrafo en que se encuentra.
-
-
Los íconos de Stampa pueden ser usados en cualquier parrafo usando la etiqueta <i> o <span> para tener un HTML válido para todos los navegadores. Se recomienda el uso de <span> ya que la etiqueta <i> podría definir atributos tipográficos conflictivos si se trabaja dentro de un framework más complejo.
Caso 1: Etiqueta vacía con una clase específica
++
<span class="icn icn-acto"></span>
+Caso 2: Ligadura con la clase genérica
+acto
+<span class="icn">acto</span>
- icn-mano arriba
-
icn-mano arriba
-
icn-mano arriba
-
icn-mano arriba
+
Íconos de mayor tamaño
- +
+ A los íconos se les puede incorporar las clases sm md lg y xl; que varían su tamaño en relación con el parrafo en que se encuentra.
+
+
-
Íconos enumeradores
+
+ icn-acto
+ icn-acto
+ icn-acto
+ icn-acto
+
- Se incluye dentro de los usos de los íconos en listas ordenadas de elementos. Incorporando las clases icn-ul e icn-li se reemplazan las viñetas.
-
-
<span class="icn icn-acto icn-sm"></span> icn-mano arriba
+<span class="icn icn-acto icn-md"></span> icn-mano arriba
+<span class="icn icn-acto icn-lg"></span> icn-mano arriba
+<span class="icn icn-acto icn-xl"></span> icn-mano arriba
+
- -
-
- icn-visto -
- icn-visto -
- icn-equis -
Íconos enumeradores
- +
+ Se incluye dentro de los usos de los íconos en listas ordenadas de elementos. Incorporando las clases icn-ul e icn-li se reemplazan las viñetas.
+
+
-
+
- icn-visto +
- icn-visto +
- icn-equis +
<ul class="icn-ul ejemplo">
+ <li><span class="icn icn-li icn-visto"></span>icn-visto</li>
+ <li><span class="icn icn-li icn-visto"></span>icn-visto</li>
+ <li><span class="icn icn-li icn-equis"></span>icn-equis</li>
+</ul>
Íconos capitales
@@ -65,11 +64,19 @@ title: Usos- - Ícono a modo de letra capital. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at mi varius, lobortis felis id, interdum enim. Proin tempus sollicitudin sagittis. Pellentesque ut gravida erat. Sed ut dolor sodales, semper justo nec, fringilla arcu. Maecenas consequat lectus odio, ut convallis erat tincidunt mattis. Vestibulum et dolor maximus lectus ultrices convallis quis sit amet libero. Phasellus rhoncus dolor vel nunc tincidunt, sed blandit est vestibulum. In ac sapien leo. Vivamus gravida mattis nunc in tristique. Praesent at libero dolor.
- +<p class="ejemplo">
+ <span class="icn icn-parrafo icn-2x pull-left icn-border"></span>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at mi varius, lobortis
+ felis id, interdum enim. Proin tempus sollicitudin sagittis. Pellentesque ut gravida
+ erat. Sed ut dolor sodales, semper justo nec, fringilla arcu. Maecenas consequat lectus odio,
+ ut convallis erat tincidunt mattis. Vestibulum et dolor maximus lectus ultrices convallis
+ quis sit amet libero. Phasellus rhoncus dolor vel nunc tincidunt, sed blandit est vestibulum.
+ In ac sapien leo. Vivamus gravida mattis nunc in tristique. Praesent at libero dolor.
+</p>
Íconos rotados y volteados
@@ -83,15 +90,22 @@ title: Usos
- normal
- icn-rotate-90
- icn-rotate-180
- icn-rotate-270
- icn-flip-horizontal
- icn-flip-vertical
+ normal
+ icn-rotate-90
+ icn-rotate-180
+ icn-rotate-270
+ icn-flip-horizontal
+ icn-flip-vertical
<p class="ejemplo">
+ <span class="icn icn-imagen"></span> normal
+ <span class="icn icn-imagen icn-rotate-90"></span> icn-rotate-90
+ <span class="icn icn-imagen icn-rotate-180"></span> icn-rotate-180
+ <span class="icn icn-imagen icn-rotate-270"></span> icn-rotate-270
+ <span class="icn icn-imagen icn-flip-horizontal"></span> icn-flip-horizontal
+ <span class="icn icn-imagen icn-flip-vertical"></span> icn-flip-vertical
+</p>
Íconos giratorios
@@ -102,12 +116,14 @@ title: Usos
- icn-engranaje
-
- icn-ciclo
+ icn-engranaje
+ icn-ciclo
<p class='ejemplo'>
+ <span class="icn icn-engranaje icn-spin"></span> icn-engranaje
+ <span class="icn icn-ciclo icn-spin icn-lg"></span> icn-ciclo
+</p>
Íconos apilados
@@ -125,79 +141,54 @@ title: Usos
-
-
-
-
- icn-cuadro / icn-twitter
-
-
-
-
-
-
-
- icn-cuadro-lleno / icn-facebook
-
-
-
-
-
-
-
-
- icn-parlante / icn-prohibir
-
-
-
-
-
-
-
-
-
-
-
-
Íconos con estilos CSS3
- -
- A las funciones previamente establecidas de Stampa, se le pueden agregar los estilos y clases del framework Pyxis, diseñado especialmente para la Escuela de Arquitectura y Diseño PUCV; cambiando así el color, agregando sombra, etc.
-
-
-
-
-
-
-
- icn-cuadro / icn-facebook
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<span class="icn-stack">
+ <span class="icn icn-cuadro icn-stack-2x"></span>
+ <span class="icn icn-twitter icn-stack-1x"></span>
+</span>
- icn-camara / icn-prohibir
+<span class="icn-stack">
+ <span class="icn icn-cuadrolleno icn-stack-2x"></span>
+ <span class="icn icn-facebook icn-stack-1x icn-inverse"></span>
+</span>
-
-
-
-
-
+<span class="icn-stack icn-lg">
+ <span class="icn icn-parlante icn-stack-1x"></span>
+ <span class="icn icn-prohibir icn-stack-2x rojo"></span>
+</span>
- icn-circulo-lleno / icn-rss
-
+<span class="icn-stack icn-lg">
+ <span class="icn icn-circulolleno icn-stack-2x naranja"></span>
+ <span class="icn icn-rss icn-inverse icn-stack-1x"></span>
+</span>
-
- Área de Pruebas
-Este espacio opera con la tipografía Web Stampa. Escribe los nombres de los íconos; no verás las letras, pero al completar el nombre aparecerá el caracter correspondiente:
-Regular
- -Ligera
- +Área de Pruebas
+Este espacio opera con la tipografía Web Stampa. Escribe los nombres de los íconos; no verás las letras, pero al completar el nombre aparecerá el caracter correspondiente:
+