0xD34F

Можно повесить обработчик click на корневой элемент: если целевым элементом является ссылка - отменяете действие по умолчанию и открываете новое окно вручную:

<div id="app" @click="onClick">
  ...

new Vue({
  el: '#app',
  methods: {
    onClick(e) {
      if (e.target.tagName === 'A') {
        e.preventDefault();
        window.open(e.target.getAttribute('href'));
      }
    },
    ...
  },
  ...
});

Здесь собрана модель списка с глубиной 3. На первом уровне все работает как надо, при перетаскивании, элемент имеющий дочерние элементы перетаскивается вместе с ними. Но на 2-й глубине родитель и потомок уже не связаны

Ошибка в разметке - ul используется в качестве li. Исправлено.

Раз уж у вас там таблица - то и добавляйте строки, а не div'ы. А чтобы одна ячейка занимала всю строку, используйте colspan. Типа так.

А к чему такие сложности со сменой подсказки? Достаточно просто указать формат номера документа (как-то так) - люди не дураки, сами разберутся, что после чего вводить.

display: block; для #map, например

https://css-tricks.com/multi-line-padded-text/

display: inline-block;забыли

Так, что ли?

Загоняем #article-1 в самый конец .content, по умолчанию делаем его видимым, и невидимым если до него есть .article:target. Типа так.

больше не появлялось пока он не почистит куки

Как насчёт записывать в куках, что окно открывалось, и перед открытием окна проверять, нет ли в куках соответствующей записи?

Неудивительно, что не помогло - border-bottom вы определили для ссылки, а не изображения.

Определите класс для ссылок, содержащих изображение, и назначьте border: none ему:

.a-image {
  border: none;
}

<a class="a-image"><img src="...

Работает.

<div class="heading">
  <p>hello, world!!</p>
  <p>fuck the world</p>
  <p>fuck everything</p>
</div>

.heading {
  display: inline-block;
  position: relative;
  width: 900px;
  height: 70px;
  background: red;
  overflow: hidden;
  font-size: 60px;
}
.heading > p {
  text-transform: uppercase;
  color: #fefefe;
  position: absolute;
  width: 900px;
  top: 0;
  left: 0;
  animation: text 6s infinite;
  margin: 0;
  padding: 0;
}
.heading > p:nth-child(1) { animation-delay:  0s; }
.heading > p:nth-child(2) { animation-delay: -4s; }
.heading > p:nth-child(3) { animation-delay: -2s; }

@keyframes text {
  0% {
    opacity: 1;
  }
  25%, 100% {
    margin-left: 50px;
    opacity: 0;
  }
}

Можно так:

<a href="https://toster.ru" onclick="return false">link</a>

Или так:

a.disabled {
  pointer-events: none;
}

<a href="https://toster.ru" class="disabled">link</a>