Overhaul of a lot of things.

2025-08-31 21:26:31 -04:00
parent 63a7ab4286
commit 7c70bc0de7
149 changed files with 6025 additions and 41504 deletions
--- a/web/themes/custom/dchadwick/components/ping-pong/ping-pong.html.twig
+++ b/web/themes/custom/dchadwick/components/ping-pong/ping-pong.html.twig
--- a/web/themes/custom/dchadwick/css/style.css
+++ b/web/themes/custom/dchadwick/css/style.css
@@ -1,14 +1,70 @@
 :root {
-  --site-primary: #0197F6;
-  --site-primary-light: #68C5DB;
+  --site-primary: #9DC4B5;
+  --site-primary-light: #BAD9A2;
  --site-gray: #565264;
-  --site-secondary: #02182B;
+  --site-secondary: #246A73;
+  --site-tertiary: #93A392;
+  --site-quarternary: #E2EB98;
  --site-white: #EFF9F0;
  --site-platinum: #EFF9F0;
  --site-danger: #D7263D;
 }

-/* OLD GET RID OF THESE */
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+  margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+body {
+  /* 4. Add accessible line-height */
+  line-height: 1.5;
+  /* 5. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input, button, textarea, select {
+  font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}
+
+/*
+  10. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}
+
 h1 {
  font-size: 3rem;
  margin: 20px 0;
@@ -38,20 +94,15 @@ h4 {

 #block-dchadwick-primary-local-tasks {
  width: auto;
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
+  padding: 20px 0;
+  background: var(--site-secondary);
 }
 #block-dchadwick-primary-local-tasks > ul {
  margin: 0;
-  padding: 20px;
  display: flex;
  justify-content: center;
  list-style-type: none;
  gap: 5px;
-  background: var(--site-platinum);
 }
 #block-dchadwick-primary-local-tasks > ul li a {
  padding: 10px 20px;
@@ -61,7 +112,7 @@ h4 {
  transition: all 0.2s ease;
 }
 #block-dchadwick-primary-local-tasks > ul li a:hover {
-  background: var(--site-secondary);
+  background: var(--site-tertiary);
  color: var(--site-primary);
 }

@@ -205,7 +256,7 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
  top: 50%;
  transform: translateY(-50%);
  left: 2rem;
-  background: rgba(254, 215, 101, 0.93);
+  background: var(--site-tertiary);
  padding: 2rem;
  border-radius: 10px;
 }
@@ -222,8 +273,10 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
 .hero-caption__text {
  font-size: 24px;
  margin-bottom: 20px;
+  color: var(--site-white);
 }
 .hero-caption__text p {
+  color: var(--site-white);
  margin: 0;
 }

@@ -265,23 +318,6 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
    font-size: 0.8rem;
  }
 }
-#block-dchadwick-recentfightsblock .card-footer, .block-recent-fights-block .card-footer {
-  display: flex;
-}
-#block-dchadwick-recentfightsblock .card-footer button, .block-recent-fights-block .card-footer button {
-  background: #fffaf3;
-  border: 1px solid #6e6a86;
-  flex-grow: 1;
-}
-#block-dchadwick-recentfightsblock .card-footer button:hover, .block-recent-fights-block .card-footer button:hover {
-  background: #191724;
-}
-#block-dchadwick-recentfightsblock .card-footer button:hover a, .block-recent-fights-block .card-footer button:hover a {
-  color: #f6c177;
-}
-#block-dchadwick-recentfightsblock .card-footer button a, .block-recent-fights-block .card-footer button a {
-  color: #6e6a86;
-}

 #fighter__personal-info .fieldset-wrapper, #fighter__stats .fieldset-wrapper {
  display: flex;
@@ -309,7 +345,7 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
  font-size: 2rem;
 }
 #fighter__hero {
-  color: #f6c177;
+  color: var(--site-secondary);
  display: flex;
  flex-flow: wrap;
  padding: 2rem 0;
@@ -318,7 +354,7 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
 }
 #fighter__text {
  text-align: center;
-  background: #1f1d2e;
+  background: var(--site-primary);
  padding: 2rem 3rem;
  border: 1px solid;
 }
@@ -342,7 +378,7 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {

 h2#fight-history {
  text-align: center;
-  color: #6e6a86;
+  color: var(--site-primary);
  font-size: 3rem;
  margin: 2rem 0;
  text-transform: uppercase;
@@ -352,20 +388,20 @@ table.cols-2 {
  margin: auto;
  width: auto;
  text-align: center;
-  color: #f6c177;
+  color: var(--site-secondary);
 }
 table.cols-2 thead tr {
  font-size: 1.6rem;
-  background: #191724 !important;
+  background: var(--site-primary) !important;
 }
 table.cols-2 thead tr th {
  padding: 10px 0;
 }
 table.cols-2 tr:nth-child(odd) {
-  background: #fffaf3;
+  background: var(--site-primary);
 }
 table.cols-2 tr:nth-child(odd) a {
-  color: #191724;
+  color: var(--site-secondary);
 }
 table.cols-2 tbody > tr > td {
  padding: 1rem;
@@ -375,7 +411,7 @@ table.cols-2 tbody > tr > td a {
 }

 td.loss {
-  background: #eb6f92;
+  background: var(--site-danger);
  --bs-table-striped-color: #eb6f92;
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
@@ -385,7 +421,7 @@ td.loss a {
 }

 td.win {
-  background: #9ccfd8;
+  background: var(--site-primary);
 }
 td.win a {
  color: white !important;
@@ -425,7 +461,7 @@ td.win a {
 }
 .page-node-type-fight th.win {
  color: white;
-  background: #9ccfd8;
+  background: var(--site-secondary);
 }

 #compare-fighters img {
@@ -440,17 +476,17 @@ table.cols-5 thead {
  text-align: left;
 }
 table.cols-5 tbody tr:nth-child(odd) {
-  background: #fffaf3;
+  background: var(--site-secondary);
 }
 table.cols-5 td {
  padding: 5px 0;
 }
 table.cols-5 td.correct {
-  background: #9ccfd8 !important;
+  background: var(--site-tertiary);
  color: white;
 }
 table.cols-5 td.incorrect {
-  background: #eb6f92;
+  background: var(--site-danger);
  color: white;
 }

@@ -541,6 +577,25 @@ table.cols-5 td.incorrect {
  right: 34px;
 }

+.node-type-snippet .body {
+  position: relative;
+}
+.node-type-snippet .copy {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  padding: 10px;
+  border-radius: 50%;
+  background: var(--site-tertiary);
+  color: var(--site-primary);
+  cursor: pointer;
+  transition: all 250ms ease;
+}
+.node-type-snippet .copy:hover {
+  background: var(--site-primary);
+  color: var(--site-white);
+}
+
 #block-dchadwick-breadcrumbs {
  background: var(--site-gray);
 }
@@ -657,7 +712,7 @@ body {
 }

 a {
-  color: var(--site-primary);
+  color: var(--site-gray);
  text-decoration: none;
  cursor: pointer;
 }
@@ -689,8 +744,19 @@ blockquote {
  padding-left: 20px;
 }

+pre, code {
+  display: block;
+  max-width: 100%;
+  white-space: pre;
+  overflow-x: auto;
+  background: var(--site-gray);
+  padding: 1rem;
+}
+
 pre {
-  background: #414559;
-  color: #c6d0f5;
-  padding: 10px;
+  margin: 0;
+}
+
+code {
+  display: block;
 }
--- a/web/themes/custom/dchadwick/dchadwick.libraries.yml
+++ b/web/themes/custom/dchadwick/dchadwick.libraries.yml
@@ -48,6 +48,13 @@ tabbed-content:
 swiper:
  css:
    theme:
-      libraries/swiper-bundle.min.css: { minified: true }
+      libraries/swiper/swiper-bundle.min.css: { minified: true }
  js:
-    libraries/swiper-bundle.min.js: { minified: true }
+    libraries/swiper/swiper-bundle.min.js: { minified: true }
+
+click-copy:
+  js:
+    js/clickCopy.js: { }
+  dependencies:
+    - core/drupal
+    - core/once
--- a/web/themes/custom/dchadwick/js/clickCopy.js
+++ b/web/themes/custom/dchadwick/js/clickCopy.js
@@ -0,0 +1,19 @@
+((Drupal, once) => {
+  Drupal.behaviors.clickCopy = {
+    attach(context) {
+      let copyButton = once("clickCopy", "#copy-button");
+      copyButton.forEach((btn) => {
+        btn.addEventListener("click", function (e) {
+          let content = document.querySelector(".snippet-content pre code");
+          navigator.clipboard.writeText(content.textContent);
+
+          // Make some type of vidual indivator that text was copied
+          btn.textContent = 'check';
+          setTimeout(function() {
+            btn.textContent = 'content_copy';
+          }, 500);
+        });
+      });
+    },
+  };
+})(Drupal, once);
--- a/web/themes/custom/dchadwick/src/sass/partials/event.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/event.scss
@@ -10,7 +10,7 @@ table.cols-5 {
  tbody {

    tr:nth-child(odd) {
-      background: $surface;
+      background: var(--site-secondary);
    }

  }
@@ -20,12 +20,12 @@ table.cols-5 {
  }

  td.correct {
-    background: $foam !important;
+    background: var(--site-tertiary);
    color: white;
  }

  td.incorrect {
-    background: $love;
+    background: var(--site-danger);
    color: white;
  }

--- a/web/themes/custom/dchadwick/src/sass/partials/fight.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/fight.scss
@@ -20,7 +20,7 @@

  th.win {
    color: white;
-    background: $foam;
+    background: var(--site-secondary);
  }
 }

--- a/web/themes/custom/dchadwick/src/sass/partials/fighter.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/fighter.scss
@@ -38,7 +38,7 @@
  }

  &__hero {
-    color: $orangeish;
+    color: var(--site-secondary);
    display: flex;
    flex-flow: wrap;
    padding: 2rem 0;
@@ -53,7 +53,7 @@
      font-size: 2.4rem;
    }
    text-align: center;
-    background: $overlay_bl;
+    background: var(--site-primary);
    padding: 2rem 3rem;
    border: 1px solid;
  }
@@ -76,7 +76,7 @@

 h2#fight-history {
  text-align: center;
-  color: $muted;
+  color: var(--site-primary);
  font-size: 3rem;
  margin: 2rem 0;
  text-transform: uppercase;
@@ -86,11 +86,11 @@ table.cols-2 {
  margin: auto;
  width: auto;
  text-align: center;
-  color: $orangeish;
+  color: var(--site-secondary);

  thead tr {
    font-size: 1.6rem;
-    background: $base_bl !important;
+    background: var(--site-primary) !important;

    th {
      padding: 10px 0;
@@ -98,9 +98,9 @@ table.cols-2 {
  }

  tr:nth-child(odd) {
-    background: $surface;
+    background: var(--site-primary);
    a {
-      color: $base_bl;
+      color: var(--site-secondary);
    }
  }
  tbody > tr > td {
@@ -111,7 +111,7 @@ table.cols-2 {
  }
 }
 td.loss {
-  background: $love;
+  background: var(--site-danger);
  --bs-table-striped-color: #eb6f92;
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
@@ -120,7 +120,7 @@ td.loss {
  }
 }
 td.win {
-  background: $foam;
+  background: var(--site-primary);

  a {
    color: white !important;
--- a/web/themes/custom/dchadwick/src/sass/partials/header.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/header.scss
@@ -59,17 +59,3 @@ header#header {
    }
  }
 }
-
-// @media screen and (max-width: $container-full) {
-//   #block-dchadwick-main-menu {
-//     margin-right: 50px;
-//   }
-//   #block-dchadwick-site-branding {
-//     margin-left: 50px;
-//   }
-//   header#header {
-//     padding-left: 20px;
-//     padding-right: 20px;
-//   }
-// }
-
--- a/web/themes/custom/dchadwick/src/sass/partials/hero.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/hero.scss
@@ -36,7 +36,7 @@
  top: 50%;
  transform: translateY(-50%);
  left: 2rem;
-  background: rgba(254, 215, 101, 0.93);
+  background: var(--site-tertiary);
  padding: 2rem;
  border-radius: 10px;

@@ -52,9 +52,10 @@
  &__text {
    font-size: 24px;
    margin-bottom: 20px;
+    color: var(--site-white);
    p {
+      color: var(--site-white);
      margin: 0;
    }
  }
 }
-
--- a/web/themes/custom/dchadwick/src/sass/partials/local-tasks.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/local-tasks.scss
@@ -1,19 +1,14 @@
 #block-dchadwick-primary-local-tasks {
  width: auto;
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
+  padding: 20px 0;
+  background: var(--site-secondary);

  > ul {
    margin: 0;
-    padding: 20px;
    display: flex;
    justify-content: center;
    list-style-type: none;
    gap: 5px;
-    background: var(--site-platinum);

    li a {
      padding: 10px 20px;
@@ -23,7 +18,7 @@
      transition: all .2s ease;

      &:hover {
-        background: var(--site-secondary);
+        background: var(--site-tertiary);
        color: var(--site-primary);
      }
    }
--- a/web/themes/custom/dchadwick/src/sass/partials/recent-fights.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/recent-fights.scss
@@ -1,14 +1,11 @@
 #recent-fights {
-
  > div {
    grid-gap: 5px;
    justify-content: space-evenly;
  }
-
 }

 #block-dchadwick-recentfightsblock, .block-recent-fights-block {
-
  h2 {
    text-transform: uppercase;
    font-size: 2.4rem;
@@ -45,27 +42,4 @@
      }
    }
  }
-
-  .card-footer {
-    display: flex;
-
-    button {
-      background: $surface;
-      border: 1px solid $muted;
-      flex-grow: 1;
-
-      &:hover {
-        background: $base_bl;
-
-        a {
-          color: $orangeish;
-        }
-      }
-
-      a {
-        color: $muted;
-      }
-
-    }
-  }
 }
--- a/web/themes/custom/dchadwick/src/sass/partials/reset.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/reset.scss
@@ -0,0 +1,54 @@
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+  margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  /* 4. Add accessible line-height */
+  line-height: 1.5;
+  /* 5. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input, button, textarea, select {
+  font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}
+
+/*
+  10. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}
--- a/web/themes/custom/dchadwick/src/sass/partials/snippet.scss
+++ b/web/themes/custom/dchadwick/src/sass/partials/snippet.scss
@@ -0,0 +1,23 @@
+.node-type-snippet {
+
+  .body {
+    position: relative;
+  }
+
+  .copy {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    padding: 10px;
+    border-radius: 50%;
+    background: var(--site-tertiary);
+    color: var(--site-primary);
+    cursor: pointer;
+    transition: all 250ms ease;
+
+    &:hover {
+      background: var(--site-primary);
+      color: var(--site-white);
+    }
+  }
+}
--- a/web/themes/custom/dchadwick/src/sass/style.scss
+++ b/web/themes/custom/dchadwick/src/sass/style.scss
@@ -1,39 +1,23 @@
 // @tailwind base;
-// @tailwind components;
-// @tailwind utilities;
-
 // Colors.
 :root {
-  --site-primary: #0197F6;
-  --site-primary-light: #68C5DB;
+  --site-primary: #9DC4B5;
+  --site-primary-light: #BAD9A2;
  --site-gray: #565264;
-  --site-secondary: #02182B;
+  --site-secondary: #246A73;
+  --site-tertiary: #93A392;
+  --site-quarternary: #E2EB98;
  --site-white: #EFF9F0;
  --site-platinum: #EFF9F0;
  --site-danger: #D7263D;
 }

-/* OLD GET RID OF THESE */
-$base_light: #faf4ed;
-$base_bl: #191724;
-$overlay_bl: #1f1d2e;
-$muted: #6e6a86;
-$subtle: #908caa;
-$surface: #fffaf3;
-$text: #e0def4;
-$love: #eb6f92;
-$orangeish: #f6c177;
-$rose: #ebbcba;
-$pine: #31748f;
-$foam: #9ccfd8;
-$iris: #c4a7e7;
-$link-color: $foam;
-
 // Other variables.
 $container-full: 1300px;
 $container-plus-padding: 1216px;

 // Partials.
+@import "partials/reset";
@import "partials/headings";
@import "partials/local-tasks";
@import "partials/buttons";
@@ -47,6 +31,7 @@ $container-plus-padding: 1216px;
@import "partials/fight";
@import "partials/event";
@import "partials/article";
+@import "partials/snippet";
@import "partials/breadcrumbs";
@import "partials/characters";
@import "partials/lb-styles";
@@ -70,7 +55,7 @@ body {
 }

 a {
-  color: var(--site-primary);
+  color: var(--site-gray);
  text-decoration: none;
  cursor: pointer;
 }
@@ -101,9 +86,19 @@ blockquote {
  padding-left: 20px;
 }

-pre {
-  background: #414559;
-  color: #c6d0f5;
-  padding: 10px;
+pre, code {
+  display: block;
+  max-width: 100%;
+  white-space: pre;
+  overflow-x: auto;
+  background: var(--site-gray);
+  padding: 1rem;
 }

+pre {
+  margin: 0;
+}
+
+code {
+  display: block;
+}
--- a/web/themes/custom/dchadwick/templates/field/field--node--body--snippet.html.twig
+++ b/web/themes/custom/dchadwick/templates/field/field--node--body--snippet.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+{{ attach_library('dchadwick/click-copy') }}
+<div{{ attributes }}>
+  {% for item in items %}
+    <span class="material-icons copy" id="copy-button">content_copy</span>
+    <div{{ item.attributes.addClass("snippet-content") }}>{{ item.content }}</div>
+  {% endfor %}
+</div>