fix(update): update components & clean

.stylelintrc

@@ -26,6 +26,7 @@
     "max-empty-lines": null,
     "selector-class-pattern": null,
     "selector-id-pattern": null,
+    "no-descending-specificity": null,
     "value-keyword-case": [
       "lower",
       {
@@ -41,6 +42,23 @@
           "vw"
         ]
       }
-    ]
+    ],
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": [
+          "global",
+          "deep"
+        ]
+      }
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": [
+          "v-deep"
+        ]
+      }
+    ],
   }
 }

src/components/atoms/Headline.vue

@@ -1,9 +1,5 @@
 <template>
-  <component
-    :is="tag"
-    class="atom-headline"
-    :class="styleClasses"
-  >
+  <base-content-headline class="atom-headline">
     <slot>
       <span
         v-if="$slots.overline || overline"
@@ -33,11 +29,13 @@
         </slot>
       </span>
     </slot>
-  </component>
+  </base-content-headline>
 </template>
 
 <script>
+import BaseContentHeadline from '@/components/base/ContentHeadline';
 export default {
+  components: { BaseContentHeadline },
   props: {
     tag: {
       type: String,
@@ -55,13 +53,6 @@ export default {
       type: String,
       default: 'Lorem Subline'
     }
-  },
-  computed: {
-    styleClasses () {
-      const classes = {};
-      classes[`headline--${this.tag}`] = true;
-      return classes;
-    }
   }
 };
 </script>
@@ -81,7 +72,7 @@ export default {
     /* empty */
   }
 
-  &.headline--h2 {
+  &h2 {
     & .overline {
       font-size: calc(12 / 375 * 100vw);
 

src/components/base/ContentContainer.vue

@@ -0,0 +1,174 @@
+<template>
+  <component
+    :is="currentTag"
+    v-bind="$attrs"
+    :data-debug="debug"
+    v-on="$listeners"
+  >
+    <slot name="before" />
+    <header v-if="$slots.header || $scopedSlots.header">
+      <slot name="header" />
+    </header>
+    <slot />
+    <footer v-if="$slots.footer || $scopedSlots.footer">
+      <slot name="footer" />
+    </footer>
+    <slot name="after" />
+    <pre
+      v-if="debug"
+      class="structure-debug"
+      :data-debug-parent-level="parentLevel"
+      :data-debug-level="currentLevel"
+      :data-debug-tag="currentTag"
+    />
+  </component>
+</template>
+
+<script>
+
+export default {
+
+  provide () {
+    return {
+      parentLevel: this.currentLevel
+    };
+  },
+
+  inject: {
+    parentLevel: {
+      from: 'parentLevel',
+      default: 0
+    }
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    tags: {
+      type: Array,
+      default () {
+        return ['article', 'section'];
+      }
+    }
+  },
+  data () {
+    return {
+      debug: false
+    };
+  },
+
+  computed: {
+
+    currentLevel () {
+      return this.parentLevel + 1;
+    },
+
+    currentTag () {
+      return ['div', 'main', 'div'][this.parentLevel] || this.tags[this.currentLevel % this.tags.length];
+    }
+  },
+
+  mounted () {
+    this.debug = 'debug-structure' in this.$route.query;
+  }
+
+};
+</script>
+
+<style lang="postcss" scoped>
+[data-debug] {
+  --color-structure-1-bg: #ff8360ff;
+  --color-structure-1-fb: #333;
+  --color-structure-2-bg: #e8e288ff;
+  --color-structure-2-fb: #333;
+  --color-structure-3-bg: #7dce82ff;
+  --color-structure-3-fb: #333;
+  --color-structure-4-bg: #ce5374;
+  --color-structure-4-fb: #333;
+  --color-structure-5-bg: #dbbbf5;
+  --color-structure-5-fb: #333;
+
+  position: relative;
+
+  & .structure-debug {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    box-sizing: border-box;
+    margin: 0;
+    pointer-events: none;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 10000;
+      box-sizing: border-box;
+      pointer-events: none;
+      content: "";
+      border: solid var(--tag-color-bg) 4px;
+    }
+
+    &::after {
+      position: absolute;
+      z-index: 10000;
+      padding: 0.8em 0.4em;
+      font-family: monospace;
+      font-size: 11px;
+      font-weight: bold;
+      color: var(--tag-color-fg);
+      pointer-events: none;
+      content: attr(data-debug-tag) " - pLevel: " attr(data-debug-parent-level) " - Level: " attr(data-debug-level);
+      background: var(--tag-color-bg);
+    }
+  }
+
+}
+
+.structure-debug[data-debug-tag="article"] {
+  --tag-color-fg: var(--color-structure-2-fg);
+  --tag-color-bg: var(--color-structure-2-bg);
+
+  &::after {
+    top: 0;
+    right: 0;
+  }
+}
+
+.structure-debug[data-debug-tag="section"] {
+  --tag-color-fg: var(--color-structure-3-fg);
+  --tag-color-bg: var(--color-structure-3-bg);
+
+  &::after {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.structure-debug[data-debug-tag="main"] {
+  --tag-color-fg: var(--color-structure-1-fg);
+  --tag-color-bg: var(--color-structure-1-bg);
+
+  &::after {
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.structure-debug[data-debug-tag="div"] {
+  --tag-color-fg: var(--color-structure-5-fg);
+  --tag-color-bg: var(--color-structure-5-bg);
+
+  &::after {
+    top: 0;
+    left: 0;
+  }
+}
+
+</style>

src/components/base/ContentHeadline.vue

@@ -0,0 +1,107 @@
+<template>
+  <component
+    :is="tag || `h${contextLevel}`"
+    v-font="font"
+    v-bind="$attrs"
+    :data-debug="debug"
+    v-on="$listeners"
+  >
+    <slot />
+    <pre v-if="debug" :data-debug-context-level="contextLevel" />
+  </component>
+</template>
+
+<script>
+
+export default {
+
+  inject: {
+    parentLevel: {
+      from: 'parentLevel',
+      default: 1
+    }
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    tag: {
+      type: String,
+      default: null
+    },
+    font: {
+      type: [Object, Array],
+      default () {
+        return [];
+      }
+    }
+  },
+
+  data () {
+    return { debug: false };
+  },
+
+  computed: {
+    contextLevel () {
+      return getMax((this.parentLevel - (this.parentLevel % 2)) / 2);
+    }
+  },
+
+  mounted () {
+    this.debug = 'debug-headline' in this.$route.query;
+  }
+
+};
+
+function getMax (number) {
+  return Math.max(1, Math.min(number, 6));
+}
+
+</script>
+
+<style lang="postcss" scoped>
+* {
+  margin: 0;
+}
+
+[data-debug] {
+  position: relative;
+
+  & pre {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    margin: 0;
+    font-family: monospace;
+    font-weight: normal;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      box-sizing: border-box;
+      pointer-events: none;
+      content: "";
+      border: dotted #333 2px;
+    }
+
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      z-index: 10000;
+      padding: 5px;
+      font-size: 13px;
+      color: white;
+      letter-spacing: 0.1em;
+      content: "H" attr(data-debug-context-level);
+      background: #333;
+    }
+  }
+}
+</style>

src/components/layouts/DefaultContainer.vue → src/components/layouts/LostContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="tag"
-    class="layouts-default-container"
+    class="layouts-lost-container"
   >
     <slot name="background" />
     <slot name="container">
@@ -32,13 +32,9 @@ export default {
 </script>
 
 <style lang="postcss">
-.layouts-default-container {
+.layouts-lost-container {
   margin: 40px 0;
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   & .lost-flex-container {
     display: flex;