A couple visual fixes.

Add GitLab link back to nav bar.
This commit is contained in:
Sage Vaillancourt 2022-09-03 23:03:11 -04:00
parent 531b913404
commit ce0fc46e0f
3 changed files with 21 additions and 8 deletions

View File

@ -1,7 +1,6 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
const routes = [ const routes = [
{ path: '/', name: 'Home' },
{ path: '/download', name: 'Download' }, { path: '/download', name: 'Download' },
{ path: '/blog', name: 'Blog' }, { path: '/blog', name: 'Blog' },
] ]
@ -13,21 +12,22 @@
</div> </div>
<div> <div>
<ul data-sveltekit-prefetch> <ul data-sveltekit-prefetch>
<li class:active={$page.url.pathname === '/'}>
<a href='/'>Home</a>
</li>
{#each routes as route} {#each routes as route}
<li class:active={$page.url.pathname === route.path}> <li class:active={$page.url.pathname.startsWith(route.path)}>
<a href={route.path}>{route.name}</a> <a href={route.path}>{route.name}</a>
</li> </li>
{/each} {/each}
</ul> </ul>
</div> </div>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<!--
<a title="Kafka Dance GitLab" href="https://gitlab.com/kafka-dance"> <a title="Kafka Dance GitLab" href="https://gitlab.com/kafka-dance">
<img alt="GitLab Logo" style="height: 18px; width: auto;" <img alt="GitLab Logo" style="height: 18px; width: auto;"
class="white-glow" class="white-glow"
src="/gitlab-logo-white.png"> src="/gitlab-logo-white.svg">
</a> </a>
-->
</div> </div>
</nav> </nav>
@ -50,7 +50,7 @@
} }
li { li {
content: ''; content: '';
padding: 0 2em; padding: 0 1em;
white-space: nowrap; white-space: nowrap;
} }
li a { li a {
@ -59,4 +59,9 @@
li.active::before { li.active::before {
content: '> ' content: '> '
} }
@media (min-width: 480px) {
li {
padding: 0 2em;
}
}
</style> </style>

View File

@ -24,6 +24,7 @@
<style> <style>
.with-image { .with-image {
display: flex; display: flex;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.03); background-color: rgba(0, 0, 0, 0.03);
padding: 1em; padding: 1em;
transition: background-color 300ms; transition: background-color 300ms;

View File

@ -11,8 +11,12 @@
</div> </div>
<style> <style>
h1 {
margin-bottom: 0;
}
.content { .content {
max-width: 50vw; max-width: 90vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -27,7 +31,7 @@
justify-content: center; justify-content: center;
} }
.title-with-image img { .title-with-image img {
margin: 2em 2em 0; margin: 0 2em 0;
} }
/* /*
.title-with-image h1 { .title-with-image h1 {
@ -42,6 +46,9 @@
max-width: 80vw; max-width: 80vw;
} }
@media (min-width: 720px) { @media (min-width: 720px) {
.content {
max-width: 50vw;
}
.title-with-image img { .title-with-image img {
max-width: 30vw; max-width: 30vw;
} }