tweaks

src/components/Layout.module.css

@@ -36,7 +36,7 @@
   .document {
     margin-top: calc(var(--spacer) * 2.5);
     /* height of footer */
-    margin-bottom: calc(var(--spacer) * 18);
+    margin-bottom: calc(var(--spacer) * 12);
     position: relative;
     z-index: 2;
     min-height: 500px;

src/components/atoms/Breakout.module.css

@@ -5,7 +5,7 @@
 
 @media (min-width: 70rem) {
   .breakout {
-    margin-left: -7rem;
+    margin-left: -6rem;
-    margin-right: -7rem;
+    margin-right: -6rem;
   }
 }

src/components/atoms/Divider.module.css

@@ -16,3 +16,6 @@
 :global(.dark) .divider::before {
   border-bottom-color: var(--brand-grey);
 }
+
+.dividerTop {
+}

src/components/atoms/Hamburger.module.css

@@ -8,7 +8,7 @@
   margin-top: calc(var(--spacer) / 2);
 }
 
-.hamburgerLine {
+.line {
   display: block;
   position: absolute;
   height: 1px;
@@ -20,38 +20,38 @@
   transition: 0.2s var(--easing);
 }
 
-.hamburgerLine::nth-child(1) {
+.line:nth-child(1) {
   top: 0;
   transform-origin: left center;
 }
 
-.hamburgerLine::nth-child(2) {
+.line:nth-child(2) {
   top: 7px;
   transform-origin: left center;
 }
 
-.hamburgerLine::nth-child(3) {
+.line:nth-child(3) {
   top: 14px;
   transform-origin: left center;
 }
 
 /* open state */
-:global(.has-menu-open) .hamburgerLine::nth-child(1) {
+:global(.has-menu-open) .line:nth-child(1) {
   transform: rotate(45deg);
   top: -1px;
 }
 
-:global(.has-menu-open) .hamburgerLine::nth-child(2) {
+:global(.has-menu-open) .line:nth-child(2) {
   width: 0%;
   opacity: 0;
 }
 
-:global(.has-menu-open) .hamburgerLine::nth-child(3) {
+:global(.has-menu-open) .line:nth-child(3) {
   transform: rotate(-45deg);
   top: 16px;
 }
 
-.hamburgerButton {
+.button {
   padding: calc(var(--spacer) / 2);
   vertical-align: middle;
   display: inline-block;
@@ -59,12 +59,12 @@
   margin-right: -1rem;
 }
 
-.hamburgerButton:hover,
+.button:hover,
-.hamburgerButton:focus {
+.button:focus {
   outline: 0;
 }
 
-.hamburgerButton:hover .hamburgerLine,
+.button:hover .line,
-.hamburgerButton:focus .hamburgerLine {
+.button:focus .line {
   border-color: var(--link-color);
 }

src/components/atoms/Hamburger.tsx

@@ -10,13 +10,13 @@ export default function Hamburger({
     <button
       type="button"
       title="Menu"
-      className={styles.hamburgerButton}
+      className={styles.button}
       onClick={onClick}
     >
       <span className={styles.hamburger}>
-        <span className={styles.hamburgerLine} />
+        <span className={styles.line} />
-        <span className={styles.hamburgerLine} />
+        <span className={styles.line} />
-        <span className={styles.hamburgerLine} />
+        <span className={styles.line} />
       </span>
     </button>
   )

src/components/atoms/Image.module.css

@@ -37,7 +37,7 @@
   margin-bottom: calc(var(--spacer) * var(--line-height));
   display: block;
   position: relative;
-  transition: 0.2s var(--easing);
+  transition: 0.2s ease-out;
 }
 
 @media (min-width: 40rem) {

src/components/atoms/Image.tsx

@@ -26,7 +26,7 @@ export const imageSizeDefault = graphql`
     original {
       src
     }
-    fluid(maxWidth: 940, quality: 85) {
+    fluid(maxWidth: 950, quality: 85) {
       ...GatsbyImageSharpFluid_withWebp_noBase64
     }
   }

src/components/molecules/PostTeaser.module.css

@@ -5,7 +5,6 @@
   margin-bottom: 0;
   font-size: var(--font-size-base);
   transition: color 0.2s ease-out;
-  color: var(--text-color);
 }
 
 .post {
@@ -25,7 +24,7 @@
 }
 
 .empty {
-  /* @include media-frame; */
+  composes: frame from '../atoms/Image.module.css';
 
   display: block;
   min-height: 95px;

src/components/molecules/Vcard.module.css

@@ -1,17 +1,8 @@
-.vcard {
-  margin-bottom: calc(var(--spacer) * 2);
-}
-
 .avatar {
-  /* @include media-frame; */
+  composes: frame from '../atoms/Image.module.css';
-
+  border: 2px solid transparent;
-  margin-bottom: calc(var(--spacer) / 3);
-}
-
-.avatar,
-.avatar img {
   border-radius: 50%;
-  overflow: hidden;
+  margin-bottom: calc(var(--spacer) / 3);
 }
 
 .description {

src/components/molecules/Vcard.tsx

@@ -29,7 +29,7 @@ export default function Vcard(): ReactElement {
   const links = [twitter, github, rss, jsonfeed]
 
   return (
-    <div className={styles.vcard}>
+    <>
       <Img className={styles.avatar} fixed={avatar} alt="avatar" />
       <p className={styles.description}>
         Blog of designer &amp; developer{' '}
@@ -39,6 +39,6 @@ export default function Vcard(): ReactElement {
       </p>
 
       <IconLinks links={links} />
-    </div>
+    </>
   )
 }

src/components/organisms/Footer.module.css

@@ -17,22 +17,8 @@
   }
 }
 
-.theme {
-  margin: var(--spacer) auto;
-}
-
-.theme p {
-  text-align: center;
-  margin: 0;
-}
-
-.themeTitle {
-  font-size: var(--font-size-h5);
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
 .copyright {
-  padding-top: var(--spacer);
+  padding-top: calvar(--spacer);
   padding-bottom: var(--spacer);
 }
 

src/global/_code.css

@@ -14,7 +14,6 @@ kbd {
 code,
 samp {
   white-space: normal;
-  color: inherit;
   background-color: var(--box-background-color);
   border-radius: var(--border-radius);
 }

src/global/_variables.css

@@ -49,7 +49,7 @@
   --font-size-h5: var(--font-size-large);
   --font-size-h6: var(--font-size-base);
 
-  --line-height: 1.7;
+  --line-height: 1.6;
   --line-height-small: 1.1428571429;
 
   --font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
@@ -65,7 +65,7 @@
   --font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',
     'Helvetica', 'Arial', 'sans-serif';
   --font-weight-headings: 700;
-  --line-height-headings: 1.4;
+  --line-height-headings: 1.2;
 
   /* Spacing
   ///////////////////////////////////// */
@@ -80,7 +80,7 @@
   /* Code
   ///////////////////////////////////// */
 
-  --code-color: var(--brand-light);
+  --code-color: var(--brand-grey-light);
   --kbd-color: var(--code-color);
 
   /* Responsive breakpoints
@@ -109,16 +109,16 @@
   /* Misc.
   ///////////////////////////////////// */
 
-  --maxWidthContent: 47rem;
+  --maxWidthContent: 45rem;
   --maxWidthContainer: 80rem;
   --easing: cubic-bezier(0.75, 0, 0.08, 1);
 }
 
 .dark {
-  --body-background-color: #1d2224;
+  --body-background-color: #161a1b;
-  --box-background-color: rgba(0, 0, 0, 0.1);
+  --box-background-color: rgba(255, 255, 255, 0.03);
 
-  --text-color: #889da7;
+  --text-color: var(--brand-grey-light);
   --text-color-light: var(--brand-grey);
   --text-color-dimmed: var(--brand-grey-dark);
   --border-color: var(--brand-grey-dark);

src/global/global.css

@@ -25,8 +25,8 @@ body {
   color: var(--text-color);
   text-rendering: optimizeLegibility;
   font-feature-settings: 'liga', 'kern';
-  -webkit-font-smoothing: antialiased;
+  /* -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale; */
   min-height: 100vh;
   background: var(--body-background-color);
   transition: 0.4s var(--easing);
@@ -41,7 +41,7 @@ body {
 p,
 ul,
 ol {
-  margin: 0 0 var(--spacer);
+  margin: 0 0 calc(var(--spacer) / var(--line-height));
 }
 
 /* Reset fonts for relevant elements
@@ -122,10 +122,8 @@ h6 {
   line-height: var(--line-height-headings);
   color: var(--color-headings);
   font-weight: var(--font-weight-headings);
-  margin: 0 0 var(--spacer);
+  margin: 0 0 calc(var(--spacer) / var(--line-height));
   letter-spacing: -0.01em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   transition: color 0.2s ease-out;
 }
 
@@ -138,6 +136,27 @@ h6 {
   font-weight: 600;
 }
 
+h1 .anchor.before,
+h2 .anchor.before,
+h3 .anchor.before,
+h4 .anchor.before,
+h5 .anchor.before,
+h6 .anchor.before {
+  opacity: 0;
+  font-size: var(--font-size-h4);
+  bottom: 0;
+  top: 0.3em;
+}
+
+h1:hover .anchor,
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor,
+h5:hover .anchor,
+h6:hover .anchor {
+  opacity: 1;
+}
+
 /* Responsive Media
 ///////////////////////////////////// */
 
@@ -180,7 +199,7 @@ ol {
 
 li {
   position: relative;
-  margin-bottom: calc(var(--spacer) / 2);
+  margin-bottom: calc(var(--spacer) / 8);
 }
 
 li::before {

src/pages/index.module.css

@@ -20,7 +20,7 @@
 }
 
 .articles:first-of-type h1 {
-  font-size: var(--font-size-h4);
+  font-size: var(--font-size-h3);
 }
 
 .articlesLast {

src/pages/index.tsx

@@ -21,7 +21,7 @@ export default function Home({ data }: PageProps): ReactElement {
         </div>
         <div className={`${styles.articles} ${styles.articlesLast}`}>
           {(data as any).latestArticles.edges
-            .slice(2, 5)
+            .slice(2, 8)
             .map(({ node }: { node: Post }) => (
               <PostTeaser key={node.id} post={node} hideDate />
             ))}
@@ -48,7 +48,7 @@ export const homeQuery = graphql`
     latestArticles: allMarkdownRemark(
       filter: { fields: { type: { ne: "photo" } } }
       sort: { order: DESC, fields: [fields___date] }
-      limit: 5
+      limit: 8
     ) {
       edges {
         node {