design generic page

2023-11-07 10:56:09 +01:00
parent 2d71b09368
commit 50c0934a70
44 changed files with 585 additions and 1 deletions
--- a/layouts/PageHeader.vue
+++ b/layouts/PageHeader.vue
@ -0,0 +1,74 @@
+<template>
+    <header>
+        <img id="header-logo"
+            loading="lazy" src="../tüit-logo.svg.png" />
+        <div class="profile">
+            <div class="username">username</div>
+            <div class="picture">
+                <img id="picture"
+                    loading="lazy" src="" />
+            </div>
+        </div>
+    </header>
+</template>
+
+
+<script>
+
+export default {
+    name: "PageHeader",
+}
+
+</script>
+
+
+<style>
+
+    * {
+        box-sizing: border-box;
+    }
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        border-bottom: 1px solid #000;
+        background-color: #2c2c2c;
+        height: 60px;
+        padding: 10px 20px;
+    }
+    
+    #header-logo {
+        object-fit: contain;
+        object-position: center;
+        width: 80px;
+        height: 40px;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    .profile {
+        align-items: flex-end;
+        display: flex;
+        gap: 10px;
+        padding: 0 30px;
+    }
+    .username {
+        color: #fff;
+        text-align: right;
+        letter-spacing: 0.8px;
+        align-self: center;
+        margin: auto 0;
+        font: 200 14px Overpass, sans-serif;
+    }
+    .picture {
+        display: flex;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        background-color: #fff;
+    }
+
+</style>