Лучшие фрагменты кода для каждого сайта Squarespace // 5 лучших CSS-кодов Squarespace

В этом видео вы узнаете о пяти пользовательских фрагментах кода, которые мой друг (и бренд-стратег) Фил Паллен использует на каждом сайте Squarespace, создаваемом для своих клиентов. Сначала он покажет вам, как использовать функцию root для универсальной настройки цветов на вашем сайте Squarespace, присваивая цветам названия вместо шестнадцатеричных кодов и подбирая их под стили сайта Squarespace, чтобы ещё больше упростить написание кода. Затем вы узнаете, как применить эффект плавной прокрутки к якорным ссылкам, создать более толстую горизонтальную линию, установить собственный шрифт P3 и скрыть футер только на мобильных устройствах. В этом уроке мы рассмотрим МНОГОЕ, поэтому используйте временные метки ниже, чтобы перейти к следующему этапу: 00:42 — Дайте цветам названия (вместо шестнадцатеричных кодов) и подберите их под стили сайта Squarespace Замените «XXXXXX» ниже на ваши шестнадцатеричные коды и вставьте в CSS: :root { --lightest: #XXXXXX !important; --light: #XXXXXX !important; --accent: #XXXXXX !important; --dark: #XXXXXX !important; --darkest: #XXXXXX !important; } 01:42 - Добавьте эффект плавной прокрутки к вашим якорным ссылкам, вставив этот фрагмент в CSS: html { scroll-behavior: smooth; } Не забывайте, что для ваших якорных ссылок требуется блок кода с идентификатором, гиперссылкой на который служит хэштег. Инструкции в этом видео:    • How to Create Anchor Links in Squarespace ...   03:08 - Увеличьте толщину горизонтальной линии, добавив этот фрагмент кода (и изменив толщину — она установлена ​​на 2 пикселя в высоту, как показано в примере): hr {height: 2px !important;} Подробнее об этом читайте в этом уроке:    • How To Change The Horizontal Line In Squar...   05:01 - Настройте стиль текста P3 (за пределами того, что позволяют стили сайта в Squarespace) с помощью этого фрагмента кода и скорректируйте его соответствующим образом: .sqsrte-small{ letter-spacing: 0.2em !important; text-transform: uppercase!important; font-weight: 600; line-height: 1.6em !important;} 06:02 - Скройте нижний колонтитул на мобильных устройствах с помощью этого фрагмента кода: @media only screen and (max-width: 768px) { footer { display: none !important; } } ----------------------------------- Термин «Squarespace» является товарным знаком Squarespace, Inc. Это видео не было одобрено или одобрено Squarespace, Inc. Я просто очень люблю их платформу ♥ ----------------------------------- × СТАВЬТЕ ЛАЙКИ, КОММЕНТИРУЙТЕ И ПОДПИСЫВАЙТЕСЬ × ----------------------------------- x КАНАЛ ФИЛА →    / philpallen   × ИНСТАГРАМ ФИЛА →   / philpallen   × САЙТ ФИЛА →
x КАНАЛ БЕККИ →    / insidethesquare   × ИНСТАГРАМ БЕККИ →   / thinkinsidethesquare   × САЙТ БЕККИ →
-----------------------------------