https://fonts.googleapis.com/css2?family=Rubik&display=swap
font-weight: 600
. Если вы посмотрите внутрь CSS, загружаемой для подключения шрифта, вы (естественно) увидите там подгрузку шрифта для font-weight: 400
, ведь именно это значение соответствует Regular и используется по-умолчанию.https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap
.chat-item__content.force-repaint .content-chat-content__message {
opacity: 0.99;
}
force-repaint
на элементе контейнера - и всё сразу встаёт на место, поскольку осуществляется перерисовка. Например вот так:function forceRepaintToFixChrome89Issue() {
if (!navigator.appVersion.match(/\sChrome\/(89|9\d)\./)) {
// Apply only for Chrome 89 and 90+
return;
}
window.requestAnimationFrame(function () {
const e = document.querySelector('.chat-item__content');
if (!e) {
return;
}
const fr = 'force-repaint';
e.classList.add(fr);
window.requestAnimationFrame(function () {
e.classList.remove(fr);
});
});
}
scroll
. Это приводит к тому что на каждое движение страницы запускается JavaScript обработчик и создаёт изменения в DOM которые приводят к необходимости пересчёта стилей, а то и layout'а. aspect-ratio
которое потихоньку начинает появляться в современных браузерах. Однако, поигравшись с ним немного - могу сказать что пока что использовать его на практике смысла никакого, придётся подождать пару лет как минимум.$vars: (
1 : #333,
5 : #111,
100 : #222,
);
@mixin div-color($id) {
@if (map-has-key($vars, $id)) {
color: map-get($vars, $id);
}
}
.gitignore
&
в имени файла - сомнительная затея. В целом ничего страшного, но он может иметь специальное значение@import
- плохая идея т.к. он будет загружаться после того как будет загружена и разобрана таблица стилей т.е. вы оставляете пользователя с неправильными шрифтами дольше чем нужно..post section
добавить не один параграф, а два.post-meta-author
.post
: Этот элемент обладает очень простой структурой - общим внутренним отступом из которого иногда "вылезают" элементы (к примеру картинка на мелких экранах), но у вас это какие-то кусочки отступов, применённые к разным внутренним элементам, причём иногда даже не к непосредственным потомкам, часть отступов - margin, а часть - padding, в общем полный бардак. Это делает макет весьма хрупким и сложным в поддержке. Вам стоит немного углубиться в теорию и выстроить у себя внутри понимание того как именно взаимодействуют элементы между собойlang
, установите корректноsome.php
?let
в JavaScript коде приводит к ошибкам в MSIE, если вы вдруг собираетесь его поддерживать(function(window, document) { ... })(window, document);
чтобы скрыть его из глобального пространства имён - это позволит избегать конфликтов с другим кодом который может быть загружен@extends
:%subsclasses-color {
.sub1, .sub2, .sub3 {
color:red;
}
}
.main1 {
@extends %subclasses-color;
}
.another-main {
@extends %subclasses-color;
}
background-image: url(<картинка с точками, можно как data url>);
background-position: top left;
background-repeat: repeat-y;
padding-left: <размер фона по Y + отступ до контента>;
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0 - <размер отступа>;
transform: translate(50%, 50%);
border: <размер белого пространства сверху / снизу> solid #fff;
<и здесь либо рисуем элемент через width, height, background-color, border-radius либо картинками, думаю что второе предпочтительнее>
}
flex-shrink
и flex-grow
не имеют прямого отношения к размерам элемента в том плане что они не определяют размер напрямую (для этого есть flex-basis
). Эти свойства определяют поведение элемента при сжатии (shrink) и расширении (grow).:first-of-type
. На Stack Overflow есть пара очень хороших объяснений этого, стоит ознакомиться (раз, два)..services-block:first-of-type
означает "первый элемент с классом services-block
" ложно и это приводит к неработающему селектору. В реальности этот селектор читается как "любой подэлемент текущего элемента, имеющий класс services-block
и при этом являющийся первым элементом с таким именем тега среди всех имеющихся". Слегка контр-интуитивно, да, но уж как есть.div
- не единственный элемент в HTML и начнёте использовать также и другие элементы. В вашем примере для div.basic-title
и div.services-block_title
явно лучше подходят какие-то из элементов заголовка, а структура из div.services-block_item
и подэлементов - это явно dl/dt/dtt.container > div.services-container:first-of-type > .services-block:first-child
. .container > .basic-title + .services-container > .services-block:first-child