|
|
<!DOCTYPE html> |
|
|
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> |
|
|
<head> |
|
|
<b:include data='blog' name='all-head-content'/> |
|
|
<title><data:blog.pageTitle/></title> |
|
|
|
|
|
<meta charset='utf-8'/> |
|
|
<meta content='width=device-width, initial-scale=1' name='viewport'/> |
|
|
<meta content='blogger' name='generator'/> |
|
|
|
|
|
|
|
|
<link expr:href='data:blog.url' rel='canonical'/> |
|
|
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/> |
|
|
|
|
|
|
|
|
<style type='text/css'> |
|
|
|
|
|
:root { |
|
|
--primary: #4f46e5; |
|
|
--primary-dark: #7c3aed; |
|
|
--secondary: #10b981; |
|
|
--secondary-dark: #34d399; |
|
|
--text: #1f2937; |
|
|
--text-dark: #f3f4f6; |
|
|
--bg: #ffffff; |
|
|
--bg-dark: #111827; |
|
|
--card-bg: #f9fafb; |
|
|
--card-bg-dark: #1f2937; |
|
|
--border: #e5e7eb; |
|
|
--border-dark: #374151; |
|
|
} |
|
|
|
|
|
.dark { |
|
|
--primary: var(--primary-dark); |
|
|
--secondary: var(--secondary-dark); |
|
|
--text: var(--text-dark); |
|
|
--bg: var(--bg-dark); |
|
|
--card-bg: var(--card-bg-dark); |
|
|
--border: var(--border-dark); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
|
|
line-height: 1.6; |
|
|
color: var(--text); |
|
|
background-color: var(--bg); |
|
|
transition: background-color 0.3s ease, color 0.3s ease; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
a { |
|
|
color: var(--primary); |
|
|
text-decoration: none; |
|
|
transition: color 0.2s ease; |
|
|
} |
|
|
|
|
|
a:hover { |
|
|
color: var(--secondary); |
|
|
} |
|
|
|
|
|
img { |
|
|
max-width: 100%; |
|
|
height: auto; |
|
|
} |
|
|
|
|
|
|
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 15px; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
position: sticky; |
|
|
top: 0; |
|
|
z-index: 50; |
|
|
background-color: rgba(var(--bg), 0.8); |
|
|
backdrop-filter: blur(10px); |
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.dark .header { |
|
|
background-color: rgba(var(--bg-dark), 0.8); |
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.header-container { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 1rem 0; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
font-weight: 700; |
|
|
font-size: 1.25rem; |
|
|
} |
|
|
|
|
|
.logo-icon { |
|
|
width: 2.5rem; |
|
|
height: 2.5rem; |
|
|
border-radius: 50%; |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.nav { |
|
|
display: flex; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
font-weight: 500; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .nav-link { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.header-actions { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.theme-toggle { |
|
|
width: 2.5rem; |
|
|
height: 2.5rem; |
|
|
border-radius: 50%; |
|
|
background-color: var(--card-bg); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
border: none; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .theme-toggle { |
|
|
background-color: var(--card-bg-dark); |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: none; |
|
|
background: none; |
|
|
border: none; |
|
|
color: var(--text); |
|
|
font-size: 1.25rem; |
|
|
} |
|
|
|
|
|
.dark .mobile-menu-btn { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
|
|
|
.hero-slider { |
|
|
position: relative; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.slider-container { |
|
|
display: flex; |
|
|
overflow-x: auto; |
|
|
scroll-snap-type: x mandatory; |
|
|
scroll-behavior: smooth; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
gap: 1rem; |
|
|
padding-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.slider-container::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.slide { |
|
|
min-width: 100%; |
|
|
scroll-snap-align: start; |
|
|
position: relative; |
|
|
border-radius: 0.5rem; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.slide-img { |
|
|
width: 100%; |
|
|
height: 400px; |
|
|
object-fit: cover; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.slide-content { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
padding: 2rem; |
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.slide-category { |
|
|
display: inline-block; |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 9999px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.slide-title { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
margin: 0.5rem 0; |
|
|
} |
|
|
|
|
|
.slide-excerpt { |
|
|
font-size: 0.875rem; |
|
|
opacity: 0.9; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.slide-meta { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
font-size: 0.75rem; |
|
|
} |
|
|
|
|
|
.slider-nav { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 0.5rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.slider-dot { |
|
|
width: 0.75rem; |
|
|
height: 0.75rem; |
|
|
border-radius: 50%; |
|
|
background-color: var(--border); |
|
|
cursor: pointer; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
.dark .slider-dot { |
|
|
background-color: var(--border-dark); |
|
|
} |
|
|
|
|
|
.slider-dot.active { |
|
|
background-color: var(--primary); |
|
|
} |
|
|
|
|
|
|
|
|
.main-content { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr; |
|
|
gap: 2rem; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
@media (min-width: 1024px) { |
|
|
.main-content { |
|
|
grid-template-columns: 2fr 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.posts-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.post-card { |
|
|
background-color: var(--card-bg); |
|
|
border-radius: 0.5rem; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease; |
|
|
} |
|
|
|
|
|
.dark .post-card { |
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.post-card:hover { |
|
|
transform: translateY(-0.25rem); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.dark .post-card:hover { |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.post-img { |
|
|
width: 100%; |
|
|
height: 200px; |
|
|
object-fit: cover; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.post-content { |
|
|
padding: 1.25rem; |
|
|
} |
|
|
|
|
|
.post-category { |
|
|
display: inline-block; |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 9999px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.post-title { |
|
|
font-size: 1.125rem; |
|
|
font-weight: 600; |
|
|
margin: 0.5rem 0; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .post-title { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.post-excerpt { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text); |
|
|
opacity: 0.8; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.dark .post-excerpt { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.post-meta { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
font-size: 0.75rem; |
|
|
color: var(--text); |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.dark .post-meta { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.sidebar-widget { |
|
|
background-color: var(--card-bg); |
|
|
border-radius: 0.5rem; |
|
|
padding: 1.25rem; |
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.dark .sidebar-widget { |
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.widget-title { |
|
|
font-size: 1.125rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 1rem; |
|
|
color: var(--text); |
|
|
position: relative; |
|
|
padding-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.dark .widget-title { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.widget-title::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 2rem; |
|
|
height: 2px; |
|
|
background-color: var(--primary); |
|
|
} |
|
|
|
|
|
|
|
|
.about-widget { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.about-avatar { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
margin-bottom: 1rem; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.about-name { |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.25rem; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .about-name { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.about-bio { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text); |
|
|
opacity: 0.8; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.dark .about-bio { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
|
|
|
.categories-list { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.category-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 0.5rem 0; |
|
|
border-bottom: 1px solid var(--border); |
|
|
} |
|
|
|
|
|
.dark .category-item { |
|
|
border-bottom-color: var(--border-dark); |
|
|
} |
|
|
|
|
|
.category-link { |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .category-link { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.category-count { |
|
|
background-color: var(--border); |
|
|
color: var(--text); |
|
|
padding: 0.25rem 0.5rem; |
|
|
border-radius: 9999px; |
|
|
font-size: 0.75rem; |
|
|
} |
|
|
|
|
|
.dark .category-count { |
|
|
background-color: var(--border-dark); |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
|
|
|
.newsletter-form { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.newsletter-input { |
|
|
padding: 0.5rem 0.75rem; |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 0.25rem; |
|
|
background-color: var(--bg); |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .newsletter-input { |
|
|
border-color: var(--border-dark); |
|
|
background-color: var(--bg-dark); |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.newsletter-button { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
padding: 0.5rem; |
|
|
border: none; |
|
|
border-radius: 0.25rem; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.2s ease; |
|
|
} |
|
|
|
|
|
.newsletter-button:hover { |
|
|
background-color: var(--secondary); |
|
|
} |
|
|
|
|
|
|
|
|
.tags-list { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.tag-link { |
|
|
display: inline-block; |
|
|
background-color: var(--border); |
|
|
color: var(--text); |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 9999px; |
|
|
font-size: 0.75rem; |
|
|
transition: background-color 0.2s ease, color 0.2s ease; |
|
|
} |
|
|
|
|
|
.dark .tag-link { |
|
|
background-color: var(--border-dark); |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.tag-link:hover { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.trending-posts { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.trending-post { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.trending-post-img { |
|
|
width: 80px; |
|
|
height: 60px; |
|
|
object-fit: cover; |
|
|
border-radius: 0.25rem; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.trending-post-title { |
|
|
font-size: 0.875rem; |
|
|
font-weight: 500; |
|
|
color: var(--text); |
|
|
margin-bottom: 0.25rem; |
|
|
} |
|
|
|
|
|
.dark .trending-post-title { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.trending-post-date { |
|
|
font-size: 0.75rem; |
|
|
color: var(--text); |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.dark .trending-post-date { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
|
|
|
.post-header { |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.post-title-single { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 1rem; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .post-title-single { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.post-meta-single { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
font-size: 0.875rem; |
|
|
color: var(--text); |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.dark .post-meta-single { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.post-featured-img { |
|
|
width: 100%; |
|
|
max-height: 500px; |
|
|
object-fit: cover; |
|
|
border-radius: 0.5rem; |
|
|
margin-bottom: 2rem; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.post-content-single { |
|
|
line-height: 1.7; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .post-content-single { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.post-content-single p { |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.post-content-single h2, |
|
|
.post-content-single h3, |
|
|
.post-content-single h4 { |
|
|
margin: 2rem 0 1rem; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .post-content-single h2, |
|
|
.dark .post-content-single h3, |
|
|
.dark .post-content-single h4 { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.post-content-single a { |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
.post-tags { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 0.5rem; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
|
|
|
.related-posts { |
|
|
margin: 3rem 0; |
|
|
} |
|
|
|
|
|
.related-title { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 1.5rem; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .related-title { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.related-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
.footer { |
|
|
background-color: var(--card-bg); |
|
|
padding: 3rem 0; |
|
|
margin-top: 3rem; |
|
|
} |
|
|
|
|
|
.dark .footer { |
|
|
background-color: var(--card-bg-dark); |
|
|
} |
|
|
|
|
|
.footer-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(1, 1fr); |
|
|
gap: 2rem; |
|
|
} |
|
|
|
|
|
@media (min-width: 768px) { |
|
|
.footer-container { |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
} |
|
|
} |
|
|
|
|
|
.footer-widget-title { |
|
|
font-size: 1.125rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 1.5rem; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .footer-widget-title { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.footer-logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
font-weight: 700; |
|
|
font-size: 1.25rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.footer-logo-icon { |
|
|
width: 2rem; |
|
|
height: 2rem; |
|
|
border-radius: 50%; |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.footer-about { |
|
|
font-size: 0.875rem; |
|
|
color: var(--text); |
|
|
opacity: 0.8; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.dark .footer-about { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.footer-social { |
|
|
display: flex; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.social-link { |
|
|
width: 2.5rem; |
|
|
height: 2.5rem; |
|
|
border-radius: 50%; |
|
|
background-color: var(--border); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: var(--text); |
|
|
transition: background-color 0.2s ease, color 0.2s ease; |
|
|
} |
|
|
|
|
|
.dark .social-link { |
|
|
background-color: var(--border-dark); |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.social-link:hover { |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.footer-links { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.footer-link { |
|
|
color: var(--text); |
|
|
opacity: 0.8; |
|
|
font-size: 0.875rem; |
|
|
transition: opacity 0.2s ease; |
|
|
} |
|
|
|
|
|
.dark .footer-link { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
.footer-link:hover { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.footer-bottom { |
|
|
margin-top: 2rem; |
|
|
padding-top: 2rem; |
|
|
border-top: 1px solid var(--border); |
|
|
text-align: center; |
|
|
font-size: 0.875rem; |
|
|
color: var(--text); |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.dark .footer-bottom { |
|
|
border-top-color: var(--border-dark); |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-menu { |
|
|
display: none; |
|
|
background-color: var(--bg); |
|
|
padding: 1rem; |
|
|
border-top: 1px solid var(--border); |
|
|
} |
|
|
|
|
|
.dark .mobile-menu { |
|
|
background-color: var(--bg-dark); |
|
|
border-top-color: var(--border-dark); |
|
|
} |
|
|
|
|
|
.mobile-menu.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.mobile-nav { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.mobile-nav-link { |
|
|
padding: 0.5rem 0; |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.dark .mobile-nav-link { |
|
|
color: var(--text-dark); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.nav { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.slide-img { |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
.slide-content { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.slide-title { |
|
|
font-size: 1.25rem; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.loading { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.loading-spinner { |
|
|
width: 2rem; |
|
|
height: 2rem; |
|
|
border: 3px solid var(--border); |
|
|
border-top-color: var(--primary); |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
.dark .loading-spinner { |
|
|
border-color: var(--border-dark); |
|
|
border-top-color: var(--primary); |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.infinite-scroll-loading { |
|
|
grid-column: 1 / -1; |
|
|
} |
|
|
</style> |
|
|
|
|
|
|
|
|
<b:if cond='data:blog.pageType == "index"'> |
|
|
<meta expr:content='data:blog.pageTitle + " - " + data:blog.title' name='title'/> |
|
|
<meta expr:content='data:blog.metaDescription' name='description'/> |
|
|
<b:else/> |
|
|
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='title'/> |
|
|
<meta expr:content='data:blog.pageName + ". " + data:blog.title + ". " + data:blog.metaDescription' name='description'/> |
|
|
</b:if> |
|
|
|
|
|
<meta content='index, follow' name='robots'/> |
|
|
<meta content='max-snippet:-1, max-image-preview:large, max-video-preview:-1' name='robots'/> |
|
|
|
|
|
|
|
|
<meta content='website' property='og:type'/> |
|
|
<meta expr:content='data:blog.canonicalUrl' property='og:url'/> |
|
|
<b:if cond='data:blog.pageType == "index"'> |
|
|
<meta expr:content='data:blog.pageTitle + " - " + data:blog.title' property='og:title'/> |
|
|
<b:else/> |
|
|
<meta expr:content='data:blog.pageName + " - " + data:blog.title' property='og:title'/> |
|
|
</b:if> |
|
|
<meta expr:content='data:blog.metaDescription' property='og:description'/> |
|
|
<meta expr:content='data:blog.title' property='og:site_name'/> |
|
|
|
|
|
|
|
|
<meta content='summary_large_image' name='twitter:card'/> |
|
|
<meta expr:content='data:blog.pageTitle' name='twitter:title'/> |
|
|
<meta expr:content='data:blog.metaDescription' name='twitter:description'/> |
|
|
|
|
|
|
|
|
<script type='application/ld+json'> |
|
|
{ |
|
|
"@context": "https://schema.org", |
|
|
"@type": "WebSite", |
|
|
"name": "<data:blog.title/>", |
|
|
"url": "<data:blog.url/>", |
|
|
"potentialAction": { |
|
|
"@type": "SearchAction", |
|
|
"target": "<data:blog.url/>?q={search_term_string}", |
|
|
"query-input": "required name=search_term_string" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
|
|
|
<b:if cond='data:blog.pageType == "index"'> |
|
|
<script type='application/ld+json'> |
|
|
{ |
|
|
"@context": "https://schema.org", |
|
|
"@type": "Blog", |
|
|
"headline": "<data:blog.title/>", |
|
|
"description": "<data:blog.metaDescription/>", |
|
|
"url": "<data:blog.url/>", |
|
|
"publisher": { |
|
|
"@type": "Organization", |
|
|
"name": "<data:blog.title/>", |
|
|
"logo": { |
|
|
"@type": "ImageObject", |
|
|
"url": "https://via.placeholder.com/600x315" |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</b:if> |
|
|
|
|
|
<b:if cond='data:blog.pageType == "item"'> |
|
|
<script type='application/ld+json'> |
|
|
{ |
|
|
"@context": "https://schema.org", |
|
|
"@type": "BlogPosting", |
|
|
"headline": "<data:blog.pageName/>", |
|
|
"description": "<data:blog.metaDescription/>", |
|
|
"url": "<data:blog.url/>", |
|
|
"datePublished": "<data:blog.post.date.iso8601/>", |
|
|
"dateModified": "<data:blog.post.lastUpdated.iso8601/>", |
|
|
"author": { |
|
|
"@type": "Person", |
|
|
"name": "<data:blog.post.author.name/>" |
|
|
}, |
|
|
"publisher": { |
|
|
"@type": "Organization", |
|
|
"name": "<data:blog.title/>", |
|
|
"logo": { |
|
|
"@type": "ImageObject", |
|
|
"url": "https://via.placeholder.com/600x315" |
|
|
} |
|
|
}, |
|
|
"mainEntityOfPage": { |
|
|
"@type": "WebPage", |
|
|
"@id": "<data:blog.url/>" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</b:if> |
|
|
</head> |
|
|
|
|
|
<body class='loading'> |
|
|
|
|
|
<header class='header'> |
|
|
<div class='container header-container'> |
|
|
<a class='logo' expr:href='data:blog.homepageUrl'> |
|
|
<span class='logo-icon'>B</span> |
|
|
<span><data:blog.title/></span> |
|
|
</a> |
|
|
|
|
|
<nav class='nav'> |
|
|
<a class='nav-link' expr:href='data:blog.homepageUrl'>Home</a> |
|
|
<a class='nav-link' href='#'>Categories</a> |
|
|
<a class='nav-link' href='#'>About</a> |
|
|
<a class='nav-link' href='#'>Contact</a> |
|
|
</nav> |
|
|
|
|
|
<div class='header-actions'> |
|
|
<button class='theme-toggle' id='themeToggle'> |
|
|
<i class='fas fa-moon'></i> |
|
|
</button> |
|
|
<button class='mobile-menu-btn' id='mobileMenuBtn'> |
|
|
<i class='fas fa-bars'></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class='mobile-menu' id='mobileMenu'> |
|
|
<nav class='mobile-nav'> |
|
|
<a class='mobile-nav-link' expr:href='data:blog.homepageUrl'>Home</a> |
|
|
<a class='mobile-nav-link' href='#'>Categories</a> |
|
|
<a class='mobile-nav-link' href='#'>About</a> |
|
|
<a class='mobile-nav-link' href='#'>Contact</a> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class='container'> |
|
|
<b:section id='main' showaddelement='yes'> |
|
|
<b:widget id='FeaturedPosts1' locked='false' title='Featured Posts' type='FeaturedPost'> |
|
|
<b:includable id='main'> |
|
|
<div class='hero-slider'> |
|
|
<div class='slider-container' id='featuredSlider'> |
|
|
<b:loop values='data:posts' var='post'> |
|
|
<div class='slide'> |
|
|
<img class='slide-img' expr:alt='data:post.title' expr:src='data:post.featuredImage.isYouTubePost ? resizeImage(data:post.featuredImage, 800, 450) : resizeImage(data:post.featuredImage, 800, 450)'/> |
|
|
<div class='slide-content'> |
|
|
<span class='slide-category'> |
|
|
<b:loop values='data:post.labels' var='label'> |
|
|
<b:if cond='data:label.isLast != "true"'> |
|
|
<data:label.name/>, |
|
|
<b:else/> |
|
|
<data:label.name/> |
|
|
</b:if> |
|
|
</b:loop> |
|
|
</span> |
|
|
<h3 class='slide-title'> |
|
|
<a expr:href='data:post.url'><data:post.title/></a> |
|
|
</h3> |
|
|
<p class='slide-excerpt'><data:post.snippet/></p> |
|
|
<div class='slide-meta'> |
|
|
<span><data:post.date/></span> |
|
|
<span>•</span> |
|
|
<span><data:post.author.name/></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</b:loop> |
|
|
</div> |
|
|
|
|
|
<div class='slider-nav'> |
|
|
<b:loop values='data:posts' var='post' index='index'> |
|
|
<button class='slider-dot' expr:data-index='data:index'></button> |
|
|
</b:loop> |
|
|
</div> |
|
|
</div> |
|
|
</b:includable> |
|
|
</b:widget> |
|
|
|
|
|
<div class='main-content'> |
|
|
<div class='content-area'> |
|
|
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'> |
|
|
<b:includable id='main' var='top'> |
|
|
<b:if cond='data:mobile == "false"'> |
|
|
<b:include data='top' name='status-message'/> |
|
|
</b:if> |
|
|
|
|
|
<div class='posts-grid' id='blog-posts'> |
|
|
<b:include data='top' name='blog'/> |
|
|
</div> |
|
|
|
|
|
<div class='infinite-scroll-loading' id='blog-loading'> |
|
|
<div class='loading'> |
|
|
<div class='loading-spinner'></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<b:if cond='data:blog.pageType != "item"'> |
|
|
<b:if cond='data:blog.pageType != "static_page"'> |
|
|
<b:include name='nextprev'/> |
|
|
</b:if> |
|
|
</b:if> |
|
|
</b:includable> |
|
|
|
|
|
<b:includable id='blog' var='top'> |
|
|
<b:loop values='data:posts' var='post'> |
|
|
<article class='post-card'> |
|
|
<a expr:href='data:post.url'> |
|
|
<img class='post-img' expr:alt='data:post.title' expr:src='data:post.featuredImage.isYouTubePost ? resizeImage(data:post.featuredImage, 600, 400) : resizeImage(data:post.featuredImage, 600, 400)'/> |
|
|
</a> |
|
|
<div class='post-content'> |
|
|
<span class='post-category'> |
|
|
<b:loop values='data:post.labels' var='label'> |
|
|
<b:if cond='data:label.isLast != "true"'> |
|
|
<data:label.name/>, |
|
|
<b:else/> |
|
|
<data:label.name/> |
|
|
</b:if> |
|
|
</b:loop> |
|
|
</span> |
|
|
<h3 class='post-title'> |
|
|
<a expr:href='data:post.url'><data:post.title/></a> |
|
|
</h3> |
|
|
<p class='post-excerpt'><data:post.snippet length='100'/></p> |
|
|
<div class='post-meta'> |
|
|
<span><data:post.date/></span> |
|
|
<span><data:post.author.name/></span> |
|
|
</div> |
|
|
</div> |
|
|
</article> |
|
|
</b:loop> |
|
|
</b:includable> |
|
|
|
|
|
<b:includable id='nextprev'> |
|
|
<div class='blog-pager' id='blog-pager'> |
|
|
<b:if cond='data:blog.url != data:blog.homepageUrl'> |
|
|
<b:if cond='data:blog.url != data:blog.homepageUrl'> |
|
|
<b:if cond='data:blog.pageType != "item"'> |
|
|
<b:if cond='data:blog.pageType != "static_page"'> |
|
|
<b:if cond='data:blog.url != data:blog.newestPageUrl'> |
|
|
<a class='blog-pager-older-link' expr:href='data:blog.nextPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:blog.olderPostTitle'> |
|
|
Older Posts → |
|
|
</a> |
|
|
</b:if> |
|
|
|
|
|
<b:if cond='data:blog.url != data:blog.oldestPageUrl'> |
|
|
<a class='blog-pager-newer-link' expr:href='data:blog.previousPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:blog.newerPostTitle'> |
|
|
← Newer Posts |
|
|
</a> |
|
|
</b:if> |
|
|
</b:if> |
|
|
</b:if> |
|
|
</b:if> |
|
|
</b:if> |
|
|
|
|
|
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a> |
|
|
</div> |
|
|
</b:includable> |
|
|
|
|
|
<b:includable id='status-message'> |
|
|
<b:if cond='data:navMessage'> |
|
|
<div class='status-msg-wrap'> |
|
|
<div class='status-msg-body'> |
|
|
<data:navMessage/> |
|
|
</div> |
|
|
</div> |
|
|
<b:else/> |
|
|
<b:if cond='data:showMobile'> |
|
|
<div class='status-msg-wrap'> |
|
|
<div class='status-msg-body'> |
|
|
<data:showMobileMessage/> |
|
|
</div> |
|
|
</div> |
|
|
</b:if> |
|
|
</b:if> |
|
|
</b:includable> |
|
|
</b:widget> |
|
|
</div> |
|
|
|
|
|
<div class='sidebar'> |
|
|
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'> |
|
|
<b:includable id='main'> |
|
|
<div class='sidebar-widget about-widget'> |
|
|
<img class='about-avatar' expr:alt='data:title' expr:src='data:userPhoto.url'/> |
|
|
<h3 class='about-name'><data:title/></h3> |
|
|
<p class='about-bio'><data:userDescription/></p> |
|
|
<a class='button' href='#'>Read More</a> |
|
|
</div> |
|
|
</b:includable> |
|
|
</b:widget> |
|
|
|
|
|
<b:widget id='Label1' locked='false' title='Categories' type='Label'> |
|
|
<b:includable id='main'> |
|
|
<div class='sidebar-widget'> |
|
|
<h3 class='widget-title'>Categories</h3> |
|
|
<div class='categories-list'> |
|
|
<b:loop values='data:labels' var='label'> |
|
|
<div class='category-item'> |
|
|
<a class='category-link' expr:href='data:label.url'><data:label.name/></a> |
|
|
<span class='category-count'><data:label.count/></span> |
|
|
</div> |
|
|
</b:loop> |
|
|
</div> |
|
|
</div> |
|
|
</b:includable> |
|
|
</b:widget> |
|
|
|
|
|
<b:widget id='HTML1' locked='false' title='Newsletter' type='HTML'> |
|
|
<b:includable id='main'> |
|
|
<div class='sidebar-widget'> |
|
|
<h3 class='widget-title'>Newsletter</h3> |
|
|
<form class='newsletter-form'> |
|
|
<input class='newsletter-input' placeholder='Your email' type='email'/> |
|
|
<button class='newsletter-button' type='submit'>Subscribe</button> |
|
|
</form> |
|
|
</div> |
|
|
</b:includable> |
|
|
</b:widget> |
|
|
|
|
|
<b:widget id='PopularPosts1' locked='false' title='Trending Posts' type='PopularPosts'> |
|
|
<b:includable id='main'> |
|
|
<div class='sidebar-widget'> |
|
|
<h3 class='widget-title'>Trending Posts</h3> |
|
|
<div class='trending-posts'> |
|
|
<b:loop values='data:posts' var='post'> |
|
|
<div class='trending-post'> |
|
|
<a expr:href='data:post.url'> |
|
|
<img class='trending-post-img' expr:alt='data:post.title' expr:src='data:post.featuredImage.isYouTubePost ? resizeImage(data:post.featuredImage, 200, 150) : resizeImage(data:post.featuredImage, 200, 150)'/> |
|
|
</a> |
|
|
<div> |
|
|
<h4 class='trending-post-title'> |
|
|
<a expr:href='data:post.url'><data:post.title/></a> |
|
|
</h4> |
|
|
<span class='trending-post-date'><data:post.date/></span> |
|
|
</div> |
|
|
</div> |
|
|
</b:loop> |
|
|
</div> |
|
|
</div> |
|
|
</b:includable> |
|
|
</b:widget> |
|
|
|
|
|
<b:widget id='HTML2' locked='false' title='Tags' type='HTML'> |
|
|
<b:includable id='main'> |
|
|
<div class='sidebar-widget'> |
|
|
<h3 class='widget-title'>Tags</h3> |
|
|
<div class='tags-list'> |
|
|
<b:loop values='data:post.labels' var='label'> |
|
|
<a class='tag-link' expr:href='data:label.url'><data:label.name/></a> |
|
|
</b:loop> |
|
|
</div> |
|
|
</div> |
|
|
</b:includable> |
|
|
</b:widget> |
|
|
</div> |
|
|
</div> |
|
|
</b:section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class='footer'> |
|
|
<div class='container footer-container'> |
|
|
<div class='footer-widget'> |
|
|
<div class='footer-logo'> |
|
|
<span class='footer-logo-icon'>B</span> |
|
|
<span><data:blog.title/></span> |
|
|
</div> |
|
|
<p class='footer-about'> |
|
|
A modern blogging platform for sharing ideas and stories. |
|
|
</p> |
|
|
<div class='footer-social'> |
|
|
<a class='social-link' href='#'><i class='fab fa-facebook-f'></i></a> |
|
|
<a class='social-link' href='#'><i class='fab fa-twitter'></i></a> |
|
|
<a class='social-link' href='#'><i class='fab fa-instagram'></i></a> |
|
|
<a class='social-link' href='#'><i class='fab fa-linkedin-in'></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class='footer-widget'> |
|
|
<h3 class='footer-widget-title'>Quick Links</h3> |
|
|
<div class='footer-links'> |
|
|
<a class='footer-link' expr:href='data:blog.homepageUrl'>Home</a> |
|
|
<a class='footer-link' href='#'>About</a> |
|
|
<a class='footer-link' href='#'>Blog</a> |
|
|
<a class='footer-link' href='#'>Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class='footer-widget'> |
|
|
<h3 class='footer-widget-title'>Categories</h3> |
|
|
<div class='footer-links'> |
|
|
<b:loop values='data:labels' var='label'> |
|
|
<a class='footer-link' expr:href='data:label.url'><data:label.name/></a> |
|
|
</b:loop> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class='footer-widget'> |
|
|
<h3 class='footer-widget-title'>Contact</h3> |
|
|
<div class='footer-links'> |
|
|
<a class='footer-link' href='mailto:contact@example.com'>contact@example.com</a> |
|
|
<a class='footer-link' href='tel:+1234567890'>+1 (234) 567-890</a> |
|
|
<a class='footer-link' href='#'>123 Blog Street, City</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class='container footer-bottom'> |
|
|
<p>© <data:blog.title/> <script>document.write(new Date().getFullYear())</script>. All rights reserved.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
const themeToggle = document.getElementById('themeToggle'); |
|
|
const body = document.body; |
|
|
|
|
|
|
|
|
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
body.classList.add('dark'); |
|
|
themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; |
|
|
} else { |
|
|
body.classList.remove('dark'); |
|
|
themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; |
|
|
} |
|
|
|
|
|
themeToggle.addEventListener('click', () => { |
|
|
body.classList.toggle('dark'); |
|
|
if (body.classList.contains('dark')) { |
|
|
localStorage.setItem('theme', 'dark'); |
|
|
themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; |
|
|
} else { |
|
|
localStorage.setItem('theme', 'light'); |
|
|
themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
|
|
const mobileMenu = document.getElementById('mobileMenu'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
const featuredSlider = document.getElementById('featuredSlider'); |
|
|
const sliderDots = document.querySelectorAll('.slider-dot'); |
|
|
|
|
|
if (featuredSlider) { |
|
|
let currentSlide = 0; |
|
|
|
|
|
|
|
|
if (sliderDots.length > 0) { |
|
|
sliderDots[0].classList.add('active'); |
|
|
} |
|
|
|
|
|
|
|
|
function updateSliderPosition() { |
|
|
const slideWidth = document.querySelector('.slide').offsetWidth; |
|
|
featuredSlider.scrollTo({ |
|
|
left: currentSlide * (slideWidth + 16), |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
sliderDots.forEach((dot, index) => { |
|
|
if (index === currentSlide) { |
|
|
dot.classList.add('active'); |
|
|
} else { |
|
|
dot.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
sliderDots.forEach((dot, index) => { |
|
|
dot.addEventListener('click', () => { |
|
|
currentSlide = index; |
|
|
updateSliderPosition(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
let slideInterval = setInterval(() => { |
|
|
currentSlide = (currentSlide + 1) % sliderDots.length; |
|
|
updateSliderPosition(); |
|
|
}, 5000); |
|
|
|
|
|
|
|
|
featuredSlider.addEventListener('mouseenter', () => { |
|
|
clearInterval(slideInterval); |
|
|
}); |
|
|
|
|
|
featuredSlider.addEventListener('mouseleave', () => { |
|
|
slideInterval = setInterval(() => { |
|
|
currentSlide = (currentSlide + 1) % sliderDots.length; |
|
|
updateSliderPosition(); |
|
|
}, 5000); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const blogPosts = document.getElementById('blog-posts'); |
|
|
const blogLoading = document.getElementById('blog-loading'); |
|
|
let isLoading = false; |
|
|
|
|
|
if (blogPosts) { |
|
|
window.addEventListener('scroll', () => { |
|
|
const { scrollTop, scrollHeight, clientHeight } = document.documentElement; |
|
|
|
|
|
if (scrollTop + clientHeight >= scrollHeight - 500 && !isLoading) { |
|
|
loadMorePosts(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function loadMorePosts() { |
|
|
const nextPageLink = document.querySelector('.blog-pager-older-link'); |
|
|
|
|
|
if (nextPageLink && !isLoading) { |
|
|
isLoading = true; |
|
|
blogLoading.style.display = 'flex'; |
|
|
|
|
|
fetch(nextPageLink.href) |
|
|
.then(response => response.text()) |
|
|
.then(html => { |
|
|
const parser = new DOMParser(); |
|
|
const doc = parser.parseFromString(html, 'text/html'); |
|
|
const newPosts = doc.querySelector('#blog-posts').innerHTML; |
|
|
const newNextPageLink = doc.querySelector('.blog-pager-older-link'); |
|
|
|
|
|
blogPosts.innerHTML += newPosts; |
|
|
|
|
|
if (newNextPageLink) { |
|
|
document.querySelector('.blog-pager-older-link').href = newNextPageLink.href; |
|
|
} else { |
|
|
document.querySelector('.blog-pager').remove(); |
|
|
} |
|
|
|
|
|
isLoading = false; |
|
|
blogLoading.style.display = 'none'; |
|
|
}) |
|
|
.catch(error => { |
|
|
console.error('Error loading more posts:', error); |
|
|
isLoading = false; |
|
|
blogLoading.style.display = 'none'; |
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
document.body.classList.remove('loading'); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=krigeta/ii" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
