Homepage/css/main.less

@color: #e11;
@bg: #111;
@round: 5px;

// Standards and pre-defined style classes
.round {border-radius:50%}
ul {
  padding:0;
  margin:4px 0;
  li {list-style-type:none}
}
h1,h2,h3,h4,p {margin:0}
h1 {font-size:32px}
h2 {font-size:14px}

a {
  color: contrast(@bg);
  text-decoration: none;
  &:hover,
  &.highlight {
    color: @color;
  }
  &.highlight:hover {
    text-decoration: underline;
  }
  &[href="#"] {
    color: average(contrast(@bg), @bg);
  }
  transition: cubic-bezier(0.23, 1, 0.32, 1)  0.4s;
}


html {
  min-height: 100%;
  // Nice background to have
  color: contrast(@bg);
  font-family: 'Oswald' ,sans-serif;
  background:
    linear-gradient(0deg, darken(@bg,10%), fade(darken(@bg,10%), 50%)),
    repeating-linear-gradient(
      45deg,
      darken(@color, 20%) 0% 2%,
      transparent 2% 4%
    ),
    repeating-linear-gradient(
      -45deg,
      @bg 0% 2%,
      darken(@bg, 20%) 2% 4%
    )
  ;
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1;
    .headwrap {
      height: 130px;
      width: 100%;
      top: 0;
      position: fixed;
      z-index: 2;
      .header {
        background:
          linear-gradient(180deg, fade(darken(@bg,10%), 80%) 50%, transparent);
        height: 50px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        font-size: 20px;
        padding: 0 0 80px 0;
        img {
          display: inline-block;
          height: 100px;
          margin: 30px 0 30px 0;
          transform: translateY(30px);
        }
      }
    }
    .bodywrap {
      width: 100%;
      margin: 130px 0 50px 0;
      .body {
        font-size: 24px;
        text-align: center;
        img.logo {
          display: none;
          width: 100%;
        }
        div.banner {
          height: auto;
          background:
            linear-gradient(90deg, fade(darken(@bg,10%), 50%), fade(darken(@bg,10%), 20%));
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          padding: 30px 0;
          margin: 100px 0;
          div.overflow {
            height: 0;
            transform: translateY(-100px);
            img {
              height: 200px;
            }
          }
        }
        div.textbody {
          width: 90%;
          padding: 12px 20px;
          margin: auto;
          text-align: left;
          background: fade(darken(@bg,10%), 50%);
          border: @color 2px solid;
          border-radius: @round;
          flex-direction: row;
          div.item {
            margin: 14px 0;
            div.date {
              font-size: 12px;
            }
          }
        }
      }
    }
    .footerwrap {
      width: 100%;
      flex: 1;
      background: fade(darken(@bg,10%), 80%);
      border-top: @color 2px solid;
      .footer {
        display: flex;
        flex-direction: row;
        span {
          font-size: 20px;
        }
        div.col {
          &.name {
            flex: 2;
          }
          flex: 1;
          padding: 10px;
        }
      }
    }
  }
}

@media only screen and (min-width: 800px) {
}

@media only screen and (max-width: 800px) {
  html {
    body{
      .headwrap {
        height: 50px;
        .header {
          padding: 0;
          background:
              linear-gradient(180deg, fade(darken(@bg,10%), 80%) 90%, transparent);
          img {
            display: none;
          }
        }
      }
      .bodywrap {
        margin: 50px 0 10px 0;
        .body {
          img.logo {
            display: initial;
          }
          div.banner {
            height: auto;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 10px 0;
            margin: 20px 0;
            div.overflow {
              height: auto;
              transform: translateY(0);
            }
          }
        }
      }
      .footerwrap {
        .footer {
          padding: 0 10px;
          text-align: center;
          box-sizing: border-box;
          flex-direction: column;
          flex-basis: 50%;
          div.col {padding:2px}
        }
      }
    }
  }
}