top-bar

2025-12-15 22:11:23 +01:00 · 2025-12-15 22:11:23 +01:00 · e75e043899
commit e75e043899
5 changed files with 216 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,79 @@
+body {
+  margin: 0;
+  padding: 0;
+  height: 200vh;
+}
+
+header {
+  position: fixed;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 15px;
+
+  box-sizing: border-box;
+
+  box-shadow: 0 10px 10px lightblue;
+}
+
+header > img {
+  aspect-ratio: initial;
+  height: 50px;
+}
+
+/*https://getcssscan.com/css-buttons-examples button 6*/
+
+nav > a {
+  align-items: center;
+  justify-content: center;
+
+  background-color: #ffffff;
+
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.25rem;
+
+  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
+  box-sizing: border-box;
+
+  color: rgba(0, 0, 0, 0.85);
+  cursor: pointer;
+  display: inline-flex;
+
+  font-family:
+    system-ui,
+    -apple-system,
+    system-ui,
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+
+  margin: 0;
+  min-height: 3rem;
+  padding: calc(0.675rem - 1px) calc(1.2rem - 1px);
+  position: relative;
+  text-decoration: none;
+  transition: all 250ms;
+  user-select: none;
+  vertical-align: baseline;
+  width: auto;
+
+  animation: 0.5s;
+}
+
+.current-tab {
+  background-color: #bbbbbb !important;
+}
+
+nav > a:hover {
+  background-color: #eeeeee;
+}
+
+nav {
+  display: flex;
+  gap: 20px;
+  justify-content: space-between;
+}