diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte index 808c647..e4dcaac 100644 --- a/src/components/Nav.svelte +++ b/src/components/Nav.svelte @@ -1,21 +1,36 @@ -<script> - export let segment; - export let rightComponent; +<script lang="ts"> + export let segment: any; + export let rightComponent: any; </script> <style> - /* - .right { - margin-left: auto; - align-self: flex-end !important; - } - */ - a { font-size: 1rem; text-align: center; } + + nav { + max-width: 1200px; + margin: 0 auto; + } + + ul { + display: flex; + font-weight: bold; + text-align: center; + } + + ul li a { + text-decoration: none; + transition: color 0.1s linear; + padding: 4px 12px; + } + + ul li a:hover { + border-bottom: 2px solid var(--line-color); + } </style> + <header> <nav class="navbar navbar-expand"> <!-- <a class="navbar-brand" href="/"></a> @@ -37,4 +52,4 @@ </li> </ul> </nav> -</header> \ No newline at end of file +</header> diff --git a/src/routes/admin/index.svelte b/src/routes/admin/index.svelte index 05eaf23..a6276fd 100644 --- a/src/routes/admin/index.svelte +++ b/src/routes/admin/index.svelte @@ -2,6 +2,40 @@ import Banner from '../../components/Banner.svelte' </script> +<style> + section { + display: flex; + flex-wrap: wrap; + flex-direction: column; + } + + ul { + padding: 0 !important; + } + + li { + display: flex; + padding-bottom: 10px; + margin-bottom: 5px; + } + + li a { + display: flex; + font-weight: bold; + font-size: 1.25rem; + border-bottom: 2px solid transparent; + } + + li a:hover { + border-bottom: 2px solid white; + } + + h2 { + line-height: 1.4; + margin-bottom: 20px; + } +</style> + <svelte:head> <title>Quartznet - Admin</title> </svelte:head> @@ -10,6 +44,20 @@ <main class="container"> <section> - this is not done + <h2>Services</h2> + <ul> + <li> + <a href="https://quartznet.info/status">Status</a> + </li> + <li> + <a href="https://quartznet.info/music/">MyMPD</a> + </li> + <li> + <a href="https://quartznet.info/media/web">Jellyfin</a> + </li> + <li> + <a href="https://quartznet.info/git">Gitea</a> + </li> + </ul> </section> -</main> \ No newline at end of file +</main> diff --git a/static/css/global.css b/static/css/global.css index 571871e..ed250a2 100755 --- a/static/css/global.css +++ b/static/css/global.css @@ -49,41 +49,15 @@ header { padding-bottom: 4px; } -nav { - /* border: 2px solid red; */ - /* align-items: center; */ - /* display: flex; */ - /* flex-direction: row; */ - /* justify-content: space-between; */ - max-width: 1200px; - margin: 0 auto; -} - -nav li { - font-size: 1rem; - font-weight: bold; - text-align: center; -} - -/* Link effects */ -nav li a { - padding: 4px 8px; - text-decoration: none; - transition: color 0.1s linear; -} - -nav li a:hover { - border-bottom: 2px solid var(--line-color); - text-decoration: none; -} - a { + text-decoration: none; color: var(--link-color); transition: color 0.1s linear; } a:hover { color: var(--link-color-hover); + text-decoration: none; } /* Banner */