Fix SCSS styling

Luiz F. A. de Prá

19.19.2021 e0988ee1e2c2eab690cd9dc4c0046ae5d9212b87

Fix SCSS styling

 assets/scss/_base.scss

@@ -1,22 +1,22 @@
*,
*:after,
*:before {
    box-sizing: inherit;
  box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  color: $fg-color;
  background-color: $bg-color;
    font-family: $font-family;
    font-size: 1.8em;
    font-weight: 400;
  font-family: $font-family;
  font-size: 1.8em;
  font-weight: 400;
  line-height: 1.8em;
  @media only screen and (max-width : 768px) {
  @media only screen and (max-width: 768px) {
    font-size: 1.6em;
    line-height: 1.6em;
  }
@@ -26,7 +26,7 @@
  font-weight: 500;
  color: $link-color;
  text-decoration: none;
  transition: all .25s ease-in;
  transition: all 0.25s ease-in;
  &:focus,
  &:hover {
    text-decoration: underline;
@@ -34,7 +34,7 @@
}

p {
  margin: 2.0rem 0 2.0rem 0;
  margin: 2rem 0 2rem 0;
}

h1,
@@ -70,23 +70,23 @@
h1 {
  font-size: 3.2rem;
  line-height: 3.6rem;
  @media only screen and (max-width : 768px) {
    font-size: 3.0rem;
  @media only screen and (max-width: 768px) {
    font-size: 3rem;
    line-height: 3.4rem;
  }
}
h2 {
  font-size: 2.8rem;
  line-height: 3.2rem;
  @media only screen and (max-width : 768px) {
  @media only screen and (max-width: 768px) {
    font-size: 2.6rem;
    line-height: 3.0rem;
    line-height: 3rem;
  }
}
h3 {
  font-size: 2.4rem;
  line-height: 2.8rem;
  @media only screen and (max-width : 768px) {
  @media only screen and (max-width: 768px) {
    font-size: 2.2rem;
    line-height: 2.6rem;
  }
@@ -94,15 +94,15 @@
h4 {
  font-size: 2.2rem;
  line-height: 2.6rem;
  @media only screen and (max-width : 768px) {
    font-size: 2.0rem;
  @media only screen and (max-width: 768px) {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}
h5 {
  font-size: 2.0rem;
  font-size: 2rem;
  line-height: 2.4rem;
  @media only screen and (max-width : 768px) {
  @media only screen and (max-width: 768px) {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
@@ -110,13 +110,14 @@
h6 {
  font-size: 1.8rem;
  line-height: 2.2rem;
  @media only screen and (max-width : 768px) {
  @media only screen and (max-width: 768px) {
    font-size: 1.6rem;
    line-height: 2.0rem;
    line-height: 2rem;
  }
}

b, strong {
b,
strong {
  font-weight: 700;
}

@@ -152,19 +153,21 @@

blockquote {
  border-left: 2px solid $alt-bg-color;
  padding-left: 2.0rem;
  padding-left: 2rem;
  line-height: 2.2rem;
  font-weight: 400;
  font-style: italic;
}

th, td {
th,
td {
  padding: 1.6rem;
}
table {
  border-collapse: collapse;
}
table td, table th {
table td,
table th {
  border: 2px solid $alt-fg-color;
}
table tr:first-child th {
@@ -200,10 +203,10 @@

.container {
  margin: 0 auto;
  max-width: 90.0rem;
  max-width: 90rem;
  width: 100%;
  padding-left: 2.0rem;
  padding-right: 2.0rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.fab {
@@ -233,6 +236,6 @@
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
}

 assets/scss/_base_dark.scss

@@ -1,5 +1,4 @@
@mixin base_dark {

  color: $fg-color-dark;
  background-color: $bg-color-dark;

@@ -50,18 +49,18 @@
    border-left: 2px solid $alt-bg-color-dark;
  }

  table td, table th {
  table td,
  table th {
    border: 2px solid $alt-fg-color-dark;
  }

}

body.colorscheme-dark {
  @include base_dark()
  @include base_dark();
}

body.colorscheme-auto {
  @media (prefers-color-scheme: dark) {
    @include base_dark()
    @include base_dark();
  }
}

 assets/scss/_content.scss

@@ -16,14 +16,14 @@
        font-size: 4.2rem;
        line-height: 4.6rem;
        margin: 0;
        @media only screen and (max-width : 768px) {
          font-size: 4.0rem;
        @media only screen and (max-width: 768px) {
          font-size: 4rem;
          line-height: 4.4rem;
        }
      }
    }
    footer {
      margin-top: 4.0rem;
      margin-top: 4rem;
      .see-also {
        margin: 3.2rem 0;
        h3 {
@@ -39,7 +39,7 @@
  }
  .post {
    .post-title {
      margin-bottom: .75em;
      margin-bottom: 0.75em;
    }
    .post-meta {
      i {
@@ -68,11 +68,11 @@
  }
}

.avatar img{
.avatar img {
  width: 20rem;
  height: auto;
  border-radius: 50%;
  @media only screen and (max-width : 768px) {
  @media only screen and (max-width: 768px) {
    width: 10rem;
  }
}
@@ -84,36 +84,36 @@
    padding: 0;
    li {
      font-size: 1.8rem;
      @media only screen and (max-width : 768px) {
      @media only screen and (max-width: 768px) {
        margin: 1.6rem 0 1.6rem 0;
      }
      .date {
        display: inline-block;
        flex:1;
        width: 20.0rem;
        flex: 1;
        width: 20rem;
        text-align: right;
        margin-right: 3.0rem;
        @media only screen and (max-width : 768px) {
        margin-right: 3rem;
        @media only screen and (max-width: 768px) {
          display: block;
          text-align: left;
        }
      }
      .title {
        font-size: 1.8rem;
        flex:2;
        flex: 2;
        color: $fg-color;
        font-family: $font-family;
        font-weight: 700;
        &:hover,
        &:focus {
          color: $link-color
          color: $link-color;
        }
      }
    }
  }
  ul:not(.pagination) {
    li {
      @media only screen and (min-width : 768.1px) {
      @media only screen and (min-width: 768.1px) {
        display: flex;
      }
    }
@@ -127,20 +127,20 @@
  .about {
    text-align: center;
    h1 {
      margin-top: 2.0rem;
      margin-top: 2rem;
      margin-bottom: 0.5rem;
    }
    h2 {
      margin-top: 1.0rem;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      font-size: 2.4rem;
      @media only screen and (max-width : 768px) {
        font-size: 2.0rem;
      @media only screen and (max-width: 768px) {
        font-size: 2rem;
      }
    }
    ul {
      list-style: none;
      margin: 3.0rem 0 1.0rem 0;
      margin: 3rem 0 1rem 0;
      padding: 0;
      li {
        display: inline-block;
@@ -148,14 +148,14 @@
        a {
          color: $fg-color;
          text-transform: uppercase;
          margin-left: 1.0rem;
          margin-right: 1.0rem;
          margin-left: 1rem;
          margin-right: 1rem;
          font-size: 1.6rem;
          &:hover,
          &:focus {
            color: $link-color;
          }
          @media only screen and (max-width : 768px) {
          @media only screen and (max-width: 768px) {
            font-size: 1.4rem;
          }
          i {
@@ -169,18 +169,18 @@
  .error {
    text-align: center;
    h1 {
      margin-top: 2.0rem;
      margin-top: 2rem;
      margin-bottom: 0.5rem;
      font-size: 4.6rem;
      @media only screen and (max-width : 768px) {
      @media only screen and (max-width: 768px) {
        font-size: 3.2rem;
      }
    }
    h2 {
      margin-top: 2.0rem;
      margin-top: 2rem;
      margin-bottom: 3.2rem;
      font-size: 3.2rem;
      @media only screen and (max-width : 768px) {
      @media only screen and (max-width: 768px) {
        font-size: 2.8rem;
      }
    }

 assets/scss/_content_dark.scss

@@ -1,7 +1,5 @@
@mixin content_dark {

  .content {

    .list {
      ul {
        li {
@@ -32,15 +30,14 @@
      }
    }
  }

}

body.colorscheme-dark {
  @include content_dark()
  @include content_dark();
}

body.colorscheme-auto {
  @media (prefers-color-scheme: dark) {
    @include content_dark()
    @include content_dark();
  }
}

 assets/scss/_content_rtl.scss

@@ -22,9 +22,9 @@
      li {
        .date {
          text-align: left;
          margin-left: 3.0rem;
          margin-left: 3rem;
          margin-right: 0;
          @media only screen and (max-width : 768px) {
          @media only screen and (max-width: 768px) {
            text-align: right;
          }
        }

 assets/scss/_float.scss

@@ -7,18 +7,19 @@
  a {
    display: block;
    text-align: center;
    width: 3.0rem;
    height: 3.0rem;
    width: 3rem;
    height: 3rem;
    color: $alt-fg-color;
    background-color: $alt-bg-color;
    font-size: 2.0rem;
    font-size: 2rem;
    border-radius: 0.5rem;
    opacity: 50%;
    transition: all .25s ease-in;
    &:hover, &:focus {
    transition: all 0.25s ease-in;
    &:hover,
    &:focus {
      color: $link-color;
      opacity: 100%;
      @media only screen and (max-width : 768px) {
      @media only screen and (max-width: 768px) {
        color: $alt-fg-color;
        opacity: 50%;
      }

 assets/scss/_float_dark.scss

@@ -3,9 +3,10 @@
    a {
      color: $alt-fg-color-dark;
      background-color: $alt-bg-color-dark;
      &:hover, &:focus {
      &:hover,
      &:focus {
        color: $link-color-dark;
        @media only screen and (max-width : 768px) {
        @media only screen and (max-width: 768px) {
          color: $alt-fg-color-dark;
        }
      }
@@ -14,11 +15,11 @@
}

body.colorscheme-dark {
  @include float_dark()
  @include float_dark();
}

 body.colorscheme-auto {
body.colorscheme-auto {
  @media (prefers-color-scheme: dark) {
    @include float_dark()
    @include float_dark();
  }
}

 assets/scss/_footer.scss

@@ -2,8 +2,8 @@
  width: 100%;
  text-align: center;
  font-size: 1.6rem;
  line-height: 2.0rem;
  margin-bottom:1.0rem;
  line-height: 2rem;
  margin-bottom: 1rem;
  a {
    color: $link-color;
  }

 assets/scss/_footer_dark.scss

@@ -7,11 +7,11 @@
}

body.colorscheme-dark {
  @include footer_dark()
  @include footer_dark();
}

body.colorscheme-auto {
  @media (prefers-color-scheme: dark) {
    @include footer_dark()
    @include footer_dark();
  }
}

 assets/scss/_navigation.scss

@@ -1,18 +1,19 @@
.navigation {
  height: 6.0rem;
  height: 6rem;
  width: 100%;
  a, span {
  a,
  span {
    display: inline;
    font-size: 1.7rem;
    font-family: $font-family;
    font-weight: 600;
    line-height: 6.0rem;
    line-height: 6rem;
    color: $fg-color;
  }
  a {
    &:hover,
    &:focus {
      color: $link-color
      color: $link-color;
    }
  }
  .navigation-title {
@@ -24,9 +25,9 @@
    list-style: none;
    margin-bottom: 0;
    margin-top: 0;
    @media only screen and (max-width : 768px) {
    @media only screen and (max-width: 768px) {
      position: absolute;
      top: 6.0rem;
      top: 6rem;
      right: 0;
      z-index: 5;
      visibility: hidden;
@@ -43,27 +44,29 @@
      float: left;
      margin: 0;
      position: relative;
      @media only screen and (max-width : 768px) {
      @media only screen and (max-width: 768px) {
        float: none !important;
        text-align: center;
        a, span {
          line-height: 5.0rem;
        a,
        span {
          line-height: 5rem;
        }
      }
      a, span {
        margin-left: 1.0rem;
        margin-right: 1.0rem;
      a,
      span {
        margin-left: 1rem;
        margin-right: 1rem;
      }
    }
    .separator {
      @media only screen and (max-width : 768px) {
      @media only screen and (max-width: 768px) {
        display: none;
      }
    }
    .menu-separator {
      @media only screen and (max-width : 768px) {
      @media only screen and (max-width: 768px) {
        border-top: 2px solid $fg-color;
        margin: 0 8.0rem;
        margin: 0 8rem;
        span {
          display: none;
        }
@@ -81,7 +84,7 @@
  }
  #menu-toggle {
    display: none;
    @media only screen and (max-width : 768px) {
    @media only screen and (max-width: 768px) {
      &:checked + label > i {
        color: $alt-bg-color;
      }
@@ -94,7 +97,7 @@
  }
  .menu-button {
    display: none;
    @media only screen and (max-width : 768px) {
    @media only screen and (max-width: 768px) {
      display: block;
      margin: 1.8rem 0;
      font-size: 2.4rem;
@@ -102,7 +105,8 @@
    }

    i {
      &:hover, &:focus {
      &:hover,
      &:focus {
        color: $alt-fg-color;
      }
    }

 assets/scss/_navigation_dark.scss

@@ -1,8 +1,7 @@
@mixin navigation_dark {


  .navigation {
    a, span {
    a,
    span {
      color: $fg-color-dark;
    }
    a {
@@ -12,19 +11,19 @@
      }
    }
    .navigation-list {
      @media only screen and (max-width : 768px) {
      @media only screen and (max-width: 768px) {
        background-color: $bg-color-dark;
        border-top: solid 2px $alt-bg-color-dark;
        border-bottom: solid 2px $alt-bg-color-dark;
      }
      .menu-separator {
        @media only screen and (max-width : 768px) {
        @media only screen and (max-width: 768px) {
          border-top: 2px solid $fg-color-dark;
        }
      }
    }
    #menu-toggle {
      @media only screen and (max-width : 768px) {
      @media only screen and (max-width: 768px) {
        &:checked + label > i {
          color: $alt-bg-color-dark;
        }
@@ -39,21 +38,21 @@
    }
    .menu-button {
      i {
        &:hover, &:focus {
        &:hover,
        &:focus {
          color: $alt-fg-color-dark;
        }
      }
    }
  }

}

body.colorscheme-dark {
  @include navigation_dark()
  @include navigation_dark();
}

body.colorscheme-auto {
  @media (prefers-color-scheme: dark) {
    @include navigation_dark()
    @include navigation_dark();
  }
}

 assets/scss/_navigation_rtl.scss

@@ -1,7 +1,7 @@
body.rtl {
  .navigation-list {
    float: left;
    @media only screen and (max-width : 768px) {
    @media only screen and (max-width: 768px) {
      left: 0;
      right: auto;
    }
@@ -11,7 +11,7 @@
  }

  .menu-button {
    @media only screen and (max-width : 768px) {
    @media only screen and (max-width: 768px) {
      float: left;
    }
  }

 assets/scss/_notices.scss

@@ -1,52 +1,52 @@
.notice {
    padding: 1rem;
    line-height: 2rem;
    border-radius: 0.5rem;
    p {
        &:last-child {
  padding: 1rem;
  line-height: 2rem;
  border-radius: 0.5rem;
  p {
    &:last-child {
      margin-bottom: 1.5rem;
        }
    }
    }
  }
}

.notice-title {
    margin: -1rem -1rem 1rem;
    padding: 1rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 700;
    font-family: $heading-font-family;
  margin: -1rem -1rem 1rem;
  padding: 1rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  font-weight: 700;
  font-family: $font-family;
}

.notice.warning {
    .notice-title {
        background: $bg-color-notice-warning-title;
    }
    background: $bg-color-notice-warning;
  .notice-title {
    background: $bg-color-notice-warning-title;
  }
  background: $bg-color-notice-warning;
}

.notice.info {
    .notice-title {
        background: $bg-color-notice-info-title;
    }
    background: $bg-color-notice-info;
  .notice-title {
    background: $bg-color-notice-info-title;
  }
  background: $bg-color-notice-info;
}

.notice.note {
    .notice-title {
        background: $bg-color-notice-note-title;
    }
    background: $bg-color-notice-note;
  .notice-title {
    background: $bg-color-notice-note-title;
  }
  background: $bg-color-notice-note;
}

.notice.tip {
    .notice-title {
        background: $bg-color-notice-tip-title;
    }
    background: $bg-color-notice-tip;
  .notice-title {
    background: $bg-color-notice-tip-title;
  }
  background: $bg-color-notice-tip;
}

.icon-notice {
    display: inline-flex;
    align-self: center;
    margin-right: 8px;
  display: inline-flex;
  align-self: center;
  margin-right: 8px;
}

 assets/scss/_notices_dark.scss

@@ -16,7 +16,7 @@
    padding: 1rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 700;
    font-family: $heading-font-family;
    font-family: $font-family;
  }

  .notice.warning {
@@ -55,11 +55,11 @@
}

body.colorscheme-dark {
  @include notices_dark()
  @include notices_dark();
}

body.colorscheme-auto {
  @media (prefers-color-scheme: dark) {
    @include notices_dark()
    @include notices_dark();
  }
}

 assets/scss/_pagination.scss

@@ -1,5 +1,5 @@
.pagination {
  margin-top: 6.0rem;
  margin-top: 6rem;
  text-align: center;
  font-family: $font-family;
  li {

 assets/scss/_variables.scss

@@ -1,11 +1,12 @@
// Fonts
$font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
$code-font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
  sans-serif, Apple Color Emoji, Segoe UI Emoji;
$code-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;

// Colors
$bg-color: #FAFAFA !default;
$bg-color: #fafafa !default;
$fg-color: #212121 !default;
$alt-bg-color: #E0E0E0 !default;
$alt-bg-color: #e0e0e0 !default;
$alt-fg-color: #000 !default;
$link-color: #1565c0 !default;

@@ -17,10 +18,9 @@
$link-color-dark: #42a5f5 !default;

// Notice Colors
$fg-color-notice-title: #FAFAFA !default;
$fg-color-notice-title: #fafafa !default;
$fg-color-notice-title-dark: #212121 !default;


// Each notice have two background color. One for title and one for contents
$bg-color-notice-note-title: #6ab0de !default;
$bg-color-notice-note: #e7f2fa !default;
@@ -34,8 +34,6 @@
$bg-color-notice-tip-title: #5dd45dcc !default;
$bg-color-notice-tip: #e6f9e6 !default;



// Notice Colors dark
$fg-colour-notice-text: #000000;