Как правильно написать scss по моему шаблону?

Раз есть намек на наличие разных тем, то вам помогут кастомные свойства.

Т.е. вы сначала пишете для блока правила с участием кастомных свойств.
А внутри темы уже не переписываете заново всю гармошку селекторов, а только меняете кастомные свойства.

Типа того: https://jsfiddle.net/nk2mhw6p/
Причем значения передаются в псевдо и просто наследуются детьми. Переопределяются в @media. Доступны из JS (это вообще вызывает у меня восторг, в сочетании с псевдо)

У меня секции с разными темами, вы, по всей видимости, будете менять класс у body или контейнера.

Как сделать обрезание по строкам текста без -webkit-line-clamp с троеточием в конце?

без -webkit-line-clamp с троеточием в конце?

Сначала расскажите по какой причине его нельзя использовать?
Где вы вообще берете вопросы с такими дурацкими требованиями?

Ну а так, пока этого свойства не было, задачу решали двумя способами
1. на js
2. на css пристраивали в конец псевдо с тремя точками, который перекрывал контент (не всегда красиво)

Как сделать такой ховер?

vikas_web, https://jsfiddle.net/5m2otaw3/

Как сделать расширение контента при прокрутке?

Shura0102, как-то так https://jsfiddle.net/xo453yjm/

Koala не компилит главный файл и как это исправить?

Может в галпе нет такой беды?

В галпе нет такой беды.
В галпе вотчеры, за чем скажете следить, за тем и следят.

Как сверстать такое меню?

Владислава, у вас прекрасное меню.
1. Только лучше nav, а в нем список из ссылок.
2. И кнопки добавить.
3. Поменять id на class у header. Для стилизации лучше обходится без id, если вы точно не уверены в том, зачем вам id.

И потом гридом
grid-template-columns: 1fr min-content 1fr

Как-то так https://jsfiddle.net/y4h2wbkx/

Почему при открытии файла html не прогружаются стили?

Gaf1, вы написали путь относительно корня сайта. Если VSCode творит вам локалхост, то он и будет корнем.
А когда вы открываете файл с диска, то корнем становится диск.
https://htmlacademy.ru/blog/boost/frontend/links

Интересно, что уже третий аналогичный вопрос за сутки, который я вижу.

Как согнуть текст по картинке css?

Отрезвляющий вариант: берете каждую буковку, оборачиваете в span и поворачиваете.

Почему относительные ссылки сбиваются к корню?

Почитайте https://htmlacademy.ru/blog/boost/frontend/links

Почему не отображается логотип при переходе?

Почитайте про абсолютные и относительные пути
https://htmlacademy.ru/blog/boost/frontend/links
И заодно, на всякий случай про тег base

Почему не отображается логотип при переходе?

Вы не показали какой путь у вас задан к картинке.

Главная страница и страница с логином у вас получились на разном уровне вложенности (судя по пути на скрине).
Значит, либо вы должны для разных страниц указывать разные пути к лого (не удобно).
Либо задавать путь к лого относительно корня сайта (начиная со слеша /)

Как сделать адаптивный текст для сайта?

FrelFrloich, ага, жду

Как сделать адаптивный текст для сайта?

FrelFrloich, 6ка клиента и те, что я успела потестировать в browserstack понимают.

Узнаете интересные нюансы, буду рада почитать.

Как сделать адаптивный текст для сайта?

FrelFrloich, если тз по браузерам позволяет.
Я уже несколько проектов сделала с clamp для разных клиентов.

Как подключить несколько шрифтов в html?

но в css написано нужно вставлять font-family: 'IBM Plex Sans', sans-serif;

Да, потому что font-family у них один общий.
А различается только жирность и/или начертание.

Если основной шрифт на сайте IBM Plex Sans, то для body прописывайте:
font-family: "IBM Plex Sans", sans-serif;
Затем, для тех блоков, которым нужна жирность отличная от 400 или той, что вы дополнительно указали для body, задаете свой font-weight.

Всё аналогично тому, как вы пишете про размер шрифта.

Почему часть фона пропадает при уменьшении расширения?

Задайте

*, *::before, *::after {
outline: 2px solid red;
outline-offset: -2px;
}

Посмотрите, кто вывалился.
Разберитесь почему он вывалился (ширина, позиционирование, что-то ещё).
Почините.

Иначе делайте песочницу на jsfiddle.net или прикрепляйте ссылку на сайт.

Как указать отступ для br не делая его блочным?

Вот, пожалуйста он есть.

Во-первых, только в FF (зато прямо для инлайнового, что поразительно). Других браузеров, где это работает таким же образом не нашла. Возможно, они есть.

Во-вторых, попросила показать работающий пример, потому что вдруг я не всё учла и чего-то не знаю или забыла или пропустила и это и впрямь может работать всюду и хорошо.

выставление на показ Ваших знаний о CSS или о BR

Кстати, всё наоборот, сюда я хожу ЗА знаниями. И вопросы пользователей довольно регулярно эти знания обогащают, пока найдешь/придумаешь для них решение. В частности и этот вопрос.

но может Вы предложите лучше вариант конкретно в случае с BR?

С br нет, не предложу. Мне не удалось придумать кроссбраузерного решения с br.
То, что я могла предложить уже предложила в комментариях.

Если вы увидели в моих словах наезд, нет, его там нет и извините.

Как сделать адаптивный текст для сайта?

Кидаю
font-size: clamp(16px, 6vw, 56px)

или

.tt {font-size: 12px}
@media (min-width: 700px) {
  .tt {font-size: 18px}
}

Только в макет смотреть бы...

Как указать отступ для br не делая его блочным?

Undefiend, ну да, margin от body никто не обнулил и остались по краям отступы. Это я вижу. Ещё вижу дефолтные margin у p.
2x50px отступов там где br - не вижу.
Более того, отображение вообще никак не меняется, хоть 10, хоть 50, хоть 3000.

Происходит это потому что br, во-первых, сам по себе имеет display inline.
А во-вторых, к нему не применятся отступы даже если вы сделаете его блочным или инлайн-блочным. Не смотря на то, что инспектор будет не моргнув глазом, врать вам, что они есть.

Как убрать пусто пространство в гриде?

Представить бумажку в клетку.
И переделать грид с 3 на 6.
Последним ячейкам сказать, чтобы занимали по 3 клетки.
И это вам поможет, чтобы получить универсальное решение https://css-live.ru/articles/resheno-s-pomoshhyu-c...