Igor Schnaider

http://youmightnotneedjquery.com/#post

То что вы называете "ломается" — это всего лишь разные медиа-правила. Для .container — это min-widht: 1200px, для ваших собственных стилей — max-width: 1200px. (В инспекторе стилей они, если что.) Просто приведите все к общему.

А в лисе работает :-) И вообще, спецификация говорит, что атрибут src обязательно должен иметь значение. Как минимум, можно вставить пустое изображение: data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

А в чем проблема у вас? Таск в галпфайле будет примерно такой: 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. Вообще, документация у них вполне нормальная, с большим количеством примеров.

Да, самый первый параграф тут http://api.jquery.com/animate/#animation-properties.

Судя по описанию (сам файл не качал, может там другое ¯\_(ツ)_/¯, конечно), то это пространство под базовой линией. Можно избавиться разными способами, например: vertical-align flex на родителе display: block для картинок вообще обнулить размер текста на родителе

Если нужно, чтобы при нажатии открывалось, то можно скрытый чекбокс вставить и по его состоянию :checked открывать/закрывать панель навигации. .logo будет как label. Если делать по :hover, тогда .logo должен идти первым в разметке, чтобы можно было использовать смежный селектор. Причем, они должны быть на одном уровне. А так как у вас .logo вложен во внешнюю обертку. :hover должен быть на ней. p.s. Не ленитесь собирать пример в песочнице ;-)

Если стили одинаковые по приоритету (специфичности), то порядок размещения поможет. То есть, если имеем следующее <p class="alarm clock">Lorem</p> то в зависимости от порядка появления правил в таблице стилей .alarm { color: #f00000; } .clock { font-weight: 600; color: #00c000; } текст будет либо жирного начертания и зеленый, либо жирного начертания и красный, если первое правило переместить в конец.

input:checked ~ img { border: 1px solid; }

top: 50% и left: 50% добавьте.

Типа такого?

margin: auto; будет работать только если явно установлена ширина/высота (и top = right = bottom = left = 0). Без явных размеров так: /* ... */ p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Там вместо процентов надо указывать значения от 0 до 1 (0 — 0%, 1 — 100%, .5 — 50% и т. д.). И еще используйте атрибут clipPathUnits="objectBoundingBox".

Мне кажется, в вашем случае с SVG как раз проще будет, учитывая что у стрелки заливка градиентом, а не картинка какая-нибудь. IE 9+ должно быть.

Как-то так.

Это понятно, в контексте задачи (а как я понял, она учебная) вполне можно упростить. А вообще, еще можно поиграться с польской нотацией ))

Через условия. Или можно вообще так: const result = eval(5 + op + 5);

Браузеры все равно будут немного по-разному расчитывать эти размеры. Идеального соответствия вы не добъетесь. Все, что можно сделать, привязать иконку к тексту. Прыгать все равно будут, но уже вместе.

Вероятно, какие-то особенности у Safari для Windows. Но я не думаю, что на него вообще стоит тратить время. Так и до Netscape не далеко :-)

Вы не правильно замеры делаете. Нужно от верхней границы родителя до верхней границы текстового блока делать, а не до верха строчной буквы. Шрифты все разные, высота букв будет отличаться. https://jsfiddle.net/p4710ymL/ Ну и вместо вот этого (100px - 14px) / 2 - 1px лучше явно задать line-height и считать от него (100px - <line-height>) / 2

А что тут? Обычные блоки, а под ними полоска. ;-) Каждый блок состоит из трех частей (юзерпик, цитата и имя). Потом просто меняете местами их. Если на flexbox, то через order.

Интересно, что если сделать переход, скажем, на transform, то тоже будет временно "выскакивать" из обертки. "3d-hack" помог.

tagName

Ну как-то да, мой ноут через пару минут начинает идти на взлет с этими снежинками. Оптимизировать бы не помешало.

Да просто transition на opacity поставьте и меняйте его через media queries.