style tweaks

content/articles/2010-07-03-momcorp.md

@@ -24,5 +24,5 @@ You can grab the full zip-package with versions for Desktop, iPad, iPhone & Andr
 
 <p class="content-download">
     <a class="btn btn-primary icon-download" href="../media/momcorp_wall_by_kremalicious.zip">Download</a>
-    <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
+    <a href="http://krlc.us/givecoffee" class="btn icon-heart">Donate</a>
 </p>

src/components/Layout.module.css

@@ -14,18 +14,24 @@
   width: 100%;
   padding-top: var(--spacer);
   background-color: var(--body-background-color);
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
   padding-bottom: calc(var(--spacer) * 2);
   transform: translate3d(0, 0, 0);
   transition: 0.4s var(--easing);
-  transition-property: transform, background;
+  transition-property: transform, background, border, box-shadow;
+  border-top: 1px solid rgba(255, 255, 255, 0.85);
+  box-shadow: 0 1px 10px rgba(1, 85, 101, 0.1),
+    0 -1px 4px rgba(1, 85, 101, 0.05);
 }
 
 :global(.has-menu-open) .document {
   transform: translate3d(0, calc(var(--spacer) * 2), 0);
 }
 
+:global(.dark) .document {
+  border-top-color: rgba(255, 255, 255, 0.05);
+  box-shadow: 0 1px 8px rgba(0, 7, 8, 0.3), 0 -1px 4px rgba(0, 21, 25, 0.8);
+}
+
 @media (min-width: 60rem) {
   .document {
     padding-top: calc(var(--spacer) * 2);

src/components/atoms/Changelog.module.css

@@ -7,7 +7,7 @@
   padding-top: var(--spacer);
   padding-left: calc(var(--spacer) / 2);
   margin-left: calc(var(--spacer) / 2);
-  border-left: 1px solid var(--border-color);
+  border-left: var(--stroke-width) solid var(--border-color);
 }
 
 .content h2,

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

@@ -14,7 +14,7 @@
 
 .results {
   composes: container from '../../atoms/Container.module.css';
-  composes: wide from '../../atoms/Container.module.css';
+  /* composes: wide from '../../atoms/Container.module.css'; */
   padding: var(--spacer) calc(var(--spacer) / 2);
   margin-bottom: 0;
   display: flex;

src/components/molecules/Search/SearchResults.tsx

@@ -3,7 +3,10 @@ import ReactDOM from 'react-dom'
 import { graphql, useStaticQuery } from 'gatsby'
 import PostTeaser from '../PostTeaser'
 import SearchResultsEmpty from './SearchResultsEmpty'
-import * as styles from './SearchResults.module.css'
+import {
+  searchResults,
+  results as styleResults
+} from './SearchResults.module.css'
 import { Post } from '../../../@types/Post'
 
 export interface Results {
@@ -34,9 +37,9 @@ function SearchResultsPure({
   toggleSearch(): void
 }) {
   return (
-    <div className={styles.searchResults}>
+    <div className={searchResults}>
       {results.length > 0 ? (
-        <ul className={styles.results}>
+        <ul className={styleResults}>
           {results.map((page: { slug: string }) =>
             posts
               .filter(

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

@@ -42,22 +42,6 @@
   padding-right: calc(var(--spacer) / 2);
   position: relative;
   text-align: left;
-  border-bottom: var(--stroke-width) solid var(--body-background-color);
-}
-
-.action:last-child {
-  border-bottom: 0;
-}
-
-@media (min-width: 40rem) {
-  .action {
-    border-bottom: 0;
-    border-left: var(--stroke-width) solid var(--body-background-color);
-  }
-
-  .action:first-child {
-    border-left: 0;
-  }
 }
 
 .action:hover,

src/global/_variables.css

@@ -24,8 +24,8 @@
   --body-background-color: var(--brand-light);
   --box-background-color: rgba(255, 255, 255, 0.4);
 
-  --box-shadow: 0 1.3px 5.4px rgba(0, 0, 0, 0.1),
+  --box-shadow: 0 1.3px 5.4px rgba(1, 85, 101, 0.15),
-    0 4.5px 18.1px rgba(0, 0, 0, 0.06), 0 20px 81px rgba(0, 0, 0, 0.04);
+    0 4.5px 18.1px rgba(1, 85, 101, 0.05), 0 20px 81px rgba(1, 85, 101, 0.025);
 
   /* Text Colors
   ///////////////////////////////////// */
@@ -124,7 +124,8 @@
   --body-background-color: #161a1b;
   --box-background-color: rgba(255, 255, 255, 0.03);
 
-  --box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 16px rgba(0, 0, 0, 0.1);
+  --box-shadow: 0 1.3px 5.4px rgba(0, 7, 8, 0.6),
+    0 4.5px 18.1px rgba(0, 7, 8, 0.4), 0 20px 81px rgba(0, 7, 8, 0.1);
 
   --text-color: var(--brand-grey-light);
   --text-color-light: var(--brand-grey);