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; --column-margin-top: 4rem;
} }
.root-div {
height: 100vh;
display: flex;
flex-direction: column;
}
select, button, input { select, button, input {
font-family: Roboto, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: Roboto, Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 90%; font-size: 90%;

2
src/app.html
View File

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

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

@ -11,19 +11,23 @@
<div> <div>
</div> </div>
<ul data-sveltekit-prefetch> <div>
{#each routes as route} <ul data-sveltekit-prefetch>
<li class:active={$page.url.pathname === route.path}> {#each routes as route}
<a href={route.path}>{route.name}</a> <li class:active={$page.url.pathname === route.path}>
</li> <a href={route.path}>{route.name}</a>
{/each} </li>
</ul> {/each}
</ul>
</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: 20px;" <img alt="GitLab Logo" style="height: 18px; width: auto;"
class="white-glow" class="white-glow"
src="/gitlab-logo-white.svg"> src="/gitlab-logo-white.png">
</a> </a>
-->
</div> </div>
</nav> </nav>

4
src/routes/+layout.svelte
View File

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

6
src/routes/+page.svelte
View File

@ -79,11 +79,11 @@ JSON.parse(`{
</script> </script>
<!--
<div class="logo-json-box"> <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>
-->
<div class="content"> <div class="content">
<div class="eye-catch"> <div class="eye-catch">
<h1>Data should be <span class="fun">Fun</span></h1> <h1>Data should be <span class="fun">Fun</span></h1>

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

@ -23,6 +23,7 @@
<style> <style>
.with-image { .with-image {
display: flex;
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;
@ -30,6 +31,9 @@
.with-image:hover { .with-image:hover {
background-color: rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.08);
} }
.with-image img {
max-width: 90%;
}
.blog-entry { .blog-entry {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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

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