SOFT-7130

assets/css/globals.css

@@ -1,6 +1,6 @@
 main {
   font-size: 18px;
-  line-height: 24px;
+  line-height: 1.5;
   font-family: 'Plumb', sans-serif;
   color: var(--text-color);
   margin: 0 auto;
@@ -9,12 +9,18 @@ main {
 }
 
 main p {
-  margin: 1.3em 0;
+  margin: 0.6em 0;
+}
+
+main ul,
+main ol {
+  padding-left: 1.2em;
 }
 
 main a {
   color: var(--link-color);
   text-decoration: none;
+  transition: color 0.15s ease;
 }
 
 main a:hover {

assets/css/variables.css

@@ -1,5 +1,7 @@
 :root {
-  --text-color: #7a7a7a;
+  --text-color: #4b5563;
+  --text-secondary-color: #6b7280;
+  --heading-color: #111827;
   --border-color: #dcdcdc;
   --border-color-hover: #94a3b8;
   --gray-color: #f7f7f7;
@@ -8,6 +10,9 @@
   --primary-color: #5cb300;
   --primary-color-hover: #4d9900;
   --danger-color: #f0001c;
+  --card-border-color: #e5e7eb;
+  --card-shadow: 0 1px 2px rgba(0,0,0,0.04);
+  --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.1);
 
   --input-shadow: 0px 0px #0000, 0px 0px #0000, 0px 1px 2px 0px rgba(18,18,23,0.05);
   --app-bar-height: 80px;

components/Article.vue

@@ -29,52 +29,58 @@ const to = props.url || `${route.path}${route.path.at(-1) === '/' ? '' : '/'}${p
 <style scoped>
 .article {
   text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid var(--card-border-color);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: var(--card-shadow);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
 
   @media (min-width: 460px) and (max-width: 940px) {
-    display: flex;
-    gap: 12px;
+    flex-direction: row;
   }
 }
 
+.article:hover {
+  box-shadow: var(--card-shadow-hover);
+  transform: translateY(-2px);
+}
+
 .article:hover .article-title {
   color: var(--link-color);
 }
 
 .article-cover {
   width: 100%;
-  height: 100%;
-  max-height: 200px;
-  border-radius: 12px;
-  text-decoration: none;
+  aspect-ratio: 16 / 10;
   object-fit: cover;
-  border: 1px solid var(--gray-color);
-  min-height: 125px;
+  display: block;
   flex-shrink: 0;
 
-  @media (min-width: 940px) and (max-width: 1940px) {
-    max-height: 180px;
-  }
-
-  @media (min-width: 400px) and (max-width: 940px) {
-    width: 100%;
+  @media (min-width: 460px) and (max-width: 940px) {
+    width: 220px;
     max-width: 220px;
-    max-height: 180px;
+    aspect-ratio: auto;
+    min-height: 100%;
   }
+}
 
-  @media (max-width: 460px) {
-    width: 100%;
-    height: 160px;
-  }
+.article > div {
+  padding: 16px;
 }
 
 .article-title {
-  margin: 6px 0 12px;
+  margin: 0 0 8px;
   font-weight: bold;
-  color: var(--text-color);
+  color: var(--heading-color);
+  line-height: 1.35;
+  transition: color 0.15s ease;
 }
 
 .article-date {
-  font-size: 16px;
-  color: var(--text-color);
+  font-size: 14px;
+  color: var(--text-secondary-color);
 }
 </style>

components/CategoryFilter.vue

@@ -47,7 +47,10 @@ watch(() => filter.value, () => {
 .categoryFilter {
   position: sticky;
   top: 16px;
-  min-width: 310px;
+  min-width: 280px;
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  padding: 20px;
 }
 
 .categoryFilter-content {
@@ -56,25 +59,27 @@ watch(() => filter.value, () => {
 
 .categoryFilter ul {
   margin: 0;
-  padding-left: 24px;
-  color: var(--link-color);
+  padding-left: 20px;
+  color: var(--text-color);
 }
 
 .categoryFilter li::marker {
   color: var(--text-color);
 }
 
 .categoryFilter ul ul {
-  padding-left: 22px;
+  padding-left: 18px;
 }
 
 .categoryFilter ul li div {
   width: fit-content;
+  transition: color 0.15s ease;
 }
 
 .categoryFilter ul li div:hover {
   cursor: pointer;
-  text-decoration: underline;
+  color: var(--link-color);
+  text-decoration: none;
 }
 
 .categoryFilter-date {

components/content/Photo.vue

@@ -89,7 +89,7 @@ const computedFigureStyle = computed(() => {
 .photo {
   text-align: center;
   font-size: 16px;
-  margin: 12px 0;
+  margin: 24px 0;
   clear: both;
   display: table;
   flex-direction: column;
@@ -100,6 +100,7 @@ const computedFigureStyle = computed(() => {
 
 .photo-fromGallery {
   display: flex;
+  margin-bottom: 6px;
 }
 
 .photo-imageFromGallery {
@@ -135,17 +136,13 @@ const computedFigureStyle = computed(() => {
 }
 
 .photo-withCaption {
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
   background: var(--gray-color);
   border: 1px solid var(--border-color);
-  border-bottom: 0;
-  border-radius: 6px 6px 0 0;
+  border-radius: 8px;
   padding: 6px;
-  height: fit-content;
-}
-
-.photo-fromGallery.photo-withCaption {
-  border-bottom: 1px solid var(--border-color);
-  border-radius: 6px;
 }
 
 .photo-image {
@@ -159,32 +156,22 @@ const computedFigureStyle = computed(() => {
   max-height: 50vh;
 }
 
+img.photo-image,
+.photo-withCaption [data-pc-section="root"],
+.photo-withCaption picture {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
 .photo-imageWithCaption {
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
 }
 
 .photo-imageCaption {
   text-align: left;
   white-space: pre-line;
-  display: table-caption;
-  caption-side: bottom;
-  border: 1px solid var(--border-color);
-  border-top: 0;
-  border-radius: 0 0 6px 6px;
-  background: var(--gray-color);
-  padding: 6px;
-}
-
-.photo-fromGallery .photo-imageCaption {
-  display: initial;
-  padding: 0;
-  border: 0;
-  margin-top: -6px;
-}
-
-.photo:not(.photo-fromGallery) .photo-imageCaption {
-  margin-top: -16px;
+  padding: 4px 6px 0;
+  color: var(--text-secondary-color);
+  font-size: 14px;
 }
 
 [data-pc-section="root"] {
@@ -198,7 +185,7 @@ const computedFigureStyle = computed(() => {
   cursor: pointer;
   background: rgba(0, 0, 0, 0.4);
   outline: none;
-  border-radius: 6px;
+  border-radius: 8px;
 }
 
 [data-pc-section="previewmask"] {

components/content/ProseTable.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="table-wrapper">
+    <table>
+      <slot />
+    </table>
+  </div>
+</template>
+
+<style>
+.table-wrapper {
+  overflow: hidden;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin: 1em 0;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+</style>

components/content/RelatedMaterials.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+defineProps<{ hideTitle?: boolean }>();
+const { t } = useI18n();
+const { locale } = useI18n();
+</script>
+
+<template>
+  <div class="related-materials">
+    <div class="related-materials-title">{{ t('title') }}</div>
+    <div class="related-materials-content">
+      <ContentSlot :use="$slots.default" />
+    </div>
+    <div class="related-materials-more">
+      <div v-if="!hideTitle" class="related-materials-subtitle">{{ t('more') }}</div>
+      <ul>
+        <li><NuxtLink :to="`/${locale}/contents/solutions/`">{{ t('solutions') }}</NuxtLink></li>
+        <li><NuxtLink :to="`/${locale}/contents/articles`">{{ t('articles') }}</NuxtLink></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<i18n>
+{
+  "ru": {
+    "title": "Дополнительные материалы",
+    "more": "Прочее",
+    "solutions": "Примеры других внедрений",
+    "articles": "Статьи о подборе оборудования и рассказы пользователей"
+  },
+  "en": {
+    "title": "Additional Materials",
+    "more": "More",
+    "solutions": "More case studies",
+    "articles": "Articles about equipment and user stories"
+  }
+}
+</i18n>
+
+<style>
+.related-materials {
+  margin-top: 36px;
+  padding: 16px;
+  background: var(--gray-color);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+
+.related-materials-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--heading-color);
+  margin-bottom: 12px;
+}
+
+.related-materials-content ul,
+.related-materials-more ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.related-materials-content li,
+.related-materials-more li {
+  padding: 0;
+}
+
+.related-materials-content li a,
+.related-materials-more li a {
+  color: var(--link-color);
+  text-decoration: none;
+  font-size: 16px;
+  transition: opacity 0.15s;
+}
+
+.related-materials-content li a:hover,
+.related-materials-more li a:hover {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+
+.related-materials-content p {
+  display: none;
+}
+
+.related-materials-content + .related-materials-more {
+  margin-top: 14px;
+}
+
+.related-materials-subtitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary-color);
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+</style>

content/en/solutions/a787a_ostriches.md

@@ -5,7 +5,9 @@ date: 2025-03-31
 category: agriculture_automation
 ---
 
-_«The Wiren Board controller turned into a true Swiss Army knife on the farm. It now runs everything — from incubators and brooders to lighting, ventilation, and energy monitoring. All automation logic runs on a single platform: flexible, intuitive, and reliable.», **Maxim Fedrak, founder of a787a**_
+> "The Wiren Board controller turned into a true Swiss Army knife on the farm. It now runs everything — from incubators and brooders to lighting, ventilation, and energy monitoring. All automation logic runs on a single platform: flexible, intuitive, and reliable."
+>
+> **Maxim Fedrak, founder of a787a**
 
 ## About the Company