feat: styling

loks0n · Jun 21, 2023 · 20a2891 · 20a2891
1 parent d1ad563
commit 20a2891
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 15 deletions.
diff --git a/src/app.css b/src/app.css
@@ -55,6 +55,7 @@ h1 {
  font-weight: 800;
  line-height: 1.1;
  margin: 0 auto 0.5em;
+ text-wrap: balance;
  color: darkslategray;
  font-family: 'Azeret Mono Variable', monospace;
 }
@@ -63,6 +64,7 @@ h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 1.5em;
+ text-wrap: balance;
  color: darkslategray;
  font-family: 'Azeret Mono Variable', monospace;
 }
@@ -71,6 +73,7 @@ h3 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 0.5em;
+ text-wrap: balance;
  color: darkslategray;
  font-family: 'Azeret Mono Variable', monospace;
 }
@@ -79,6 +82,7 @@ h4 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 0.5em;
+ text-wrap: balance;
  color: darkslategray;
  font-family: 'Azeret Mono Variable', monospace;
 }
@@ -99,6 +103,7 @@ h4 {
 
 a {
  color: darkslategray;
+ font-family: 'Azeret Mono Variable', monospace;
 }
 
 a:visited {

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -37,6 +37,7 @@
  gap: 3em;
  background-color: rgba(215, 209, 196, 0.5);
  font-size: 0.9rem;
+ font-family: 'Azeret Mono Variable', monospace;
  }
 
  small {

diff --git a/src/lib/content/posts/say-your-name-and-a-fun-fact-about-yourself/index.svx b/src/lib/content/posts/say-your-name-and-a-fun-fact-about-yourself/index.svx
@@ -6,7 +6,7 @@ date: 2023-06-21
 Hi! I'm Luke.
 
 - My favourite emoji is 🧐.
-- For about a week at age 14 I only drank from specific sources after watching a YouTube documentary the government corrupting the water supply with fluouride.
+- For about a week at age 14 I only drank from specific sources after watching a YouTube documentary about the government corrupting the water supply with fluouride.
 - I am shortest serving president of the University of York fencing club's history.
 - I frequently drink whole/full-fat milk directly from the bottle.
 - I'm hoping to call my future children Rondo, Octavia and Felix - in that order.

diff --git a/src/routes/(index)/+page.svelte b/src/routes/(index)/+page.svelte
@@ -10,16 +10,15 @@
 </svelte:head>
 
 <article>
- <h1>This is my blog</h1>
  <ul>
  {#each data.posts as post, index}
  <li>
- <small>
- {new Date(post.date).toDateString()}
- </small>
  <a href={`/${post.slug}`}>
  {post.title}
  </a>
+ <small>
+ {new Date(post.date).toDateString()}
+ </small>
  </li>
  {#if index !== data.posts.length - 1}
  <hr />
@@ -31,9 +30,9 @@
 <style>
  small {
  color: rgb(186, 186, 186);
- flex: 1;
  font-size: 0.75rem;
  font-family: monospace;
+ text-align: right;
  align-self: center;
  }
 
@@ -46,13 +45,14 @@
  }
 
  a {
- text-align: right;
+ text-align: left;
+ text-wrap: balance;
  }
 
  li {
  list-style: none;
  display: grid;
- grid-template-columns: 1fr 2fr;
+ grid-template-columns: auto auto;
  gap: 1em;
  }
 

diff --git a/src/routes/(post)/[slug]/+page.svelte b/src/routes/(post)/[slug]/+page.svelte
@@ -38,8 +38,9 @@
  }
 
  h1 {
- margin-bottom: 0.25em;
+ margin-bottom: 0.5em;
  text-align: center;
+ font-size: 1.75rem;
  }
 
  small {

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -8,8 +8,6 @@
 </svelte:head>
 
 <article>
- <h1>This is my face</h1>
-
  <div>
  <img alt="My face" src={meSrc} />
  <ul>
@@ -29,9 +27,6 @@
 </article>
 
 <style>
- h1 {
- margin-bottom: 0.5em;
- }
  img {
  max-width: 90%;
  border-radius: 0.5em;

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -9,7 +9,6 @@
 </svelte:head>
 
 <article>
- <h1>These are my projects</h1>
  <ul>
  {#each data.projects as project}
  <li>