kimendisch/sbgg.jetzt
kimendisch
/
sbgg.jetzt
1
3
Fork 1
Code Issues 6 Pull Requests Projects Activity

✨ recommendations layout (fix #77)

This commit is contained in:
DrMaxNix 2024-04-02 18:45:53 +02:00
parent 1541e08066
commit 4f9ec0d42f
3 changed files with 116 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
page/start/index.php
View File

@ -485,6 +485,51 @@
</div>
</div>
<div id="recommendations" class="section">
<div class="header">
<span class="icon ti ti-comet"></span>
<span class="text"><?= $dict->get("recommendations_title") ?></span>
<button class="copylink ti ti-link"></button>
</div>
<div class="content">
<div class="card-list">
<a href="#" class="card">
<img src="/static/logo-256.png" alt="Lorem Logo" />
<div class="text">
<span class="title">Lorem Ipsum</span>
<span class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</a>
<a href="#" class="card">
<img src="/static/logo-256.png" alt="Lorem Logo" />
<div class="text">
<span class="title">Lorem Ipsum</span>
<span class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</span>
</div>
</a>
<a href="#" class="card">
<img src="/static/logo-256.png" alt="Lorem Logo" />
<div class="text">
<span class="title">Lorem Ipsum</span>
<span class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</div>
</a>
<a href="#" class="card">
<img src="/static/logo-256.png" alt="Lorem Logo" />
<div class="text">
<span class="title">Lorem Ipsum</span>
<span class="description">Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
</a>
</div>
<span class="note inline gray"><?= $dict->get("recommendations_note") ?></span>
</div>
</div>
<div id="about" class="section">
<div class="header">
<span class="icon ti ti-heart"></span>

58
page/start/style.css
View File

@ -603,6 +603,64 @@ a.box:hover {
/* SECTION: RECOMMENDATIONS */
.card-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: stretch;
gap: 1rem;
}
.card-list .card {
flex-basis: calc(50% - 0.5rem);
flex-grow: 1;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 1rem;
max-width: 32rem;
padding: 1rem;
border-radius: 2rem;
background-color: var(--color-bg-light);
}
.card-list .card img {
align-self: center;
width: 4rem;
}
.card-list .card .text {
align-self: flex-start;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.5rem;
text-align: left;
}
.card-list .card .text .title {
color: var(--color-white);
font-weight: bold;
}
.card-list .card:hover .text .title {
text-decoration: underline;
}
.card-list .card .text .description {
color: var(--color-gray);
}
/* COPYLINKS */
.copylink {
position: absolute;

13
page/strings.php
View File

@ -404,6 +404,19 @@
"recommendations_title" => [
"de" => "Das Könnte Dich auch Interessieren",
"en" => "You Might also Like This"
],
"recommendations_note" => [
"de" => "Bei obigen Empfehlungen handelt es sich um Projekte mit Bezug auf das Thema Trans*, bei denen ich entweder selbst mitwirke oder mit deren Betreiber*innen ich in engem Austausch stehe.",
"en" => "The recommendations above are projects related to the topic of trans*, in which I either participate myself or whose operators I am in close contact with."
],
"about_title" => [
"de" => "Über diese Webseite",
"en" => "About this Website"