layout tweaks

gatsby/sources.js

@@ -44,10 +44,10 @@ module.exports = [
       url: 'https://api.github.com/graphql',
       headers: {
         Authorization: `bearer ${process.env.GATSBY_GITHUB_TOKEN}`
-      },
+      }
       // Additional options to pass to node-fetch
-      fetchOptions: {},
-      refetchInterval: 300 // 5 min.
+      // fetchOptions: {},
+      // refetchInterval: 300 // 5 min.
     }
   }
 ]

src/components/Layout.module.css

@@ -49,3 +49,27 @@
     min-height: 500px;
   }
 }
+
+.container {
+  width: 100%;
+  max-width: var(--maxWidthContent);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.wide {
+  composes: container;
+  max-width: none;
+}
+
+.breakout {
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+}
+
+@media (min-width: 1000px) {
+  .breakout {
+    margin-left: -8rem;
+    margin-right: -8rem;
+  }
+}

src/components/atoms/Breakout.module.css

@@ -1,11 +0,0 @@
-.breakout {
-  margin-left: calc(-50vw + 50%);
-  margin-right: calc(-50vw + 50%);
-}
-
-@media (min-width: 70rem) {
-  .breakout {
-    margin-left: -6rem;
-    margin-right: -6rem;
-  }
-}

src/components/atoms/Container.module.css

@@ -1,11 +0,0 @@
-.container {
-  width: 100%;
-  max-width: var(--maxWidthContent);
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.wide {
-  composes: container;
-  max-width: none;
-}

src/components/atoms/Exif.module.css

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

src/components/atoms/Image.tsx

@@ -25,7 +25,7 @@ export const imageSizeDefault = graphql`
     original {
       src
     }
-    gatsbyImageData(layout: CONSTRAINED, width: 950, quality: 85)
+    gatsbyImageData(layout: CONSTRAINED, width: 1040, quality: 85)
   }
 `
 
@@ -34,7 +34,7 @@ export const imageSizeThumb = graphql`
     original {
       src
     }
-    gatsbyImageData(layout: CONSTRAINED, width: 420, height: 140, quality: 85)
+    gatsbyImageData(layout: CONSTRAINED, width: 480, height: 140, quality: 85)
   }
 `
 
@@ -43,6 +43,12 @@ export const photoSizeThumb = graphql`
     original {
       src
     }
-    gatsbyImageData(layout: CONSTRAINED, width: 300, height: 300, quality: 85)
+    gatsbyImageData(
+      layout: CONSTRAINED
+      width: 316
+      height: 316
+      quality: 85
+      transformOptions: { cropFocus: CENTER }
+    )
   }
 `

src/components/molecules/RelatedPosts.module.css

@@ -1,7 +1,3 @@
-.relatedPosts {
-  composes: container from '../atoms/Container.module.css';
-}
-
 .title {
   font-size: var(--font-size-h3);
   margin-bottom: var(--spacer);

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

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

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

@@ -1,9 +1,9 @@
 .actions {
+  composes: breakout from '../../Layout.module.css';
   margin-top: calc(var(--spacer) * 2);
   margin-bottom: calc(var(--spacer) * 2);
   background: var(--box-background-color);
-  padding-top: var(--spacer);
-  padding-bottom: var(--spacer);
+  padding: var(--spacer);
   border-radius: var(--border-radius);
   display: grid;
 }

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

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

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

@@ -1,5 +1,5 @@
 .hentry {
-  composes: container from '../../atoms/Container.module.css';
+  composes: container from '../../Layout.module.css';
   width: 100%;
   padding-bottom: var(--spacer);
 }
@@ -13,5 +13,5 @@
 }
 
 .image {
-  composes: breakout from '../../atoms/Breakout.module.css';
+  composes: breakout from '../../Layout.module.css';
 }

src/global/_alerts.css

@@ -0,0 +1,46 @@
+.alert {
+  padding: calc(var(spacer) / 2);
+  margin-top: var(--spacer);
+  margin-bottom: var(--spacer);
+  border-radius: var(--border-radius);
+  border: var(--stroke-width) solid transparent;
+  box-shadow: var(--box-shadow);
+}
+
+@media (min-width: 40rem) {
+  .alert {
+    padding: var(--spacer);
+  }
+}
+
+.alert > p:last-child,
+.alert > ul:last-child {
+  margin-bottom: 0;
+}
+
+.alert-info {
+  color: #826527;
+  background: var(--alert-info);
+}
+
+.dark .alert-info {
+  color: var(--alert-info);
+  background: rgba(248, 241, 227, 0.2);
+}
+
+/* .dark & {
+      color: darken($alert-info, 40%);
+      background: darken($alert-info, 85%);
+      border-color: darken($alert-info, 90%);
+    } */
+
+.alert-success {
+  /* color: darken($alert-success, 60%); */
+  background: var(--alert-success);
+}
+
+.alert-danger,
+.alert-error {
+  /* color: darken($alert-error, 60%); */
+  background: var(--alert-error);
+}

src/global/_mixins.scss

@@ -1,134 +0,0 @@
-@import 'variables';
-
-// CSS image replacement
-/////////////////////////////////////
-
-@mixin hide-text() {
-  font: 0/0 a; // stylelint-disable font-family-no-missing-generic-family-keyword
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}
-
-// Text overflow
-/////////////////////////////////////
-
-@mixin ellipsis() {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-// Layout breakout
-/////////////////////////////////////
-
-@mixin breakoutviewport() {
-  margin-left: calc(-50vw + 50%);
-  margin-right: calc(-50vw + 50%);
-
-  @media (min-width: $screen-md) {
-    @include breakoutviewport--base();
-  }
-}
-
-@mixin breakoutviewport--base() {
-  margin-left: -($spacer * 4);
-  margin-right: -($spacer * 4);
-}
-
-@mixin breakoutviewport--full() {
-  margin-left: calc(-50vw + 50%);
-  margin-right: calc(-50vw + 50%);
-}
-
-// Button sizing
-/////////////////////////////////////
-
-@mixin button-size(
-  $padding-vertical,
-  $padding-horizontal,
-  $font-size,
-  $line-height,
-  $border-radius
-) {
-  padding: $padding-vertical $padding-horizontal;
-  font-size: $font-size;
-  line-height: $line-height;
-  border-radius: $border-radius;
-}
-
-// Form control sizing
-/////////////////////////////////////
-
-@mixin input-size(
-  $padding-vertical,
-  $padding-horizontal,
-  $font-size,
-  $line-height,
-  $border-radius
-) {
-  padding: $padding-vertical $padding-horizontal;
-  font-size: $font-size;
-  line-height: $line-height;
-  border-radius: $border-radius;
-
-  &input[type='search'] {
-    background-size: $font-size;
-    background-position: $padding-vertical center;
-    padding-left: ($padding-vertical * 4);
-  }
-
-  &select {
-    line-height: $input-height;
-  }
-
-  &textarea,
-  &select[multiple] {
-    height: auto;
-  }
-}
-
-// Placeholder text
-/////////////////////////////////////
-
-@mixin placeholder($color: $input-color-placeholder) {
-  &::-moz-placeholder {
-    color: $color;
-    opacity: 1; // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
-  }
-
-  &::-webkit-input-placeholder {
-    color: $color;
-  }
-
-  &:-ms-input-placeholder {
-    color: $color;
-  }
-}
-
-// Image frame style
-/////////////////////////////////////
-
-@mixin media-frame() {
-  @include transition();
-
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-radius: $border-radius;
-  box-shadow: 0 3px 5px rgba($brand-grey, 0.2),
-    0 5px 16px rgba($brand-grey, 0.2);
-
-  @media (min-width: $screen-sm) {
-    border: 2px solid transparent;
-  }
-
-  :global(.dark) & {
-    box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.25),
-      0 5px 16px rgba(darken($brand-main, 20%), 0.25);
-  }
-
-  img {
-    border-radius: $border-radius;
-  }
-}

src/global/_variables.css

@@ -14,7 +14,7 @@
   --brand-grey-light: #7f97a1;
   --brand-grey-dimmed: #c3d8e0;
 
-  --alert-info: #f7f1e4;
+  --alert-info: rgb(248, 241, 227);
   --alert-success: #dff0d8;
   --alert-error: #f2dede;
 
@@ -115,7 +115,7 @@
   /* Misc.
   ///////////////////////////////////// */
 
-  --maxWidthContent: 44rem;
+  --maxWidthContent: 42rem;
   --maxWidthContainer: 60rem;
   --easing: cubic-bezier(0.75, 0, 0.08, 1);
 }

src/global/global.css

@@ -120,7 +120,7 @@ h6 {
   line-height: var(--line-height-headings);
   color: var(--color-headings);
   font-weight: var(--font-weight-headings);
-  margin: 0 0 calc(var(--spacer) / var(--line-height));
+  margin: var(--spacer) 0;
   letter-spacing: -0.01em;
   transition: color 0.2s ease-out;
 }
@@ -197,6 +197,10 @@ ol {
 
 li {
   position: relative;
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+ul ul li {
   margin-bottom: calc(var(--spacer) / 8);
 }
 
@@ -209,7 +213,7 @@ li::before {
 }
 
 li p {
-  margin-bottom: 0;
+  margin-bottom: calc(var(--spacer) / 4);
 }
 
 ul li::before {
@@ -341,8 +345,7 @@ td {
 @import '_buttons';
 @import '_code.css';
 @import '_toast.css';
-
-/* @import '_alerts'; */
+@import '_alerts.css';
 
 .medium-zoom-overlay {
   background-color: var(--body-background-color) !important;

src/pages/index.module.css

@@ -1,5 +1,5 @@
 .section {
-  composes: wide from '../components/atoms/Container.module.css';
+  composes: wide from '../components/Layout.module.css';
 }
 
 .section:not(:first-child) {
@@ -41,6 +41,6 @@
 @media (min-width: 40rem) {
   .photos {
     gap: calc(var(--spacer) * 1.5);
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   }
 }