Left menu issues. about leap-day HOT 9 OPEN

This is a duplicate of #48 but with more description and an image.

from leap-day.

One other question, how do I change the font size of the sub-heading in the left menu to a smaller size? E.g. I what the font size of ##headers to be smaller than #headers.

from leap-day.

One other question, how do I change the font size of the sub-heading in the left menu to a smaller size? E.g. I what the font size of ##headers to be smaller than #headers.

It looks like they have different classes

from leap-day.

The font size of tag-h2 is already smaller than tag-h1; my mistake. What I actually want for the left menu is to make the font size of tag-h3 to be smaller than tag-h2. Also to have the line spacing of tag-h3 smaller too if needed. How do I do this?

from leap-day.

The font size of tag-h2 is already smaller than tag-h1; my mistake. What I actually want for the left menu is to make the font size of tag-h3 to be smaller than tag-h2. Also to have the line spacing of tag-h3 smaller too if needed. How do I do this?

I implied in

It looks like they have different classes

that you can use custom CSS, such as font-size: 90%

from leap-day.

The font size of tag-h2 is already smaller than tag-h1; my mistake. What I actually want for the left menu is to make the font size of tag-h3 to be smaller than tag-h2. Also to have the line spacing of tag-h3 smaller too if needed. How do I do this?

I implied in

It looks like they have different classes

that you can use custom CSS, such as font-size: 90%

Much appreciate your guidance. I am not CSS trained but will look into implementing your advice.

from leap-day.

I managed to align the text of nav to left and set the font-size of tag-h3 to 80%. However, I am unable to reduce the line spacing of tag-h3 and indent it. I made the following amendments to _sass/jekyll-theme-leap-day.scss and the outcome is shown below.

Can you tell me how to reduce the line spacing of tag-h3 and indent it?

nav {
  width: 230px;
  position: fixed;
  top: 220px;
  left:50%;
  margin-left:-580px;
  text-align: left;

  ul {
    list-style: none;
    list-style-image:none;
    font-size: 14px;
    line-height:24px;

    li {
      padding: 5px 0px;
      line-height: 16px;
      // padding-right:17px;
      // position:relative;
      // right:-12px;

      &.tag-h1 {
        font-size: 1.2em;

        a {
          font-weight: bold;
          color: #333;
        }

        + .tag-h2 {

        }
      }

      &.tag-h2 {

        + .tag-h1 {
          margin-top:10px;
        }
      }

       &.tag-h3 {
        font-size: 0.8em;
        
        + .tag-h1 {
          margin-top:10px;
        }
      }

   }

    a {
      color: #666;

      &:hover { color: #1c1c1c; }
    }

    // .active {
    //   border-right:solid 4px #39C;
    //   padding-right:13px;
    // }
  }
}

from leap-day.

I managed to indent tag-h3, Also, I relocated footer to the right side of the main text area given the nav is not scrollable yet. The below figure shows this new outcome rendered on my local machine.

Issues:

1. Is my amended syntax correct?
2. I am unable to reduce the gaps between lines of tag-h3 still. What should I do?

nav {
  width: 230px;
  position: fixed;
  top: 220px;
  left:50%;
  margin-left:-580px;
  text-align: left;

  ul {
    list-style: none;
    list-style-image:none;
    font-size: 14px;
    line-height:24px;

    li {
      padding: 5px 0px;
      line-height: 16px;
      // padding-right:17px;
      // position:relative;
      // right:-12px;

      &.tag-h1 {
        font-size: 1.2em;

        a {
          font-weight: bold;
          color: #333;
        }

        + .tag-h2 {

        }
      }

      &.tag-h2 {

        + .tag-h1 {
          margin-top:10px;
        }
      }

       &.tag-h3 {
        font-size: 0.8em;
        padding-left:13px;
        line-height: 1.0em;

        // + .tag-h1 {
        //  margin-top:10px;
        // }
      }

   }

    a {
      color: #666;

      &:hover { color: #1c1c1c; }
    }

    .active {
      border-right:solid 4px #39C;
      padding-right:13px;
    }
  }
}

footer {
  width:180px;
  position: fixed;
  right:50%;
  margin-right:-530px;
  top:220px;
  text-align: left;
  line-height: 16px;
}

from leap-day.

Might not be very relevant to ask here - but is there anyway to show just h1/h2 instead of showing all levels? In a document with lots of levels of header the display is not super clear and it clusters side menu.

from leap-day.