rawfeed 0.2.11 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03a342b47ad00dfaf348d03b249341e4b27491cf888fa2d2725812098524ce8d
-  data.tar.gz: e8e66e6391f21181e61642764582c4c389481548d318f7b5e70e2e30a2ba146d
+  metadata.gz: 5b4a5c7ff703bd0049e8713cc0d08a73698657b85a0cccbf687545cb63d5476e
+  data.tar.gz: 1787cc1fcda221d1aad7fa838abaecb625428c6ea03f81a7b2e08b7d4976eaf1
 SHA512:
-  metadata.gz: 9e7d68af9e545e550fddf9f9595e06ce68181636f41f952a5a0272d2a6e48e009d6e4feba38774dc86c35038a4856e0cb07d1afb2922316f00cf9b563e962f60
-  data.tar.gz: 8f6dd9a0401d5435cb8ef04bde376c6ae56b3f0f8cf61416b442aa947bf6fd56976bf5de73a31108b65ceddf7a3eb0062ab5b7829c2096897cbdedf8562125d7
+  metadata.gz: eb0bea3dd530c918108078babc853563f0a404801807f56dbcff81694b26812f6e9edb09b49b11e6a00db175ffd84b92efe363260b1d6a5a81ff142c4f2c3ffe
+  data.tar.gz: '0251043911fc99d55b9b45d0cf991fb350f5ba6f3902bdbfce97f1919c221f86041ac4a46f03284888e74207d73036661da45768ecc924eec0407a052b8d4687'

data/{LICENSE.txt → LICENSE}

@@ -1,6 +1,6 @@
 Creative Commons Attribution 4.0 International (CC BY 4.0)
 
-Copyright (c) 2025 {rawfeed} <https://rawfeed.github.io>
+Copyright (c) 2026 {rawfeed} <https://rawfeed.github.io>
 
 This theme is licensed under the Creative Commons Attribution 4.0 International License.
 

data/README.md

@@ -51,3 +51,15 @@ See [here](https://rawfeed.github.io/rawfeed-jekyll/changelog/)
 # License
 
 The theme is available as open source under the terms of [this License](https://rawfeed.github.io/rawfeed-jekyll/license/).
+
+# Donation
+
+Click on the image below to be redirected to the donation forms:
+
+<div class="donation">
+  <a href="https://williamcanin.github.io/donate/" target="_blank">
+    <img width="160" height="100" src="assets/images/icons/donation.svg" alt="Donate"/>
+  </a>
+</div>
+
+> It is very important that you make a donation to motivate further development of rawfeed-jekyll. :)

data/_data/options.yml

@@ -102,6 +102,7 @@ default:
   width: 860 # default: 860
   background_focus: true
   rounding: false
+  user_select: none # none | text
   font:
     # Fonts Style Options: [default: monospace]
     # "'Ubuntu', sans-serif"
@@ -221,8 +222,11 @@ pixels:
   title: "pixels"
   layout:
     width: 860 # default: 860
+
 # section: [page]
 page:
+  toc:
+    title: "Table of Contents"
   updated_on: "Page updated on"
   error:
     image: https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExNXlxYzc5eXp1Nm01cmtldzM5bHhwdzJ2Njk2c2E4b2RkdTBkeGs5eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/c20UV66B7zCWA/giphy.gif
@@ -280,3 +284,46 @@ footer:
     page_url: "/licenses/"
   message: |
     Your impactful phrase!
+
+# section: [donation]
+# Tip: use svg images for better quality (https://www.iconpacks.net)
+donation:
+  title: "Support the Project"
+  description: "If this project helps you, consider supporting it"
+  copy_button:
+    text: "Copy"
+    clicked: "Copied!"
+  services:
+    - name: pix
+      logo: "/assets/images/icons/pix.svg"
+      description: |
+        Make your donation using PIX from Brazil. Use the key below.
+      address: "00b53f61-b009-4f05-8c43-444cce86af1d"
+      qrcode: "/assets/images/qrcode_inter.jpg"
+
+    - name: card
+      logo: "/assets/images/icons/card.svg"
+      description: |
+        Donation using card through the service `Buy Me a Coffee`.
+      address: "https://buymeacoffee.com/williamcanin"
+
+    - name: paypal
+      logo: "/assets/images/icons/paypal.svg"
+      description: |
+        Donate quickly and securely using your PayPal balance or linked card.
+      address: "https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=YBK2HEEYG8V5W&source=&ssrt=1775261628264"
+
+    - name: bitcoin (lightning network)
+      logo: "/assets/images/icons/lightning_network.svg"
+      description: |
+        Make an anonymous Bitcoin donation using a Lightning Address.
+      address: "williamcanin@walletofsatoshi.com"
+      qrcode: "/assets/images/qrcode_wos.jpg"
+
+    - name: bitcoin (on-chain)
+      logo: "/assets/images/icons/bitcoin.svg"
+      description: |
+        Make an anonymous Bitcoin donation using a On-Chain address (Binance).
+      address: "bc1qluh2mrchmtrwedspwhtta8ccgzsl9jqdr47f2p"
+      qrcode: "/assets/images/qrcode_btc_binance.jpg"
+

data/_includes/layout/data.liquid

@@ -6,6 +6,7 @@
 {%- assign search_url = "/blog/?search=open" | relative_url -%}
 {%- assign tags_url = "/blog/tags/" | relative_url -%}
 {%- assign pub_url = "/pub/" -%}
+{%- assign donate_url = "/donate/" -%}
 {%- assign feed_url = "/feed.xml" | relative_url -%}
 {%- assign head_ = site.data.options.head -%}
 {%- assign site_title = site.data.options.title -%}
@@ -16,6 +17,7 @@
 {%- assign home_ = site.data.options.home -%}
 {%- assign default_ = site.data.options.default -%}
 {%- assign page_ = site.data.options.page -%}
+{%- assign donation_ = site.data.options.donation -%}
 {%- assign contact_ = site.data.options.contact -%}
 {%- assign footer_ = site.data.options.footer -%}
 {%- assign socials_ = site.data.options.socials -%}

data/_layouts/contact.html

@@ -81,82 +81,162 @@ layout: default
   <p>To use the email submission form, you need to:</p>
   <p>1 - Copy the script below and implement it in <a href="https://script.google.com" target="_blank">Google Apps Script</a>:</p>
   <blockquote>
-    <p>Note1: Don't forget to put your gmail in the script.</p>
-    <p>Note2: Without editing the script in Google Apps Script, you need to deploy it again.</p>
+    <p>Note1: Don't forget to change the constants: TO_ADDRESS, SITE, LOGO_URL, MINIMUM_MESSAGE.</p>
+    <p>Note2: Without editing the script in Google Apps Script, you will need to redeploy it.</p>
   </blockquote>
 
   {% highlight javascript linenos %}
-  // IMPORTANT! You must put your gmail email here.
-  const TO_ADDRESS = "YOUR EMAIL GMAIL";
+  /**
+  * GOOGLE APPS SCRIPT - HYBRID VERSION (RECAPTCHA & TURNSTYLE)
+  * by William C. Canin
+  */
 
-  // Get the secret key from the Script Properties
-  const RECAPTCHA_SECRET_KEY = PropertiesService.getScriptProperties().getProperty('RECAPTCHA_SECRET_KEY');
+  const TO_ADDRESS = "example@mail.com";
+  const SITE = "https://example.com";
+  const LOGO_URL = "https://example.com/assets/images/logo.png";
+  const MINIMUM_MESSAGE = 50;
 
-  // Function to validate the reCAPTCHA token
-  function validateRecaptcha(token) {
-    if (!token) {
-      throw new Error("Missing reCAPTCHA token.");
-    }
-    const url = "https://www.google.com/recaptcha/api/siteverify";
-    const payload = {
-      secret: RECAPTCHA_SECRET_KEY,
-      response: token
-    };
+  // Accessing script properties
+  const props = PropertiesService.getScriptProperties();
+
+  /**
+  * HTML sanitization and Header Injection prevention
+  */
+  function sanitize(str, isHeader = false) {
+    if (!str) return "";
+    let clean = str.trim();
+    if (isHeader) clean = clean.replace(/[\r\n]/g, "");
+    return clean.replace(/[&<>"']/g, function(m) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[m];
+    });
+  }
+
+  /**
+  * Cloudflare Turnstile Validation
+  */
+  function validateTurnstile(token) {
+    if (!token) throw new Error("[Script]: Turnstile token missing.");
+    const secret = props.getProperty("TURNSTILE_SECRET_KEY");
 
-    const response = UrlFetchApp.fetch(url, {
+    const response = UrlFetchApp.fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
       method: "post",
-      payload: payload
+      payload: { secret: secret, response: token }
     });
 
     const result = JSON.parse(response.getContentText());
+    if (!result.success) throw new Error("[Script]: Turnstile validation failed.");
+    return true;
+  }
 
-    if (!result.success) {
-      throw new Error("reCAPTCHA verification failed: " + (result['error-codes'] || 'Unknown error.'));
-    }
+  /**
+  * Google reCAPTCHA Validation
+  */
+  function validateRecaptcha(token) {
+    if (!token) throw new Error("[Script]: reCAPTCHA token missing.");
+    const secret = props.getProperty("RECAPTCHA_SECRET_KEY");
+
+    const response = UrlFetchApp.fetch("https://www.google.com/recaptcha/api/siteverify", {
+      method: "post",
+      payload: { secret: secret, response: token }
+    });
 
+    const result = JSON.parse(response.getContentText());
+    if (!result.success) throw new Error("[Script]: reCAPTCHA failed.");
     return true;
   }
 
-
+  /**
+  * Main Function
+  */
   function doPost(e) {
     try {
-      const data = JSON.parse(e.postData.contents);
+      const contents = e.postData ? e.postData.contents : null;
+      if (!contents) throw new Error("No data received");
+
+      const data = JSON.parse(contents);
 
-      // 1. Validate the reCAPTCHA token first!
-      validateRecaptcha(data['g-recaptcha-response']);
+      // Identifies the token coming from the front-end (accepts both names)
+      const token = data['g-recaptcha-response'] || data['turnstileToken'] || data['cf-turnstile-response'];
 
-      // 2. If validation passed, continue with the rest of the code
-      const { name, email, message } = data;
+      let antiRobot = "Unknown";
 
-      if (!name || !email || !message) {
-        throw new Error("Missing form data.");
+      // Hybrid Logic: Validates according to the key present in the Script.
+      if (props.getProperty('RECAPTCHA_SECRET_KEY')) {
+        antiRobot = "Google reCAPTCHA";
+        validateRecaptcha(token);
+      } else if (props.getProperty('TURNSTILE_SECRET_KEY')) {
+        validateTurnstile(token);
+        antiRobot = "Cloudflare Turnstile";
+      } else {
+        throw new Error("No Captcha Secret Key configured in Script Properties.");
       }
 
-      const subject = "New website message " + name;
-      const htmlBody = `
-        <p>You have received a new message from your website.:</p><hr>
-        <p><b>Name:</b> ${name}</p>
-        <p><b>Email:</b> <a href="mailto:${email}">${email}</a></p>
-        <p><b>Message:</b></p>
-        <p style="white-space: pre-wrap;">${message}</p><hr>
-      `;
-
-      MailApp.sendEmail({
-        to: TO_ADDRESS,
-        subject: subject,
-        htmlBody: htmlBody,
-        replyTo: email
+      const name = sanitize(data.name, true);
+      const email = sanitize(data.email, true);
+      const message = data.message || "";
+      const pageUrl = data.page_url ? sanitize(data.page_url, true) : SITE;
+      const locationInfo = data.location_info || "Unknown";
+
+      if (!name || !email || !message) throw new Error("[Script]: Missing form data.");
+      if (message.length < MINIMUM_MESSAGE) throw new Error("[Script]: Message too short.");
+
+      // Anti-Spam Rate Limit
+      const lastSent = props.getProperty(`last_sent_${email}`);
+      const now = Date.now();
+      if (lastSent && (now - lastSent < 60000)) throw new Error("[Script]: Please wait 1 minute.");
+      props.setProperty(`last_sent_${email}`, now.toString());
+
+      // --- MESSAGE PROCESSING ---
+      let escapedContent = sanitize(message);
+      let codeBlocks = [];
+      let placeholder = "___CODE_BLOCK_";
+
+      let cleanMessage = escapedContent.replace(/```([\s\S]+?)```/g, function(match, code) {
+        const id = codeBlocks.length;
+
+        const codeHtml = `<pre style="background: #f6f8fa; color: #24292e; padding: 15px; border-radius: 6px; overflow-x: auto; font-family: 'Fira Code','Consolas',SFMono-Regular, SF Mono, Menlo, monospace; font-size: 15px; line-height: 1.85; border: 1px solid #d1d5da; border-bottom: 3px solid #a1a2a7; border-right: 1px solid #a1a2a7; border-top: 1px solid #a1a2a7; border-left: 1px solid #a1a2a7;">${code.trim()}</pre>`;
+
+        codeBlocks.push(codeHtml);
+        return placeholder + id + "___";
+      });
+
+      cleanMessage = cleanMessage.replace(/\n/g, '<br>');
+      codeBlocks.forEach((block, index) => {
+        cleanMessage = cleanMessage.replace(placeholder + index + "___", block);
       });
 
-      return ContentService
-        .createTextOutput(JSON.stringify({ 'result': 'success', 'message': 'Message sent!' }))
-        .setMimeType(ContentService.MimeType.JSON);
+      const subject = `Message from: ${name} (${SITE})`;
+      const htmlBody = `
+      <div style="font-family: sans-serif; color: #333; max-width: 820px; border: 1px solid #eee; padding: 20px;">
+        ${LOGO_URL ? `
+          <div style="text-align: center; margin-bottom: 20px;">
+            <img src="${LOGO_URL}" alt="Logo" style="width: 150px; padding: 10px; border-radius: 50%; border: 1px solid #ddd;">
+          </div>
+        ` : ''}
+
+        <h2 style="color: #333; border-bottom: 2px solid #333; padding-bottom: 10px;"></h2>
+
+        <div style="margin-top: 20px;">
+          <p><b>Name:</b> ${name}</p>
+          <p><b>From:</b> <a href="mailto:${email}">${email}</a></p>
+          <p><b>Message:</b></p>
+          <div style="background: #fff; font-size: 15px; color: black; border: 1px solid transparent; padding: 15px; border-radius: 5px;">
+            ${cleanMessage}
+          </div>
+        </div>
+
+        <footer style="margin-top: 30px; font-size: 12px; color: #888; border-top: 1px solid #eee; padding-top: 10px;">
+          This is an automated email sent by your form ${pageUrl} using ${antiRobot}/Google Script.<br>
+          &copy; ${new Date().getFullYear()} ${SITE.replace('https://', '')} - ${new Date().toLocaleString('pt-BR')} - <b>${locationInfo}</b>
+        </footer>
+      </div>`;
+
+      MailApp.sendEmail({ to: TO_ADDRESS, subject: subject, htmlBody: htmlBody, replyTo: email });
+
+      return ContentService.createTextOutput(JSON.stringify({ 'result': 'success' })).setMimeType(ContentService.MimeType.JSON);
 
     } catch (err) {
-      Logger.log(err.toString());
-      return ContentService
-        .createTextOutput(JSON.stringify({ 'result': 'error', 'message': err.toString() }))
-        .setMimeType(ContentService.MimeType.JSON);
+      return ContentService.createTextOutput(JSON.stringify({ 'result': 'error', 'debug': err.message })).setMimeType(ContentService.MimeType.JSON);
     }
   }
   {% endhighlight %}

data/_layouts/default.html

@@ -22,7 +22,13 @@
   <!-- head -->
 
   <!-- body -->
-  <body data-layout="{{ page.layout | default: '' }}" data-terminal-enabled="{{ home_.terminal.enable | default: false }}" style="font-family: {{ default_.font.style }} !important; font-size: {{ default_.font.size }} !important; letter-spacing: {{ default_.font.spacing }} !important;">
+  <body data-layout="{{ page.layout | default: '' }}"
+  data-terminal-enabled="{{ home_.terminal.enable | default: false }}"
+  style="
+  font-family: {{ default_.font.style }} !important;
+  font-size: {{ default_.font.size }} !important;
+  letter-spacing: {{ default_.font.spacing }} !important;
+  user-select: {{ default_.user_select | default: 'none' }};">
 
     <!-- container -->
     <div class="container-fluid">
@@ -38,14 +44,15 @@
 
     <!-- scripts -->
     <script src="{{ '/assets/vendor/bootstrap/js/bootstrap.bundle.min.js' | relative_url }}"></script>
-    <script src="{{ '/assets/js/fallback/default.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/default.js' | relative_url }}"></script>
     {%- if page.url contains '/blog/' -%}
       <script src="{{ '/assets/vendor/simple-jekyll-search.min.js' | relative_url }}"></script>
     {%- endif -%}
-    <script src="{{ '/assets/js/fallback/blog.js' | relative_url }}"></script>
-    <script src="{{ '/assets/js/fallback/home.js' | relative_url }}"></script>
-    <script src="{{ '/assets/js/fallback/page.js' | relative_url }}"></script>
-    <script src="{{ '/assets/js/fallback/contact.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/blog.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/home.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/page.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/contact.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/donation.js' | relative_url }}"></script>
     <!-- scripts -->
   </body>
   <!-- body -->

data/_layouts/donation.html

@@ -0,0 +1,113 @@
+---
+layout: default
+---
+
+{%- include layout/data.liquid -%}
+
+<div id="donation" class="donation py-5{% if default_.background_focus %} background_focus{% endif %}{% if default_.rounding %} rounding{% endif %}">
+
+  <div class="container">
+
+    {% if donation_.title or donation_.description %}
+    <div class="row justify-content-center mb-5">
+      <div class="col-lg-8 text-center">
+        <h1 class="display-5 fw-bold mb-3 donation__title">{{ donation_.title }}</h1>
+        <p class="mb-0 donation__description">
+          {{ donation_.description }}
+        </p>
+      </div>
+    </div>
+    {% endif %}
+
+
+    <div class="row mt-5">
+      <div class="col donation__content">
+        {{ content }}
+      </div>
+    </div>
+
+    <div class="donation-list d-flex flex-column gap-4">
+
+      {%- for service in donation_.services -%}
+      <div class="donation__box">
+        <div class="row align-items-center g-4">
+
+          <!-- LOGO -->
+          <div class="col-md-2 col-12 text-center">
+            <img src="{{ service.logo | relative_url }}"
+                 class="img-fluid donation__logo"
+                 alt="{{ service.name }}">
+          </div>
+
+          <!-- INFO -->
+          <div class="col-md-7 col-12">
+
+            <h1 class="mb-2 text-capitalize donation__service__name">{{ service.name }}</h1>
+            <p class="mb-4 donation__service__description">
+              {{ service.description | markdownify }}
+            </p>
+
+            {%- unless service.name contains "bitcoin" or service.name == "pix" -%}
+            <div class="row">
+              <div class="col">
+                <a class="fw-bold donation__btn" href="{{ service.address }}"
+                  target="_blank"
+                  rel="noopener">
+                  Open
+                </a>
+              </div>
+            </div>
+            {%- endunless -%}
+
+          </div>
+
+          <!-- QR CODE -->
+          <div class="col-md-3 col-12 text-center">
+            {%- if service.qrcode -%}
+            <img src="{{ service.qrcode | relative_url }}"
+                 class="img-fluid clickable-qr donation__qr"
+                 alt="QR {{ service.name }}"
+                 data-bs-toggle="modal"
+                 data-bs-target="#qrModal"
+                 data-qr="{{ service.qrcode | relative_url }}">
+            {%- endif -%}
+          </div>
+
+        </div>
+
+        <div class="row">
+          <div class="col-12 mt-4 donation__offset_input">
+            {% if service.name == "pix" or service.name contains "bitcoin" %}
+              <div class="row">
+                <div class="input-group">
+                  {% if service.name contains "pix" %}
+                  <span class="input-group-text donation__input__label">Key</span>
+                  {% else %}
+                  <span class="input-group-text donation__input__label">Address</span>
+                  {% endif %}
+                  <input type="text" class="form-control donation__address"
+                  value="{{ service.address }}" readonly>
+                  <button class="fw-bold donation__btn donation__btn--copy" data-copy="{{ service.address }}">
+                    {{ donation_.copy_button.text }}
+                  </button>
+                </div>
+              </div>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+      {%- endfor -%}
+
+    </div>
+
+  </div>
+</div>
+
+<!-- QR Modal -->
+<div class="modal fade" id="qrModal" tabindex="-1">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content bg-transparent border-0 text-center">
+      <img id="qrModalImg" class="img-fluid rounded shadow">
+    </div>
+  </div>
+</div>

data/_sass/base/_index.scss

@@ -6,9 +6,6 @@ body {
   background-color: var(--bg-color);
   color: var(--text-color);
 
-  // impede selecionar texto no site
-  user-select: none;
-
   code,
   pre,
   .highlight,
@@ -92,8 +89,8 @@ body[data-layout="mobile"] .home-simple {
 }
 
 a[target="_blank"]::after {
-  content: "🢅";
-  font-size: .9em;
-  margin-left: 0.25em;
-  vertical-align: middle;
+  content: "↗";
+  // font-size: .9em;
+  // margin-left: 0.25em;
+  // vertical-align: middle;
 }

data/_sass/components/_markdown.scss

@@ -306,14 +306,13 @@
       position: fixed;
       top: 0;
       left: 0;
-      overflow: hidden;
+      overflow-y: auto;
       display: flex;
       flex-direction: column;
       z-index: 9999;
       min-width: 480px !important;
       max-width: 480px !important;
       width: auto !important;
-      margin: 0 auto;
       max-height: 100vh;
     }
 

data/_sass/layouts/_donation.scss

@@ -0,0 +1,93 @@
+@use "../components/index";
+
+.donation {
+  @extend %markdown;
+  margin-bottom: var(--margin-bottom);
+
+  &__offset_input {
+    @media (min-width: 768px) {
+      padding-left: 18% !important;
+      padding-right: 6.5% !important;
+    }
+  }
+
+  &__btn {
+    @extend %button;
+
+    &--copy {
+     min-width: 100px !important;
+     text-align: center !important;
+     border: 1px solid var(--background-focus-border-color) !important;
+    }
+  }
+
+  &__box {
+    padding: 1rem;
+    border: 2px dotted var(--card-border-color);
+    background-color: var(--card-bg-color);
+    transition: all 0.2s ease;
+
+    &:hover {
+      // transform: translateY(-3px);
+      border: 2px dotted var(--background-focus-border-color) !important;
+      box-shadow: 0 1rem 1.2rem var(--card-box-shadow-color-hover);
+    }
+  }
+
+  &__logo {
+    max-height: 64px;
+    opacity: 0.65;
+  }
+
+  &__input__label {
+    font-family: monospace;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    background-color: var(--background-focus-color);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid var(--background-focus-border-color);
+    width: fit-content;
+  }
+
+  &__qr {
+    max-height: 90px;
+    cursor: pointer;
+    transition: transform .2s ease;
+
+    &:hover {
+      transform: scale(1.08);
+    }
+  }
+
+  &__service__description {
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+  }
+
+  &__service__name {
+    margin-top: 0 !important;
+    text-transform: capitalize;
+    font-size: 1.3rem !important;
+  }
+
+  &__address {
+    font-family: monospace;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    background-color: var(--background-focus-color);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid var(--background-focus-border-color);
+    width: fit-content;
+
+    &:focus {
+      color: inherit !important;
+      outline: none !important;
+      box-shadow: none !important;
+      background-color: var(--background-focus-color) !important;
+      border: 1px solid var(--background-focus-border-color) !important;
+    }
+  }
+
+}

data/_sass/layouts/_index.scss

@@ -12,3 +12,4 @@
 @use "pixels";
 @use "pixel";
 @use "pub";
+@use "donation";