Finishing touches

taniarascia · Sep 3, 2021 · b5853ca · b5853ca
1 parent f14bf14
commit b5853ca
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 44 deletions.
diff --git a/content b/content
diff --git a/src/assets/Minus.js b/src/assets/Minus.js
@@ -1,10 +1,7 @@
 import React from 'react'
 
 export const Minus = () => (
-  <svg width="12" height="12" viewBox="0 0 16 16">
-    <path
-      fill="#ddd"
-      d="M2 7h12c0.552 0 1 0.448 1 1s-0.448 1-1 1h-12c-0.552 0-1-0.448-1-1s0.448-1 1-1z"
-    ></path>
+  <svg viewBox="0 0 80 80" width="8" height="10">
+    <rect y="30" width="80" height="14"></rect>
   </svg>
 )
diff --git a/src/components/FileHeader.js b/src/components/FileHeader.js
@@ -8,6 +8,13 @@ import moon from '../assets/moon.png'
 export const FileHeader = ({ setCollapsed, onUpdateTheme, theme }) => {
   return (
     <header className="file-header">
+      <button
+        onClick={() => setCollapsed((prev) => !prev)}
+        className="desktop-only"
+        title="Collapse Sidebar"
+      >
+        <Hamburger />
+      </button>
       <Link to="/" className="file">
         <span>TaniaRascia.com</span>
       </Link>
@@ -17,12 +24,6 @@ export const FileHeader = ({ setCollapsed, onUpdateTheme, theme }) => {
           <span>{theme === 'dark' ? 'Dark' : 'Light'}</span>
           <img src={moon} alt="Theme" />
         </button>
-        <button
-          onClick={() => setCollapsed((prev) => !prev)}
-          className="desktop-only"
-        >
-          <Hamburger />
-        </button>
       </div>
     </header>
   )

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -22,7 +22,7 @@ export const Footer = () => {
     <footer className="footer">
       <section>
         <nav>
-          <span>Made by Tania Rascia</span>
+          <span className="desktop-only">Made by Tania Rascia</span>
           {links.map((link) => (
             <a
               href={link.url}

diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -60,7 +60,11 @@ export const Sidebar = () => {
     <aside className="sidebar">
       <div className="title">
         <span>Categories</span>
-        <button onClick={onCollapseCategories} className="collapse-categories">
+        <button
+          onClick={onCollapseCategories}
+          className="collapse-categories"
+          title="Collapse Categories"
+        >
           <div>
             <Minus />
           </div>

diff --git a/src/light-theme.css b/src/light-theme.css
@@ -22,9 +22,9 @@
   --blockquote-color: #111;
   --inline-code-background-color: rgba(0, 0, 0, 0.05);
   --inline-code-color: #111;
-  --h2-filter: brightness(0.7);
-  --h3-filter: brightness(0.8);
-  --h4-filter: brightness(0.9);
+  --h2-filter: brightness(0.8);
+  --h3-filter: brightness(0.9);
+  --h4-filter: brightness(0.95);
   --icon-filter: brightness(0.8);
   --dark-opacity: rgba(0, 0, 0, 0.05);
   --dark-opacity-hover: rgba(0, 0, 0, 0.1);

diff --git a/src/new-moon.css b/src/new-moon.css
@@ -323,3 +323,14 @@ code[class*='language-'] ::selection {
   color: inherit;
   background: rgba(150, 150, 150, 0.3) !important;
 }
+
+@media screen and (max-width: 1000px) {
+  pre[class*='language-'] {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+  code[class*='language-'],
+  pre[class*='language-'] {
+    font-size: 0.9rem;
+  }
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -62,6 +62,13 @@ export default function WebsiteIndex({ data }) {
         <div className="container">
           <h2>Latest Articles</h2>
           <Posts data={simplifiedLatest} />
+          <h2>Newsletter</h2>
+          <p>
+            Subscribe to the{' '}
+            <a href="https://taniarascia.substack.com/subscribe">newsletter</a>{' '}
+            to get my latest content by email. Not on any set schedule.
+            Unsubscribe anytime.
+          </p>
         </div>
       </article>
     </>
@@ -73,7 +80,7 @@ WebsiteIndex.Layout = Layout
 export const pageQuery = graphql`
   query IndexQuery {
     latest: allMarkdownRemark(
-      limit: 3
+      limit: 5
       sort: { fields: [frontmatter___date], order: DESC }
       filter: { frontmatter: { template: { eq: "post" } } }
     ) {

diff --git a/src/style.css b/src/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:wght@400;700&display=swap');
 
 :root {
   /* Colors */
@@ -62,7 +62,7 @@ body {
   font-size: 1rem;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
-  background: #272727;
+  background: var(--background-color);
 }
 
 p,
@@ -197,6 +197,7 @@ tbody tr:nth-child(odd) {
   position: relative;
   border-left: 3px solid transparent;
   border-right: 3px solid transparent;
+  transition: border 200ms ease;
 }
 
 .navbar img {
@@ -290,7 +291,7 @@ tbody tr:nth-child(odd) {
   align-items: center;
   justify-content: space-between;
   padding: 0 1rem 0 2.5rem;
-  color: var(--dark-font-color);
+  color: var(--font-color);
   font-weight: 600;
   height: 35px;
   width: 320px;
@@ -357,33 +358,20 @@ button.colors.open .colors-dropdown {
 
 .sidebar button.collapse-categories {
   height: 35px;
-  padding: 0 0.5rem;
-}
-
-.sidebar button.collapse-categories:focus {
-  outline: none;
+  padding: 0 0.75rem;
 }
 
-.sidebar button.collapse-categories:focus-visible div,
-.sidebar button.collapse-categories:hover div {
-  border-color: var(--primary);
-}
-
-.sidebar button.collapse-categories:focus-visible svg path,
-.sidebar button.collapse-categories:hover svg path {
-  fill: var(--primary);
+.sidebar button.collapse-categories:hover {
+  background: var(--dark-opacity);
 }
 
 .sidebar button.collapse-categories div {
-  border: 1px solid var(--dark-font-color);
-  padding: 0 0.1rem;
+  border: 1px solid var(--font-color);
+  line-height: 0;
+  padding: 1px 3px;
 }
 
-.sidebar button.collapse-categories svg {
-  display: block;
-}
-
-.sidebar button.collapse-categories svg path {
+.sidebar button.collapse-categories svg rect {
   fill: var(--font-color);
 }
 
@@ -556,7 +544,7 @@ main {
   top: 0;
   left: 400px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   width: calc(100vw - 400px);
   display: flex;
   height: 35px;
@@ -576,6 +564,7 @@ main {
   background: transparent;
   color: var(--font-color);
   cursor: pointer;
+  line-height: 0;
 }
 
 .file-header button:hover {
@@ -587,6 +576,10 @@ main {
   outline: none;
 }
 
+.file-header button:focus-visible {
+  outline: 3px solid var(--primary);
+}
+
 .file-header button span {
   font-size: 0.9rem;
 }
@@ -616,6 +609,7 @@ main {
 
 .toolbar {
   display: flex;
+  margin-left: auto;
 }
 
 .toolbar button {
@@ -1032,6 +1026,10 @@ a.gatsby-resp-image-link {
   color: var(--reverse);
 }
 
+::marker {
+  color: var(--primary);
+}
+
 .search-input::-webkit-search-cancel-button {
   color: var(--bright-font-color);
 }
@@ -1094,6 +1092,7 @@ a.gatsby-resp-image-link {
     border-right: none !important;
   }
 
+  .navbar a:hover,
   .navbar a:focus,
   .navbar a.active,
   .navbar button:focus-visible {
@@ -1123,6 +1122,7 @@ a.gatsby-resp-image-link {
   }
 
   .file {
+    font-size: 1rem;
     background: var(--navbar-color);
   }
 
@@ -1155,9 +1155,11 @@ a.gatsby-resp-image-link {
   .footer section {
     flex-direction: column;
     align-items: center;
+    gap: 1.25rem;
   }
 
-  .footer a, .footer span {
+  .footer a,
+  .footer span {
     line-height: 1.2;
   }
 
@@ -1182,8 +1184,12 @@ a.gatsby-resp-image-link {
     line-height: 1.2;
   }
 
+  article header {
+    padding-top: 1rem;
+  }
+
   article .description {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
   }
 }
 

diff --git a/src/templates/post.js b/src/templates/post.js
@@ -57,6 +57,7 @@ export default function PostTemplate({ data }) {
       </article>
 
       <section id="comments" className="comments container">
+        <h2>Comments</h2>
         <Comments commentBox={commentBox} />
       </section>
     </>