default layout: extract parts

src/_assets/css/parts/hero.css

@@ -0,0 +1,92 @@
+.hero {
+  position: relative;
+
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+
+  padding: calc(0.5 * var(--step));
+  --hero-border: calc(0.5 * var(--step)) solid var(--color-inactive);
+
+  font-family: Xecut;
+  font-size: calc(3 * var(--step));
+}
+@media (max-width: 500px) {
+  .hero {
+    align-items: normal;
+    flex-direction: row-reverse;
+    font-size: calc(2 * var(--step));
+  }
+}
+
+.hero:before,
+.hero:after {
+  content: '';
+
+  position: absolute;
+  right: 0;
+  z-index: -1;
+
+  width: 90%;
+  height: calc(1 * var(--step));
+  border-right: var(--hero-border);
+  border-left: var(--hero-border);
+}
+.hero:before {
+  top: calc(0.5 * var(--step));
+  border-top: var(--hero-border);
+}
+.hero:after {
+  bottom: calc(1 * var(--step));
+  border-bottom: var(--hero-border);
+}
+
+.tags {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.tag {
+  padding: calc(0.25 * var(--step)) calc(1.5 * var(--step));
+  border: var(--hero-border);
+  outline: var(--hero-border);
+  background: var(--color-bg);
+}
+@media (max-width: 500px) {
+  .tag {
+    flex-grow: 1;
+  }
+}
+
+.tower_cell {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  border: var(--hero-border);
+  outline: var(--hero-border);
+  background: var(--color-bg);
+}
+@media (max-width: 500px) {
+  .tower_cell {
+    align-items: flex-end;
+  }
+}
+
+.tower {
+  width: calc(18 * var(--step));
+  margin: calc(4 * var(--step));
+}
+@media (prefers-color-scheme: dark) {
+  .tower {
+    filter: invert(1);
+  }
+}
+@media (max-width: 500px) {
+  .tower {
+    max-width: calc(10 * var(--step));
+    margin: calc(1 * var(--step));
+  }
+}