Каталог статей

[hideprofile][html]

<div class="library-header">

<div class="library-title">Каталог статей</div>

</div>

<div class="library-search-box">

</div>

<div class="library-layout">

<aside class="library-sidebar">

<div class="library-sidebar-title">РАЗДЕЛЫ</div>

<div class="library-sidebar-title">КАТАЛОГ</div>

<div class="library-info-text">материалов</div>
</div>

</aside>

<main class="library-content">

<div class="library-content-top">
<div>
<div
class="library-current-title"
id="library-current-title"
>Все материалы</div>

<div
class="library-result-text"
id="library-result-text"
>Найдено материалов: 0</div>
</div>
</div>

<div
id="library-articles"
class="library-articles"
></div>

<div
id="library-empty"
class="library-empty"
style="display: none;"
>
<div class="library-empty-icon">◌</div>
<div class="library-empty-title">Ничего не найдено</div>
<div class="library-empty-text">
Попробуйте изменить поисковый запрос или выбрать другой раздел.
</div>
</div>

</main>

</div>

background: rgb(var(--light-accent), .15);
border: 2px solid rgb(183 180 174 / 41%);
border-radius: 14px;

box-shadow: 0 6px 24px rgba(120, 100, 80, 0.12), inset 0 0 0 1px rgba(255,255,255,0.25);

padding: 30px;
color: #4d463e;
font-family: 'Roboto Flex';

}

.library-catalog *,
.library-catalog *::before,
.library-catalog *::after {
box-sizing: border-box;
}

/* =========================================================
ШАПКА С КАРТИНКОЙ
========================================================= */
.library-header {
position: relative;
overflow: hidden;

border-radius: 12px;
border: 1px solid rgba(183, 180, 174, 0.35);
box-shadow: 0 3px 12px rgba(120, 100, 80, 0.10);

min-height: 260px;
display: flex;
align-items: flex-end;
}

/* =========================================================
КАРТИНКА ШАПКИ — МЕНЯТЬ ЗДЕСЬ
========================================================= */
.library-header::before {
content: '';
position: absolute;
inset: 0;
content: '';
background: url() no-repeat;
width: 735px;
height: 220px;
background-position: -165px -30px;
background-size: cover;
z-index: 1;
pointer-events: none;
filter: brightness(.56);
background-size: 133%;
position: absolute;
bottom: -10px;
left: 91px;
margin-top: 18px;
}

.library-header::after {
content: '';
position: absolute;
inset: 0;
background: url(https://forumstatic.ru/files/0011/93/3d/84099.jpg?v=1);
pointer-events: none;
}

.library-catalog::after{
content: '';
background: url(https://forumstatic.ru/files/001c/80/b1/76229.png) no-repeat center / contain;
position: absolute;
width: 163px;
height: 250px;
top: -28px;
right: -36px;
pointer-events: none;
z-index: 9;
}
.library-catalog::before {
content: '';
background: url(https://forumstatic.ru/files/001c/80/b1/72566.png) no-repeat center / contain;
position: absolute;
width: 136px;
height: 212px;
bottom: -1px;
left: -10px;
pointer-events: none;

}

.library-header-content {
content: '';
background: #f0f8ff75;
backdrop-filter: blur(5px);
z-index: 2;
min-width: 50%;
height: 70px;
box-sizing: border-box;
width: 200px;
border-radius: 25px;
box-shadow: 0 3px 10px -6px black;
padding: 10px;
margin-bottom: 14px !important;
margin-left: 30px;

}

.library-header-small {
margin-bottom: 10px;

color: #f0e0c4;
font-size: 11px;
font-weight: bold;
letter-spacing: 3px;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.library-title {
color: #ffffff;
text-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5);
font-size: 38px;
line-height: 1.1;
font-weight: var(--fw700);
margin-left: 80px;
font-family: 'Roboto Flex';
}

.library-description {
max-width: 650px;
margin-top: 12px;

color: #f3ece0;
text-shadow: 0 1px 4px rgba(0,0,0,0.55);

font-size: 14px;
line-height: 1.7;
}

/* =========================================================
ПОИСК
========================================================= */
.library-search-box {
position: relative;
margin-top: 22px;
}

.library-search-box input {
display: block;
width: 100%;
height: 54px;
padding: 0 55px 0 50px;

background: rgb(var(--accent), .2) !important;
border: 1px solid #d9d0c6;
border-radius: 10px;
outline: none;

box-shadow: inset 0 1px 4px rgba(36, 16, 19, 0.10);

color: #4d463e;
font-family: 'Roboto Flex';
font-size: 13px;

transition: border-color .2s ease, box-shadow .2s ease;
}

.library-search-box input:focus {
border-color: #a99784;
background: #fffdfb !important;
box-shadow: 0 0 0 3px rgba(200, 180, 160, 0.18), inset 0 1px 4px rgba(36, 16, 19, 0.10);
}

.library-search-box input::placeholder {
color: #a49a90;
}

.library-search-icon {
position: absolute;
top: 50%;
left: 18px;
z-index: 2;
transform: translateY(-50%);
color: #a99784;
font-size: 25px;
line-height: 1;
pointer-events: none;
}

.library-clear {
position: absolute;
top: 50%;
right: 13px;

width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 8px;

background: #ddd2c7;
color: #66594e;
font-size: 18px;
line-height: 32px;
text-align: center;

cursor: pointer;
opacity: 0;
visibility: hidden;

transform: translateY(-50%);

transition: opacity .2s ease, background .2s ease, color .2s ease;
}

.library-clear.visible {
opacity: 1;
visibility: visible;
}

.library-clear:hover {
background: #cbbbad;
color: #4d3f31;
}

/* =========================================================
ОСНОВНАЯ СЕТКА
========================================================= */
.library-layout {
display: grid;
grid-template-columns: 235px minmax(0, 1fr);
gap: 22px;
margin-top: 22px;
}

/* =========================================================
ЛЕВАЯ ПАНЕЛЬ
========================================================= */
.library-sidebar {
align-self: start;
padding: 22px 18px;

background: rgb(var(--canvas-quarternary), .3);
border: 1px solid rgba(183, 180, 174, 0.35);
border-radius: 12px;
box-shadow: 0 3px 10px rgba(120, 100, 80, 0.08);
}

.library-sidebar-title {
margin-bottom: 14px;
color: #594d42;
font-size: 12px;
font-weight: bold;
letter-spacing: 2px;
}

/* =========================================================
КАТЕГОРИИ
========================================================= */
.library-categories {
display: flex;
flex-direction: column;
gap: 4px;
}

.library-category {
display: flex;
align-items: center;
justify-content: space-between;

width: 100%;
min-height: 40px;
padding: 7px 12px;

border: 1px solid transparent;
border-radius: 8px;
background: transparent;

color: #665b51;
text-align: left;
font-family: 'Roboto Flex';
font-size: 13px;

cursor: pointer;

transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.library-category:hover {
background: #f1ece5;
color: #4d463e;
border-color: #e0d8ce;
}

.library-category.active {
background: #eee7dc;
color: #4b443d;
border-color: #cbbbad;
box-shadow: 0 1px 3px rgba(120, 100, 80, 0.10);
}

.library-category-name {
padding-right: 8px;
}

.library-category-count {
min-width: 22px;
color: #a19588;
font-size: 11px;
text-align: right;
}

/* =========================================================
ЛИНИЯ
========================================================= */
.library-sidebar-line {
height: 1px;
margin: 20px 0;
background: rgba(183, 180, 174, 0.35);
}

/* =========================================================
ОБЩЕЕ КОЛИЧЕСТВО
========================================================= */
.library-info {
display: flex;
align-items: center;
gap: 12px;
}

.library-info-number {
color: #75634e;
font-family: 'Roboto Flex';
font-size: 28px;
line-height: 1;
}

.library-info-text {
color: #8d8379;
font-size: 12px;
line-height: 1.4;
font-style: italic;
}

/* =========================================================
ПРАВАЯ ЧАСТЬ
========================================================= */
.library-content {
min-width: 0;
}

.library-content-top {
display: flex;
align-items: flex-end;
justify-content: space-between;

min-height: 64px;
margin-bottom: 16px;
padding-bottom: 14px;

border-bottom: 1px solid rgba(183, 180, 174, 0.35);
}

.library-current-title {
color: #4a4036;
font-family: 'Roboto Flex';
font-size: 25px;
line-height: 1.2;
}

.library-result-text {
margin-top: 5px;
color: #8d8379;
font-size: 12px;
font-style: italic;
}

/* =========================================================
СПИСОК СТАТЕЙ
========================================================= */
.library-articles {
display: flex;
flex-direction: column;
gap: 14px;
max-height: 900px;
overflow-y: auto;
padding-right: 4px;
}

/* =========================================================
КАРТОЧКА СТАТЬИ
========================================================= */
.library-article {
padding: 22px 25px 20px;
background: #f8f5f1b3 !important;
border: 1px solid #d9d0c6;
border-radius: 10px;

box-shadow: 0 1px 4px rgba(120, 100, 80, 0.06);

transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.library-article:hover {
border-color: #cbbbad;
background: #fdfaf6;
box-shadow: 0 3px 10px rgba(120, 100, 80, 0.10);
}

/* =========================================================
ВЕРХ КАРТОЧКИ
========================================================= */
.library-article-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 11px;
}

.library-article-category {
color: #9a8060;
font-size: 10px;
font-weight: bold;
letter-spacing: 1.5px;
text-transform: uppercase;
}

.library-article-date {
color: #aaa095;
font-size: 11px;
font-style: italic;
}

/* =========================================================
НАЗВАНИЕ
========================================================= */
.library-article-title {
margin: 0;
font-family: 'Roboto Flex';
font-size: 21px;
line-height: 1.3;
}

.library-article-title a {
color: #443d36;
text-decoration: none;
transition: color .2s ease;
}

.library-article-title a:hover {
color: #8d7355;
}

/* =========================================================
ОПИСАНИЕ
========================================================= */
.library-article-description {
max-width: 850px;
margin-top: 9px;

color: #665b51;
font-size: 13px;
line-height: 1.7;
}

/* =========================================================
НИЗ КАРТОЧКИ
========================================================= */
.library-article-bottom {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 20px;

margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #eee8df;
}

.library-article-author {
display: flex;
align-items: center;
gap: 7px;
}

.library-author-label {
color: #aaa095;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

.library-author-name {
color: #625950;
font-size: 12px;
}

/* =========================================================
КЛЮЧЕВЫЕ СЛОВА
========================================================= */
.library-article-keywords {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

.library-keyword {
padding: 4px 8px;

background: #f7f3ed;
border: 1px solid #e3dbd1;
border-radius: 6px;

color: #95887b;
font-size: 10px;
}

/* =========================================================
ЧИТАТЬ
========================================================= */
.library-read-link {
display: inline-flex;
align-items: center;
gap: 8px;

margin-left: auto;

color: #866d51;
font-size: 12px;
text-decoration: none;
white-space: nowrap;

transition: color .2s ease;
}

.library-read-link span {
display: inline-block;
font-size: 16px;
transition: transform .2s ease;
}

.library-read-link:hover {
color: #594a3b;
}

.library-read-link:hover span {
transform: translateX(4px);
}

/* =========================================================
ПОДСВЕТКА НАЙДЕННОГО
========================================================= */
.library-found {
padding: 1px 3px;
background: #eee1cc;
color: #594937;
border-radius: 3px;
}

/* =========================================================
НИЧЕГО НЕ НАЙДЕНО
========================================================= */
.library-empty {
padding: 65px 30px;

background: #f8f5f1;
border: 1px solid #d9d0c6;
border-radius: 10px;

text-align: center;
}

.library-empty-icon {
color: #b19b7e;
font-size: 30px;
line-height: 1;
}

.library-empty-title {
margin-top: 12px;
color: #514940;
font-family: 'Roboto Flex';
font-size: 22px;
}

.library-empty-text {
max-width: 420px;
margin: 8px auto 0;
color: #8d8379;
font-size: 12px;
line-height: 1.6;
font-style: italic;
}

/* =========================================================
ВОПРОС — ОТВЕТ
========================================================= */
.library-question {
border: 1px solid #d9d0c6;
border-radius: 10px;
background: #f8f5f1;
overflow: hidden;

box-shadow: 0 1px 4px rgba(120, 100, 80, 0.06);
}

.library-question-button {
display: flex;
align-items: center;
width: 100%;
min-height: 72px;
padding: 18px 20px;

border: 0;
background: transparent;

color: #443d36;
text-align: left;
font-family: 'Roboto Flex';
cursor: pointer;

transition: background .2s ease;
}

.library-question-button:hover {
background: #fdfaf6;
}

.library-question-number {
flex: 0 0 38px;
color: #a78b68;
font-family: 'Roboto Flex';
font-size: 14px;
}

.library-question-text {
flex: 1;
padding-right: 15px;
font-family: 'Roboto Flex';
font-size: 18px;
line-height: 1.4;
color: #4b443d;
}

.library-question-arrow {
flex: 0 0 30px;
color: #9a8365;
font-size: 18px;
text-align: center;
transition: transform .25s ease, color .2s ease;
}

.library-question-answer {
display: none;
padding: 0 25px 24px 78px;

border-top: 1px solid #eee8df;
background: #fffefa;
}

.library-question.open .library-question-answer {
display: block;
}

.library-question.open .library-question-arrow {
transform: rotate(180deg);
color: #665442;
}

.library-question-answer-label {
padding-top: 17px;
margin-bottom: 8px;

color: #a18b70;
font-size: 10px;
font-weight: bold;
letter-spacing: 2px;
}

.library-question-answer-text {
color: #665b51;
font-size: 13px;
line-height: 1.8;
}

/* =========================================================
АДАПТИВ
========================================================= */
@media (max-width: 900px) {
.library-catalog {
padding: 20px;
}
}

@media (max-width: 760px) {
.library-header {
min-height: 200px;
}

.library-header-content {
padding: 24px 22px 22px;
}

.library-title {
font-size: 28px;
}

.library-layout {
grid-template-columns: 1fr;
gap: 18px;
}

.library-sidebar {
padding: 18px;
}

.library-categories {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.library-sidebar-line {
margin: 18px 0;
}
}

@media (max-width: 480px) {
.library-catalog {
margin: 15px auto;
padding: 15px;
}

.library-header {
min-height: 170px;
}

.library-header-content {
padding: 20px 18px 18px;
}

.library-header-small {
font-size: 10px;
letter-spacing: 2px;
}

.library-title {
font-size: 24px;
}

.library-description {
font-size: 12px;
}

.library-search-box input {
height: 48px;
font-size: 12px;
}

.library-categories {
grid-template-columns: 1fr;
}

.library-article {
padding: 18px 16px;
}

.library-article-top {
align-items: flex-start;
flex-direction: column;
gap: 5px;
}

.library-article-title {
font-size: 19px;
}

.library-article-description {
font-size: 12px;
}

.library-article-bottom {
align-items: flex-start;
flex-direction: column;
}

.library-read-link {
margin-left: 0;
}

.library-question-button {
min-height: 65px;
padding: 15px;
}

.library-question-number {
flex-basis: 30px;
font-size: 12px;
}

.library-question-text {
font-size: 16px;
padding-right: 10px;
}

.library-question-answer {
padding: 0 17px 20px 45px;
}
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0011/93/3d/68097.js?v=12"></script>

[/html]

Танец Вечности

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Каталог статей

Сообщений 1 страница 1 из 1

Поделиться1Сегодня 12:50