style: improvements

src/app.css

@@ -54,7 +54,7 @@ h1 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
- margin-bottom: 0.5em;
+ margin: 0 auto 0.5em;
  color: darkslategray;
  font-family: 'Courier New', Courier, monospace;
 }

src/lib/components/Header.svelte

@@ -9,8 +9,8 @@
  45deg,
  rgba(215, 209, 196, 1),
  rgba(215, 209, 196, 1) 5px,
- #e3ded5 5px,
- #e3ded5 25px
+ rgb(227, 222, 213) 5px,
+ rgb(227, 222, 213) 25px
  );
  display: flex;
  width: 100%;
@@ -21,6 +21,6 @@
  h1 {
  font-size: 4.25rem;
  text-align: center;
- margin: 0.5em 0;
+ margin: 0.125em 0;
  }
 </style>

src/lib/components/Nav.svelte

@@ -11,8 +11,6 @@
  <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>
@@ -25,42 +23,46 @@
  display: flex;
  justify-content: center;
  width: 100%;
- background-color: darkslategray;
  }
 
  div {
  max-width: 40em;
- padding: 1em 2em;
+ padding: 0.5em 2em;
  display: flex;
  flex: 1;
- gap: 1em;
+
  align-items: center;
  justify-content: space-between;
  }
 
  ul {
  list-style: none;
  display: flex;
+ justify-content: center;
  align-items: center;
  padding: 0;
- gap: 1em;
+ gap: 0.5em;
  }
 
  a {
  display: block;
- color: rgb(216, 216, 216);
- border: 2px solid rgb(216, 216, 216);
- padding: 1em;
+ background-color: rgb(227, 222, 213);
+ border: 0.25em solid rgb(216, 216, 216);
+ padding: 0.25em 0.5em;
  min-width: 10ch;
  text-decoration: none;
- border-radius: 0.5em;
  font-weight: 600;
  text-align: center;
+ font-family: 'Courier New', Courier, monospace;
  }
 
  a:hover,
  .secondary {
  background-color: rgb(216, 216, 216);
  color: darkslategray;
  }
+
+ .secondary {
+ cursor: default;
+ }
 </style>

src/routes/(post)/[slug]/+page.svelte

@@ -12,11 +12,11 @@
 </svelte:head>
 
 <article>
- <hr />
  <header>
  <h1>{data.post.title}</h1>
  <small>authored by Luke B. Silver on {date}</small>
  </header>
+ <hr />
  <svelte:component this={data.component} />
  <hr />
 </article>
@@ -27,7 +27,10 @@
  header {
  display: flex;
  flex-direction: column;
- margin-bottom: 1em;
+ }
+
+ hr {
+ margin-bottom: 2em;
  }
 
  article {
@@ -41,5 +44,6 @@
  small {
  font-size: 0.9rem;
  opacity: 0.5;
+ text-align: center;
  }
 </style>

src/routes/+layout.svelte

@@ -40,7 +40,8 @@
  div {
  width: min(100%, 40em);
  padding: 2em;
+ margin-top: 1em;
+ margin-bottom: 2em;
  flex: 1;
- margin: 3em 0;
  }
 </style>

src/routes/about/+page.svelte

@@ -1,6 +1,6 @@
 <script>
  import { SITE_TITLE } from '$lib/config';
- import meSrc from './me.jpg';
+ import meSrc from './me.webp';
 </script>
 
 <svelte:head>
@@ -10,28 +10,55 @@
 <article>
  <h1>This is my face</h1>
 
- <img alt="My face" src={meSrc} />
+ <div>
+ <img alt="My face" src={meSrc} />
+ <ul>
+ <li>
+ 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>.
+ </li>
 
- <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>
+ <li>I have an interesting background in performance optimization & scalability.</li>
 
- <p>
- I have an interesting background in performance optimization & scalability. You can contact me <a
- href="https://www.linkedin.com/in/lukebsilver/">via LinkedIn</a
- >
- </p>
+  <li>
+  You can contact me <a href="https://www.linkedin.com/in/lukebsilver/">via LinkedIn</a>
+ </li>
+ </ul>
+ </div>
 </article>
 
 <style>
  h1 {
  margin-bottom: 0.5em;
  }
  img {
- max-width: min(100%, 20em);
+ max-width: 90%;
  border-radius: 0.5em;
- margin-top: 0;
+ margin: 0 auto;
+ }
+ ul {
+ display: flex;
+ flex-direction: column;
+ gap: 1em;
+ }
+
+ div {
+ display: flex;
+ flex-direction: column;
+ gap: 2em;
+ }
+
+ @media (min-width: 768px) {
+ img {
+ max-width: 50%;
+ }
+ div {
+ flex-direction: row;
+ }
+
+ ul {
+ padding: 0;
+ }
  }
 </style>