add simple lightbox

remove unused line
remove commented out lines
2026-02-06 21:42:37 +00:00 · 2026-02-06 16:36:11 +00:00 · 2026-02-05 20:46:07 +00:00 · 2026-02-05 20:45:54 +00:00 · 2026-02-05 14:34:54 +00:00 · 2026-02-05 14:34:36 +00:00
35 changed files with 14012 additions and 852 deletions
--- a/app/ACF/Dynamic.php
+++ b/app/ACF/Dynamic.php
@@ -108,7 +108,9 @@ class Dynamic
            '0' => '<i class="fa-solid"></i> <span>Please select an icon</span>',
        ];

-        foreach($icons as $slug):
+        foreach($icons as $slug => $props):
+            if(in_array($slug, range(0,9))) continue;
+
            $choices[$slug] = '<i class="fa-'.$set.' fa-'.$slug.'" style="color: #2271b1;"></i> <span>' . (ucwords(str_replace('-', ' ', $slug))) . '</span>';
        endforeach;

@@ -135,8 +137,6 @@ class Dynamic
                        'bg_colour',
                        'angle_colour',
                        'fontawesome_brands',
-                        'fontawesome_regular',
-                        'fontawesome_solid',
                    ];

                    // do something to the original_value to override the default escaping, then return it.
--- a/app/Admin/Enqueue.php
+++ b/app/Admin/Enqueue.php
@@ -13,9 +13,9 @@ class Enqueue
    {
        wp_enqueue_style(
            'fontawesome',
-            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css',
+            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css',
            false,
-            '7.0.1',
+            '6.5.2',
            'all'
        );
    }
--- a/app/Admin/Integrations.php
+++ b/app/Admin/Integrations.php
@@ -7,7 +7,6 @@ class Integrations
    public function __construct()
    {
        add_action( 'wp_head',  [$this, 'FathomAnalytics']);
-        add_action( 'wp_footer',  [$this, 'FontAwesomeKit'], 100);
    }

    public function FathomAnalytics()
@@ -22,17 +21,4 @@ class Integrations

        <?php endif;
    }
-
-    public function FontAwesomeKit()
-    {
-        $kit = get_field('badegg_integrations_fontawesome_kit', 'option');
-
-        if($kit): ?>
-
-<!-- FontAwesome Kit -->
-<script src="https://kit.fontawesome.com/<?= $kit ?>.js" crossorigin="anonymous"></script>
-<!-- / FontAwesome Kit -->
-
-        <?php endif;
-    }
 }
--- a/app/Utilities/Colour.php
+++ b/app/Utilities/Colour.php
@@ -32,7 +32,7 @@ class Colour
        $values = [];

        if(function_exists('get_field')):
-            $colours = @get_field('badegg_colours', 'option');
+            $colours = get_field('badegg_colours', 'option');

            if($colours):
                foreach($colours as $index => $props):
--- a/app/blocks.php
+++ b/app/blocks.php
@@ -268,8 +268,6 @@ function core_details_modified($content, $block)

 function core_image_modified($content, $block)
 {
-    if(!$content) return '';
-
    $dom = new \DomDocument();
    $dom->strictErrorChecking = false;
    @$dom->loadHTML($content);
@@ -282,7 +280,6 @@ function core_image_modified($content, $block)
    // get image data
    $imageID = @$block['attrs']['id'];
    $lazy = wp_get_attachment_image_src($imageID, 'lazy');
-    $specifiedSize = @wp_get_attachment_image_src($imageID, $block['sizeSlug']);
    $large = wp_get_attachment_image_src($imageID, '2048x2048');

    // create lightbox link node
@@ -306,11 +303,6 @@ function core_image_modified($content, $block)
        $image->setAttribute('data-srcset', $srcset);
        $image->setAttribute('class', $class . ' lazy');

-        if($specifiedSize) {
-            $image->setAttribute('width', $specifiedSize[1]);
-            $image->setAttribute('height', $specifiedSize[2]);
-        }
-
        // clone lightbox link
        $linkClone = $link->cloneNode();

@@ -325,4 +317,5 @@ function core_image_modified($content, $block)
    }

    return $dom->saveHTML($figures[0]);
+
 }
--- a/app/setup.php
+++ b/app/setup.php
@@ -164,13 +164,8 @@ function cors() {
    if(WP_ENV == 'development'):
        header( 'Access-Control-Allow-Origin: *' );
    endif;
-}

-add_action('wp_head', function(){
-    if(file_exists(get_theme_file_path('resources/images/favicon/site.webmanifest'))) {
-        echo \Roots\view("partials.favicon")->render();
-    }
-});
+}

 add_action('after_setup_theme', function(){
    $image_srcset = new Utilities\ImageSrcset;
--- a/resources/acf/group_options_global_settings.json
+++ b/resources/acf/group_options_global_settings.json
@@ -17,8 +17,7 @@
                "id": ""
            },
            "placement": "top",
-            "endpoint": 0,
-            "selected": 0
+            "endpoint": 0
        },
        {
            "key": "field_67658e49aba4f",
@@ -59,10 +58,7 @@
                    "default_value": "",
                    "enable_opacity": 0,
                    "return_format": "string",
-                    "parent_repeater": "field_67658e49aba4f",
-                    "custom_palette_source": "",
-                    "palette_colors": "",
-                    "show_color_wheel": true
+                    "parent_repeater": "field_67658e49aba4f"
                },
                {
                    "key": "field_67658fba41889",
@@ -171,7 +167,6 @@
                        "id": ""
                    },
                    "layout": "block",
-                    "parent_repeater": "field_67658e49aba4f",
                    "sub_fields": [
                        {
                            "key": "field_676590414188c",
@@ -189,10 +184,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_676590684188d",
@@ -210,10 +202,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_6765907f4188e",
@@ -231,10 +220,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_676590924188f",
@@ -252,10 +238,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_6765909941890",
@@ -273,10 +256,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_6765909f41891",
@@ -294,12 +274,10 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        }
-                    ]
+                    ],
+                    "parent_repeater": "field_67658e49aba4f"
                }
            ]
        },
@@ -318,8 +296,7 @@
                "id": ""
            },
            "placement": "top",
-            "endpoint": 0,
-            "selected": 0
+            "endpoint": 0
        },
        {
            "key": "field_67659cb08081e",
@@ -395,8 +372,7 @@
                "id": ""
            },
            "placement": "top",
-            "endpoint": 0,
-            "selected": 0
+            "endpoint": 0
        },
        {
            "key": "field_676594615ead2",
@@ -417,27 +393,6 @@
            "placeholder": "",
            "prepend": "",
            "append": ""
-        },
-        {
-            "key": "field_698b36010d055",
-            "label": "Font Awesome Kit ID",
-            "name": "badegg_integrations_fontawesome_kit",
-            "aria-label": "",
-            "type": "text",
-            "instructions": "The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener nofollow noindex\">Visit website<\/a>",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "default_value": "",
-            "maxlength": "",
-            "allow_in_bindings": 1,
-            "placeholder": "",
-            "prepend": "",
-            "append": ""
        }
    ],
    "location": [
@@ -458,6 +413,5 @@
    "active": true,
    "description": "",
    "show_in_rest": 0,
-    "display_title": "",
-    "modified": 1770736471
+    "modified": 1734712625
 }
--- a/resources/acf/group_post_social.json
+++ b/resources/acf/group_post_social.json
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -1,25 +1,25 @@
 // Global Variables, Mixins, and Framework
-@forward "global/variables";
-@forward "global/mixins";
-@forward "global/fonts";
-@forward "global/typography";
-@forward "global/framework";
+@use "global/variables";
+@use "global/mixins";
+@use "global/fonts";
+@use "global/typography";
+@use "global/framework";

 // Third Party Plugins
-@forward "plugins/contact-form-7";
-@forward "plugins/mce";
+@use "plugins/contact-form-7";
+@use "plugins/mce";

 // Components
-@forward "components/block";
-@forward "components/forms";
-@forward "components/button";
-@forward "components/card";
-@forward "components/BadEggLightbox";
+@use "components/block";
+@use "components/forms";
+@use "components/button";
+@use "components/card";
+@use "components/BadEggLightbox";

 // Sections
-@forward "../views/sections/header/header";
-@forward "../views/sections/footer/footer";
+@use "sections/header";
+@use "sections/footer";

 // Page Styles
-@forward "views/page";
+@use "views/page";

--- a/resources/css/editor.scss
+++ b/resources/css/editor.scss
@@ -1,5 +1,5 @@
@use "app";
-@use "global/variables";
+@use "global/variables/colours";

 html :where(.wp-block) {
  max-width: none;
@@ -8,7 +8,7 @@ html :where(.wp-block) {
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
  &:hover:after {
    content: '';
-    outline: 2px solid variables.$wpblue;
+    outline: 2px solid colours.$wpblue;
    position: absolute;
    inset: 0;
  }
@@ -36,7 +36,7 @@ html :where(.wp-block) {
 }

 .editor-styles-wrapper {
-  background: variables.$grey-lightest;
+  background: colours.$grey-lightest;

  .block-list-appender {
    width: 350px;
--- a/resources/css/global/_framework.scss
+++ b/resources/css/global/_framework.scss
@@ -1,4 +1,4 @@
-@forward "framework/breakpoints";
-@forward "framework/normalise";
-@forward "framework/colours";
-@forward "framework/spacing";
+@use "framework/breakpoints";
+@use "framework/normalise";
+@use "framework/colours";
+@use "framework/spacing";
--- a/resources/css/global/_mixins.scss
+++ b/resources/css/global/_mixins.scss
@@ -1,4 +1,4 @@
-@forward "mixins/linear-gradient";
-@forward "mixins/text-contrast";
-@forward "mixins/generate-colour-classes";
-@forward "mixins/generate-button-classes";
+@use "mixins/linear-gradient";
+@use "mixins/text-contrast";
+@use "mixins/generate-colour-classes";
+@use "mixins/generate-button-classes";
--- a/resources/css/global/_typography.scss
+++ b/resources/css/global/_typography.scss
@@ -1,4 +1,7 @@
-@use "variables";
+@use "variables/fonts";
+@use "variables/breakpoints";
+@use "variables/colours";
+@use "variables/spacing";

 .wysiwyg {
  > *:first-child {
@@ -16,9 +19,9 @@ h3,
 h4,
 h5,
 h6 {
-  color: variables.$primary;
+  color: colours.$primary;
  font-weight: 700;
-  font-family: variables.$font;
+  font-family: fonts.$font;
  line-height: 1.1em;
  margin: 1.5em 0 0.25em;
  padding: 0;
@@ -29,7 +32,7 @@ h6 {

  @media screen {
    .knockout & {
-      color: variables.$white;
+      color: colours.$white;
    }
  }
 }
@@ -45,7 +48,7 @@ h3 { font-size: 1.25em; }
 h4,
 h5 { font-size: 1.15em; }

-@media (min-width: variables.$screen-sm) {
+@media (min-width: breakpoints.$screen-sm) {
  h1 { font-size: 2.5em; }
  h2 { font-size: 2em; }
  h3 { font-size: 1.5em; }
@@ -60,8 +63,8 @@ p,
 li,
 td,
 label {
-  color: variables.$grey-darker;
-  font-family: variables.$font;
+  color: colours.$grey-darker;
+  font-family: fonts.$font;
  font-weight: 400;
  line-height: 1.5em;
  margin: 0 0 0.8em;
@@ -69,30 +72,30 @@ label {

  @media screen {
    .knockout & {
-      color: variables.$white;
+      color: colours.$white;
    }
  }
 }

 a {
-  color: variables.$primary;
+  color: colours.$primary;
  text-decoration: none;
  outline: none;
  transition: all 300ms ease;

  &:hover,
  &:focus {
-    color: variables.$primary-dark;
+    color: colours.$primary-dark;
    text-decoration: none;
  }

  @media screen {
    .knockout & {
-      color: variables.$white;
+      color: colours.$white;

      &:hover,
      &:focus {
-        color: variables.$primary-light;
+        color: colours.$primary-light;
      }
    }
  }
@@ -110,6 +113,7 @@ ul,
 ol {
  margin: 0 0 0.7em;
  padding: 0 0 0 1.2em;
+  text-align: left;
 }

 .nolist {
@@ -127,12 +131,12 @@ ol {
 hr {
  margin: 2em auto;
  height: 0;
-  border: 0 solid variables.$grey-light;
-  border-width: variables.$borderThin 0 0;
+  border: 0 solid colours.$grey-light;
+  border-width: spacing.$borderThin 0 0;

  @media screen {
    .knockout & {
-      border-color: variables.$white;
+      border-color: colours.$white;
    }
  }
 }
--- a/resources/css/global/_variables.scss
+++ b/resources/css/global/_variables.scss
@@ -1,4 +1,4 @@
-@forward "variables/fonts";
-@forward "variables/colours";
-@forward "variables/breakpoints";
-@forward "variables/spacing";
+@use "variables/fonts";
+@use "variables/colours";
+@use "variables/breakpoints";
+@use "variables/spacing";
--- a/resources/css/global/framework/_breakpoints.scss
+++ b/resources/css/global/framework/_breakpoints.scss
@@ -1,6 +1,6 @@
-@use "../variables";
+@use "../variables/breakpoints";

-@each $label, $value in variables.$breakpoints {
+@each $label, $value in breakpoints.$breakpoints {
  .min-#{$label} {
    @media (min-width: $value) {
      display: none;
--- a/resources/css/global/framework/_colours.scss
+++ b/resources/css/global/framework/_colours.scss
@@ -1,12 +1,13 @@
-@use "../mixins";
-@use "../variables";
+@use "../mixins/generate-button-classes";
+@use "../mixins/generate-colour-classes";
+@use "../variables/colours";

 ::selection {
-  color: variables.$white;
-  background: variables.$primary;
+  color: colours.$white;
+  background: colours.$primary;
 }

-@each $color, $hex in variables.$colors {
-  @include mixins.generate_colour_classes($color, $hex);
-  @include mixins.generate_button_colors($color, $hex);
+@each $color, $hex in colours.$colors {
+  @include generate-colour-classes.generate_colour_classes($color, $hex);
+  @include generate-button-classes.generate_button_colors($color, $hex);
 }
--- a/resources/css/global/framework/_normalise.scss
+++ b/resources/css/global/framework/_normalise.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../variables/colours";

 * {
  box-sizing: border-box;
@@ -13,7 +13,7 @@ body,
 html {
  margin: 0;
  padding: 0;
-  background: variables.$white;
+  background: colours.$white;
 }

 .visually-hidden {
--- a/resources/css/global/framework/_spacing.scss
+++ b/resources/css/global/framework/_spacing.scss
@@ -1,25 +1,26 @@
-@use "../variables";
+@use "../variables/colours";
+@use "../variables/spacing";

 .brand {
  display: block;
-  width: variables.$brandWidth;
-  height: variables.$brandHeight;
+  width: spacing.$brandWidth;
+  height: spacing.$brandHeight;

  svg,
  img {
    display: block;
-    width: variables.$brandWidth;
-    height: variables.$brandHeight;
+    width: spacing.$brandWidth;
+    height: spacing.$brandHeight;
  }

  .knockout & {
    @media screen {
      .fill-primary {
-        fill: variables.$white;
+        fill: colours.$white;
      }

      .fill-grey {
-        fill: rgba(variables.$white, 0.8);
+        fill: rgba(colours.$white, 0.8);
      }
    }
  }
@@ -31,90 +32,46 @@ figure {
 }

 .container {
-  width: calc(100% - variables.$innerMedium * 2);
+  width: calc(100% - spacing.$innerMedium * 2);
  margin: auto;

-  @container (min-width: #{variables.$screen-md}) {
-    width: calc(100% - variables.$innerLarge * 3);
-  }
-
-  @container (min-width: #{variables.$screen-lg}) {
-    width: calc(100% - variables.$innerLarge * 4);
-  }
-
  &-full { width: auto; }
-  &-larger { max-width: variables.$containerLarger; }
-  &-large { max-width: variables.$containerLarge; }
-  &-medium { max-width: variables.$containerMedium; }
-  &-small { max-width: variables.$containerSmall; }
-  &-narrow { max-width: variables.$containerNarrow; }
+  &-large { max-width: spacing.$containerLarge; }
+  &-medium { max-width: spacing.$containerMedium; }
+  &-small { max-width: spacing.$containerSmall; }
+  &-narrow { max-width: spacing.$containerNarrow; }
 }

 .section {
-  padding: variables.$sectionMedium 0;
+  padding: spacing.$sectionMedium 0;

-  &-small {  padding: variables.$sectionSmall  unset; }
-  &-medium { padding: variables.$sectionMedium unset; }
-  &-large {  padding: variables.$sectionLarge  unset; }
+  &-small { padding: spacing.$sectionSmall 0; }
+  &-medium { padding: spacing.$sectionMedium 0; }
+  &-large { padding: spacing.$sectionLarge 0; }

-  @container (min-width: #{variables.$screen-md}) {
-    padding: (variables.$sectionMedium * 1.5) unset;
-
-    &-small { padding: (variables.$sectionSmall * 1.5) unset; }
-    &-medium { padding: (variables.$sectionMedium * 1.5) unset; }
-    &-large { padding: (variables.$sectionLarge * 1.5) unset; }
-  }
-
-  @container (min-width: #{variables.$screen-lg}) {
-    padding: (variables.$sectionMedium * 2) 0;
-
-    &-small { padding: (variables.$sectionSmall * 2) 0; }
-    &-medium { padding: (variables.$sectionMedium * 2) 0; }
-    &-large { padding: (variables.$sectionLarge * 2) 0; }
-  }
-
-  &-zero-top {    padding-top:    unset; }
-  &-zero-bottom { padding-bottom: unset; }
+  &-zero-top { padding-top: 0; }
+  &-zero-bottom { padding-bottom: 0; }
 }

 .inner {
-  padding: variables.$innerMedium;
+  padding: spacing.$innerMedium;

-  &-largest {  padding: variables.$innerLargest;  }
-  &-larger {   padding: variables.$innerLarger;   }
-  &-large {    padding: variables.$innerLarge;    }
-  &-small {    padding: variables.$innerSmall;    }
-  &-smaller {  padding: variables.$innerSmaller;  }
-  &-smallest { padding: variables.$innerSmallest; }
+  &-small { padding: spacing.$innerSmall; }
+  &-large { padding: spacing.$innerLarge; }

-  @container (min-width: #{variables.$screen-md}) {
-    padding: (variables.$innerMedium * 1.5);
-
-    &-largest {  padding: (variables.$innerLargest * 1.25);  }
-    &-larger {   padding: (variables.$innerLarger * 1.25);   }
-    &-large {    padding: (variables.$innerLarge * 1.25);    }
-    &-small {    padding: (variables.$innerSmall * 1.25);    }
-    &-smaller {  padding: (variables.$innerSmaller * 1.25);  }
-    &-smallest { padding: (variables.$innerSmallest * 1.25); }
+  &-zero-x {
+    padding-left: 0;
+    padding-right: 0;
  }

-  @container (min-width: #{variables.$screen-lg}) {
-    padding: (variables.$innerMedium * 2);
-
-    &-largest {  padding: (variables.$innerLargest * 1.5);  }
-    &-larger {   padding: (variables.$innerLarger * 1.5);   }
-    &-large {    padding: (variables.$innerLarge * 1.5);    }
-    &-small {    padding: (variables.$innerSmall * 1.5);    }
-    &-smaller {  padding: (variables.$innerSmaller * 1.5);  }
-    &-smallest { padding: (variables.$innerSmallest * 1.5); }
+  &-zero-y {
+    padding-top: 0;
+    padding-top: 0;
  }
-
-  &-zero-x { padding-left: unset; padding-right: unset; }
-  &-zero-y { padding-top:  unset; padding-top:   unset; }
 }

 .rounded {
-  border-radius: variables.$borderRadius;
+  border-radius: spacing.$borderRadius;

  &-top {
    border-bottom-right-radius: 0;
@@ -129,12 +86,12 @@ figure {

 .border {
  border-style: solid;
-  border-width: variables.$borderWidth;
+  border-width: spacing.$borderWidth;

  &-thin { border-width: 0.0625em; }
-  &-regular { border-width: variables.$borderWidth; }
-  &-thick { border-width: variables.$borderThick; }
-  &-thicker { border-width: variables.$borderThicker; }
+  &-regular { border-width: spacing.$borderWidth; }
+  &-thick { border-width: spacing.$borderThick; }
+  &-thicker { border-width: spacing.$borderThicker; }

  &-top {
    border-right-width: 0;
--- a/resources/css/global/mixins/_generate-button-classes.scss
+++ b/resources/css/global/mixins/_generate-button-classes.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../variables/colours";

@use "sass:color";

@@ -12,13 +12,13 @@

  @each $button in $buttons {
    #{$button}.#{$name} {
-      color: variables.$white;
+      color: colours.$white;
      background: $hex;
      border-color: $hex;

      &:hover,
      &:focus {
-        color: variables.$white;
+        color: colours.$white;
        background: color.adjust($hex, $lightness: 10%);
        border-color: color.adjust($hex, $lightness: 10%);
      }
--- a/resources/css/global/mixins/_generate-colour-classes.scss
+++ b/resources/css/global/mixins/_generate-colour-classes.scss
@@ -1,5 +1,4 @@
@use "text-contrast";
-@use "../variables";

@use "sass:color";

@@ -23,16 +22,6 @@
      ::selection {
        @include text-contrast.text_contrast(color.invert($hex));
        background: color.invert($hex);
-        @if($name == "white") {
-          color: variables.$white;
-          background: variables.$primary;
-        } @else if($name == "black") {
-          color: variables.$white;
-          background: variables.$primary-lighter;
-        } @else {
-          @include text-contrast.text_contrast(color.invert($hex));
-          background: color.invert($hex);
-        }
      }
    }
  }
--- a/resources/css/global/mixins/_text-contrast.scss
+++ b/resources/css/global/mixins/_text-contrast.scss
@@ -1,11 +1,11 @@
+@use "../variables/colours";
+
@use "sass:color";
@use "sass:math";

-@use "../variables";
-
-@mixin text-contrast($n, $dark: variables.$black, $light: variables.$white, $cutoff: 1.667) {
+@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
  $brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
-  $light-color: math.round((color.channel(variables.$white, "red") * 299) + (color.channel(variables.$white, "green") * 587) + math.div((color.channel(variables.$white, "blue") * 114), 1000));
+  $light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));

  @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
    color: $light;
--- a/resources/css/global/variables/_spacing.scss
+++ b/resources/css/global/variables/_spacing.scss
@@ -17,13 +17,12 @@ $sectionLarge:          5.000em;
 $sectionLarger:         7.500em;
 $sectionLargest:       10.000em;

-$containerLarger:      87.000em;
 $containerLarge:       73.125em;
 $containerMedium:      60.000em;
 $containerSmall:       50.000em;
 $containerNarrow:      34.000em;

-$innerLargest:          5.000em;
+$innerLarger:           5.000em;
 $innerLarger:           3.000em;
 $innerLarge:            2.000em;
 $innerMedium:           1.500em;
--- a/resources/css/plugins/_contact-form-7.scss
+++ b/resources/css/plugins/_contact-form-7.scss
@@ -1,4 +1,4 @@
-@use "../global/variables";
+@use "../global/variables/colours";

 .wpcf7 .screen-reader-response {
  display: none;
@@ -11,11 +11,11 @@

  padding: 1em 0 0;
  margin-top: 2em;
-  border: 1px solid variables.$grey-light;
+  border: 1px solid colours.$grey-light;
  border-width: 1px 0 0;

  .knockout & {
-    border-color: rgba(variables.$white, 0.3);
+    border-color: rgba(colours.$white, 0.3);
  }
 }

--- a/resources/css/plugins/_mce.scss
+++ b/resources/css/plugins/_mce.scss
@@ -1,14 +1,14 @@
-@use "../global/variables";
+@use "../global/variables/colours";

 #mce-responses {
  .response {
    padding: 0 0 1em;
    margin: 0 0 1em;
    font-size: 0.875em;
-    border-bottom: 1px solid variables.$grey-lighter;
+    border-bottom: 1px solid colours.$grey-lighter;
  }
 }

 .knockout #mce-responses .response {
-  border-bottom-color: rgba(variables.$white, 0.3);
+  border-bottom-color: rgba(colours.$white, 0.3);
 }
--- a/resources/css/sections/_footer.scss
+++ b/resources/css/sections/_footer.scss
--- a/resources/css/sections/_header.scss
+++ b/resources/css/sections/_header.scss
--- a/resources/js/blocks/lib/classNames.js
+++ b/resources/js/blocks/lib/classNames.js
@@ -5,7 +5,7 @@ export function containerClassNames(attributes, extraClasses = [])
    'container',
  ];

-  if('container_width' in attributes && !['', '0'].includes(attributes.container_width))
+  if('container_width' in attributes)
    classNames.push(`container-${attributes.container_width}`);

  if('alignment' in attributes)
--- a/resources/json/font-awesome-brands.json
+++ b/resources/json/font-awesome-brands.json
--- a/resources/json/font-awesome-regular.json
+++ b/resources/json/font-awesome-regular.json
--- a/resources/json/font-awesome-solid.json
+++ b/resources/json/font-awesome-solid.json
--- a/resources/views/blocks/article/editor.scss
+++ b/resources/views/blocks/article/editor.scss
@@ -1,31 +1,8 @@
@use "../../../css/global/variables/spacing";

 .wp-block-badegg-article {
-  position: relative;
-
  .wp-block-pullquote {
    padding: 0;
    margin: spacing.$innerLarge auto;
  }
-
-  .badegg-article-select-parent {
-    appearance: none;
-    display: block;
-    position: absolute;
-    inset: 0;
-    background: transparent;
-    border: none;
-  }
-
-  .block-editor-block-list {
-    &__layout {
-      > *:first-child {
-        margin-top: 0;
-      }
-
-      > *:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
 }
--- a/resources/views/blocks/article/index.jsx
+++ b/resources/views/blocks/article/index.jsx
@@ -15,28 +15,18 @@ import BackgroundImage from '../../../js/blocks/components/BackgroundImage';
 import BlockSettings from '../../../js/blocks/components/BlockSettings';

 registerBlockType(metadata.name, {
-  edit({ attributes, setAttributes, clientId }) {
+  edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps();
-
-    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
+    blockProps.className = sectionClassNames(attributes, blockProps.className).join(' ');

    return (
-      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
+      <div { ...blockProps }>
        <BlockSettings
          attributes={ attributes }
          setAttributes={ setAttributes }
        />

-        <button
-          className="badegg-article-select-parent"
-          onClick={() => {
-            wp.data.dispatch('core/block-editor').selectBlock(clientId);
-          }}
-        >
-          <span className="visually-hidden">Select Block</span>
-        </button>
-
-        <div { ...blockProps }>
+        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
          <InnerBlocks
            allowedBlocks={ allowedBlocks }
            defaultBlock={
@@ -57,11 +47,11 @@ registerBlockType(metadata.name, {
  },
  save({ attributes }) {
    const blockProps = useBlockProps.save();
-    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
+    blockProps.className = sectionClassNames(attributes, blockProps.className ).join(' ');

    return (
-      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
-        <div { ...blockProps }>
+      <div { ...blockProps }>
+        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
          <InnerBlocks.Content />
        </div>

--- a/resources/views/components/socials.blade.php
+++ b/resources/views/components/socials.blade.php
@@ -1,12 +1,12 @@
-@if($socials)
-  <ul class="socials nolist">
-    @foreach($socials as $social)
-      <li>
-        <a href="{{ get_field('url', $social) }}" rel="noopener nofollow noreferrer me" target="_blank">
-          <i class="fa-brands fa-{{ get_field('fontawesome_brands', $social) }}"></i>
-          <span class="visually-hidden">{{ get_the_title($social) }}</span>
-        </a>
-      </li>
-    @endforeach
-  </ul>
-@endif
+<ul class="socials nolist">
+  @foreach($socials as $social)
+    <li>
+      <a
+        class="fa-brands fa-{{ get_field('fontawesome_brands', $social) }}"
+        href="{{ get_field('url', $social) }}"
+        rel="noopener nofollow noreferrer"
+        target="_blank"
+      ><span class="visually-hidden">{{ get_the_title($social) }}</span></a>
+    </li>
+  @endforeach
+</ul>
--- a/resources/views/partials/favicon.blade.php
+++ b/resources/views/partials/favicon.blade.php
@@ -1,6 +0,0 @@
-<link rel="icon" type="image/png" href="{{ Vite::asset('resources/images/favicon/favicon-96x96.png') }}" sizes="96x96" />
-<link rel="icon" type="image/svg+xml" href="{{ Vite::asset('resources/images/favicon/favicon.svg') }}" />
-<link rel="shortcut icon" href="{{ Vite::asset('resources/images/favicon/favicon.ico') }}" />
-<link rel="apple-touch-icon" sizes="180x180" href="{{ Vite::asset('resources/images/favicon/apple-touch-icon.png') }}" />
-<meta name="apple-mobile-web-app-title" content="{!! $siteName !!}" />
-<link rel="manifest" href="{{ Vite::asset('resources/images/favicon/site.webmanifest') }}" />
--- a/resources/views/sections/footer/footer.blade.php
+++ b/resources/views/sections/footer/footer.blade.php
@@ -1,4 +1,3 @@
 <footer class="content-info">
  @php(dynamic_sidebar('sidebar-footer'))
-  @include('components.socials')
 </footer>