более компактный режим
This commit is contained in:
KBAHTNET
parent
ff56d4c3cd
commit
55ca84388f
@ -67,7 +67,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<div class="control-group view-group">
|
||||
<span>Вид</span>
|
||||
<button class="segmented is-active" type="button" data-view="cards">
|
||||
Карточки
|
||||
@ -75,6 +75,12 @@
|
||||
<button class="segmented" type="button" data-view="list">
|
||||
Список
|
||||
</button>
|
||||
<button class="segmented" type="button" data-view="compact-cards">
|
||||
Компакт карточки
|
||||
</button>
|
||||
<button class="segmented" type="button" data-view="compact-list">
|
||||
Компакт список
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="control-group accent-group">
|
||||
|
||||
@ -58,6 +58,7 @@ const defaultPreferences = {
|
||||
view: "cards",
|
||||
accent: "violet",
|
||||
};
|
||||
const availableViews = ["cards", "list", "compact-cards", "compact-list"];
|
||||
|
||||
const preferences = {
|
||||
...defaultPreferences,
|
||||
@ -129,11 +130,15 @@ accentButtons.forEach((button) => {
|
||||
});
|
||||
|
||||
function applyPreferences(nextPreferences) {
|
||||
if (!availableViews.includes(nextPreferences.view)) {
|
||||
nextPreferences.view = defaultPreferences.view;
|
||||
}
|
||||
|
||||
document.documentElement.dataset.theme = nextPreferences.theme;
|
||||
document.documentElement.dataset.accent = nextPreferences.accent;
|
||||
|
||||
services.classList.toggle("cards-view", nextPreferences.view === "cards");
|
||||
services.classList.toggle("list-view", nextPreferences.view === "list");
|
||||
services.classList.remove("cards-view", "list-view", "compact-cards-view", "compact-list-view");
|
||||
services.classList.add(`${nextPreferences.view}-view`);
|
||||
|
||||
setActiveButton(themeButtons, "theme", nextPreferences.theme);
|
||||
setActiveButton(viewButtons, "view", nextPreferences.view);
|
||||
|
||||
162
styles.css
162
styles.css
@ -101,12 +101,12 @@ a {
|
||||
.shell {
|
||||
width: min(1180px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 48px 0;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: block;
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero-content,
|
||||
@ -119,12 +119,12 @@ a {
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
min-height: 330px;
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: clamp(28px, 5vw, 56px);
|
||||
border-radius: 38px;
|
||||
padding: clamp(22px, 4vw, 42px);
|
||||
border-radius: 30px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
@ -157,9 +157,9 @@ a {
|
||||
|
||||
h1 {
|
||||
max-width: 760px;
|
||||
margin: 14px 0 18px;
|
||||
font-size: clamp(2.8rem, 9vw, 6.8rem);
|
||||
line-height: 0.88;
|
||||
margin: 10px 0 12px;
|
||||
font-size: clamp(2.35rem, 7vw, 5.4rem);
|
||||
line-height: 0.92;
|
||||
letter-spacing: -0.08em;
|
||||
}
|
||||
|
||||
@ -167,8 +167,8 @@ h1 {
|
||||
max-width: 660px;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: clamp(1rem, 2vw, 1.22rem);
|
||||
line-height: 1.7;
|
||||
font-size: clamp(0.96rem, 1.6vw, 1.1rem);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
@ -180,8 +180,8 @@ h1 {
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 18px;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border-radius: 24px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@ -273,9 +273,9 @@ h1 {
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 48px;
|
||||
padding: 8px;
|
||||
gap: 6px;
|
||||
min-height: 42px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
@ -289,6 +289,18 @@ h1 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.view-group {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.view-group span {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view-group .segmented {
|
||||
flex-basis: calc(50% - 3px);
|
||||
}
|
||||
|
||||
.segmented,
|
||||
.accent-swatch {
|
||||
border: 0;
|
||||
@ -298,11 +310,12 @@ h1 {
|
||||
|
||||
.segmented {
|
||||
flex: 1;
|
||||
min-height: 34px;
|
||||
min-height: 32px;
|
||||
min-width: 0;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 0.88rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@ -352,19 +365,19 @@ h1 {
|
||||
.services {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
--tilt-x: 0deg;
|
||||
--tilt-y: 0deg;
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
min-height: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
padding: 24px;
|
||||
border-radius: 30px;
|
||||
gap: 16px;
|
||||
padding: 18px;
|
||||
border-radius: 24px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
transform-origin: center;
|
||||
@ -412,22 +425,22 @@ h1 {
|
||||
}
|
||||
|
||||
.service-card img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.24));
|
||||
}
|
||||
|
||||
.service-card h2 {
|
||||
margin: 7px 0 10px;
|
||||
font-size: 1.45rem;
|
||||
margin: 5px 0 8px;
|
||||
font-size: 1.32rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.service-card p:not(.service-kicker) {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.62;
|
||||
line-height: 1.54;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
@ -475,24 +488,70 @@ h1 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.services.list-view .service-card {
|
||||
min-height: 132px;
|
||||
.services.list-view .service-card,
|
||||
.services.compact-list-view .service-card {
|
||||
min-height: 108px;
|
||||
display: grid;
|
||||
grid-template-columns: 78px minmax(0, 1fr) 52px;
|
||||
grid-template-columns: 62px minmax(0, 1fr) 42px;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.services.list-view .arrow {
|
||||
.services.list-view .arrow,
|
||||
.services.compact-list-view .arrow {
|
||||
position: static;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.services.compact-cards-view {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.services.compact-list-view {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.services.compact-cards-view .service-card {
|
||||
min-height: 150px;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.services.compact-cards-view .service-card img,
|
||||
.services.compact-list-view .service-card img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.services.compact-cards-view .service-card p:not(.service-kicker),
|
||||
.services.compact-list-view .service-card p:not(.service-kicker) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.services.compact-cards-view .service-card h2,
|
||||
.services.compact-list-view .service-card h2 {
|
||||
margin: 3px 0 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.services.compact-cards-view .arrow {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
.services.compact-list-view .service-card {
|
||||
min-height: 76px;
|
||||
padding: 12px 14px;
|
||||
grid-template-columns: 42px minmax(0, 1fr) 32px;
|
||||
}
|
||||
|
||||
.about-panel {
|
||||
margin-top: 18px;
|
||||
padding: clamp(26px, 5vw, 44px);
|
||||
margin-top: 12px;
|
||||
padding: clamp(20px, 4vw, 34px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 32px;
|
||||
border-radius: 26px;
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(22px);
|
||||
@ -517,21 +576,30 @@ h1 {
|
||||
.services {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.services.compact-cards-view {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.shell {
|
||||
width: min(100% - 22px, 1180px);
|
||||
padding: 22px 0;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.services {
|
||||
.services,
|
||||
.services.compact-list-view {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.services.compact-cards-view {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
min-height: 300px;
|
||||
border-radius: 28px;
|
||||
min-height: 240px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
@ -546,6 +614,10 @@ h1 {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-group .segmented {
|
||||
flex-basis: calc(50% - 3px);
|
||||
}
|
||||
|
||||
.control-group span {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
@ -557,15 +629,21 @@ h1 {
|
||||
|
||||
.services.list-view .service-card {
|
||||
grid-template-columns: 58px minmax(0, 1fr);
|
||||
min-height: 150px;
|
||||
min-height: 126px;
|
||||
}
|
||||
|
||||
.services.list-view .arrow {
|
||||
.services.compact-list-view .service-card {
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
min-height: 78px;
|
||||
}
|
||||
|
||||
.services.list-view .arrow,
|
||||
.services.compact-list-view .arrow {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
min-height: 250px;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.service-card img {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user