add styles rfo

category-rfo.php

@@ -0,0 +1,24 @@
+<?php get_header( 'rfo' ); ?>
+<div class="content-middle articles-wrapper">
+    <?php get_template_part('partials/rubrics-mobile'); ?>
+    <div class="section-title desktop">
+        <?php if (is_category()) : ?>
+            <h1 class="section-title__title"><?= get_queried_object()->name ?></h1>
+        <?php endif; ?>
+    </div>
+    <div class="articles-preview">
+        <?php
+        $paged = (get_query_var('paged')) ? absint(get_query_var('paged')) : 1;
+        $args = array(
+            'post_type' => 'post',
+            'posts_per_page' => 13,
+            'paged' => $paged,
+            'category__in' => get_queried_object_id()
+        );
+        $query = new WP_Query($args);
+        ?>
+        <?php get_template_part('partials/post-list', null, ['query' => $query]);  ?>
+    </div>
+    <?php custom_pagination(); ?>
+</div>
+<?php get_footer( 'rfo' ); ?>

footer-rfo.php

@@ -1,12 +1,4 @@
-<?php if (!is_404() && !is_500()) : ?>
+
-<? if (!is_page('search') && !is_search()) : ?>
-    <div class="content-right">
-        <?php get_sidebar('right'); ?>
-    </div>
-<? endif; ?>
-</div>
-</div>
-<? endif; ?>
 </main>
 <footer itemscope itemtype="https://schema.org/WPFooter" class="footer">
     <meta itemprop="copyrightYear" content="<?=date('Y');?>">

frontend/Dockerfile

@@ -21,7 +21,10 @@ COPY package.json package.json
 COPY postcss.config.cjs postcss.config.cjs
 COPY vite.config.js vite.config.js
 
+COPY ./certs /certs
+
 # Определяем команду, которая будет выполняться при каждом запуске контейнера
 #CMD npm run build && chown -R 1000:1000 ./dist
 
-CMD ["npm", "run", "build"]
+#CMD ["npm", "run", "build"]
+ENTRYPOINT ["npm", "run"]

frontend/docker-compose.yml

@@ -1,10 +1,35 @@
 version: '3'
 services:
-  app:
+
-    build: .
+  mkcert:
+    build:
+      context: ./mkcert
+      dockerfile: Dockerfile
+    environment:
+      CERT_IP: 194.87.253.43  # Заменить на нужный IP
+    volumes:
+      - ./certs:/certs       # Важно: volume монтируем относительно docker-compose.yml
+  dev:
+    #build: .
+    image: agro_front
     volumes:
       - ./dist:/app/dist
       - ./src:/app/src
       - ./public:/app/public
+    command: ["dev"]  
+    environment:
+      - NODE_ENV=development   
     ports:
       - 5173:5173
+    container_name: agro_front
+
+  build:
+    #build: .
+    image: agro_front
+    volumes:
+      - ./dist:/app/dist
+      - ./src:/app/src
+      - ./public:/app/public
+    environment:
+      - NODE_ENV=production  
+    command: ["build"]     

frontend/src/global.css

@@ -7,6 +7,7 @@
   --adv-gray: #2f2f2f;
   --placeholder-gray: #3a3a3a;
   --bg: #f7f8f3;
+  --second-family: "Unbounded", sans-serif;
 }
 
 html {

frontend/src/main.js

@@ -8,6 +8,8 @@ import './styles/layout/header/header.css';
 import './styles/layout/container.css';
 import './styles/layout/footer.css';
 
+
+
 import './styles/components/advert-item.css';
 import './styles/components/article-item.css';
 import './styles/components/article-single.css';
@@ -20,6 +22,13 @@ import './styles/components/suggestion-item.css';
 import './styles/components/agro-informer.css';
 import './styles/components/cookie-consent.css';
 
+
+// rfo
+import './styles/rfo/rfo.css';
+import './styles/rfo/search-rfo.css';
+import './styles/rfo/featured.css';
+import './styles/rfo/social.css';
+
 import './scripts/calendar.js';
 import './scripts/menu-vertical.js';
 import './scripts/modal.js';

frontend/src/styles/components/featured.css

@@ -0,0 +1,59 @@
+.featured-post {
+    position: relative;
+    width: 100%;
+    max-width: 1200px; /* Ограничиваем максимальную ширину */
+    margin: 0 auto; /* Центрируем */
+    overflow: visible;
+    background: white;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 641"><path fill="black" d="M8.79432 0L1191.2 0.000208277C1196.04 0.000209123 1200 3.94998 1200 8.77804L1200 632.222C1200 637.05 1196.04 641 1191.2 641L888.707 641C882.54 641 881.385 637.144 878.499 632.222L872.392 621.805C870.382 618.378 866.127 615.509 862.559 615.131L8.79431 615.13C3.95669 615.13 0 611.181 0 606.352L0 8.77759C0 3.94952 3.95671 0 8.79432 0Z"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 641"><path fill="black" d="M8.79432 0L1191.2 0.000208277C1196.04 0.000209123 1200 3.94998 1200 8.77804L1200 632.222C1200 637.05 1196.04 641 1191.2 641L888.707 641C882.54 641 881.385 637.144 878.499 632.222L872.392 621.805C870.382 618.378 866.127 615.509 862.559 615.131L8.79431 615.13C3.95669 615.13 0 611.181 0 606.352L0 8.77759C0 3.94952 3.95671 0 8.79432 0Z"/></svg>');
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    padding-bottom: 53.42%; /* Сохраняем пропорции 641/1200 */
+}
+
+.featured-image-wrapper {
+    position: absolute;
+    top: 6px; /* Отступ сверху */
+    left: 6px; /* Отступ слева */
+    right: 6px; /* Отступ справа */
+    bottom: 33px; /* Оставляем место внизу для photo-credit-tag */
+    overflow: hidden;
+}
+
+.featured-image {
+    border-radius: 14px;
+}    
+
+.featured-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Заполняем область с сохранением пропорций */
+    display: block;
+    opacity: 0.9;
+    transition: opacity 0.3s ease;
+    filter: brightness(0.85);
+}
+
+.post-overlay {
+    position: absolute;
+    bottom: 40px; /* Учитываем место для photo-credit-tag */
+    left: 20px;
+    right: 20px;
+    padding: 30px 20px 20px;
+    color: white;
+    z-index: 2;
+}
+
+/* Ярлык автора */
+.photo-credit-tag {
+    position: absolute;
+    bottom: 0; /* Прижимаем к нижней границе маски */
+    right: 20px; /* Отступ справа */
+    background: white;
+    padding: 6px 20px 6px 16px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #333;
+    z-index: 3;
+}

frontend/src/styles/rfo/featured.css

@@ -0,0 +1,62 @@
+.featured-post {
+    position: relative;
+    width: 100%;
+    max-width: 1200px; /* Ограничиваем максимальную ширину */
+    margin: 0 auto; /* Центрируем */
+    overflow: visible;
+    background: white;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 641"><path fill="black" d="M8.79432 0L1191.2 0.000208277C1196.04 0.000209123 1200 3.94998 1200 8.77804L1200 632.222C1200 637.05 1196.04 641 1191.2 641L888.707 641C882.54 641 881.385 637.144 878.499 632.222L872.392 621.805C870.382 618.378 866.127 615.509 862.559 615.131L8.79431 615.13C3.95669 615.13 0 611.181 0 606.352L0 8.77759C0 3.94952 3.95671 0 8.79432 0Z"/></svg>');
+    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 641"><path fill="black" d="M8.79432 0L1191.2 0.000208277C1196.04 0.000209123 1200 3.94998 1200 8.77804L1200 632.222C1200 637.05 1196.04 641 1191.2 641L888.707 641C882.54 641 881.385 637.144 878.499 632.222L872.392 621.805C870.382 618.378 866.127 615.509 862.559 615.131L8.79431 615.13C3.95669 615.13 0 611.181 0 606.352L0 8.77759C0 3.94952 3.95671 0 8.79432 0Z"/></svg>');
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    padding-bottom: 53.42%; /* Сохраняем пропорции 641/1200 */
+}
+
+.featured-image-wrapper {
+    position: absolute;
+    top: 6px; /* Отступ сверху */
+    left: 6px; /* Отступ слева */
+    right: 6px; /* Отступ справа */
+    bottom: 33px; /* Оставляем место внизу для photo-credit-tag */
+    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
+    overflow: hidden;
+}
+
+.featured-image {
+    border-radius: 14px;
+}    
+
+.featured-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Заполняем область с сохранением пропорций */
+    display: block;
+    opacity: 0.9;
+    transition: opacity 0.3s ease;
+    filter: brightness(0.85);
+}
+
+.post-overlay {
+    position: absolute;
+    bottom: 40px; /* Учитываем место для photo-credit-tag */
+    left: 20px;
+    right: 20px;
+    padding: 30px 20px 20px;
+    color: white;
+    z-index: 2;
+}
+
+/* Ярлык автора */
+.photo-credit-tag {
+    position: absolute;
+    bottom: 0; /* Прижимаем к нижней границе маски */
+    right: 20px; /* Отступ справа */
+    width:300px;
+    text-align: center;
+    background: white;
+    padding: 6px 20px 6px 16px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #333;
+    z-index: 3;
+}

frontend/src/styles/rfo/rfo.css

@@ -0,0 +1,126 @@
+.header-rfo {
+  width: 100%;
+  height: 400px;
+  background-image: url('https://agroexpert.press/wp-content/themes/agroexpert/frontend/img/rfo-background.png');
+  background-size: cover; /* Заполняет весь блок, обрезая края */
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.header__inner_rfo{
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  padding-bottom: 22px;
+}
+
+.header-rfo-line{
+    display: flex;
+    align-items: center;
+    gap: 30%;
+}
+
+.header-rfo-logoline{
+  display: flex;
+  align-items: center;
+  gap: 4rem;
+  font-weight: 700;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  margin: 0 15px;
+}
+
+
+
+.header-rfo-menuline{
+  display: flex;
+  align-items: center;
+  gap: 8rem;
+  font-weight: 700;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  margin: 0 15px;
+}
+
+  .header-rfo-menuline li{
+    font-weight: 700;
+  }  
+
+.content-rfo{
+    margin-top: -152px;
+    width: 1200px;
+    max-width: 1200px;
+  }
+
+.rfo__rubric{
+  font-family: var(--second-family);
+  font-weight: 700;
+  font-size: 2.4rem;
+  line-height: 150%;
+  text-transform: uppercase;
+  color: #000;
+  margin-bottom: 22px;
+}  
+
+
+.rfo-single__image{
+  display: inline-block;
+  border-radius: 12px;       
+  overflow: hidden; 
+  width: 100%;
+}           
+
+.rfo-single__image IMG{
+  border: 8px solid white; /* голубая рамка */
+  border-radius: 22px; 
+  width: 98%;
+}
+
+.tag {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      background-color: #f0f0f0; /* светлый фон */
+      color: #333;
+      font-size: 12px;
+      padding: 4px 10px;
+      border-top-left-radius: 10px;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
+    }
+
+.article-single--rfo {
+  display: flex;
+  margin: 22px 0 42px 0;
+}   
+
+.article-single--rfo p {
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  margin-bottom: 2.5rem;
+}  
+
+.article-info--rfo{
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 0 0 180px;
+  padding: 0 18px 0 0;
+}
+
+.article-info-element--rfo{
+  display: flex;
+  border-bottom: 1px solid var(--gray);
+  gap: 4px;
+  padding: 0 12px 12px 0;
+}  
+
+.article-text--rfo{
+
+  flex: 1;
+}
+                

frontend/src/styles/rfo/search-rfo.css

@@ -0,0 +1,42 @@
+.search-form-rfo {
+    max-width: 400px;
+  }
+  .search-container-rfo {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 40px;
+    width: 535px;
+  }
+  .search-container-rfo input {
+    width: 100%;
+    height: 15px;
+    padding: 10px 0px 10px 15px; /* Правое поле больше для иконки */
+    border: 1px solid #ddd;
+   border-radius: 50px; 
+    font-size: 16px;
+    outline: none;
+    transition: border 0.3s;
+  }
+  .search-container-rfo input:focus {
+    border-color: #0073aa; /* Цвет WordPress */
+  }
+
+  
+
+  .search-icon-rfo {
+    position: absolute;
+    right: 1px;
+    top: 55%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+  }
+  .search-icon-rfo svg {
+    transition: fill 0.3s;
+  }
+  .search-icon-rfo:hover svg {
+    fill: #0073aa; /* Цвет WordPress при наведении */
+  }

frontend/src/styles/rfo/social.css

@@ -0,0 +1,13 @@
+.social-post--rfo{
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    border-left: 4px solid black;
+    margin: 8px 0;
+    padding-left: 24px;
+}
+
+.social-post-icons--rfo {
+    display: flex;
+    gap: 2rem;
+}

frontend/vite.config.js

@@ -1,61 +1,26 @@
-import { resolve } from 'path';
+import { defineConfig } from 'vite'
-import handlebars from 'vite-plugin-handlebars';
+import fs from 'fs'
+import path from 'path'
 
-export default {
+export default defineConfig({
-  esbuild: {
+  root: 'src',
-    supported: {
+  base: '/',
-      'top-level-await': true, //browsers can handle top-level-await features
-    },
-  },
-  base: './',
-  plugins: [
-    handlebars({
-      partialDirectory: resolve(__dirname, 'src', 'partials'),
-    }),
-  ],
-  build: {
-    minify: false,
-    rollupOptions: {
-      input: {
-        main: resolve(__dirname, 'src', 'pages', 'index.html'),
-        materials: resolve(__dirname, 'src', 'pages', 'materials.html'),
-        materialsSingle: resolve(
-          __dirname,
-          'src',
-          'pages',
-          'materials-single.html'
-        ),
-        events: resolve(__dirname, 'src', 'pages', 'events.html'),
-        eventSingle: resolve(__dirname, 'src', 'pages', 'event-single.html'),
-        notFound: resolve(__dirname, 'src', 'pages', '404.html'),
-        advertiser: resolve(__dirname, 'src', 'pages', 'advertiser.html'),
-        subscription: resolve(__dirname, 'src', 'pages', 'subscription.html'),
-        interviews: resolve(__dirname, 'src', 'pages', 'interviews.html'),
-        about: resolve(__dirname, 'src', 'pages', 'about.html'),
-        partners: resolve(__dirname, 'src', 'pages', 'partners.html'),
-        pages: resolve(__dirname, 'src', 'pages', 'pages.html'),
-        contacts: resolve(__dirname, 'src', 'pages', 'contacts.html'),
-        partnersSingle: resolve(
-          __dirname,
-          'src',
-          'pages',
-          'partners-single.html'
-        ),
-        search: resolve(__dirname, 'src', 'pages', 'search.html'),
-      },
-      output: {
-        entryFileNames: `assets/[name].js`,
-        chunkFileNames: `assets/[name].js`,
-        assetFileNames: `assets/[name].[ext]`,
-      },
-    },
-  },
   server: {
-    open: '/src/pages/pages.html',
+    host: '0.0.0.0',
+    port: 5173,
+    strictPort: true,
+    cors: {
+      origin: '*',
+    },
+    https: {
+      key: fs.readFileSync(path.resolve(__dirname, '/certs/dev-key.pem')),
+      cert: fs.readFileSync(path.resolve(__dirname, '/certs/dev.pem')),
+    },
     hmr: {
-      // Включаем горячую перезагрузку (HMR) для CSS
+      protocol: 'wss', // ⚠️ для HTTPS нужен wss
-      overlay: true,
+      host: '194.87.253.43',
     },
   },
+})
+
 
-};

functions.php

@@ -65,23 +65,16 @@ add_action('after_setup_theme', 'theme_setup');
 
 function theme_enqueue_styles_scripts()
 {
-    $style_ver = filemtime(get_template_directory() . '/frontend/dist/assets/main.css');
-    $script_ver = filemtime(get_template_directory() . '/frontend/dist/assets/main2.js');
-
-
-    wp_enqueue_style('main-style', get_template_directory_uri() . '/frontend/dist/assets/main.css', array(), $style_ver);
-    wp_enqueue_script('main-script2', get_template_directory_uri() . '/frontend/dist/assets/main2.js', array(), $script_ver, true);
-
-    // Preconnect for Google Fonts
-    //wp_enqueue_style('google-fonts-preconnect', 'https://fonts.gstatic.com', [], null, 'all');
-    //wp_resource_hints(['https://fonts.googleapis.com', 'https://fonts.gstatic.com'], 'preconnect');
-
     // Enqueue Google Fonts
     wp_enqueue_style('google-fonts-raleway', 'https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600&display=swap', false);
     wp_enqueue_style('google-fonts-roboto', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap', false);
 }
 add_action('wp_enqueue_scripts', 'theme_enqueue_styles_scripts');
 
+require_once 'vite.config.php';
+
+
+
 add_filter('nav_menu_css_class', 'change_menu_item_css_class', 10, 4);
 function change_menu_item_css_class($classes, $item, $args, $depth)
 {

inc/special.php

@@ -11,6 +11,7 @@ add_filter('category_template', function($template) {
         ? get_category($current_category->parent) 
         : $current_category;
 
+
     // Если текущая или родительская рубрика в списке
     if (in_array($parent_category->slug, $target_parent_slugs)) {
         $new_template = locate_template("category-{$parent_category->slug}.php");

partials/menu-rfo.php

@@ -0,0 +1,18 @@
+<?php
+$menu_name = 'rfo-main'; // Название меню в админке
+$menu = wp_get_nav_menu_object($menu_name); // Получаем объект меню
+
+if ($menu) {
+    $menu_items = wp_get_nav_menu_items($menu->term_id); // Получаем элементы меню
+    
+    foreach ($menu_items ?: [] as $menu_item) {
+        ?>
+        <li class="menu-item">
+            <a href="<?= esc_url($menu_item->url); ?>">
+                <?= esc_html($menu_item->title) ?>
+            </a>
+        </li>
+        <?php
+    }
+}
+?>