Resolve "use CSS for header"

2025-08-16 00:40:32 +02:00
parent 60d314abaf
commit c8736577e5
18 changed files with 464 additions and 162 deletions
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+</script>
+<template>
+  <ul>
+    <li><RouterLink to="/">Home</RouterLink></li>
+    <li><RouterLink to="/comics">Comics</RouterLink></li>
+    <li><RouterLink to="/tysc">TYSC</RouterLink></li>
+    <li><RouterLink to="/mediq">Media</RouterLink></li>
+    <li style="float: right"><RouterLink to="/about">About</RouterLink></li>
+  </ul>
+</template>
+<style lang="css" scoped>
+nav {
+  width: 100%;
+  font-size: 12px;
+  text-align: left;
+  margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: transparent;
+}
+
+nav a {
+  display: inline-block;
+  padding: 0 1rem;
+  border-left: 1px solid var(--color-border);
+}
+
+nav a:first-of-type {
+  border: 0;
+}
+ul {
+  position: sticky;
+  width: 90%;
+  align-items: center;
+  top: 0;
+  list-style-type: none;
+  margin: 1em;
+  padding: 1em;
+  overflow: hidden;
+  background-color: lightgray;
+  border-radius: 10px;
+}
+
+li {
+  float: left;
+  border-right: 1px solid #bbb;
+}
+
+li:last-child {
+  border-right: none;
+}
+
+li a {
+  display: block;
+  color: darkblue;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+li a:hover:not(.active) {
+  background-color: gray;
+}
+
+.active {
+  background-color: #04aa6d;
+}
+</style>