Gracias por importar Broadcast 🙂
Broadcast se construye principalmente utilizando las impresionantes características incorporadas de GP con algo de CSS para proporcionar estilos personalizados.
Las secciones siguientes ofrecen una rápida visión general de cómo se construyó el sitio y algunas posibles modificaciones. Todo el CSS mencionado a continuación puede encontrarse en el campo CSS adicional del personalizador.
Cabecera/Navegación
La cabecera/navegación se crea sencillamente con las opciones del personalizador. Puede modificarlos en las secciones Identidad del sitio, Navegación principal y Navegación adhesiva en el personalizador.
Elemento de cabecera/Héroe de la página
La sección que se encuentra debajo de la navegación principal se crea con el módulo de elementos de cabecera. Puede encontrar 4 elementos de cabecera en
Apariencia > Elementos: Héroe de las páginas, Héroe de los archivos, Héroe de las entradas y Héroe de la página de inicio.
Se utiliza CSS para proporcionar una anchura de contenedor única, un fondo degradado y estilos para los elementos <h2> y <p>:
/* Page hero styles */
.page-hero.gradient {
background-image: linear-gradient( 145deg, transparent 0%, rgba(255,255,255, 0.5) 100%);
max-width: 1440px;
margin: auto;
}
.inside-page-hero h2 {
font-size: 40px;
}
.inside-page-hero p {
font-size: 20px;
}Este sitio es un excelente recurso para ajustar el gradiente a su gusto: https://cssgradient.io/.
Contenedor general
El siguiente CSS se utiliza para dar estilo al contenedor principal, incluyendo la fusión con el elemento de cabecera anterior.
/* Main container styles */
.separate-containers .page-hero + #page .site-main {
margin-top: -80px !important;
}
@media (max-width: 768px) {
body .site.grid-container {
margin-left: 20px;
margin-right: 20px;
}
}
.site-content .inside-article, .sidebar .widget, .comments-area {
box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}Lista de puestos
La lista de publicaciones de la página de inicio puede modificarse mediante nuestro módulo Blog.
Aquí está el CSS utilizado para darles estilo:
/* Posts grid styles */
@media (min-width: 769px) {
.generate-columns .inside-article {
transition: all 0.2s ease-in;
transform: scale(1);
}
.generate-columns .inside-article:hover {
transform: scale(1.01);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
p.read-more-container {
opacity: 0;
transition: all 0.3s ease-in-out;
}
.generate-columns .inside-article:hover p.read-more-container {
opacity: 1;
}
}
.generate-columns .inside-article {
display: flex;
flex-direction: column;
border-radius: 3px;
}
.generate-columns .inside-article .entry-summary {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.entry-summary p:not(.read-more-container) {
display: none;
}
.read-more-container {
margin-top: auto;
text-align: center;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
border-width: 1px;
border-style: solid;
border-color: inherit;
border-radius: 3px;
}
.blog footer.entry-meta, .archive footer.entry-meta {
margin-top: 0;
}Barra lateral
El plugin Recent Posts Widget With Thumbnails se utiliza en el área de widgets de la barra lateral izquierda para mostrar las publicaciones recientes en entradas individuales.
El primer widget de la barra lateral se colorea con este CSS de abajo:
/* Sidebar styles */
.sidebar .widget:first-child {
background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}