Blog: styles

src/routes/blog/+page.svelte

@@ -106,7 +106,7 @@
   </section>
 </main>
 
-<style>
+<style lang="scss">
   .posts {
     list-style: none;
     margin: 0;
@@ -115,6 +115,10 @@
     grid-template-columns: 100%;
     gap: var(--spacing-base);
     max-width: 100%;
+
+    @media screen and (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
   }
 
   .post {
@@ -127,6 +131,10 @@
 
   .post:hover {
     color: var(--brand-orange);
+    background-color: white;
+    border: 1px solid var(--brand-orange);
+    scale: 1.02;
+    box-shadow: 10px 10px 10px 10px var(--gray-200);
   }
 
   .post a {
@@ -138,7 +146,8 @@
     text-decoration: underline;
     font-family: var(--font-family-title);
     font-weight: 600;
-    padding-bottom: 8px;
+    padding-bottom: 4px;
+    font-size: 1.1rem;
   }
 
   .post-date {
@@ -146,9 +155,10 @@
   }
 
   .post-preview {
-    font-size: 0.9rem;
-    line-height: 120%;
+    font-size: 0.95rem;
+    line-height: 140%;
     color: var(--gray-600);
+    padding-bottom: 2px;
   }
 
   .days-since {

src/routes/blog/[slug]/+page.svelte

@@ -49,12 +49,12 @@
   </article>
 </main>
 
-<style lang="scss" global>
+<style lang="scss">
   header {
     padding-top: 24px;
   }
 
-  #article {
+  :global(#article) {
     max-width: 95%;
     width: 65ch;
 

src/styles/thomaswilson.css

@@ -26,6 +26,11 @@
         sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     --font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
 
+    --line-height: 120%;
+    --line-height-sm: 120%;
+    --line-height-md: 138%;
+    --line-height-lg: 145%;
+
     --font-size-base: 1rem;
     --spacing-base: 1rem;
     --spacing-sm: 0.25rem;
@@ -35,6 +40,7 @@
     --navbar-height: 75px;
 
     --font-size-sm: 0.875rem;
+    --font-size: 1.08rem;
     --font-size-md: 1.25rem;
     --font-size-lg: 1.5rem;
 
@@ -48,7 +54,7 @@
 body {
     font-family: var(--font-family-sans);
     color: var(--gray-900);
-    line-height: 130%;
+    line-height: var(--line-height-md);
     min-height: 100vh;
 }
 
@@ -68,7 +74,7 @@ body {
     width: 100%;
     max-width: 750px;
     font-size: 1.19rem;
-    line-height: 134%;
+    line-height: var(--line-height-md);
     padding-bottom: var(--spacing-base);
     color: var(--gray-700);
     padding-bottom: 2rem;
@@ -84,7 +90,7 @@ body {
 
 .thomaswilson-strapline p {
     font-size: 1.6rem;
-    line-height: 131%;
+    line-height: var(--line-height-md);
     letter-spacing: -0.25px;
     font-weight: 250;
 }
@@ -102,14 +108,14 @@ h6 {
     color: var(--gray-800);
     padding-top: 8px;
     padding-bottom: 6px;
-    line-height: 120%;
+    line-height: var(--line-height);
 }
 
 p,
 li,
 a {
-    font-size: 1.08rem;
-    line-height: 143%;
+    font-size: var(--font-size);
+    line-height: var(--line-height-lg);
     font-family: var(--font-family-sans);
     margin: 0;
     color: var(--gray-800);