new section: news (fix #48)

This commit is contained in:
DrMaxNix 2024-02-01 16:02:40 +01:00
parent 8acef3bca5
commit 67023090d0
3 changed files with 74 additions and 0 deletions

View File

@ -382,6 +382,35 @@
</div>
</div>
<div id="news" class="section">
<div class="header">
<span class="icon ti ti-bell"></span>
<span class="text"><?= $dict->get("news_title") ?></span>
</div>
<div class="content rows">
<div id="news-newsletter" class="box">
<span class="title"><?= $dict->get("news_newsletter_title") ?></span>
</div>
<div id="news-social-media" class="box">
<span class="title"><?= $dict->get("news_social_media_title") ?></span>
<div class="button-list">
<a href="" target="_blank" class="button">
<span class="icon big ti ti-circle-off"></span>
<div class="text">
<span>Test 1</span>
<span class="gray">@username</span>
</div>
<span class="icon ti ti-external-link"></span>
</a>
</div>
</div>
</div>
</div>
<div id="about" class="section">
<div class="header">
<span class="icon ti ti-heart"></span>

View File

@ -204,6 +204,12 @@ span.inline {
padding: 1rem 2rem;
}
.section > .content.rows {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
@ -420,15 +426,36 @@ span.inline {
background-color: var(--theme-dark);
}
.button .icon.big {
font-size: 2rem;
}
.button .text {
display: inline-flex;
flex-flow: column;
align-items: flex-start;
}
/* SECTION: NEWS */
.section > .content.rows > #news-newsletter, .section > .content.rows > #news-social-media {
align-items: flex-start;
}
.section > .content.rows > #news-newsletter {
flex-basis: 32rem;
flex-grow: 64;
}
.section > .content.rows > #news-social-media {
flex-basis: 16rem;
flex-grow: 1;
flex-shrink: 1;
}
/* FOOTER */
.footer {

View File

@ -357,6 +357,24 @@
"news_title" => [
"de" => "Bleib auf dem Laufenden",
"en" => "Stay up to date"
],
"news_newsletter_title" => [
"de" => "Newsletter",
"en" => "Newsletter"
],
"news_social_media_title" => [
"de" => "Soziale Medien",
"en" => "Social Media"
],
"about_title" => [
"de" => "Über diese Webseite",
"en" => "About this Website"