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 -->

[steveng57]

You are on the right track. If all you need to is change the CSS then, yes, put that in jekyll-theme-chirpy.css. Better yet, just put a use statement pointing to your own scss, which you can put in the _sass directory. Here is what my jekyll-theme-chirpy.scss looks like:

---
---

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

/* append your custom style below */
@use 'sjg-main';

re sidebar.html
Thats the correct way for rverriding sidebar.html or any other file used by Chirpy. It works, but it has the unfortunate effect that if Chirpy itself ever changes that file, you are on the hook for integrating it back into your site. There is no easy way around that, as there is no inheritance model or other way to manage those files.

I did both of those things, if you want to look around on https://github.com/steveng57/steveng57.github.io, feel free.