feat: Added a lot of new section rewrites

2026-05-22 11:22:17 +02:00
parent 8d4ff16d9b
commit fe6682a76a
17 changed files with 839 additions and 3 deletions
@@ -0,0 +1 @@
+main#main #AjaxMainSection .section_guidepost_before
@@ -0,0 +1,44 @@
+(() => {
+  const container = document.querySelector('main#main #AjaxMainSection .section_guidepost_before .vc-articlebox');
+  if (!container) return null;
+
+  const headerEl = container.querySelector('.header span');
+  const sectionTitle = headerEl ? headerEl.textContent.trim() : null;
+
+  const articleNodes = container.querySelectorAll('.content.articles a.article');
+  
+  const articles = Array.from(articleNodes).map(article => {
+    const link = article.getAttribute('href');
+
+    const titleEl = article.querySelector('.title');
+    const title = titleEl ? titleEl.textContent.trim() : null;
+
+    const dateEl = article.querySelector('.date');
+    const date = dateEl ? dateEl.textContent.trim() : null;
+
+    const annotationEl = article.querySelector('.annotation');
+    const annotation = annotationEl ? annotationEl.textContent.trim() : null;
+
+    const imgEl = article.querySelector('.img img');
+    const imageSrc = imgEl ? (imgEl.getAttribute('data-src') || imgEl.getAttribute('src')) : null;
+    const imageAlt = imgEl ? imgEl.getAttribute('alt') : null;
+
+    return {
+      title,
+      link,
+      date,
+      annotation,
+      imageSrc,
+      imageAlt
+    };
+  });
+
+  const moreBtn = container.querySelector('.footer a.moreBtn');
+  const moreLink = moreBtn ? moreBtn.getAttribute('href') : null;
+
+  return {
+    sectionTitle,
+    articles,
+    moreLink
+  };
+})();
@@ -0,0 +1,201 @@
+:root {
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --card: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --border: oklch(0.922 0 0);
+  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
+}
+
+.news-section {
+  font-family: var(--font-sans);
+  padding: 4rem 0; /* py-16 */
+  background-color: color-mix(
+    in srgb,
+    var(--secondary) 30%,
+    transparent
+  ); /* bg-secondary/30 */
+}
+@media (min-width: 1024px) {
+  .news-section {
+    padding: 6rem 0; /* lg:py-24 */
+  }
+}
+
+.container {
+  max-width: 80rem; /* max-w-7xl */
+  margin: 0 auto;
+  padding: 0 1rem; /* px-4 */
+}
+@media (min-width: 640px) {
+  .container {
+    padding: 0 1.5rem; /* sm:px-6 */
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    padding: 0 2rem; /* lg:px-8 */
+  }
+}
+
+/* Header Section */
+.news-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 3rem; /* mb-12 */
+}
+
+.news-title {
+  font-size: 1.5rem; /* text-2xl */
+  font-weight: 700; /* font-bold */
+  color: var(--foreground);
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .news-title {
+    font-size: 1.875rem; /* md:text-3xl */
+  }
+}
+
+.news-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  font-weight: 500; /* font-medium */
+  color: var(--accent);
+  text-decoration: none;
+}
+.news-link:hover {
+  text-decoration: underline;
+}
+.news-link svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Grid Layout */
+.news-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem; /* gap-6 */
+}
+@media (min-width: 768px) {
+  .news-grid {
+    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
+  }
+}
+@media (min-width: 1024px) {
+  .news-grid {
+    gap: 2rem; /* lg:gap-8 */
+  }
+}
+
+/* News Card */
+.news-card {
+  display: flex;
+  flex-direction: column; /* flex-col on mobile */
+  gap: 1rem; /* gap-4 */
+  background-color: var(--card);
+  border-radius: 0.75rem; /* rounded-xl */
+  border: 1px solid var(--border);
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow 0.3s ease;
+}
+@media (min-width: 640px) {
+  .news-card {
+    flex-direction: row; /* sm:flex-row */
+  }
+}
+.news-card:hover {
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1); /* hover:shadow-lg */
+}
+
+/* Card Image Area */
+.news-img-wrapper {
+  flex-shrink: 0;
+  overflow: hidden;
+  /* Mobile: 16:9 aspect ratio, full width */
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+@media (min-width: 640px) {
+  .news-img-wrapper {
+    /* sm breakpoint: fixed width, 1:1 aspect ratio */
+    width: 12rem; /* sm:w-48 */
+    aspect-ratio: 1 / 1;
+  }
+}
+@media (min-width: 1024px) {
+  .news-img-wrapper {
+    width: 16rem; /* lg:w-64 */
+  }
+}
+
+.news-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+.news-card:hover .news-img {
+  transform: scale(1.05); /* group-hover:scale-105 */
+}
+
+/* Card Content Area */
+.news-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1rem; /* p-4 */
+}
+@media (min-width: 640px) {
+  .news-content {
+    padding: 1.25rem; /* sm:p-5 */
+  }
+}
+
+.news-date {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem; /* gap-2 */
+  font-size: 0.875rem; /* text-sm */
+  color: var(--muted-foreground);
+  margin-bottom: 0.5rem; /* mb-2 */
+}
+.news-date svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.news-card-title {
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 600; /* font-semibold */
+  color: var(--foreground);
+  margin: 0 0 0.5rem 0; /* mb-2 */
+  line-height: 1.3;
+  transition: color 0.2s ease;
+}
+.news-card:hover .news-card-title {
+  color: var(--accent); /* group-hover:text-accent */
+}
+
+.news-excerpt {
+  font-size: 0.875rem; /* text-sm */
+  color: var(--muted-foreground);
+  margin: 0;
+  line-height: 1.5;
+  /* line-clamp-2 */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
@@ -0,0 +1,57 @@
+<section class="news-section">
+  <div class="container">
+    
+    <!-- Section Header -->
+    <div class="news-header">
+      <h2 class="news-title">
+        {{#if sectionTitle}}{{sectionTitle}}{{else}}Aktuality{{/if}}
+      </h2>
+      {{#if moreLink}}
+        <a href="{{moreLink}}" class="news-link">
+          Více aktualit 
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14"></path>
+            <path d="m12 5 7 7-7 7"></path>
+          </svg>
+        </a>
+      {{/if}}
+    </div>
+
+    <!-- Articles Grid -->
+    <div class="news-grid">
+      {{#each articles}}
+        <a href="{{this.link}}" class="news-card">
+          <div class="news-img-wrapper">
+            {{#if this.imageSrc}}
+              <img 
+                src="{{this.imageSrc}}" 
+                alt="{{this.imageAlt}}" 
+                class="news-img" 
+                loading="lazy" 
+              />
+            {{/if}}
+          </div>
+          
+          <div class="news-content">
+            <div class="news-date">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
+                <line x1="16" x2="16" y1="2" y2="6"></line>
+                <line x1="8" x2="8" y1="2" y2="6"></line>
+                <line x1="3" x2="21" y1="10" y2="10"></line>
+              </svg>
+              <span>{{this.date}}</span>
+            </div>
+            
+            <h3 class="news-card-title">{{this.title}}</h3>
+            
+            {{#if this.annotation}}
+              <p class="news-excerpt">{{this.annotation}}</p>
+            {{/if}}
+          </div>
+        </a>
+      {{/each}}
+    </div>
+
+  </div>
+</section>
				`@@ -0,0 +1 @@`
				`main#main #AjaxMainSection .section_guidepost_before`