sage
/
kafka-dance-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A couple visual fixes

This commit is contained in:
Sage Vaillancourt 2022-09-03 13:34:59 -04:00
parent c19413a723
commit 531b913404
8 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.css
View File

@ -18,12 +18,6 @@
--column-margin-top: 4rem;
}
.root-div {
height: 100vh;
display: flex;
flex-direction: column;
}
select, button, input {
font-family: Roboto, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 90%;

2
src/app.html
View File

@ -7,6 +7,6 @@
%sveltekit.head%
</head>
<body>
<div class="root-div">%sveltekit.body%</div>
%sveltekit.body%
</body>
</html>

8
src/lib/header/NavBar.svelte
View File

@ -11,6 +11,7 @@
<div>
</div>
<div>
<ul data-sveltekit-prefetch>
{#each routes as route}
<li class:active={$page.url.pathname === route.path}>
@ -18,12 +19,15 @@
</li>
{/each}
</ul>
</div>
<div style="display: flex; align-items: center;">
<!--
<a title="Kafka Dance GitLab" href="https://gitlab.com/kafka-dance">
<img alt="GitLab Logo" style="height: 20px;"
<img alt="GitLab Logo" style="height: 18px; width: auto;"
class="white-glow"
src="/gitlab-logo-white.svg">
src="/gitlab-logo-white.png">
</a>
-->
</div>
</nav>

4
src/routes/+layout.svelte
View File

@ -17,11 +17,9 @@
flex-direction: column;
padding: 1rem 1rem 0;
width: 100%;
/*
max-width: 1024px;
*/
margin: 0 auto;
box-sizing: border-box;
align-items: center;
}
footer {

6
src/routes/+page.svelte
View File

@ -79,11 +79,11 @@ JSON.parse(`{
</script>
<!--
<div class="logo-json-box">
<!--
<img src="/json.png" alt="With Kafka Dance, browsing Kafka data is easy" />
-->
<img src="/json.png" alt="With Kafka Dance, browsing Kafka data is easy" />
</div>
-->
<div class="content">
<div class="eye-catch">
<h1>Data should be <span class="fun">Fun</span></h1>

4
src/routes/blog/+page.svelte
View File

@ -23,6 +23,7 @@
<style>
.with-image {
display: flex;
background-color: rgba(0, 0, 0, 0.03);
padding: 1em;
transition: background-color 300ms;
@ -30,6 +31,9 @@
.with-image:hover {
background-color: rgba(0, 0, 0, 0.08);
}
.with-image img {
max-width: 90%;
}
.blog-entry {
display: flex;
flex-direction: column;

13
src/routes/blog/[post]/+page.svelte
View File

@ -6,16 +6,25 @@
<h1>{data.metadata.title}</h1>
<img src={data.metadata.headerImage} alt={data.metadata.headerImageAlt}/>
</div>
<svelte:component this={data.content} />
<div class="content">
<svelte:component this={data.content} />
</div>
<style>
.content {
max-width: 50vw;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
}
.title-with-image {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
line-height: 100%;
}
.title-with-image img {
margin: 2em 2em 0;

7
src/routes/blog/what-is-kafka.md
View File

@ -6,4 +6,9 @@ headerImage: "/kafka-logo.png"
headerImageAlt: "Kafka's logo"
---
Initially built by LinkedIn, Kafka
Initially built by LinkedIn, Apache Kafka is a "distributed event store" and "stream processing" platform.
But what does that mean exactly?
## Distributed Event Store
## Stream Processing