Esta semana he estado personalizando el blog (este diario en el que escribo) y la web de Clave 53 con el fin de homogeneizar las 3 webs que van a estar relacionadas, que son la web de Clave 53, la web de Giusseppe.net, que a su vez es trina, así que incluye las páginas HTML hechas por mí, el wordpress en el que estoy escribiendo ahora mismo y la aplicación Piwigo que sirve como soporte a los álbumes de fotografías que utilizo en la web, y por último la aún no realizada web de la «Editorial» que está a medio camino entre la de Clave 53 y la de Giusseppe, lo que me ha condicionado a elegir una tríada de colores «armónicos» así que será con fondos verdes donde la de Clave 53 es morada y la de Giusseppe es naranja y algún juego similar con los tres colores básicos que he decidido que sean:
Para personalizar el blog, que está realizado usando una plantilla denominada Tulsi he utilizado el siguiente código extra (extraído y adaptado desde la web de giusseppe.net):
/* Cabeceras */
.entry-header {
padding: 30px;
background-color: #333;
-webkit-animation: slide-in-left 3s both;
animation: slide-in-left 3s both;}
h1.entry-title {font-size: 2em}
h2.entry-title a {color:#ff9900;}
h2.entry-title a:hover {color:#FFF;}
a, a:visited {
color: #ffffff;
font-weight: bold;
}
a:hover {color:#ff9900}
/* Marco Redondeado */
/* Marcos redondeados */
main {
padding: 10px;
box-shadow: 0 0 30px rgba(255,159,0,0.7);
}
/* Quotes */
blockquote {
font-size:1em;
color: grey
}
/* Widgets */
.widget-title {
background-color: #333;
font-size: 16px;
-webkit-animation: slide-in-right 3s both;
animation: slide-in-right 3s both;
}
.sidebar .widget {
font-size: 12px;
background-color: #ff9900;
color: black;
}
.sidebar .widget a, .sidebar .widget a:visited {
color: black;
font-weight: bold;
}
/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation slide-in-right
* ----------------------------------------
*/
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}