layout tweaks

src/components/Layout.module.css

@@ -1,7 +1,7 @@
 .content {
-  padding: 0 var(--spacer);
+  padding: 0 calc(var(--spacer) / 1.5);
   width: 100%;
-  max-width: var(--maxWidthContent);
+  max-width: var(--maxWidthContainer);
   margin-left: auto;
   margin-right: auto;
 }
@@ -23,7 +23,7 @@
 }
 
 :global(.has-menu-open) .document {
-  transform: translate3d(0, calc(var(--spacer) * 3.5), 0);
+  transform: translate3d(0, calc(var(--spacer) * 2), 0);
 }
 
 @media (min-width: 60rem) {

src/components/atoms/Container.module.css

@@ -1,5 +1,10 @@
 .container {
-  max-width: 37rem;
+  width: 100%;
+  max-width: var(--maxWidthContent);
   margin-left: auto;
   margin-right: auto;
 }
+
+.wide {
+  max-width: none;
+}

src/components/atoms/Container.tsx

@@ -1,10 +0,0 @@
-import React, { ReactElement } from 'react'
-import styles from './Container.module.css'
-
-export default function Container({
-  children
-}: {
-  children: any
-}): ReactElement {
-  return <section className={styles.container}>{children}</section>
-}

src/components/atoms/Exif.module.css

@@ -48,7 +48,6 @@
 }
 
 .map {
-  composes: breakout from './Breakout.module.css';
   composes: frame from './Image.module.css';
   height: 180px;
   margin-top: calc(var(--spacer) * 2);

src/components/atoms/Image.module.css

@@ -19,8 +19,8 @@
 }
 
 .frame {
-  border-top: 2px solid transparent;
+  border-top: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
-  border-bottom: 2px solid transparent;
+  border-bottom: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
   border-radius: var(--border-radius);
   overflow: hidden;
   box-shadow: var(--box-shadow);
@@ -38,7 +38,7 @@
 
 @media (min-width: 40rem) {
   .image {
-    border: 2px solid transparent;
+    border: var(--stroke-width) solid rgba(255, 255, 255, 0.2);
   }
 }
 

src/components/atoms/Image.tsx

@@ -16,7 +16,13 @@ export const Image = ({
     className={`${styles.image} ${className ? className : ''}`}
     data-original={original && original.src}
   >
-    <Img backgroundColor="transparent" fluid={fluid} fixed={fixed} alt={alt} />
+    <Img
+      backgroundColor="transparent"
+      fluid={fluid}
+      fixed={fixed}
+      alt={alt}
+      imgStyle={{ objectFit: 'contain' }}
+    />
     {title && <figcaption className={styles.imageTitle}>{title}</figcaption>}
   </figure>
 )

src/components/atoms/Input.module.css

@@ -8,7 +8,7 @@
   color: var(--input-color);
   background-color: var(--input-bg);
   background-image: none;
-  border: 0;
+  border: var(--stroke-width) solid transparent;
   border-radius: var(--border-radius);
   box-shadow: none;
   transition: all ease-in-out 0.15s;

src/components/atoms/Input.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import styles from './Input.module.css'
 
-export default function Input(props: any): ReactElement {
+export default function Input({ className, ...props }: any): ReactElement {
-  return <input className={styles.input} {...props} />
+  return <input className={`${styles.input} ${className || ''}`} {...props} />
 }

src/components/molecules/Menu.module.css

@@ -1,10 +1,7 @@
 .menu {
-  composes: divider from '../atoms/Divider.module.css';
-
   margin-top: 0;
-  padding-top: calc(var(--spacer) / 2);
   position: absolute;
-  top: calc(100% + calc(var(--spacer) / 1.5));
+  top: 100%;
   left: 0;
   width: 100%;
 }
@@ -40,20 +37,6 @@
   text-align: center;
 }
 
-/* .menu a:hover,
-.menu a:focus {
-  color: var(--link-color-hover);
-} */
-/* 
-  :global(.dark) & {
-    color: $text-color--dark;
-    text-shadow: 0 -1px 0 rgba(#000, 0.5);
-
-    &:hover,
-    &:focus {
-      color: $link-color-hover;
-    } */
-
 .menu::-webkit-scrollbar,
 .menu::-moz-scrollbar,
 .menu::-webkit-scrollbar-thumb,

src/components/molecules/RelatedPosts.module.css

@@ -1,12 +1,12 @@
+.relatedPosts {
+  composes: container from '../atoms/Container.module.css';
+}
+
 .title {
   font-size: var(--font-size-h3);
   margin-bottom: var(--spacer);
 }
 
-.relatedPosts {
-  margin-top: -4rem;
-}
-
 .relatedPosts ul {
   display: grid;
   gap: calc(var(--spacer) / 2);

src/components/molecules/Search/SearchResults.module.css

@@ -12,7 +12,9 @@
   height: 91vh;
 }
 
-.searchResults ul {
+.results {
+  composes: container from '../../atoms/Container.module.css';
+  composes: wide from '../../atoms/Container.module.css';
   padding: var(--spacer) calc(var(--spacer) / 2);
   margin-bottom: 0;
   display: flex;
@@ -21,42 +23,42 @@
 }
 
 @media (min-width: 60rem) {
-  .searchResults ul {
+  .results {
     padding-left: 0;
     padding-right: 0;
   }
 }
 
-.searchResults ul li {
+.results li {
   display: block;
   flex: 0 0 48%;
   margin-bottom: var(--spacer);
 }
 
 @media (min-width: 40rem) {
-  .searchResults ul li {
+  .results li {
     flex-basis: 31%;
   }
 }
 
-.searchResults ul li::before {
+.results li::before {
   display: none;
 }
 
-.searchResults img {
+.results img {
   margin-bottom: 0;
 }
 
-.searchResults a {
+.results a {
   display: block;
 }
 
-.searchResults a > div {
+.results a > div {
   margin-bottom: 0;
 }
 
-.searchResults a:hover h4,
+.results a:hover h4,
-.searchResults a:focus h4 {
+.results a:focus h4 {
   color: var(--link-color);
 }
 

src/components/molecules/Search/SearchResults.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react'
 import ReactDOM from 'react-dom'
 import { graphql, useStaticQuery } from 'gatsby'
-import Container from '../../atoms/Container'
 import PostTeaser from '../PostTeaser'
 import SearchResultsEmpty from './SearchResultsEmpty'
 import styles from './SearchResults.module.css'
@@ -36,25 +35,23 @@ function SearchResultsPure({
 }) {
   return (
     <div className={styles.searchResults}>
-      <Container>
+      {results.length > 0 ? (
-        {results.length > 0 ? (
+        <ul className={styles.results}>
-          <ul>
+          {results.map((page: { slug: string }) =>
-            {results.map((page: { slug: string }) =>
+            posts
-              posts
+              .filter(
-                .filter(
+                ({ node }: { node: Post }) => node.fields.slug === page.slug
-                  ({ node }: { node: Post }) => node.fields.slug === page.slug
+              )
-                )
+              .map(({ node }: { node: Post }) => (
-                .map(({ node }: { node: Post }) => (
+                <li key={page.slug}>
-                  <li key={page.slug}>
+                  <PostTeaser post={node} toggleSearch={toggleSearch} />
-                    <PostTeaser post={node} toggleSearch={toggleSearch} />
+                </li>
-                  </li>
+              ))
-                ))
+          )}
-            )}
+        </ul>
-          </ul>
+      ) : (
-        ) : (
+        <SearchResultsEmpty searchQuery={searchQuery} results={results} />
-          <SearchResultsEmpty searchQuery={searchQuery} results={results} />
+      )}
-        )}
-      </Container>
     </div>
   )
 }

src/components/organisms/Footer.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement, PureComponent } from 'react'
 import { Link } from 'gatsby'
-import Container from '../atoms/Container'
 import Icon from '../atoms/Icon'
 import Vcard from '../molecules/Vcard'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
@@ -35,10 +34,8 @@ export default class Footer extends PureComponent {
   render(): ReactElement {
     return (
       <footer role="contentinfo" className={styles.footer}>
-        <Container>
+        <Vcard />
-          <Vcard />
+        <Copyright />
-          <Copyright />
-        </Container>
       </footer>
     )
   }

src/components/organisms/Header.module.css

@@ -1,13 +1,3 @@
-.header {
-  padding: 0 calc(var(--spacer) / var(--line-height));
-}
-
-@media (min-width: 40rem) {
-  .header {
-    padding: 0 calc(var(--spacer) * 2);
-  }
-}
-
 @media (min-width: 40rem) and (min-height: 500px) {
   .header {
     position: fixed;
@@ -20,18 +10,16 @@
 }
 
 .headerContent {
+  padding: 0 calc(var(--spacer) / 1.5);
+  max-width: var(--maxWidthContainer);
+  margin-left: auto;
+  margin-right: auto;
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-@media (min-width: 40rem) {
-  .headerContent {
-    padding: 0;
-  }
-}
-
 /* Logo
 ///////////////////////////////////// */
 

src/components/templates/Archive.tsx

@@ -35,7 +35,11 @@ export default function Archive({
   }
 
   return (
-    <Page title={page.frontmatter.title} post={page}>
+    <Page
+      title={page.frontmatter.title}
+      post={page}
+      pathname={pageContext.slug}
+    >
       <div className={styles.posts}>{PostsList}</div>
       {numPages > 1 && <Pagination pageContext={pageContext} />}
     </Page>

src/components/templates/Page.module.css

@@ -1,10 +1,7 @@
 .pagetitle {
-  composes: divider from '../atoms/Divider.module.css';
-
   font-size: var(--font-size-h3);
   margin-top: 0;
-  margin-bottom: calc(var(--spacer) * var(--line-height));
+  margin-bottom: var(--spacer);
-  padding-bottom: calc(var(--spacer) / var(--line-height));
   color: var(--text-color-light);
   display: flex;
   justify-content: space-between;

src/components/templates/Post/Actions.module.css

@@ -1,6 +1,4 @@
 .actions {
-  composes: breakout from '../../atoms/Breakout.module.css';
-
   margin-top: calc(var(--spacer) * 2);
   margin-bottom: calc(var(--spacer) * 2);
   background: var(--box-background-color);
@@ -8,7 +6,6 @@
   padding-bottom: var(--spacer);
   border-radius: var(--border-radius);
   display: grid;
-  gap: calc(var(--spacer) / 2);
 }
 
 @media (min-width: 40rem) {
@@ -25,14 +22,13 @@
 .actionTitle {
   font-size: var(--font-size-base);
   color: var(--text-color);
-  margin-top: 0;
+  margin: 0;
-  margin-bottom: calc(var(--spacer) / 4);
+  transition: 0.2s ease-out;
-  transition: color 0.2s ease-out;
 }
 
 .actionText {
   font-size: var(--font-size-small);
-  color: var(--brand-grey-light);
+  color: var(--text-color-light);
   margin-bottom: 0;
   transition: color 0.2s ease-out;
 }
@@ -42,11 +38,11 @@
   margin: 0;
   padding-top: var(--spacer);
   padding-bottom: var(--spacer);
-  padding-left: calc(var(--spacer) * 2);
+  padding-left: calc(var(--spacer) * 1.5);
   padding-right: calc(var(--spacer) / 2);
   position: relative;
   text-align: left;
-  border-bottom: 1px dashed var(--border-color);
+  border-bottom: var(--stroke-width) solid var(--body-background-color);
 }
 
 .action:last-child {
@@ -56,7 +52,7 @@
 @media (min-width: 40rem) {
   .action {
     border-bottom: 0;
-    border-left: 1px dashed var(--border-color);
+    border-left: var(--stroke-width) solid var(--body-background-color);
   }
 
   .action:first-child {
@@ -73,7 +69,7 @@
   width: 20px;
   height: 20px;
   position: absolute;
-  left: var(--spacer);
+  left: calc(var(--spacer) / 1.5);
   top: calc(var(--spacer) / 1.05);
   stroke: var(--text-color-light);
 }

src/components/templates/Post/Actions.tsx

@@ -48,12 +48,12 @@ export default function PostActions({
       />
       <Action
         title="Found something useful?"
-        text="Say thanks with Bitcoin or Ether"
+        text="Say thanks with BTC or ETH"
         url="/thanks"
       />
       <Action
         title="Edit on GitHub"
-        text="Contribute to this post on GitHub"
+        text="Contribute to this post"
         url={githubLink}
       />
     </aside>

src/components/templates/Post/PrevNext.module.css

@@ -1,7 +1,6 @@
 .prevnext {
-  composes: divider from '../../atoms/Divider.module.css';
+  composes: container from '../../atoms/Container.module.css';
-
+  margin-top: calc(var(--spacer) * 2);
-  margin-top: calc(var(--spacer) * 4);
   padding-top: calc(var(--spacer) * 2);
   display: grid;
   gap: var(--spacer);

src/components/templates/Post/index.module.css

@@ -1,7 +1,7 @@
 .hentry {
+  composes: container from '../../atoms/Container.module.css';
   width: 100%;
-  padding-top: var(--spacer);
+  padding-bottom: var(--spacer);
-  padding-bottom: calc(var(--spacer) * 3);
 }
 
 .hentry > a {

src/global/_variables.css

@@ -9,7 +9,7 @@
 
   --brand-grey: #4e5d63;
   --brand-grey-dark: #323c41;
-  --brand-grey-light: #70858e;
+  --brand-grey-light: #7f97a1;
   --brand-grey-dimmed: #c3d8e0;
 
   --alert-info: #f7f1e4;
@@ -113,7 +113,7 @@
   ///////////////////////////////////// */
 
   --maxWidthContent: 45rem;
-  --maxWidthContainer: 80rem;
+  --maxWidthContainer: 70rem;
   --easing: cubic-bezier(0.75, 0, 0.08, 1);
 }
 
@@ -126,4 +126,7 @@
   --text-color-dimmed: var(--brand-grey-dark);
   --border-color: var(--brand-grey-dark);
   --color-headings: var(--brand-main-light);
+
+  --input-bg: var(--body-background-color);
+  --input-color: var(--text-color);
 }

src/global/global.css

@@ -359,3 +359,7 @@ td {
 .gatsby-resp-image-figure {
   margin-bottom: var(--spacer);
 }
+
+.gatsby-image-wrapper {
+  max-height: 100vh;
+}

src/pages/index.module.css

@@ -1,5 +1,5 @@
 .section {
-  composes: breakout from '../components/atoms/Breakout.module.css';
+  composes: container.wide from '../components/atoms/Container.module.css';
 }
 
 .section:not(:first-child) {