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,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;
+}