diff --git a/component-library/components/global/button/button.scss b/component-library/components/global/button/button.scss index 5bac5d7..197f4f2 100644 --- a/component-library/components/global/button/button.scss +++ b/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; diff --git a/component-library/components/global/error/error.bookshop.yml b/component-library/components/global/error/error.bookshop.yml deleted file mode 100644 index 2beae98..0000000 --- a/component-library/components/global/error/error.bookshop.yml +++ /dev/null @@ -1,24 +0,0 @@ -# Metadata about this component, to be used in the CMS -spec: - structures: - label: Error - description: "404" - icon: "error" - tags: [] - -# Defines the structure of this component, as well as the default values -blueprint: - description: "Something is wrong here!" - image: "/images/404/error.png" - image_alt: Error - -# Overrides any fields in the blueprint when viewing this component in the component browser -preview: - description: "Something is wrong here!" - image: https://placehold.co/500 - image_alt: Error - -# Any extra CloudCannon inputs configuration to apply to the blueprint -_inputs: - description: - type: markdown diff --git a/component-library/components/global/error/error.eleventy.liquid b/component-library/components/global/error/error.eleventy.liquid deleted file mode 100644 index f972471..0000000 --- a/component-library/components/global/error/error.eleventy.liquid +++ /dev/null @@ -1,13 +0,0 @@ -
-
-
-
-
- {{image_alt}} -

{{description | markdownify}}

- Try Again -
-
-
-
-
\ No newline at end of file diff --git a/component-library/components/global/error/error.scss b/component-library/components/global/error/error.scss deleted file mode 100644 index 3f96561..0000000 --- a/component-library/components/global/error/error.scss +++ /dev/null @@ -1,14 +0,0 @@ -.error { - position: relative; - background: $color-secondary; - &-content { - position: relative; - h3 { - color: $color-header; - font-weight: $bold-font-weight; - } - img { - max-width: 100%; - } - } -} \ No newline at end of file diff --git a/component-library/shared/styles/_variables.scss b/component-library/shared/styles/_variables.scss index 99a1c35..12f1693 100644 --- a/component-library/shared/styles/_variables.scss +++ b/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; \ No newline at end of file diff --git a/package.json b/package.json index 9dc0540..35abd6d 100644 --- a/package.json +++ b/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" }, diff --git a/src/404.html b/src/404.html new file mode 100644 index 0000000..0815044 --- /dev/null +++ b/src/404.html @@ -0,0 +1,11 @@ +--- +title: Error +layout: layouts/base.html +permalink: /404.html +eleventyExcludeFromCollections: true +--- +
+ 404 Error +

We couldn't find the page you are looking for.

+ {% bookshop "global/button" path: "/" button_text: "Home" button_color: "#D9CFFF" button_text_color: "black" %} +
\ No newline at end of file diff --git a/src/_data/theme.json b/src/_data/theme.json index 27c2f8c..368c768 100644 --- a/src/_data/theme.json +++ b/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" } diff --git a/src/_includes/layouts/blog.html b/src/_includes/layouts/blog.html index ac6b0a6..c7e825e 100644 --- a/src/_includes/layouts/blog.html +++ b/src/_includes/layouts/blog.html @@ -35,73 +35,6 @@

{{title}}

{% endfor %} - {% assign variable = pagination.hrefs | length %} {% if variable > 1 %} - - {% endif %} + {% include 'partials/pagination.html' %} diff --git a/src/_includes/partials/pagination.html b/src/_includes/partials/pagination.html new file mode 100644 index 0000000..2ed2536 --- /dev/null +++ b/src/_includes/partials/pagination.html @@ -0,0 +1,73 @@ +{% assign c = 'pagination' %} + +{% assign variable = pagination.hrefs | length %} +{% if variable > 1 %} + +{% endif %} \ No newline at end of file diff --git a/src/blog/index.html b/src/blog/index.html index 43fcb36..b351f07 100644 --- a/src/blog/index.html +++ b/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." diff --git a/src/images/404.png b/src/images/404.png new file mode 100644 index 0000000..3db0889 Binary files /dev/null and b/src/images/404.png differ diff --git a/src/pages/index.html b/src/pages/index.html index 2614714..8f930a5 100644 --- a/src/pages/index.html +++ b/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: diff --git a/src/sass/_404.scss b/src/sass/_404.scss new file mode 100644 index 0000000..2a36b61 --- /dev/null +++ b/src/sass/_404.scss @@ -0,0 +1,12 @@ +.error { + margin: 0 auto; + text-align: center; + + img { + max-width: 500px; + } + + h1 { + padding-block: 64px; + } +} \ No newline at end of file diff --git a/src/sass/_article.scss b/src/sass/_article.scss index aa0df1e..97bfb0e 100644 --- a/src/sass/_article.scss +++ b/src/sass/_article.scss @@ -40,7 +40,7 @@ } img { - border-radius: 8px; + border-radius: $base-border-radius; } } diff --git a/src/sass/_blog.scss b/src/sass/_blog.scss index d726b42..c74db0e 100644 --- a/src/sass/_blog.scss +++ b/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 } diff --git a/src/sass/_pagination.scss b/src/sass/_pagination.scss index e69de29..38d9ae3 100644 --- a/src/sass/_pagination.scss +++ b/src/sass/_pagination.scss @@ -0,0 +1,32 @@ +.pagination { + padding-top: 64px; + + ul { + display: flex; + justify-content: center; + gap: 16px; + color: $color-primary; + + a { + display: block; + padding: 1rem 1.5rem; + border: $base-border-width solid $color-primary; + border-radius: $base-border-radius; + font-size: 1.5rem; + font-weight: bold; + } + } + + svg { + stroke: $color-primary; + + g { + fill: $color-primary; + } + } + + .active { + background-color: $color-primary; + color: white; + } +} \ No newline at end of file diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 99a1c35..c6e9e3d 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -2,43 +2,29 @@ $font-primary: 'Source Sans 3', sans-serif; $font-secondary: 'Roboto', sans-serif; $base-font-size: 1rem; -$regular-font-weight: 400; -$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; diff --git a/src/sass/main.scss b/src/sass/main.scss index 8ffc6bb..9a6d5cb 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,6 +1,7 @@ @import 'variables'; @import 'navigation'; @import 'pagination'; +@import '404'; @import 'blog'; @import 'article'; @@ -22,10 +23,12 @@ body, h1, h2, h3, h4, h5, h6, p, ol, ul { h1, h2, h3, h4, h5, h6 { font-family: $font-primary; line-height: 1; + color: $color-text; } p, ol, ul, a, span { font-family: $font-secondary; + color: $color-text; } ol, ul { @@ -40,7 +43,7 @@ img { .main-page-container { position: relative; min-height: 100vh; - color: white; + color: $color-text-white; &__bg-img { position: absolute; diff --git a/utils/fetch-theme-color.js b/utils/fetch-theme-color.js new file mode 100644 index 0000000..941dcca --- /dev/null +++ b/utils/fetch-theme-color.js @@ -0,0 +1,76 @@ +const fs = require('fs'); +// read theme color from _data/site.json +fs.readFile('src/_data/theme.json', 'utf8', function(err, dataFile){ + + if(err){ + console.log(err); + return; + } + + // parse file to JSON so that the variables can be accessed + dataFile = JSON.parse(dataFile); + + const variablesFilesLocations = [ + 'component-library/shared/styles/_variables.scss', + 'src/sass/_variables.scss' + ] + + for (let i = 0; i < variablesFilesLocations.length; i++) { + const path = variablesFilesLocations[i]; + + fs.readFile(path, 'utf-8', function (err, scssFile) { + + if(err){ + console.log(err); + return; + } + + var replaced = scssFile; + + // Change the variables to whatever was set in the data file + if (dataFile.primary_color) { + const replacementString = dataFile.primary_color; + replaced = replaced.replace(/\$color-primary: .*/g, ('$color-primary: ' + replacementString + ';')); + } + if (dataFile.secondary_color) { + const replacementString = dataFile.secondary_color; + replaced = replaced.replace(/\$color-secondary: .*/g, ('$color-secondary: ' + replacementString + ';')); + } + if (dataFile.gray_color) { + const replacementString = dataFile.gray_color; + replaced = replaced.replace(/\$color-gray: .*/g, ('$color-gray: ' + replacementString + ';')); + } + if (dataFile.anchor_color) { + const replacementString = dataFile.anchor_color; + replaced = replaced.replace(/\$color-anchor: .*/g, ('$color-anchor: ' + replacementString + ';')); + } + if (dataFile.header_color) { + const replacementString = dataFile.header_color; + replaced = replaced.replace(/\$color-header: .*/g, ('$color-header: ' + replacementString + ';')); + } + if (dataFile.text_color) { + const replacementString = dataFile.text_color; + replaced = replaced.replace(/\$color-text: .*/g, ('$color-text: ' + replacementString + ';')); + } + if (dataFile.light_text_color) { + const replacementString = dataFile.light_text_color; + replaced = replaced.replace(/\$color-text-light: .*/g, ('$color-text-light: ' + replacementString + ';')); + } + if (dataFile.white_text_color) { + const replacementString = dataFile.white_text_color; + replaced = replaced.replace(/\$color-text-white: .*/g, ('$color-text-white: ' + replacementString + ';')); + } + if (dataFile.deactive_color) { + const replacementString = dataFile.deactive_color; + replaced = replaced.replace(/\$color-deactive: .*/g, ('$color-deactive: ' + replacementString + ';')); + } + // Write result back to variables.scss + fs.writeFile(path, replaced, 'utf-8', function (err) { + if(err){ + console.log(err); + } + console.log(`📚 Writing variables to ${path}`) + }); + }); + } +}); \ No newline at end of file