Igor Schnaider

Пользователь
  • Публикации

    625
  • Зарегистрирован

  • Посещение

  • Days Won

    44

Все публикации пользователя Igor Schnaider

  1. То что вы называете "ломается" — это всего лишь разные медиа-правила. Для .container — это min-widht: 1200px, для ваших собственных стилей — max-width: 1200px. (В инспекторе стилей они, если что.) Просто приведите все к общему.
  2. А в лисе работает :-) И вообще, спецификация говорит, что атрибут src обязательно должен иметь значение. Как минимум, можно вставить пустое изображение: data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  3. А в чем проблема у вас? Таск в галпфайле будет примерно такой: gulp.task(pages); function pages() { // Pug settings const settings = {}; return gulp.src(`${config.paths.source.pug}/*.pug`) .pipe(gulp.pug(settings)) /... maybe something else .../ .pipe(gulp.dest(config.paths.dest.html)); } Сами .pug-файлы, конечно, изменяться. Структура может быть такой, например ├── pages ├── index.pug └── templates └── layout.pug Пример для layout.pug: doctype html html head meta(charset='utf-8') meta(name='viewport', content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0') meta(http-equiv='X-UA-Compatible', content='ie=edge') block title title Untitled link(rel='stylesheet', href='./css/main.built.css') body block content Пример для index.pug: extends ./templates/layout.pug block title title Index page block content //content will be here //script(src='/js/app.js') Или используйте includes. Вообще, документация у них вполне нормальная, с большим количеством примеров.
  4. Да, самый первый параграф тут http://api.jquery.com/animate/#animation-properties.
  5. Судя по описанию (сам файл не качал, может там другое ¯\_(ツ)_/¯, конечно), то это пространство под базовой линией. Можно избавиться разными способами, например: vertical-align flex на родителе display: block для картинок вообще обнулить размер текста на родителе
  6. Если нужно, чтобы при нажатии открывалось, то можно скрытый чекбокс вставить и по его состоянию :checked открывать/закрывать панель навигации. .logo будет как label. Если делать по :hover, тогда .logo должен идти первым в разметке, чтобы можно было использовать смежный селектор. Причем, они должны быть на одном уровне. А так как у вас .logo вложен во внешнюю обертку. :hover должен быть на ней. p.s. Не ленитесь собирать пример в песочнице ;-)
  7. Если стили одинаковые по приоритету (специфичности), то порядок размещения поможет. То есть, если имеем следующее <p class="alarm clock">Lorem</p> то в зависимости от порядка появления правил в таблице стилей .alarm { color: #f00000; } .clock { font-weight: 600; color: #00c000; } текст будет либо жирного начертания и зеленый, либо жирного начертания и красный, если первое правило переместить в конец.
  8. input:checked ~ img { border: 1px solid; }
  9. top: 50% и left: 50% добавьте.
  10. Типа такого?
  11. margin: auto; будет работать только если явно установлена ширина/высота (и top = right = bottom = left = 0). Без явных размеров так: /* ... */ p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  12. Там вместо процентов надо указывать значения от 0 до 1 (0 — 0%, 1 — 100%, .5 — 50% и т. д.). И еще используйте атрибут clipPathUnits="objectBoundingBox".
  13. Мне кажется, в вашем случае с SVG как раз проще будет, учитывая что у стрелки заливка градиентом, а не картинка какая-нибудь. IE 9+ должно быть.
  14. Как-то так.
  15. Это понятно, в контексте задачи (а как я понял, она учебная) вполне можно упростить. А вообще, еще можно поиграться с польской нотацией ))
  16. Через условия. Или можно вообще так: const result = eval(5 + op + 5);
  17. Браузеры все равно будут немного по-разному расчитывать эти размеры. Идеального соответствия вы не добъетесь. Все, что можно сделать, привязать иконку к тексту. Прыгать все равно будут, но уже вместе.
  18. Вероятно, какие-то особенности у Safari для Windows. Но я не думаю, что на него вообще стоит тратить время. Так и до Netscape не далеко :-)
  19. Вы не правильно замеры делаете. Нужно от верхней границы родителя до верхней границы текстового блока делать, а не до верха строчной буквы. Шрифты все разные, высота букв будет отличаться. https://jsfiddle.net/p4710ymL/ Ну и вместо вот этого (100px - 14px) / 2 - 1px лучше явно задать line-height и считать от него (100px - <line-height>) / 2
  20. А что тут? Обычные блоки, а под ними полоска. ;-) Каждый блок состоит из трех частей (юзерпик, цитата и имя). Потом просто меняете местами их. Если на flexbox, то через order.
  21. Интересно, что если сделать переход, скажем, на transform, то тоже будет временно "выскакивать" из обертки. "3d-hack" помог.
  22. Ну как-то да, мой ноут через пару минут начинает идти на взлет с этими снежинками. Оптимизировать бы не помешало.
  23. Да просто transition на opacity поставьте и меняйте его через media queries.
  24. padding от ширины родителя пляшет. Можете использовать его: сделать обертку или через псевдоэлемент.