vielle.dev / site-archive
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add some base styles to the nav

afterlifepro 6f95d7ba c64da965

+63 -70
+63 -70
src/components/generic/Nav.astro
··· 6 6 --- 7 7 8 8 <header> 9 - { 10 - (() => { 11 - const a = (name: string, href: string) => <a {href}>{name}</a>; 12 - const render = (name: string, children: nav[]) => ( 13 - <details> 14 - <summary>{name}</summary> 15 - <ul> 16 - {children.map((x) => ( 17 - <li> 18 - {x.children 19 - ? render(x.name, x.children) 20 - : a(x.name, x.url || "")} 21 - </li> 22 - ))} 23 - </ul> 24 - </details> 25 - ); 26 - return data.map((entry) => ( 27 - <li> 28 - {entry.children 29 - ? render(entry.name, entry.children) 30 - : a(entry.name, entry.url || "")} 31 - </li> 32 - )); 33 - })() 34 - } 9 + <h1>🪤 | vielle.dev</h1> 10 + <ul> 11 + { 12 + (() => { 13 + const a = (name: string, href: string) => <a {href}>{name}</a>; 14 + const render = (name: string, children: nav[]) => ( 15 + <details> 16 + <summary>{name}</summary> 17 + <ul> 18 + {children.map((x) => ( 19 + <li> 20 + {x.children 21 + ? render(x.name, x.children) 22 + : a(x.name, x.url || "")} 23 + </li> 24 + ))} 25 + </ul> 26 + </details> 27 + ); 28 + return data.map((entry) => ( 29 + <li> 30 + {entry.children 31 + ? render(entry.name, entry.children) 32 + : a(entry.name, entry.url || "")} 33 + </li> 34 + )); 35 + })() 36 + } 37 + </ul> 35 38 </header> 36 39 37 40 <style> 38 - button { 39 - background-color: transparent; 40 - border: none; 41 - & svg { 42 - stroke: white; 43 - } 41 + header { 42 + background-color: white; 43 + border: 5px solid black; 44 + border-radius: 0 0 20px 20px; 45 + box-shadow: 0 10px; 46 + display: flex; 47 + flex-direction: row; 48 + align-items: center; 49 + justify-content: center; 50 + padding: 10px 40px; 44 51 } 45 52 46 - #nav-menu-close { 47 - float: right; 48 - height: 3em; 49 - } 50 - 51 - dialog { 52 - color: white; 53 - 54 - min-width: 200px; 55 - width: fit-content; 56 - max-width: 400px; 57 - height: 100vh; 58 - padding: 10px; 59 - 60 - background: black; 61 - border: none; 62 - 63 - position: fixed; 64 - top: 0; 65 - transition: 66 - left 0.2s, 67 - display 0.2s allow-discrete; 68 - 69 - &:popover-open { 70 - /* Post-Entry (Normal) State */ 71 - left: 0; 53 + ul { 54 + display: flex; 55 + flex-direction: row; 56 + align-items: center; 57 + justify-content: center; 58 + gap: 10px; 72 59 73 - /* Pre-Entry State */ 74 - @starting-style { 75 - left: -100%; 60 + & > li { 61 + list-style-type: none; 62 + display: flex; 63 + flex-direction: row; 64 + align-items: center; 65 + justify-content: center; 66 + gap: 10px; 67 + &:not(:first-child)::before { 68 + content: ""; 69 + display: block; 70 + width: 5px; 71 + height: 5px; 72 + border-radius: 2.5px; 73 + background-color: currentColor; 76 74 } 77 - } 78 - 79 - /* Exiting State */ 80 - &:not(:popover-open) { 81 - left: -100%; 82 75 } 83 76 } 84 77 85 - /* STUPID ISSUE (astro tries to add a tag to the backdrop) */ 86 - :global(::backdrop) { 87 - background: #00000080; 88 - backdrop-filter: blur(5px); 78 + h1 { 79 + margin-right: auto; 80 + font-size: 1.5rem; 81 + white-space: nowrap; 89 82 } 90 83 </style>