#categories-container {
text-align: center;
}
#categories a {
font-family: 'Century Gothic', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 22.07px;
letter-spacing: 0.1em;
color: #0000FF;
text-decoration: none;
margin-right: 20px;
cursor: pointer;
display: inline-block;
margin-bottom: 10px;
}
#categories a.active {
font-weight: 700;
}
#line {
border-bottom: 1px solid #0000FF;
width: fit-content;
margin: 0 auto;
}
#posts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
#posts .post {
box-sizing: border-box;
cursor: pointer;
}
#posts .post img {
width: 100%;
height: auto;
object-fit: cover; /* Dodane, aby przyciąć zdjęcie */
max-height: 245px; /* Maksymalna wysokość dla małych zdjęć */
}
#posts .post:first-child img {
max-height: none; /* Usunięcie ograniczenia wysokości dla dużego zdjęcia */
}
#posts .post:first-child {
grid-column: span 2;
grid-row: span 2;
}
#posts .post .category {
font-family: 'Century Gothic', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 22.07px;
color: #C4D6FF;
}
#posts .post .title {
font-family: 'Century Gothic', sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0em;
text-align: left;
background: #0000FF;
color: #FFFFFF;
padding: 5px;
}
@media (max-width: 768px) {
#posts {
grid-template-columns: repeat(2, 1fr);
}
#posts .post:first-child {
grid-column: span 1;
grid-row: span 1;
}
}
@media (max-width: 480px) {
#line {
display: none;
}
#posts {
grid-template-columns: repeat(1, 1fr);
}
}
document.addEventListener("DOMContentLoaded", function() {
var siteUrl = 'https://mamopowiedz.pl';
fetch(siteUrl + '/wp-json/wp/v2/categories')
.then(response => response.json())
.then(categories => {
var categoriesDiv = document.getElementById('categories');
categoriesDiv.innerHTML = '
WSZYSTKIE';
categories.forEach(category => {
categoriesDiv.innerHTML += `
${category.name.toUpperCase()}`;
});
categoriesDiv.querySelectorAll('a').forEach(link => {
link.addEventListener('click', function() {
document.querySelectorAll('#categories a').forEach(a => a.classList.remove('active'));
this.classList.add('active');
loadPosts(this.getAttribute('data-id'));
});
});
loadPosts('0');
});
function loadPosts(categoryId) {
var postsDiv = document.getElementById('posts');
postsDiv.innerHTML = 'Loading...';
fetch(siteUrl + '/wp-json/wp/v2/posts' + (categoryId !== '0' ? '?categories=' + categoryId : ''))
.then(response => response.json())
.then(posts => {
postsDiv.innerHTML = '';
posts.forEach(post => {
fetch(siteUrl + '/wp-json/wp/v2/media/' + post.featured_media)
.then(response => response.json())
.then(media => {
fetch(siteUrl + '/wp-json/wp/v2/categories/' + post.categories[0])
.then(response => response.json())
.then(category => {
var postLink = siteUrl + '/?p=' + post.id;
postsDiv.innerHTML += `
${category.name}
${post.title.rendered}
`;
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
});
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
}
});
