Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Изящно рассчитать ширину skip link #1297

Open
TatianaFokina opened this issue Aug 30, 2024 · 0 comments
Open

Изящно рассчитать ширину skip link #1297

TatianaFokina opened this issue Aug 30, 2024 · 0 comments
Labels
вёрстка Задачи по вёрстке дизайн Задачи по дизайну улучшение Доработка существующего

Comments

@TatianaFokina
Copy link
Member

TatianaFokina commented Aug 30, 2024

Проблема

Пересчитать ширину скиплинка, т. к. она пока задана «в лоб»:

skip-link {
  position: absolute;
  overflow: hidden;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  padding: 16px 52px; <------ 👀
  background-color: var(--color-background);
  z-index: 4;
}

.skip-link:focus-visible {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
}

@media (width >= 1024px) {
  .skip-link {
    padding: 23px 56px; <------ 👀
  }
}

@media (width >= 1680px) {
  .skip-link {
    padding: 26px 62px; <------ 👀
  }
}

Контекст описан в комментарии к другому пиару.

@TatianaFokina TatianaFokina added улучшение Доработка существующего вёрстка Задачи по вёрстке дизайн Задачи по дизайну labels Aug 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
вёрстка Задачи по вёрстке дизайн Задачи по дизайну улучшение Доработка существующего
Projects
None yet
Development

No branches or pull requests

1 participant