Везде часы закладываются одинаково.
echo '<span class="attention">Вы не ввели данные в поля ввода!</span>';Это простенький лэндинг, который верстается для поддержания навыков. Препроцессор тут будет лишним. (:
Ну они тут имеют скорее имееют декоративный эффект.
<ol>Какими средствами можно проверять свою вёрстку для читалок?
plan-action__title скорее всего лишняя. font: 400 150px/1.95 'Georgia', sans-serif;
Использование свойства plan-action__title > h3:nth-child(3) Собственно это не дало ни каких результатов.
*, *::before, *::after {
box-sizing: inherit; // или прямо border-box
}
*:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // убирает голубую подсветку при тапе на смартфонах
// outline убираем только там, где заменили на другие видимые стили
}
// Удаляем все анимации и переходы для людей, которые предпочитают их не использовать
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
html {
box-sizing: border-box; // если для * указан inherit, если border-box, то тут уже не нужно.
min-height: 100%;
padding: 0; // по привычке
margin: 0; // по привычке
-webkit-font-smoothing: antialiased; //правильное отображение шрифтов
-moz-osx-font-smoothing: grayscale; //правильное отображение шрифтов
-webkit-text-size-adjust: 100%; // запретить корректировку размера шрифта после изменения ориентации в iOS.
text-rendering: optimizeLegibility; //правильное отображение шрифтов
text-size-adjust: none; //запрет авто-увеличения текста на мобилках
scroll-behavior: smooth; //плавная прокрутка к якорям
}
body {
min-height: 100vh; // или 100%
min-height: -webkit-fill-available; // mobile viewport bug fix (webkit)
margin: 0;
}
img {
max-width: 100%;
vertical-align: top;
}
a {
text-decoration: none; // если так у всех ссылок в макете
transition: 0.5s; // если так у всех ссылок в макете
}
a[href^=tel] {
color: inherit;
text-decoration: none;
}
#{$input-list} {
line-height: 1;
font-family: inherit; // либо шрифт, если не inherit по макету
}
.visually-hidden {
position: fixed;
transform: scale(0);
}
// стили ниже, если так требуются по макету, обычно для лендингов
figure {
margin: 0;
}
dl {
margin-top: 0;
margin-bottom: 0;
}
dd {
margin-left: 0;
}
ul {
padding-left: 0;
list-style-type: none;
}
Каждодневных чистых 6 это очень хороший результат.