Максим

В данном конкретном случае все просто

h1.header__title.page-title Lorem#[br]Lorem lorem lorem

https://pugjs.org/language/interpolation.html#tag-...
Но вообще проблема управления пробелами в Pug действительно есть, и это один из ключевых минусов.

Годится.

$.fn.shuffle = function() {
      var m = this.length, t, i;
      while (m) {
        i = Math.floor(Math.random() * m--);
        t = this[m];
        this[m] = this[i];
        this[i] = t;
      }
      return this;
    };
    $('.portfolio__item').shuffle().each(function(n) {
      $(this).delay(n*900).fadeTo(1500, 1);
    });

тоже предложу свою реализацию

div.toster-border {
	border: 2px solid black;
	padding: 2px;
	margin: 10px;
	display: inline-block;
}
div.toster-border::before {
	content: '';
	position: absolute;
	border-top: 4px solid orange;
	border-left: 4px solid orange;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	margin: 6px;
}

Ну тут все просто, а если хочется сложнее, то можно и с clip поиграться.

div {
  position: relative;
  display: inline-block;
  padding: 20px;
  background: white; 
  z-index: 1;
}

div:before, div:after {
  content: "";
  position: absolute;
  display: block;
  background: blue;
  left: -10px;
  top: -10px;
}

div:before {
  width: 10px;
  height: 40px;
}

div:after {
  width: 40px;
  height: 10px;
}

.xxx {
  background: silver;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  padding: 0.3em 0.6em;
  position: relative;
}

.xxx::before {
  content: "";
  width: 1em;
  height: 1em;
  left: -0.2em;
  top: -0.2em;
  background: orange;
  position: absolute;
  z-index: -1;
}

https://jsfiddle.net/km85s9fv/

Какие-нибудь эффекты планируются на элементе?

Можно так

.link {
  width: 150px;
  height: 40px;
  background: #ccc;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.link:before {
  top: -5px;
  left: -5px;
  z-index: -1;
  content: '';
  width: 25px;
  height: 25px;
  display: block;
  background: orange;
  position: absolute;
}

Никак.

Всем спасибо.
Во время установки MySQL генерирует временный пароль для root-пользователя. Найти его можно в mysqld.log с помощью команды:
sudo grep 'temporary password' /var/log/mysqld.log

Нужно не через translate ставить центральную точку, а через transform-origin: 50% (или transform-origin: center).

https://jsfiddle.net/61ygvr85/2/
ты ее сам двигаешь туда-сюда транслейтом, и удивляешься, что у тебя прыгает

object-fit: cover;
object-position: 50% 0 (или просто 0 0);

Высоту и ширину уже надо подгонять под ваши потребности. Либо просто высоту, либо максимальную высоту.

Либо вообще воспользоваться техникой padding-bottom: X% для обёртки картинки (которую нужно добавить), чтобы сделать сохранение пропорций по изменении ширины, а саму картинку на абсолютное позиционирование:
https://jsfiddle.net/1o5m7rwp/11/


По ссылке: обрезка по высоте + сохранение соотношения сторон картинки + обрезание нижней её части. Попробуйте сжать окно, чтобы увидеть сохранение соотношения сторон при адаптивности.

P. S. IE11 не поддерживает object-fit, но есть полифил,

Насколько знаю, чисто с бордерами эту задачу не решить. Мой вариант с svg-треугольником – https://codepen.io/anon/pen/wQELXZ (можно ткнуть в синий блок и вводить текст, чтобы увидеть в динамике)

По части масштабирования SVG обрати внимание на атрибут preserveAspectRatio="none" и vector-effect="non-scaling-stroke"

Есть похожий вопрос:
Как сверстать прямоугольник со «стрелкой» на конце?

Можно вот так, размеры естественно свои подставить: