How do I overwrite _sass/layout/_sidebar.scss?

[joshbuker]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

I'm trying to overwrite/customize the scss in _sass/layout/_sidebar.scss, specifically by fixing the scss for the social links when wrapped with a tooltip:

  <div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
    <span
      data-bs-toggle="tooltip"
      data-bs-placement="top"
      title="Toggle Light/Dark Theme"
    >
      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
        <i class="fas fa-adjust"></i>
      </button>
    </span>

    {% if site.data.contact.size > 0 %}
      <span class="icon-border"></span>
    {% endif %}

    {% for entry in site.data.contact %}
      {%- assign url = null -%}

      {% case entry.type %}
        {% when 'github', 'twitter' %}
          {%- unless site[entry.type].username -%}
            {%- continue -%}
          {%- endunless -%}
          {%- capture url -%}
            https://{{ entry.type }}.com/{{ site[entry.type].username }}
          {%- endcapture -%}
        {% when 'email' %}
          {%- unless site.social.email -%}
            {%- continue -%}
          {%- endunless -%}
          {%- assign email = site.social.email | split: '@' -%}
          {%- capture url -%}
            javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
          {%- endcapture -%}
        {% when 'rss' %}
          {% assign url = '/feed.xml' | relative_url %}
        {% else %}
          {% assign url = entry.url %}
      {% endcase %}

      {% if url %}
        <span
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="{{ entry.tooltip | default: 'Social' }}"
        >
          <a
            href="{{ url }}"
            aria-label="{{ entry.type }}"
            class="social-link"
            {% assign link_types = '' %}

            {% unless entry.noblank %}
              target="_blank"
              {% assign link_types = 'noopener noreferrer' %}
            {% endunless %}

            {% if entry.type == 'mastodon' %}
              {% assign link_types = link_types | append: ' me' | strip %}
            {% endif %}

            {% unless link_types == empty %}
              rel="{{ link_types }}"
            {% endunless %}
          >
            <i class="{{ entry.icon }}"></i>
          </a>
        </span>
      {% endif %}
    {% endfor %}
  </div>
  <!-- .sidebar-bottom -->

/* append your custom style below */
@use '../abstracts/variables' as v;
@use '../abstracts/mixins' as mx;
@use '../abstracts/breakpoints' as bp;
@use '../abstracts/placeholders';

.sidebar-bottom > span > .social-link {
  @extend %button;
  @extend %sidebar-link-hover;
  @extend %clickable-transition;

  &:not(:last-child) {
    margin-right: v.$sb-btn-gap;

    @include bp.xxxl {
      margin-right: v.$sb-btn-gap-lg;
    }
  }
}

Operations you have already tried

1. Adding _sass/layout/_sidebar.scss and editing it directly (does nothing)
2. Adding assets/css/jekyll-theme-chirpy.scss and copying the css (breaks because it can't access ../abstracts for the imports, removing ../ compiles but does nothing)

Anything else?

I tried RTFM/STFW and failed to find an exact match for what I'm trying to do. Sorry if I missed something.

Fork at:
https://github.com/joshbuker/joshbuker.github.io/tree/feature/chirpy-theme

[joshbuker]

I didn't figure out my original question, but I did find a good enough alternative using the global css variables and just adding my own styles.

If anyone is curious, this is what I ended up using:

assets/css/jekyll-theme-chirpy.scss

---
---

/* prettier-ignore */
@use 'main
{%- if jekyll.environment == 'production' -%}
  .bundle
{%- endif -%}
';

/* append your custom style below */

.sidebar-content {
  margin-bottom: 0 !important;

  .contact-header {
    width: 100%;
    position: relative;
    margin: 0 0 0.5rem 0;

    span {
      // position: relative;
      // z-index: 2;
      position: absolute;
      top: 0.25rem;
      margin: 0;
      padding: 0 1rem;
      color: var(--text-color);
      background-color: var(--sidebar-bg);
      font-size: 1rem;
      font-weight: 400;
      transform: translateX(-50%);
      left: 50%;
      white-space: nowrap;
    }
  }
}

.sidebar-bottom {
  justify-content: center;

  hr {
    width: 100%;
    border-color: color-mix(in srgb, var(--text-color), transparent 70%);
  }
}

span:not(:last-child) > a.social-link {
  margin-right: 0.5rem;
}

// span > a.social-link {
//   margin: 0.25rem;
// }

.plain-page {
  border-radius: 1rem;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--mask-bg), transparent 80%);
  box-shadow: 0 0 0.5rem color-mix(in srgb, var(--text-color), transparent 75%);

  .home-banner {
    height: calc(100vw - (50vh / 2));
    max-height: 250px;
    width: calc(100% + 2rem);
    border-radius: 1rem 1rem 0 0;
    margin-top: -1rem;
    margin-left: -1rem;
    max-width: none;
    box-shadow: inset 0 -10px 15px 0 color-mix(in srgb, var(--text-color), transparent 70%);
    background-image: url('/assets/images/photography/boulevard.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;

    audio {
      transform: translateY(3.5rem);
    }
  }

  hr {
    border-color: color-mix(in srgb, var(--text-color), transparent 70%);
  }
}

.new-posts {
  margin-top: 2rem;
  width: 90%;

  h1 {
    margin-top: 0;
    font-size: 1.2rem;
    font-weight: 700;
  }

  ul {
    margin-bottom: 0;
    list-style: none;
    display: contents;

    li > a {
      display: block;
    }

    li > a:hover {
      text-decoration: underline;
      color: color-mix(in srgb, var(--link-color) 80%, black 20%);
    }

    li {
      position: relative;
      margin-left: 5px;
      margin-right: 5px;
    }

    li :not(span) {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 65%;
    }

    li span {
      position: absolute;
      right: 0;
    }
  }
}

@font-face {
  font-family: "Venera";
  src: url('/assets/fonts/Venera-500.otf') format('opentype');
  /* font-weight: 500; */
}

a.site-title.stack {
  /* color: white; */
  text-decoration: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  text-align: left !important;
  font-family: 'Venera', sans-serif !important;
  // padding-right: 0.5rem !important;
}

.stack span {
  font-weight: bold;
  grid-row-start: 1;
  grid-column-start: 1;
  font-size: 1.25rem;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation: stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}

.stack span:nth-child(odd) { --glitch-translate: 8px; }
.stack span:nth-child(even) { --glitch-translate: -8px; }

@keyframes stack {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
  };
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  100% {
    text-shadow: none;
  }
}

@keyframes glitch {
  0% {
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    transform: translate(var(--glitch-translate));
  }
  2% {
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  4%, 100% {  text-shadow: none; transform: none; }
}

_includes/sidebar.html

<!-- The Side Bar -->

<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
  <header class="profile-wrapper">
    <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
      {%- if site.avatar != empty and site.avatar -%}
        {%- capture avatar_url -%}
          {% include media-url.html src=site.avatar %}
        {%- endcapture -%}
        <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
      {%- endif -%}
    </a>

    {% comment %} <a class="site-title d-block" href="{{ '/' | relative_url }}">{{ site.title }}</a> {% endcomment %}
    <a
      class="site-title d-block stack"
      aria-label="{{ site.title }}"
      href="{{ '/' | relative_url }}"
      data-text="{{ site.title }}"
      style="--stacks: 3;"
    >
      <span style="--index: 0;">{{ site.title }}</span>
      <span style="--index: 1;">{{ site.title }}</span>
      <span style="--index: 2;">{{ site.title }}</span>
    </a>
    <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
  </header>
  <!-- .profile-wrapper -->

  <nav class="flex-column flex-grow-1 w-100 ps-0">
    <ul class="nav">
      <!-- home -->
      <li class="nav-item{% if page.url == '/' %}{{ " active" }}{% endif %}">
        <a href="{{ '/' | relative_url }}" class="nav-link">
          <i class="fa-fw far fa-house"></i>
          <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
        </a>
      </li>
      <!-- blog -->
      <li class="nav-item{% if page.url contains '/blog/' or page.layout == 'post' %}{{ " active" }}{% endif %}">
        <a href="{{ '/blog/' | relative_url }}" class="nav-link">
          <i class="fa-fw fas fa-pen-nib"></i>
          <span>BLOG</span>
        </a>
      </li>
      <!-- the real tabs -->
      {% for tab in site.tabs %}
        {% if page.url contains tab.url or tab.url != '/tags/' and tab.url != '/categories/' %}
          <li class="nav-item{% if page.url contains tab.url  %}{{ " active" }}{% endif %}">
            <a href="{{ tab.url | relative_url }}" class="nav-link">
              <i class="fa-fw {{ tab.icon }}"></i>
              {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}

              <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
            </a>
          </li>
        {% endif %}
        <!-- .nav-item -->
      {% endfor %}
      <!-- custom links -->
      <li class="nav-item">
        <a href="https://photography.joshbuker.com" class="nav-link" target="_blank">
          <i class="fa-fw fa fa-camera-retro" aria-hidden="true"></i>
          <span>PHOTOGRAPHY</span>
        </a>
      </li>
      <li class="nav-item">
        <a href="https://notes.joshbuker.com" class="nav-link" target="_blank">
          <i class="fa-fw fa fa-seedling" aria-hidden="true"></i>
          <span>DIGITAL GARDEN</span>
        </a>
      </li>
    </ul>
  </nav>

  {% if site.data.contact.size > 0 %}
    <div class="sidebar-bottom sidebar-content d-flex flex-wrap align-items-center w-100">
      <div class="contact-header">
        <hr>
        <span>Contact</span>
      </div>
      {% for entry in site.data.contact %}
        {%- assign url = null -%}

        {% case entry.type %}
          {% when 'github', 'twitter' %}
            {%- unless site[entry.type].username -%}
              {%- continue -%}
            {%- endunless -%}
            {%- capture url -%}
            https://{{ entry.type }}.com/{{ site[entry.type].username }}
          {%- endcapture -%}
          {% when 'email' %}
            {%- unless site.social.email -%}
              {%- continue -%}
            {%- endunless -%}
            {%- assign email = site.social.email | split: '@' -%}
            {%- capture url -%}
            javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
          {%- endcapture -%}
          {% when 'rss' %}
            {% assign url = '/feed.xml' | relative_url %}
          {% else %}
            {% assign url = entry.url %}
        {% endcase %}

        {% if url %}
          <span
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="{{ entry.tooltip | default: 'Social' }}"
          >
            <a
              href="{{ url }}"
              aria-label="{{ entry.type }}"
              class="social-link"
              {% assign link_types = '' %}

              {% unless entry.noblank %}
                target="_blank"
                {% assign link_types = 'noopener noreferrer' %}
              {% endunless %}

              {% if entry.type == 'mastodon' %}
                {% assign link_types = link_types | append: ' me' | strip %}
              {% endif %}

              {% unless link_types == empty %}
                rel="{{ link_types }}"
              {% endunless %}
            >
              <i class="{{ entry.icon }}"></i>
            </a>
          </span>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
  <!-- .sidebar-contact -->

  <div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
    <hr>
    <span
      data-bs-toggle="tooltip"
      data-bs-placement="top"
      title="Toggle Light/Dark Theme"
    >
      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
        <i class="fas fa-adjust"></i>
      </button>
    </span>
  </div>
  <!-- .sidebar-bottom -->
</aside>
<!-- #sidebar -->