frog-collective/frog-website
frog-collective
/
frog-website
5
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

feat: integrate news section

This commit is contained in:
Corentin 2024-05-19 17:50:27 +02:00
parent 7248f637f0
commit 80bdb83ca0
2 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
css/content.css
View File

@ -109,3 +109,40 @@
.game--more-button:hover {
color: white;
}
/* News */
.news {
display: flex;
flex-direction: column;
margin-bottom: var(--space-medium);
}
.news::after {
content: "";
background: center / cover no-repeat url("/img/game-footer.png");
height: 13px;
}
.news--title {
display: grid;
grid-template-columns: 1fr auto;
background: var(--dark);
color: white;
padding: var(--space-small) var(--space-medium);
}
.news--content {
padding: var(--space-large);
display: flex;
flex-direction: column;
align-items: center;
background: var(--primary-color);
color: var(--dark);
}
@media (max-width: 768px) {
.news--title {
grid-template-columns: auto;
grid-template-rows: auto auto;
}
}

18
index.html
View File

@ -153,11 +153,12 @@
</h2>
<div class="section--content">
<div class="news">
<h3 class="news--title">News Title</h3>
<div class="news--date">
02/05/2024
<div class="news--title">
<h3>This is a long news title to test how it presents on little resolutions</h3>
<div class="news--date">
02/05/2024
</div>
</div>
<div class="news--content">
Here we specialize in creating bite-sized adventures that anyone
can pick up and play, but only the true gaming aficionados can
@ -173,11 +174,12 @@
</div>
<div class="news">
<h3 class="news--title">News Title</div>
<div class="news--date">
02/05/2024
<div class="news--title">
<h3>This is a long news title to test how it presents on little resolutions</h3>
<div class="news--date">
02/05/2024
</div>
</div>
<div class="news--content">
Here we specialize in creating bite-sized adventures that anyone
can pick up and play, but only the true gaming aficionados can