Ответы пользователя Сергей delphinpro

Как корректно настроить Gulp + Sass?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

C использованием @use подход принципиально меняется. Область видимости каждого подключаемого так модуля ограничена им самим, и потребуется импортировать из него необходимые сущности в каждом файле использования.

Можете просто не обращать внимания на предупреждения. Или понизить версию sass (кажется до 1.77.8)

Ну или пишите стили по-новому

main.scss

@use 'base.scss';
@use 'banner.scss';

base.scss
$_color: red;

banner.scss

@use './base';
a{
    color: base.$color;
    text-decoration: none;
}

Может быть, в сети, где-то есть актуальная железобетонная инструкции для того, чтобы импорты, переменные, да и Sass нормально завелись?

почитайте первоисточник https://sass-lang.com/documentation/at-rules/use/

Ответ написан 19 минут назад

Комментировать

Как разместить елементы с разных блоков чтобы они перекрывали друг друга?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

margin-right: -5rem;

Ответ написан 6 часов назад

5 комментариев

Что неправильного в моем коде?

Сергей delphinpro @delphinpro Куратор тега PHP

frontend developer

Вы получили простое задание, но это не значит, что код нужно написать абы как, лишь бы результат был =). Элементарные вещи стоило бы использовать,как то: автозагрузка классов, шаблонизация.

0. Код на облачном диске. Почему не гитхаб? Это же удобнее (и плюс в карму=).
1. Инклуд файлов, вместо автозагрузки классов. Написать автозагрузчик - дело пяти минут. Даже одна минута, если использовать composer.
2. Разделение мух и котлет. Код отдельно, html-разметка отдельно. Простейший php-шаблонизатор - это тоже пять-десять минут.
Вот так вообще нельзя писать: echo '<tr><th scope="col">Первый круг</th></tr>';
3. Разделение обязанностей. У вас один класс и файлы загружает, и читает загруженные, и турнирную таблицу рассчитывает и рендерит ее.
4. range(0, 19); Почему 20 элементов? Почему не 30? Откуда это число взялось? Его не должно быть в коде.
5.

$probablePairsArr[] = range(0, 19);
$probablePairsArr = $probablePairsArr[0];

Интересный финт. В чём его сакральный смысл - не ясно. Да и использование локальной переменной здесь не требуется. Можно сразу создавать массив в свойстве класса.

Наверное всё. Больше там ничего нет.

Ответ написан 18 нояб.

7 комментариев

Можно ли уже использовать CSS-свойство text-wrap: balance?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Переключитесь на вкладку "Date relative"
В сафари поддержка появилась полгода назад, в лисе - менее года.

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

Ответ написан 17 нояб.

Комментировать

Как сделать элементы в разных блоках одинаковыми по ширине?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Ответ написан 14 нояб.

1 комментарий

Почему не указывается путь к файлу js?

Сергей delphinpro @delphinpro Куратор тега JavaScript

frontend developer

from '../Gallery-master/IMAGES.js';

https://phpfaq.ru/newbie/paths

Ответ написан 14 нояб.

2 комментария

Как задать задний фон поверх фрейма на 5 сек?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Размещать див с картинкой поверх фрейма. Убирать по событию onload фрейма.

Ответ написан 12 нояб.

Комментировать

Когда каскадное обновление это плохо?

Сергей delphinpro @delphinpro

frontend developer

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

Насчет вреда от cascade update и самому будет интересно узнать

Ответ написан 11 нояб.

Комментировать

Почему USB LTE роутер отключается самостоятельно?

Сергей delphinpro @delphinpro

frontend developer

e3372h когда-то работал у меня 24/7. он и сейчас работает, правда нужен теперь периодически.

Ответ написан 08 нояб.

1 комментарий

Что будет если сделать 2 одинаковых домена в разных зонах?

Сергей delphinpro @delphinpro

frontend developer

Домен com.ru принадлежит регистратору. Вы не сможете создать на нем поддомен.
И именно потому что он принадлежит регистратору, этот регистратор может вам предложить домены в зоне .com.ru

Ответ написан 07 нояб.

5 комментариев

Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?

Сергей delphinpro @delphinpro Куратор тега Вёрстка

frontend developer

Просто приведу один пример из текущей работы по верстке:

Лень дизайнера:

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

-----------------

Вот еще.

Казалось бы,обычный заголовок с красной строкой. Заверстаю с помощью text-indent.

А хрен там не валялся. Потому что дальше такое:

Круто смотрится. Наверное. И я даже это заверстаю при желании.

Но ведь эти тексты будут потом заполнятся в админке. Они могут меняться. И скорее всего а админке будет простое однострочное текстовое поле для заголовка. Тут хз как делать кастомные отступы на рандомной строке.

Ответ написан 06 нояб.

8 комментариев

Как правильно сделать переключение темы?

Сергей delphinpro @delphinpro Куратор тега JavaScript

frontend developer

Все что нужно для переключения темы:

Инициализация при загрузке, максимально короткий скрипт. При желании можно добавить проверку на пользовательские предпочтения prefer-color-theme

<head>
    <script>
        const theme = localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';
        document.documentElement.setAttribute('data-color-theme', theme);
    </script>

Код переключателя

document.querySelectorAll('.theme-toggle').forEach(el => {
    el.addEventListener('click', () => {
        const theme = document.documentElement.getAttribute('data-color-theme') === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-color-theme', theme);
        localStorage.setItem('color-theme', theme);
    });
});

И стили

:root {
  --body-bg: white;
}
[data-color-theme="dark"] {
  -body-bg: black;
}

Разумеется, вместо атрибута можно вешать класс

document.documentElement.classList.add('dark-theme');
:root {
  --body-bg: white;
}
html.dark-theme {
  -body-bg: black;
}

Ответ написан 05 нояб.

Комментировать

Как сделать общий градиент для двух блоков?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Например так

Для любого угла градиента

Ответ написан 02 нояб.

5 комментариев

Как расположить на картинке кнопки пропорционально картинке которая имеет разный размер на разных устройствах?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

<div class="wrapper">
  <img src="">
  <button class="btn1"></button>
</div>

.wrapper { 
  position: relative;
}

.wrapper img {
  width: 100vw;
  height: 100vh;
  display: block;
}

.btn1 {
  position: absolute;
  top: подобрать значение в процентах;
  left: подобрать значение в процентах;
}

Ответ написан 25 окт.

Комментировать

Как сделать border с картинкой у которой есть фон?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

DZHAMBUALT, вырежьте картинку верхней рамки, уберите фон. в узкой полоске вверху фон не убирайте. Чуть-чуть подгоните размеры. скруглите углы у блока, если они будут видны из-под картинки.
картинку положите в два псевдо по 50%
у левого background-position: 0 0; у правого background-position: 100% 0;
Картинку сделать подлиннее (клонировать среднюю полоску) - так вы легко сделаете блок переменной ширины.
картинка простая фигура, лучше использовать svg.

PS. Вернуть бы вас лет на 10-15 во времени. Тогда такие дизайнерские рамки были в моде, а css был не особо продвинутый. И ничего - верстали.

Ответ написан 24 окт.

1 комментарий

Как сделать в modx страницу полностью на другом шаблоне?

Сергей delphinpro @delphinpro

frontend developer

в модх с этим как раз намного проще.сделал новый шаблон и назначил его для нового ресурса.

Ответ написан 22 окт.

3 комментария

Можно ли перенести Windows 10 на новый комп, сохранив все настройки?

Сергей delphinpro @delphinpro

frontend developer

Если диск/диски остаются теми же, то все сразу заработает.
За исключением того, что винда потребует ввод лицензии из-за полной смены железа.
В моем случае достаточно было войти в microsoft аккаунт и лицуха сама подтянулась на новый комп.

Ответ написан 18 окт.

Комментировать

Как изобразить остаток в бутылке через CSS, JS?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Рисуем бутылку в фотошопе или иллюстраторе.
В иллюстраторе делаем внутренний контур.
Поверх бутылки накладываем див, у которого фон закрашивается по вертикали на необходимый уровень
Делаем из контура свгэшку и накладываем svg-маску на див-заполнитель.

Ответ написан 18 окт.

Комментировать

Почему у карусели странные отступы сверху и снизу?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

.f-carousel__viewport,
.f-carousel__track,
.is-classic .f-thumbs__viewport {
  height: auto !important;
}

Ответ написан 16 окт.

2 комментария

Как отключить показ структуры файла?

Сергей delphinpro @delphinpro Куратор тега PhpStorm

frontend developer

Ответ написан 14 окт.

Комментировать

Войдите на сайт