Tidy up tasks

component-library/components/global/button/button.scss

@@ -1,14 +1,14 @@
 .button {
   cursor: pointer;
   border: none;
-  border-radius: 6px;
+  border-radius: $base-border-radius;
   padding: 0;
 
 
   a {
     background: transparent;
     display: block;
-    border-radius: 6px;
+    border-radius: $base-border-radius;
     padding: 1rem 1.75rem;
 
 

component-library/shared/styles/_variables.scss

@@ -7,38 +7,29 @@ $medium-font-weight: 500;
 $semibold-font-weight: 600;
 $bold-font-weight: 700;
 $extbold-font-weight: 800;
-$base-letter-spacing: 0.5px;
 
 //Colors Variables
-
 $color-white: #fff;
-$color-gray: #fcfcfc;
-$color-cyan: #808080;
-$color-cyan-dark: #f3f3f3;
-$color-cyan-light: #5f5f5f;
-//overwritten by site.json -> theme -> primary_color if set
-$color-primary: #e53b2a;
-$color-primary-light: #e6ebf4;
-$color-primary-dark: mix($color-primary, $color-white, 12%);
-$color-gray-light: mix($color-primary, $color-white, 2%);
-$color-gray-dark: mix($color-primary, $color-white, 6%);
-//overwritten by site.json -> theme -> secondary_color if set
-$color-secondary: #fffbf3;
-$color-secondary-light: mix($color-primary, $color-white, 16%);
-$color-secondary-dark: #f7f8fa;
-//overwritten by site.json -> theme -> anchor_color if set
+$color-black: #000;
+$color-gray: #808080;
+$color-gray-light: mix($color-gray, $color-white, 10%);
+$color-gray-dark: mix($color-gray, $color-black, 50%);
+$color-primary: #034AD8;
+$color-primary-light: mix($color-primary, $color-white, 10%);
+$color-primary-dark: mix($color-primary, $color-black, 50%);
+$color-secondary: #D9CFFF;
+$color-secondary-light: mix($color-secondary, $color-white, 10%);
+$color-secondary-dark: mix($color-secondary, $color-black, 50%);
 $color-anchor: #ffba08;
-$color-anchor-dark: mix($color-anchor, $color-white, 30%);
-//overwritten by site.json -> theme -> background_effects_color if set
-$color-background-effects: #faaa8f;
-
-$color-header: #000;
-$color-header-light: mix($color-anchor, $color-white, 4%);
-$color-header-dark: mix($color-anchor, $color-white, 12%);
-$color-text: #181512;
-$color-deactive: #ababab;
-$color-text-dark: #dddddd;
+$color-anchor-light: mix($color-anchor, $color-white, 10%);
+$color-anchor-dark: mix($color-anchor, $color-black, 50%);
+$color-header: #181512;
+$color-header-light: mix($color-anchor, $color-white, 10%);
+$color-header-dark: mix($color-anchor, $color-black, 50%);
+$color-text: #181222;
+$color-text-white: #dddddd;
 $color-text-light: #4d4d4d;
+$color-deactive: #ababab;
 
 // Spacer Variables
 $base-padding: 1rem;
@@ -57,6 +48,4 @@ $base-transition: all 0.5s ease-in-out;
 
 //Other Variables
 $base-border-width: 1px;
-$base-border-radius: 8px;
-
-
+$base-border-radius: 8px;

package.json

@@ -4,13 +4,14 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "fetch-theme-color": "node utils/fetch-theme-color.js",
     "watch:sass": "sass --watch src/sass:_site/css",
     "build:sass": "sass src/sass:_site/css",
     "build:bookshop-sass": "bookshop-sass -b component-library -o _site/css/bookshop.css",
     "watch:bookshop-sass": "bookshop-sass -b component-library -o _site/css/bookshop.css -w",
     "watch:eleventy": "eleventy --serve",
     "build:eleventy": "eleventy",
-    "start": "npm-run-all build:sass --parallel watch:*",
+    "start": "npm-run-all fetch-theme-color build:sass --parallel watch:*",
     "build": "npm-run-all build:*",
     "new": "npx @bookshop/init --component"
   },

src/404.html

@@ -0,0 +1,11 @@
+---
+title: Error
+layout: layouts/base.html
+permalink: /404.html
+eleventyExcludeFromCollections: true
+---
+<section class="error">
+  <img src="/images/404.png" alt="404 Error" />
+  <h1>We couldn't find the page you are looking for.</h1>
+  {% bookshop "global/button" path: "/" button_text: "Home" button_color: "#D9CFFF" button_text_color: "black" %}
+</section>

src/_data/theme.json

@@ -1,6 +1,11 @@
 {
-    "primary_color": "#e53b2a",
-    "secondary_color": "#fffbf3",
+    "primary_color": "#034AD8",
+    "secondary_color": "#D9CFFF",
+    "gray_color": "#808080",
     "anchor_color": "#ffba08",
-    "background_effects_color": "#faaa8f"
+    "header_color": "#181512",
+    "text_color": "#181222",
+    "light_text_color": "#4d4d4d",
+    "white_text_color": "#dddddd",
+    "deactive_color": "#ababab"
 }

src/_includes/layouts/blog.html

@@ -35,73 +35,6 @@ <h1>{{title}}</h1>
         </li>
       {% endfor %}
     </ul>
-    {% assign variable = pagination.hrefs | length %} {% if variable > 1 %}
-    <nav class="{{ c }}__pagination">
-      <ul class="pagination">
-        {% if pagination.href.previous %}
-        <li class="page-item">
-          <a
-            class="page-link btn btn-secondary"
-            href="{{pagination.href.previous}}"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20.657"
-              height="11.314"
-              viewBox="0 0 20.657 11.314"
-              style="transform: scale(-1, 1)"
-            >
-              <g fill="#fff" data-name="Group 12">
-                <path d="M0 4.657h18v2H0z" data-name="Rectangle 2400"></path>
-                <path
-                  d="M13.586 9.9l5.6568542-5.6568542 1.4142136 1.4142135-5.6568542 5.6568543z"
-                  data-name="Rectangle 2401"
-                ></path>
-                <path
-                  d="M15 0l5.6568542 5.6568542-1.4142135 1.4142136-5.6568543-5.6568542z"
-                  data-name="Rectangle 2402"
-                ></path>
-              </g>
-            </svg>
-          </a>
-        </li>
-        {% endif %} {% for pageEntry in pagination.hrefs %}
-        <li class="page-item">
-          <a
-            class="page-link btn btn-secondary {% if page.url == pageEntry %}active{% endif %}"
-            href="{{pageEntry}}"
-            >{{forloop.index}}
-          </a>
-        </li>
-        {% endfor %} {% if pagination.href.next %}
-        <li class="page-item">
-          <a
-            class="page-link btn btn-secondary"
-            href="{{ pagination.href.next }}"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20.657"
-              height="11.314"
-              viewBox="0 0 20.657 11.314"
-            >
-              <g fill="#fff" data-name="Group 12">
-                <path d="M0 4.657h18v2H0z" data-name="Rectangle 2400"></path>
-                <path
-                  d="M13.586 9.9l5.6568542-5.6568542 1.4142136 1.4142135-5.6568542 5.6568543z"
-                  data-name="Rectangle 2401"
-                ></path>
-                <path
-                  d="M15 0l5.6568542 5.6568542-1.4142135 1.4142136-5.6568543-5.6568542z"
-                  data-name="Rectangle 2402"
-                ></path>
-              </g>
-            </svg>
-          </a>
-        </li>
-        {% endif %}
-      </ul>
-    </nav>
-    {% endif %}
+    {% include 'partials/pagination.html' %}
   </section>
 </main>

src/_includes/partials/pagination.html

@@ -0,0 +1,73 @@
+{% assign c = 'pagination' %}
+
+{% assign variable = pagination.hrefs | length %} 
+{% if variable > 1 %}
+  <nav class="{{ c }}">
+    <ul>
+      {% if pagination.href.previous %}
+        <li class="page-item">
+          <a
+            class="page-link btn btn-secondary"
+            href="{{pagination.href.previous}}"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20.657"
+              height="11.314"
+              viewBox="0 0 20.657 11.314"
+              style="transform: scale(-1, 1)"
+            >
+              <g data-name="Group 12">
+                <path d="M0 4.657h18v2H0z" data-name="Rectangle 2400"></path>
+                <path
+                  d="M13.586 9.9l5.6568542-5.6568542 1.4142136 1.4142135-5.6568542 5.6568543z"
+                  data-name="Rectangle 2401"
+                ></path>
+                <path
+                  d="M15 0l5.6568542 5.6568542-1.4142135 1.4142136-5.6568543-5.6568542z"
+                  data-name="Rectangle 2402"
+                ></path>
+              </g>
+            </svg>
+          </a>
+        </li>
+      {% endif %} 
+      {% for pageEntry in pagination.hrefs %}
+        <li class="page-item">
+          <a
+            class="page-link btn btn-secondary {% if page.url == pageEntry %}active{% endif %}"
+            href="{{pageEntry}}"
+            >{{forloop.index}}
+          </a>
+        </li>
+      {% endfor %} 
+      {% if pagination.href.next %}
+        <li class="page-item">
+          <a
+            class="page-link btn btn-secondary"
+            href="{{ pagination.href.next }}"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20.657"
+              height="11.314"
+              viewBox="0 0 20.657 11.314"
+            >
+              <g data-name="Group 12">
+                <path d="M0 4.657h18v2H0z" data-name="Rectangle 2400"></path>
+                <path
+                  d="M13.586 9.9l5.6568542-5.6568542 1.4142136 1.4142135-5.6568542 5.6568543z"
+                  data-name="Rectangle 2401"
+                ></path>
+                <path
+                  d="M15 0l5.6568542 5.6568542-1.4142135 1.4142136-5.6568543-5.6568542z"
+                  data-name="Rectangle 2402"
+                ></path>
+              </g>
+            </svg>
+          </a>
+        </li>
+      {% endif %}
+    </ul>
+  </nav>
+{% endif %}

src/blog/index.html

@@ -4,7 +4,7 @@
 layout: layouts/blog.html
 pagination:
   data: collections.blog
-  size: 6
+  size: 3
   alias: blog
 seo:
   page_description: "We believe that a good email marketing strategy is the key to growth. So we’re helping you grow your business with tools and resources that make email marketing easy."

src/pages/index.html

@@ -1,7 +1,7 @@
 ---
-permalink: /
 title: Home
 layout: layouts/page.html
+permalink: /
 background_image: /images/backgrounds/rainbow-gradient.png
 seo:
   page_description:

src/sass/_404.scss

@@ -0,0 +1,12 @@
+.error {
+  margin: 0 auto;
+  text-align: center;
+
+  img {
+    max-width: 500px;
+  }
+
+  h1 {
+    padding-block: 64px;
+  }
+}

src/sass/_article.scss

@@ -40,7 +40,7 @@
     }
 
     img {
-      border-radius: 8px;
+      border-radius: $base-border-radius;
     }
   }
 

src/sass/_blog.scss

@@ -1,6 +1,7 @@
 .blog {
   padding: $base-padding;
   max-width: $max-width-xxl;
+  margin: 0 auto;
 
   @media screen and (min-width: $max-width-md) {
     padding: 32px;
@@ -33,7 +34,7 @@
 
   &__post-thumb {
     img {
-      border-radius: 8px;
+      border-radius: $base-border-radius;
     }
   }
 
@@ -42,7 +43,7 @@
 
     a {
       padding: 4px 8px;
-      border-radius: 4px;
+      border-radius: $base-border-radius;
       background-color: $color-primary-dark;
       color: $color-white
     }