новости + переработка текстов
This commit is contained in:
@@ -1110,6 +1110,10 @@ section {
|
||||
border-color: var(--panel-border-strong);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.news-card:focus-visible {
|
||||
outline: 2px solid var(--moon);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
.news-card.featured {
|
||||
grid-row: span 2;
|
||||
padding: 40px;
|
||||
@@ -1180,12 +1184,357 @@ section {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.news-all-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
padding: 11px 16px;
|
||||
border: 1px solid var(--panel-border-strong);
|
||||
border-radius: var(--radius);
|
||||
font-family: var(--f-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--moon);
|
||||
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
|
||||
}
|
||||
|
||||
.news-all-link:hover {
|
||||
border-color: var(--moon);
|
||||
color: var(--ivory);
|
||||
background: rgba(127, 184, 212, 0.06);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.news-grid { grid-template-columns: 1fr; }
|
||||
.news-card.featured { grid-row: auto; padding: 28px; }
|
||||
.news-card.featured .news-title { font-size: 24px; }
|
||||
}
|
||||
|
||||
/* ------------------------- public news index ------------------------- */
|
||||
.portal-news-index {
|
||||
padding-top: clamp(64px, 8vw, 110px);
|
||||
padding-bottom: clamp(80px, 10vw, 140px);
|
||||
}
|
||||
|
||||
.portal-news-index__hero {
|
||||
max-width: 830px;
|
||||
margin-bottom: clamp(44px, 6vw, 74px);
|
||||
}
|
||||
|
||||
.portal-news-index__hero h1 {
|
||||
margin: 20px 0 22px;
|
||||
font-size: clamp(44px, 7vw, 86px);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.portal-news-index__hero .lead {
|
||||
max-width: 720px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.portal-news-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.portal-news-list__card {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 470px;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
radial-gradient(ellipse at 80% -10%, rgba(91, 58, 138, 0.15), transparent 50%),
|
||||
linear-gradient(180deg, rgba(16, 20, 42, 0.66), rgba(10, 13, 31, 0.42));
|
||||
transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
|
||||
}
|
||||
|
||||
.portal-news-list__card:hover {
|
||||
border-color: var(--panel-border-strong);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.portal-news-list__card:focus-visible {
|
||||
outline: 2px solid var(--moon);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.portal-news-list__cover {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.portal-news-list__cover.empty {
|
||||
background:
|
||||
radial-gradient(circle at 50% 50%, rgba(127, 184, 212, 0.12), transparent 38%),
|
||||
repeating-linear-gradient(45deg, transparent 0 16px, rgba(127, 184, 212, 0.025) 16px 17px);
|
||||
}
|
||||
|
||||
.portal-news-list__cover.empty span {
|
||||
font-family: var(--f-display);
|
||||
font-size: 34px;
|
||||
color: var(--moon);
|
||||
filter: drop-shadow(0 0 18px rgba(127, 184, 212, 0.42));
|
||||
}
|
||||
|
||||
.portal-news-list__content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
padding: 26px;
|
||||
}
|
||||
|
||||
.portal-news-list__content h2 {
|
||||
font-size: clamp(22px, 2.2vw, 30px);
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.portal-news-list__content > p {
|
||||
margin: 0;
|
||||
font-family: var(--f-serif);
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.portal-news-index__empty {
|
||||
padding: clamp(60px, 10vw, 110px) 30px;
|
||||
border: 1px dashed var(--panel-border-strong);
|
||||
border-radius: var(--radius-lg);
|
||||
text-align: center;
|
||||
background: rgba(127, 184, 212, 0.025);
|
||||
}
|
||||
|
||||
.portal-news-index__empty > span {
|
||||
display: block;
|
||||
margin-bottom: 18px;
|
||||
font-size: 32px;
|
||||
color: var(--moon);
|
||||
}
|
||||
|
||||
.portal-news-index__empty h2 { font-size: clamp(28px, 4vw, 42px); }
|
||||
.portal-news-index__empty p {
|
||||
margin: 14px 0 28px;
|
||||
font-family: var(--f-serif);
|
||||
font-size: 19px;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.portal-pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 52px;
|
||||
}
|
||||
|
||||
.portal-pagination a,
|
||||
.portal-pagination span {
|
||||
display: grid;
|
||||
min-width: 42px;
|
||||
height: 42px;
|
||||
padding: 0 13px;
|
||||
place-items: center;
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: var(--radius);
|
||||
font-family: var(--f-mono);
|
||||
font-size: 10px;
|
||||
color: var(--text-mute);
|
||||
}
|
||||
|
||||
.portal-pagination a {
|
||||
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
|
||||
}
|
||||
|
||||
.portal-pagination a:hover,
|
||||
.portal-pagination a.active {
|
||||
border-color: var(--moon);
|
||||
color: var(--ivory);
|
||||
background: rgba(127, 184, 212, 0.08);
|
||||
}
|
||||
|
||||
.portal-pagination .disabled { opacity: 0.36; }
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.portal-news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.portal-news-list { grid-template-columns: 1fr; }
|
||||
.portal-news-list__card { min-height: auto; }
|
||||
.portal-news-list__content { padding: 22px; }
|
||||
.portal-pagination a:first-of-type,
|
||||
.portal-pagination a:last-of-type,
|
||||
.portal-pagination span:first-child,
|
||||
.portal-pagination span:last-child { min-width: 74px; }
|
||||
}
|
||||
|
||||
/* ------------------------- public news article ------------------------- */
|
||||
.portal-news-page {
|
||||
max-width: 1040px;
|
||||
padding-top: clamp(54px, 8vw, 110px);
|
||||
padding-bottom: clamp(68px, 9vw, 120px);
|
||||
}
|
||||
|
||||
.portal-news-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: clamp(38px, 6vw, 70px);
|
||||
font-family: var(--f-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-mute);
|
||||
transition: color var(--t-fast);
|
||||
}
|
||||
|
||||
.portal-news-back:hover { color: var(--moon); }
|
||||
|
||||
.portal-news-hero {
|
||||
max-width: 880px;
|
||||
}
|
||||
|
||||
.portal-news-hero h1 {
|
||||
margin: 24px 0;
|
||||
font-size: clamp(42px, 7vw, 82px);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.portal-news-hero .lead {
|
||||
max-width: 760px;
|
||||
margin: 0;
|
||||
font-size: clamp(20px, 2vw, 26px);
|
||||
}
|
||||
|
||||
.portal-news-cover {
|
||||
width: 100%;
|
||||
max-height: 620px;
|
||||
margin: clamp(42px, 6vw, 72px) 0;
|
||||
border: 1px solid var(--panel-border-strong);
|
||||
border-radius: var(--radius-lg);
|
||||
object-fit: cover;
|
||||
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
.portal-news-body {
|
||||
max-width: 780px;
|
||||
margin: clamp(44px, 6vw, 76px) auto 0;
|
||||
}
|
||||
|
||||
.portal-news-body p {
|
||||
margin: 0 0 1.45em;
|
||||
white-space: pre-line;
|
||||
font-family: var(--f-serif);
|
||||
font-size: clamp(20px, 2.1vw, 25px);
|
||||
line-height: 1.72;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.portal-news-body p:first-child::first-letter {
|
||||
float: left;
|
||||
margin: 0.08em 0.12em 0 0;
|
||||
font-family: var(--f-display);
|
||||
font-size: 3.2em;
|
||||
line-height: 0.78;
|
||||
color: var(--moon);
|
||||
}
|
||||
|
||||
.portal-news-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
max-width: 780px;
|
||||
margin: 56px auto 0;
|
||||
padding-top: 28px;
|
||||
border-top: 1px solid var(--panel-border);
|
||||
font-family: var(--f-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--moon);
|
||||
}
|
||||
|
||||
.portal-news-end a { transition: color var(--t-fast); }
|
||||
.portal-news-end a:hover { color: var(--ivory); }
|
||||
|
||||
.portal-news-more {
|
||||
padding-bottom: clamp(80px, 10vw, 140px);
|
||||
}
|
||||
|
||||
.portal-news-more__head {
|
||||
padding-top: 50px;
|
||||
border-top: 1px solid var(--panel-border);
|
||||
}
|
||||
|
||||
.portal-news-more__head h2 {
|
||||
margin: 16px 0 34px;
|
||||
font-size: clamp(32px, 4vw, 50px);
|
||||
}
|
||||
|
||||
.portal-news-more__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.portal-news-more__card {
|
||||
display: flex;
|
||||
min-height: 280px;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 24px;
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(180deg, rgba(16, 20, 42, 0.58), rgba(10, 13, 31, 0.36));
|
||||
transition: border-color var(--t-fast), transform var(--t-fast);
|
||||
}
|
||||
|
||||
.portal-news-more__card:hover {
|
||||
border-color: var(--panel-border-strong);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.portal-news-more__card img {
|
||||
width: calc(100% + 48px);
|
||||
height: 150px;
|
||||
margin: -24px -24px 6px;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.portal-news-more__card h3 {
|
||||
font-size: 23px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.portal-news-more__card > p {
|
||||
margin: 0;
|
||||
font-family: var(--f-serif);
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.portal-news-more__grid { grid-template-columns: 1fr; }
|
||||
.portal-news-more__card { min-height: auto; }
|
||||
.portal-news-body p { font-size: 20px; }
|
||||
}
|
||||
|
||||
/* ------------------------- footer ------------------------- */
|
||||
.footer {
|
||||
padding: clamp(80px, 10vw, 140px) 0 48px;
|
||||
|
||||
Reference in New Issue
Block a user