website/sass/main.scss

$columnleft: 190px;
$columnright: 1000px;
$gap: 30px;

$dark: #0b0b0b;
$grey: #a1a1a1;

$orange: #F39F5A;
$pink: #AE445A;
$bordeaux: #662549;
$purple: #451952;

$mainBg: #232323;
$defaultColor: #c9c9c9;

body {
  margin: 0;
  padding: 12px 12px 12px 0;
  background-color: $mainBg;
  min-height: 100vh;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: $defaultColor;
  padding-bottom: 100px;

  a,
  p,
  h1,
  h2,
  h3,
  h4 {
    padding: 0;
    margin: 0;
  }

  a,
  p {
      line-height: 1.5em;
      margin: 12px 0;
  }


  a {
      color: $orange;
  }

  ul, ol {
      margin: 12px 0;

      li {
          margin: 6px 0;
          margin-bottom: 8px;
      }
  }

    .contact {
      color: $pink;
  }
  .contact-middle {
      color: $bordeaux;
  }

  // --- Main page ---

  .main {
      max-width: 1000px;
      margin: 50px auto 0 auto;
      padding-left: 12px;

      .top {
          text-align: center;

          h1.name {
              font-size: 72px;
              margin-bottom: 8px;

              .firstname {
                  color: $orange;
              }

              .lastname {
                  color: $pink;
              }
          }

          h2 {
              font-size: 2em;
              color: $defaultColor;
              margin-bottom: 8px;
          }

          .skills {
              color: $defaultColor;
          }
      }

      
      h3 {
          color: rgba($defaultColor, 0.6);
          margin-bottom: 12px;
          margin-top: 70px;
          font-weight: 600;
      }

      a {
          color: $orange;
          display: inline-block;

          &.main-link {
              font-size: 1.3em;
              margin-left: 18px;
              margin-right: 18px;
          }
      }

      .movie {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          margin-top: 36px;

          p {
              margin: 0;
          }

          img {
              margin-right: 12px;

              &.mobile {
                  display: none;
              }
          }

          a {
              color: $orange;
              font-size: 0.9em;
              opacity: 0.5;
          }

          h4 {
              margin-right: 12px;
          }

          .movie-title {
              margin-bottom: 6px;
              display: flex;
              flex-direction: row;
              align-items: center;

              h4 {
                  font-size: 1.2em;
                  font-weight: 600;
              }
          }

      }
  }

  @media (max-width: 600px) {
      .main {
          .top h1.name {
              font-size: 3em;
          }

          .movie {
              img {
                  display: none;

                  &.mobile {
                      display: block;
                      margin: 0 auto 12px auto;
                  }
              }

              .movie-title {
                  flex-direction: column;
                  // align-items: flex-start;
              }
          }
      }
  }

  // --- Blog ---

  pre {
    padding: 12px;
    border-radius: 4px;
    overflow: auto;

    code {
        padding: 0;
        background: none;
    }
  }

    code {
        padding: 2px 4px;
        background: #383838;
        font-size: 1.1em;
        line-height: 1.8em;
        color: $grey;
    }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .header {
    margin-left: $columnleft + $gap;
    margin-bottom: 24px;

    a {
      margin-right: 32px;
    }
  }

  .logo {
    display: block;
    width: $columnleft;
    padding: 5px;
    box-sizing: border-box;
    text-align: right;
    color: $orange;
    font-weight: 600;
    font-size: 20px;

    a {
        .firstname {
            color: $orange;
        }

        .lastname {
            color: $pink;
        }
        
        &:hover {
          text-decoration: none;
      }
    }
  }

  .blog {
    margin-top: 24px;
    max-width: 1200px;

    p.tag-link {
      color: rgba($orange, 0.6);
      margin-top: 4px;
    }

    .entry {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      margin-bottom: 36px;

      .column-left {
        color: $grey;
        margin-top: 4px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        min-width: $columnleft;
        margin-right: $gap;
        line-height: 0;

        p {
            margin: 0 0 6px 0;
        }
      }

      .column-right {
          .mobile {
              display: none;
          }

        h1 {
            font-size: 1.5em;
            margin-bottom: 6px;

          a {
            color: $defaultColor;
          }
        }


        &.post {
            min-width: 0;

            h1 {
                font-size: 2.2em;
                margin-bottom: 24px;
            }

            h2,
            h3 {
                margin-top: 48px;
            }
        }
      }
    }
  }

  @media (max-width: 600px) {
    padding-left: 12px;
    
        p {
            margin: 12px 0;
        }

      .header {
          margin-left: 0;
      }

      .logo {
          text-align: left;
          width: auto;
          padding: 0;
      }

      .blog {
          .entry {
              display: block;

              .column-left {
                  display: none;
              }

              .column-right {
                  .mobile {
                      display: block;

                      .tags {
                          display: flex;
                          flex-direction: row;
                          margin-bottom: 12px;

                          > p {
                              margin: 0 12px 0 0;
                          }
                      }
                  }
              }
          }
      }
  }
}