[html]<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Cuprum&display=swap" rel="stylesheet"><style>
#ship7 {
    --shtxt: #f4ecd7;   /* текст в заголовках*/
    --shbg: #220e10; /* фон в заголовках */
    --shbrd: #11001a; /* границы заголовка и картинки */
    --shots: 14px;   /* отступы эпизодов друг от друга */
    --shotg: 16px;   /* отступ текста от картинки */
    --shotz: auto auto 16px -40px;   /* отступ заголовка */
    --shgrad: linear-gradient(90deg, transparent 10%, #11001a 50%, transparent 90%);
}
#ship7 {position:relative; overflow:hidden; box-sizing:border-box; display:grid; grid-template-columns: 145px auto; align-items: start; margin: 8px auto auto 2em;
    max-width:700px;  /* ограничиваем ширину блока*/
}

#ship7 *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
#ship7 *::-webkit-scrollbar-thumb {background: var(--shbg);}
#ship7 *::-webkit-scrollbar-corner {background: transparent;}
#ship7 sh1 {display:block; min-height: 100px; height:100%; padding:0px !important; box-sizing:border-box; background: var(--shbg) 50% 0% repeat; border: 1px solid var(--shbrd);} /* shipovnik */
#ship7 sh2 {display:block; height: 100%; width: auto; padding: 20px 6px 14px var(--shotg);}

/* общий блок периода */
#ship7 sh3 {display:block; margin-top:34px;}
#ship7 sh3:nth-child(1) {margin-top:0px;}

/* заголовки-периоды */
#ship7 sh4 {display:block; background: var(--shbg); color:var(--shtxt); padding: 8px 14px 7px; width: 85%; box-sizing:border-box; margin: var(--shotz); border: 1px solid var(--shbrd);
    font-family: 'Cuprum', Georgia, serif;
    font-size: 18px;
}

/*текстовый блок*/
#ship7 sh3 > p {position:relative; padding: 0 !important; margin-bottom:var(--shots);
    text-align: justify;
    font-size: 11px;
    line-height: 120%;
}
#ship7 sh3 > p:last-child {margin-bottom:0px;}
#ship7 sh3 > p::after {display:block; content:""; width:auto; height:1px; background:var(--shgrad); margin-top:var(--shots); }
#ship7 sh3 > p:last-child::after {display:none;}

/* текст проматывающийся */
#ship7 sh5 {display:block; overflow:auto; scroll-behavior: smooth; padding-right:8px;
    max-height: 60px;
}

/* ссылки */
#ship7 a.epss {display: block; width: max-content;
    font-family: 'Oswald', Tahoma, sans-serif;
    font-size: 15px;
}

/* персонажи */
#ship7 pers {display: block; width: max-content; margin: 3px auto 5px 0px;
    font-size: 10px;
    font-family: Tahoma, sans-serif;
    color: rgba(0, 0, 0, 0.6);
}
</style>
<div id="ship7"><!-- START -->

    <sh1 style="background-image:url(https://sun9-56.userapi.com/impg/EwM1_0 … type=album);"></sh1><sh2>


<!-------- ПЕРВЫЙ ГОД -------->
    <sh3><sh4> Мемуары дворянина [каноны] </sh4>

    <!-- Эпизод_1 -->
    <p><a href="https://gthc.ru/viewtopic.php?id=213#p25918" class="epss"> Семья  </a>
    </p>

   <!-- Эпизод_2 -->
    <p><a href="https://gthc.ru/viewtopic.php?id=210" class="epss">  Животные  </a>
    </p>

    <!-- Эпизод_3 -->
    <p><a href=https://gthc.ru/viewtopic.php?id=214#p25923" class="epss">  Страхи  </a>
    </sh5>
    </p>

</sh3><!-- КОНЕЦ ГОДА -->










<!-------- ПЕРВЫЙ ГОД -------->
    <sh3><sh4> Всё новое - хорошо забытое старое [прошлое] </sh4>

    <!-- Эпизод_1 -->
    <p><a href="https://gthc.ru/viewtopic.php?id=233" class="epss"> Ложь во спасение </a>
    <pers> Трайер Фолкер, Бенедикт  </pers>
    <sh5>
После истории с уничтоженной деревней Трайер возвращается в монастырь, где ему впервые предстоит поговорить с глазу на глаз с Бенедиктом. Самому Фолкеру скрывать нечего. Или все-таки есть?..
    </sh5>
    </p>

    <!-- Эпизод_2 -->
    <p><a href="https://gthc.ru/viewtopic.php?id=210" class="epss">  Стучите, и откроют вам  </a>
    <pers> Леонардо Флоренци, Трайер Фолкер, Бенедикт  </pers>
    <sh5>
Каждый, кто просит помощи у Света Истинного, получает её. Вряд ли Леонардо представлял, что из всех мест Утёса он окажется именно в монастыре. Но судьба любит пошутить, и шутки у неё довольно специфичные.
    </sh5>
    </p>

    <!-- Эпизод_3 -->
    <p><a href="#" class="epss">  Название эпизода  </a>
    <pers>  Список игроков  </pers>
    <sh5>
текст-описание
    </sh5>
    </p>

</sh3><!-- КОНЕЦ ГОДА -->

<!-------- ВТОРОЙ ГОД -------->
    <sh3><sh4> «Сейчас» — это всё, что у тебя есть [настоящее] </sh4>

    <!-- Эпизод_1 -->
    <p><a href="#" class="epss">  Название эпизода  </a>
    <pers>  Список игроков  </pers>
    <sh5>
текст-описание
    </sh5>
    </p>

    <!-- Эпизод_2 -->
    <p><a href="#" class="epss">  Название эпизода  </a>
    <pers>  Список игроков  </pers>
    <sh5>
текст-описание
    </sh5>
    </p>

</sh3><!-- КОНЕЦ ГОДА -->

<!-- END --></sh2></div>[/html]

Отредактировано Бенедикт (Сегодня 10:52:18)