fix: styling on page-list for smaller screens

Jacky Zhao

2022-07-14 7ccff2cf3d4f7a96be2cf890093798067951fd2e

 assets/styles/base.scss

@@ -169,7 +169,7 @@
      background-color: transparent !important;
    }

    & a[href$="#"] {
    & a[href$="#"], &.active a {
      opacity: 0.2;
    }
  }
@@ -498,34 +498,41 @@
  margin-top: 2em;
  padding-left: 0;

  & > li {
    margin-bottom: 1em;
}

    & > .section {
      display: flex;
      align-items: center; 
      
      & h3 > a {
        font-weight: 700;
        margin: 0;
      }
      
      & p {
        margin: 0;
        padding-right: 1em;
        flex-basis: 6em; 
.section-li {
  margin-bottom: 1em;

  & > .section {
    display: flex;
    align-items: center; 

    @media all and (max-width: 600px) {
      & .tags {
        display: none;
      }
    }

    & h3 {
      opacity: 1;
    & h3 > a {
      font-weight: 700;
      margin: 0em;
      margin: 0;
    }
    
    & p {
      margin: 0;
      padding-right: 1em;
      flex-basis: 6em; 
    }
  }

    & .meta {
      opacity: 0.6;
    }
  & h3 {
    opacity: 1;
    font-weight: 700;
    margin: 0em;
  }

  & .meta {
    opacity: 0.6;
  }
}