feat: css tinkering

loks0n · May 20, 2023 · a650d11 · a650d11
1 parent 7b3581d
commit a650d11
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 32 deletions.
diff --git a/src/app.css b/src/app.css
@@ -56,27 +56,31 @@ h1 {
  line-height: 1.1;
  margin-bottom: 0.5em;
  color: darkslategray;
+ font-family: 'Courier New', Courier, monospace;
 }
 
 h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 1.5em;
  color: darkslategray;
+ font-family: 'Courier New', Courier, monospace;
 }
 
 h3 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 0.5em;
  color: darkslategray;
+ font-family: 'Courier New', Courier, monospace;
 }
 
 h4 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 0.5em;
  color: darkslategray;
+ font-family: 'Courier New', Courier, monospace;
 }
 
 @supports (font-variation-settings: normal) {

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -29,13 +29,14 @@
  footer {
  margin-top: 0 1.5em;
  padding: 1.5em;
- background-color: rgb(191, 196, 200);
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
- gap: 2em;
+ gap: 3em;
+ background-color: rgba(215, 209, 196, 0.5);
+ font-size: 0.9rem;
  }
 
  small {

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -0,0 +1,26 @@
+<header>
+ <h1>Luke B. Silver</h1>
+</header>
+
+<style>
+ header {
+ background-color: #e3ded5;
+ background: repeating-linear-gradient(
+ 45deg,
+ rgba(215, 209, 196, 1),
+ rgba(215, 209, 196, 1) 5px,
+ #e3ded5 5px,
+ #e3ded5 25px
+ );
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ }
+
+ h1 {
+ font-size: 4.25rem;
+ text-align: center;
+ margin: 0.5em 0;
+ }
+</style>
diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
@@ -3,40 +3,64 @@
 </script>
 
 <nav>
- <ul>
- <li>
- <a href="/" class:secondary={$page.url.pathname === '/'}>Blog</a>
- </li>
- <li>
- <a href="/projects" class:secondary={$page.url.pathname === '/projects'}>Projects</a>
- </li>
- </ul>
- <ul>
- <li>
- <a href="/about" class:secondary={$page.url.pathname === '/about'}>About</a>
- </li>
- </ul>
+ <div>
+ <ul>
+ <li>
+ <a href="/" class:secondary={$page.url.pathname === '/'}>Blog</a>
+ </li>
+ <li>
+ <a href="/projects" class:secondary={$page.url.pathname === '/projects'}>Projects</a>
+ </li>
+ </ul>
+ <ul>
+ <li>
+ <a href="/about" class:secondary={$page.url.pathname === '/about'}>About</a>
+ </li>
+ </ul>
+ </div>
 </nav>
 
 <style>
  nav {
- max-width: 35em;
  display: flex;
+ justify-content: center;
  width: 100%;
- padding: 1.5em;
- align-items: center;
- justify-content: space-between;
+ background-color: darkslategray;
  }
 
- .secondary {
- color: grey;
- text-decoration: none;
+ div {
+ max-width: 40em;
+ padding: 1em 2em;
+ display: flex;
+ flex: 1;
+ gap: 1em;
+ align-items: center;
+ justify-content: space-between;
  }
 
  ul {
  list-style: none;
  display: flex;
  align-items: center;
+ padding: 0;
  gap: 1em;
  }
+
+ a {
+ display: block;
+ color: rgb(216, 216, 216);
+ border: 2px solid rgb(216, 216, 216);
+ padding: 1em;
+ min-width: 10ch;
+ text-decoration: none;
+ border-radius: 0.5em;
+ font-weight: 600;
+ text-align: center;
+ }
+
+ a:hover,
+ .secondary {
+ background-color: rgb(216, 216, 216);
+ color: darkslategray;
+ }
 </style>
diff --git a/src/routes/(index)/+page.svelte b/src/routes/(index)/+page.svelte
@@ -10,10 +10,9 @@
 </svelte:head>
 
 <article>
- <h1>My Blog</h1>
+ <h1>This is my blog</h1>
  <ul>
- <hr />
- {#each data.posts as post}
+ {#each data.posts as post, index}
  <li>
  <small>
  {new Date(post.date).toDateString()}
@@ -22,7 +21,9 @@
  {post.title}
  </a>
  </li>
- <hr />
+ {#if index !== data.posts.length - 1}
+ <hr />
+ {/if}
  {/each}
  </ul>
 </article>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
  import { onMount } from 'svelte';
  import { dev } from '$app/environment';
  import Footer from '$lib/components/Footer.svelte';
+ import Header from '$lib/components/Header.svelte';
 
  onMount(() => {
  if (!dev) splitbee.init();
@@ -18,6 +19,7 @@
 </svelte:head>
 
 <main>
+ <Header />
  <Nav />
  <div>
  <slot />
@@ -36,9 +38,9 @@
  }
 
  div {
- width: min(100%, 35em);
- padding: 1.5em;
+ width: min(100%, 40em);
+ padding: 2em;
  flex: 1;
- margin-bottom: 2em;
+ margin: 3em 0;
  }
 </style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -8,14 +8,15 @@
 </svelte:head>
 
 <article>
- <h1>About Me</h1>
+ <h1>This is my face</h1>
+
+ <img alt="My face" src={meSrc} />
 
  <p>
  I'm a <strong>Software Engineer</strong> at <a href="https://appwrite.io">Appwrite</a>. I've
  previously worked at <a href="https://www.thg.com">THG</a> and
  <a href="https://samsung.com">Samsung</a>.
  </p>
- <img alt="My face" src={meSrc} />
 
  <p>
  I have an interesting background in performance optimization & scalability. You can contact me <a
@@ -31,5 +32,6 @@
  img {
  max-width: min(100%, 20em);
  border-radius: 0.5em;
+ margin-top: 0;
  }
 </style>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -9,7 +9,7 @@
 </svelte:head>
 
 <article>
- <h1>My Projects</h1>
+ <h1>These are my projects</h1>
  <ul>
  {#each data.projects as project}
  <li>