.tuu-jokes{
font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 16px;
}
.tuu-jokes__head{
padding: 16px;
border-radius: 18px;
background: linear-gradient(90deg,#F2E14B,#fff 70%);
border:1px solid rgba(0,0,0,.08);
box-shadow: 0 16px 34px rgba(0,0,0,.08);
}
.tuu-jokes__badge{
display:inline-flex;
background:#111;
color:#fff;
border-radius:999px;
padding:6px 10px;
font-size:12px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.3px;
}
.tuu-jokes__title{
margin: 10px 0 6px;
font-size: clamp(24px, 3vw, 34px);
font-weight: 1000;
color:#111;
line-height:1.05;
}
.tuu-jokes__desc{
margin: 0;
color: rgba(0,0,0,.65);
font-weight: 700;
line-height:1.55;
}
.tuu-jokes__list{
margin-top: 16px;
display:grid;
gap: 12px;
}
.tuu-jokes__item{
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius: 18px;
padding: 14px 14px 12px;
box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.tuu-jokes__date{
font-size: 12px;
font-weight: 900;
color: rgba(0,0,0,.55);
margin-bottom: 10px;
}
.tuu-jokes__text{
font-size: 15px;
font-weight: 750;
line-height: 1.6;
color:#111;
}
.tuu-jokes__more{
margin: 14px auto 0;
display:flex;
justify-content:center;
align-items:center;
width: 100%;
max-width: 260px;
padding: 12px 14px;
border:none;
border-radius: 14px;
background:#111;
color:#fff;
font-weight: 1000;
cursor:pointer;
box-shadow: 0 10px 0 rgba(0,0,0,.12);
}
.tuu-jokes__more:active{ transform: translateY(1px); }
(function(){
const root = document.querySelector(”[data-tuu-jokes]”);
if(!root) return;
const jsonUrl = root.getAttribute(”data-json”);
if(!jsonUrl || jsonUrl === ”PASTE_JSON_URL_HERE”){
root.querySelector(”[data-tuu-list]”).innerHTML = ”
Lisää JSON-URL data-json -kenttään.
”;
return;
}
const list = root.querySelector(”[data-tuu-list]”);
const moreBtn = root.querySelector(”[data-tuu-more]”);
const pageSize = 8;
let offsetDays = 0;
let store = null;
function formatFiDate(d){
return d.toLocaleDateString(”fi-FI”, { weekday:”long”, year:”numeric”, month:”long”, day:”numeric” });
}
function iso(d){ return d.toISOString().slice(0,10); }
function renderBatch(){
const today = new Date();
for(let i=0;i today) continue; // never future
const key = iso(d);
const joke = store?.jokes?.[key];
if(!joke) continue;
const item = document.createElement(”article”);
item.className = ”tuu-jokes__item”;
item.innerHTML = `
${formatFiDate(d)}
${joke}
`;
list.appendChild(item);
}
offsetDays += pageSize;
}
fetch(jsonUrl, { cache: ”force-cache” })
.then(r => r.json())
.then(data => {
store = data;
renderBatch();
moreBtn.addEventListener(”click”, renderBatch);
})
.catch(() => {
list.innerHTML = ”
Vitsien lataus epäonnistui.
”;
});
})();
