add styles rfo
This commit is contained in:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user