Если правильно вас понял, то примерно такое вам нужно. codepen.io/Kublyakov/pen/KzmvVX
При наведении меняем цвет, и за счет transition цвет меняется не сразу, а постепенно, в моем случае в течение 0.5 секунд. Думаю, смысл понятен и сможете доработать для своих целей.
Ручной способ: в Хроме жмем F12, переходим на вкладку Network, затем загружаем нужную страничку и включаем подкаст. В Network увидите, что добавился новый файл с типом media и такого рода путём https://stream13.mixcloud.com/c/m4a/64/0/6/f/f/856...
Это собственно прямая ссылка на подкаст. Дальше можете делать с ней что захотите =)
jade-lang.com
Каждый блок - отдельный файл.
Допустим, файл header.jade - один для всех страниц, поменяв в тем текст на необходимый - он поменяется во всех страницах.
P.S. - Увидел, что в существующем коде замены нужно проводить. Тогда да, поиск с заменой.
Я пользуюсь примерно таким алгоритмом в подобных вопросах:
1. Смотрю в спецификации.
2. Если в спецификации не нахожу ответа, то смотрю как этот момент реализован в популярных фреймворках - bootstrap, foundation.
Для меня авторы этих фрейморков являются авторитетами, чьему мнению я доверяю.
Я бы сделал как-то так: codepen.io/Kublyakov/pen/bEKXyE
border добавляется в :before с абсолютным позиционированием, тем самым размеры будут подстраиваться под размеры внешнего круга.
Если нужно, что бы текст внутри выделялся нормально, то для :before добавляется pointer-evens: none;
Ну отступы для текста думаю не нужно объяснять как добавлять)
Emmet разве не используете для html? Ввели тэг, нажали Tab - получили развернутый тэг с курсором между ними.
P.S. Кроме этого куча незаменимых фишек прилагается emmet.io
Не работает inline block justify выравнивание? - был уже такой-же вопрос.
На stackoverflow тоже натыкался на обсуждение данной проблемы.
Простого и красивого решения нету и, скорее всего, не будет.
Ну сплющенной анимация получается, потому-что у анимируемого блока разные ширина и высота.
Как вы представляете круглую анимацию у прямоугольного блока? =)
Решение проблемы - для этого зеленого блока сделать равными ширину и высоту.
Либо сделать две разных анимации для увеличения ширины и увеличения высоты с разным временем анимации.
Не так много свойств с небольшой поддержкой, можно каждое тут caniuse.com проверять. Со временем запомните и всё.
UPD: Для саблайма есть плагин timkl.xyz/sublime-text-caniuse - инфу берет тоже с caniuse.com