add styles rfo
This commit is contained in:
@@ -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"]
|
||||
@@ -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"]
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
--adv-gray: #2f2f2f;
|
||||
--placeholder-gray: #3a3a3a;
|
||||
--bg: #f7f8f3;
|
||||
--second-family: "Unbounded", sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
@@ -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';
|
||||
|
||||
59
frontend/src/styles/components/featured.css
Normal file
59
frontend/src/styles/components/featured.css
Normal file
@@ -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;
|
||||
}
|
||||
62
frontend/src/styles/rfo/featured.css
Normal file
62
frontend/src/styles/rfo/featured.css
Normal file
@@ -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;
|
||||
}
|
||||
126
frontend/src/styles/rfo/rfo.css
Normal file
126
frontend/src/styles/rfo/rfo.css
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
42
frontend/src/styles/rfo/search-rfo.css
Normal file
42
frontend/src/styles/rfo/search-rfo.css
Normal file
@@ -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 при наведении */
|
||||
}
|
||||
13
frontend/src/styles/rfo/social.css
Normal file
13
frontend/src/styles/rfo/social.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -1,61 +1,26 @@
|
||||
import { resolve } from 'path';
|
||||
import handlebars from 'vite-plugin-handlebars';
|
||||
import { defineConfig } from 'vite'
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
|
||||
export default {
|
||||
esbuild: {
|
||||
supported: {
|
||||
'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]`,
|
||||
},
|
||||
},
|
||||
},
|
||||
export default defineConfig({
|
||||
root: 'src',
|
||||
base: '/',
|
||||
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
|
||||
overlay: true,
|
||||
protocol: 'wss', // ⚠️ для HTTPS нужен wss
|
||||
host: '194.87.253.43',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user