[hideprofile][html] <style>
.news-container {
width: 800px;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
border-radius: 10px;
box-shadow: 5px 5px 40.4px -13.43px var(--shadow);
background: var(--green-bg) no-repeat center/cover;
display: flex;
flex-direction: column;
}
.news-header {
width: 100%;
height: 82px;
padding: 20px 175px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--green);
color: var(--tab-text);
position: relative;
}
.news-title {
font-family: var(--sec-font);
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.news-header img {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
bottom: -35px;
left: calc(5% - 10px);
border: 3px solid var(--accent);
object-fit: cover;
transition: all .7s ease-in-out 0s;
filter: grayscale(80%);
}
.news-header img:hover{ transition: all .7s ease-in-out 0s;
filter: grayscale(5%);}
.news-summary {
font-size: 11px;
flex-basis: 40%;
text-align: right;
}
.news-summary span {
font-style: italic;
color: var(--navi-link);
}
.news-content {
width: calc(100% - 40px);
height: calc(100% - 82px);
flex-grow: 1;
padding: 70px 40px 20px 40px;
box-sizing: border-box;
background: var(--base-bg2);
margin: 0 auto;
font-size: 14px;
display: flex;
flex-direction: column;
gap: 20px;
}
.news-text-top {
text-align: justify;
}
.news-text-middle {
display: flex;
justify-content: end;
align-items: flex-start; /* Изменено с center на flex-start */
width: calc(100% + 60px);
margin-left: -30px;
}
.news-text-middle-image {
flex-grow: 1;
text-align: center;
}
.news-text-middle-image img {
max-width: 60px;
border-radius: var(--br300);
}
.news-text-middle-highlight {
background: var(--pf-bg);
display: inline-block;
width: 80%;
max-width: 80%;
min-height: 74px;
padding: 20px;
box-sizing: border-box;
vertical-align: middle;
border-radius: var(--br300);
margin-right: -30px;
text-align: justify;
/* Убрано ограничение высоты и добавлен автоматический рост */
height: auto;
overflow: visible;
}
.news-text-middle-highlight h3{
font-family: var(--sec-font);
color: var(--accent);
font-size: 16px;
text-transform: uppercase;
margin: 0 0 10px 0; /* Добавлены отступы для заголовка */
}
.news-text-middle-highlight a {
white-space: nowrap;
display: inline !important;
}
.news-text-bottom {
flex-grow: 1;
overflow: auto;
padding-right: 10px;
}
.news-text-goodbye {
text-align: right;
text-transform: uppercase;
font-family: var(--sec-font);
font-size: 20px;
color: var(--accent);
margin-top: -10px;
padding-top: 13px;
}
.activists-section {
background: var(--pf-bg);
padding: 10px 40px 10px 40px;
margin-top: -15px;
border-radius: 10px;
}
.activists-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 10px;
}
.activist-card {
text-align: center;
padding: 15px;
}
.activist-card img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--accent);
margin-bottom: 10px;
transition: all .7s ease-in-out 0s;
filter: grayscale(80%);
}
.activist-card img:hover{transition: all .7s ease-in-out 0s;
filter: grayscale(5%);}
.activist-card .name {
font-family: var(--sec-font);
color: var(--accent);
font-weight: bold;
font-size: 14px;
}
.additional-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 20px;
border-radius: var(--br300);
}
.info-block h3 {
font-family: var(--sec-font);
color: var(--accent);
font-size: 16px;
margin-bottom: 10px;
text-transform: uppercase;
}
.info-block .content {
font-size: 12px;
color: var(--sec-text);
line-height: 1.5;
height: 100px;
overflow-y: auto;
padding: 7px;
font-style: italic;
}
.episode-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
height: 100%;
}
.episode-image {
width: 300px;
height: 50px;
object-fit: cover;
border-radius: var(--br300);
transition: all .7s ease-in-out 0s;
filter: grayscale(80%);
}
.episode-image:hover {
filter: grayscale(5%);
transition: all .7s ease-in-out 0s;}
.episode-characters {
text-align: center;
font-style: italic;
color: var(--sec-text);
}
.mention {
color: var(--accent2);
font-weight: bold;
text-decoration: none;
}
.mention:hover {
color: var(--navi-link-hov);
text-decoration: underline;
}
/* Стили для скроллбара */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--podform);
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent2);
}
@media screen and (max-width: 540px) {
.news-container {
width: 100%;}
.activists-section {
background: var(--pf-bg);
padding: 10px 10px 10px 10px;
}
.activists-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 10px;
}
.episode-image {
width: 100%;
}
.activist-card {
padding: 6px;
}
.news-header {
padding: 6px 105px;
display: flex;
justify-content: space-evenly;
position: relative;
}
.news-text-middle {
align-items: center;
width: 100%;
margin-left: 0;
}
.news-text-middle-highlight {
width: 100%;
max-width: 100%;
margin-right: 0;
margin-top: 15px;
}}
</style>
<div class="news-container">
<div class="news-header">
<div class="news-title">НОВОСТИ ФОРУМА</div>
<div class="news-summary">
<span>Выпуск № 13</span><br>
Особенный
</div>
<img src="https://upforme.ru/uploads/001c/86/4e/3/854306.gif" target="_blank" title="кар-кар-кар">
</div>
<div class="news-content">
<div class="news-text-top">
<strong>Ночи доброй!</strong><br><br>
Запах мандаринов, глинтвейна, пряников... Новый год все ближе, а суетность его окончания столь велика, что многие дела не успеваются... Но новый год время особое, а потому мы подготовили небольшой подарок для каждого, кто был с нами и творил в течении этого времени!
<br><br>
</div>
<!---- <div class="news-text-middle">
<div class="news-text-middle-image">
<img src="https://upforme.ru/uploads/001c/86/4e/2/424573.png">
</div>
<div class="news-text-middle-highlight">
<h3>Дополнения Матчасти</h3>
<a href="№">ссылка</a> текст </div>
</div>------>
<div class="news-text-bottom">
Неделя была суетной, но среди этого ритма свои посты писали <a href="https://heylar.f-rpg.me/profile.php?id=61">Rachel</a> и <a href="https://heylar.f-rpg.me/profile.php?id=59">Oliver</a>! Успевая писать и в Хейларе и в Иных мирах... одно любование! И, дабы приятно было всем, да и в качестве извинений за отсутствие новостей прошлой недели, у нас небольшой подарок. Если Вы написали хотя бы один пост с 15 декабря по 28 декабря, то забегите в банк и заберите награду, как постописец! Праздник он такой!) Чтобы получить награду - заглядывайте в банк, принося ссылку на пост написанный в обозначенный период.
<br><br>
В тавернах же ныне звучали весьма громко голоса <a href="https://heylar.f-rpg.me/profile.php?id=37">Ortan Cassius</a> и <a href="https://heylar.f-rpg.me/profile.php?id=30">Wilhelmina</a>. (Что, вспоминайте "молодость"?)) Вас было больше, но всех отметить не вышло... или... Хмммммм. /скоро тут что-то будет/
<br><br>
<strong>Отличная работа!</strong><br><br>
<a href="https://heylar.f-rpg.me/viewtopic.php?id=21&p=2#p13624">Пазлы</a> есть и их аш два набора! Выбирайте любой и делайте любой!) Так же ненадолго появилась возможность собрать <a href="https://heylar.f-rpg.me/viewtopic.php?id=21&p=2#p13625">пазл</a> с повышенной сложностью и наградой. Накопить Искры все так же можно в <a href="https://heylar.f-rpg.me/viewtopic.php?id=29">таро</a>, спросив у них совета на день. И теперь вы можете отправить найденный <a href="https://heylar.f-rpg.me/viewtopic.php?id=228#p13596">опрос, тест или бинго</a>, получив награду и за это и за решение! <br><br>
И в последний раз в этом году просим, если есть возможность, отдать свой голос за нас в <a href="https://mayakfor.me/viewtopic.php?id=2721#p273414">"Ролевой месяца" на Маяке</a>. Мы будем благодарны за каждый из голосов. <br><br>
Спасибо, что вы с нами!
</div>
<div class="news-text-goodbye">
Удачной недели и с наступающим вас! Да хранят вас Зефиры!
</div>
</div>
<div class="activists-section">
<div class="activists-grid">
<div class="activist-card"><a href="https://heylar.f-rpg.me/profile.php?id=61" target="_blank" title="Постописец Rachel - 4 поста"><div><img src="https://upforme.ru/uploads/001c/86/4e/3/628124.png"></div></a>
</div>
<div class="activist-card"><a href="https://heylar.f-rpg.me/profile.php?id=59" target="_blank" title="Постописец Oliver - 3 пост"><div><img src="https://upforme.ru/uploads/001c/86/4e/2/45083.png"></div></a>
</div>
<div class="activist-card"><a href="https://heylar.f-rpg.me/profile.php?id=37" target="_blank" title="Флудер Ortan Cassius"><div><img src="https://upforme.ru/uploads/001c/86/4e/2/372476.png"></div></a>
</div>
<div class="activist-card"><a href="https://heylar.f-rpg.me/profile.php?id=30" target="_blank" title="Флудер Wilhelmina"><div><img src="https://upforme.ru/uploads/001c/86/4e/3/902460.png"></div></a>
</div>
</div>
<div class="additional-info">
<div class="info-block">
<h3>Лучший пост <a href="https://heylar.f-rpg.me/viewtopic.php?id=179#p13116">Raven</a>!</h3>
<div class="content">
Рэйвен с некоторым любопытством поглядывала в сторону "тесного общения" старшей сестры с Томашем. Для неё оставалось загадкой, что именно та прошептала на ухо брату, но голос его изменился, как и отношение к младшей. Временно. Конечно, ей было нужно слышать извинения, опровержение своих назойливых мыслей. Вот только она слишком хорошо ощущала настоящие чувства родственников и давно научилась не верить пустым словам, особенно сказанным под оказанием какого-либо давления. <br><br>
Однако, чтоб не продолжать раздувать скандал и копать себе могилу, синевласая просто кивнула, мол, она услышала Томаша и на этом хватит. Как бы Рэйчел ни старалась, по-настоящему изменить обстановку у неё не получится. Маленькая Рэйвен не верила, что это вообще возможно. Разве что она вдруг станет легендарным героем с невероятными магическими способностями. И то не факт. Наверняка Курта тут же задушит зависть, заменяющая презрение, Томаш тоже будет локти кусать, если останется неудел, ну а Леонард... Понять его всегда было труднее всего.
</div>
</div>
<div class="info-block">
<h3>Сказание недели</h3>
<div class="content">
<div class="episode-container">
<a href="https://heylar.f-rpg.me/viewtopic.php?id=159#p12782" target="_blank" title="Пока твоя боль жива"><img src="https://upforme.ru/uploads/001c/86/4e/2/44298.gif? alt="Эпизод недели" class="episode-image"></a>
<div class="episode-characters"><a href="https://heylar.f-rpg.me/profile.php?id=58">Elric Liandor</a>, <a href="https://heylar.f-rpg.me/profile.php?id=19">Helg </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>[/html]
