Спасибо за импорт трансляции 🙂
Трансляция построена в основном с использованием потрясающих встроенных функций GP с некоторым количеством CSS для создания пользовательских стилей.
В разделах ниже представлен краткий обзор того, как был построен сайт, и некоторые возможные модификации. Все перечисленные ниже CSS можно найти в поле Additional CSS в настройщике.
Заголовок/навигация
Заголовок/навигация просто создаются с помощью опций настройки. Вы можете изменить их в разделах Site Identity, Primary Navigation и Sticky Navigation в настройщике.
Элемент заголовка/Герой страницы
Раздел под основной навигацией создается с помощью модуля Header Element. Вы можете найти 4 элемента заголовка в
Внешний вид > Элементы: Pages hero, Archives hero, Posts hero и Home hero.
CSS используется для обеспечения уникальной ширины контейнера, градиентного фона и стилей для элементов <h2> и <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;
}Этот сайт — отличный ресурс для настройки градиента по своему вкусу: https://cssgradient.io/.
Общий контейнер
Следующий CSS используется для стилизации основного контейнера, включая объединение с элементом заголовка выше.
/* 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);
}Список постов
Список записей на главной странице можно изменить с помощью нашего модуля Blog.
Вот CSS, используемый для их стилизации:
/* 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;
}Боковая панель
Плагин Recent Posts Widget With Thumbnails используется в области виджетов левой боковой панели для отображения последних сообщений в отдельных постах.
Первый виджет боковой панели окрашивается с помощью приведенного ниже CSS:
/* Sidebar styles */
.sidebar .widget:first-child {
background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}