vibe2/gitea-pages
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Presentation-mode design: bigger type for projector, slide-snap

Browse Source 
- font-size clamp(18,1.6vw,28) — scales to projector (~28px on 1920w)
- section/hero/dark titles use clamp() — up to 5rem hero, 3.4rem section
- sections: padding 4vh, overflow-y auto for safety, snap mandatory
- nav: position static (sticky broke slide fixation)
- container max 1280px on >1400px screens

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Telecom 2026-05-21 21:15:44 +05:00
parent cdbbed8b39
commit 8d7405b7c6
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@ -108,23 +108,42 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: 17.92px; /* +40% затем -20% от 22.4 */ font-size: clamp(18px, 1.6vw, 28px); /* масштабируется под экран — для проектора 24–28px */
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
} }
/* Каждая секция = слайд на весь экран */ /* PRESENTATION MODE: каждая секция = ровно 1 экран, фиксация при скролле */
.hero, .hero,
section.section, section.section,
.dark-section { .dark-section {
scroll-snap-align: start; scroll-snap-align: start;
scroll-snap-stop: always; scroll-snap-stop: always;
scroll-margin-top: 84px;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-top: 4vh;
padding-bottom: 4vh;
overflow-y: auto; /* если контент длиннее — скролл внутри слайда */
} }
/* Усиливаем типографику для большого экрана */
.section-title { font-size: clamp(2rem, 3.6vw, 3.4rem) !important; line-height: 1.15; }
.hero-title { font-size: clamp(2.4rem, 5vw, 5rem) !important; line-height: 1.1; }
.section-body, .hero-sub { font-size: clamp(1rem, 1.3vw, 1.4rem) !important; }
.section-label { font-size: clamp(0.85rem, 1vw, 1.1rem) !important; }
.dark-title { font-size: clamp(2.2rem, 4vw, 4rem) !important; }
.dark-sub { font-size: clamp(1rem, 1.3vw, 1.4rem) !important; max-width: 600px; }
/* Контейнер шире на больших экранах */
@media (min-width: 1400px) {
.container { max-width: 1280px; }
nav { max-width: 1280px; }
}
/* Прячем sticky-нав в slide-режиме — мешает фиксации экранов */
nav { position: static !important; scroll-snap-align: none; }
/* ── POLISH: shared hover transition for all card variants ── */ /* ── POLISH: shared hover transition for all card variants ── */
.tool-card, .create-card, .plan-step, .gloss-item, .project-card, .prompt-card, .eq-box { .tool-card, .create-card, .plan-step, .gloss-item, .project-card, .prompt-card, .eq-box {
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;