refactor: less file structure and class naming

src/badge.less

@@ -0,0 +1,8 @@
+.badge {
+  display: inline-block;
+  padding: 0.2rem 0.6rem;
+  border: 1px solid #fff;
+  border-radius: 3px;
+  font-size: @small-size;
+  opacity: 0.5;
+}

src/button.less

@@ -0,0 +1,59 @@
+.button {
+  display: inline-block;
+  padding: 12px 24px;
+  border-radius: 3px;
+  background-color: white;
+  font-size: inherit;
+  line-height: inherit;
+  color: @color-headline;
+  text-decoration: none;
+  -webkit-appearance: none;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &--blue {
+    background-color: @color-primary;
+    color: white;
+  }
+
+  &--bordered-blue {
+    padding: 12px;
+    border: 1px solid #0070d6;
+    border-radius: 5px;
+    background: transparent;
+    color: #0070d6;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &--submit {
+    box-sizing: border-box;
+    height: 50px;
+    border: 0;
+    border-radius: 3px;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    @media (min-width: 422px) {
+      border-radius: 0 3px 3px 0;
+    }
+  }
+
+  &-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__item {
+      margin: 0 18px;
+    }
+  }
+}

src/copy.less

@@ -0,0 +1,17 @@
+.copy {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: inherit;
+
+  &--small {
+    font-size: @small-size;
+  }
+
+  &--limited {
+    max-width: 540px;
+  }
+
+  &--centered {
+    margin: 0 auto;
+  }
+}

src/footer.less

@@ -0,0 +1,10 @@
+.footer {
+  padding: 6rem 0;
+  background-color: @color-headline;
+  text-align: center;
+  color: #fff;
+
+  @media @mobile {
+    padding: 3rem 0;
+  }
+}

src/form.less

@@ -0,0 +1,34 @@
+.form {
+  margin-top: 3rem;
+  margin-bottom: 2rem;
+
+  &__input {
+    box-sizing: border-box;
+    display: block;
+    max-width: 420px;
+    min-width: 300px;
+    height: 50px;
+    padding: 15px;
+    border: 1px solid @color-primary;
+    margin: 0 auto;
+    border-radius: 3px;
+    font-size: inherit;
+    color: @color-copy-grey;
+    outline: 0;
+    -webkit-appearance: none;
+
+    @media (min-width: 422px) {
+      display: inline-block;
+      border-radius: 3px 0 0 3px;
+    }
+  }
+
+  &__submit {
+    margin-top: 15px;
+
+    @media (min-width: 422px) {
+      margin-top: 0;
+      margin-left: -6px;
+    }
+  }
+}

src/general.less

@@ -0,0 +1,10 @@
+body {
+  margin: 0;
+  background: @color-headline;
+  font-family: "Larsseit W01", sans-serif;
+  font-size: @base-size;
+  font-weight: @font-regular;
+  line-height: 1.5;
+  color: @color-copy;
+  -webkit-font-smoothing: antialiased;
+}

src/headline.less

@@ -0,0 +1,47 @@
+.h1 {
+  font-size: 7rem;
+
+  @media @tablet {
+    font-size: 4rem;
+  }
+
+  @media @mobile {
+    font-size: 3rem;
+  }
+}
+
+.h2 {
+  padding: 2rem 0;
+  font-size: 4rem;
+  line-height: 1.3;
+
+  @media @mobile {
+    font-size: 2.5rem;
+  }
+}
+
+.h3 {
+  padding: 1.75rem 0;
+  font-size: 1.75rem;
+}
+
+.h4 {
+  font-size: 1.25rem;
+}
+
+.h1,
+.h2,
+.h3,
+.h4 {
+  margin: 0;
+  font-weight: @font-medium;
+  color: @color-headline;
+
+  &--invert {
+    color: @color-copy-invert;
+  }
+
+  &--limited {
+    max-width: 540px;
+  }
+}

src/hero.less

@@ -0,0 +1,83 @@
+.hero {
+  padding-top: 3rem;
+  background-color: @color-headline;
+  color: @color-copy-invert;
+  overflow: hidden;
+
+  &__container {
+    width: 75%;
+    padding: 0 1rem;
+    margin: auto;
+
+    @media @mobile {
+      width: 90%;
+    }
+  }
+
+  &__link {
+    margin-right: 12px;
+    margin-left: 0;
+    text-decoration: none;
+    opacity: 0.5;
+
+    img {
+      width: 25px;
+      height: 25px;
+      margin-right: 6px;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      opacity: 0.75;
+    }
+  }
+
+  &__headline {
+    font-weight: @font-light;
+    margin: 15vh 0 0 0;
+    color: @color-copy-invert;
+
+    strong {
+      font-weight: @font-medium;
+    }
+
+    u {
+      border-bottom: 5px solid currentColor;
+      text-decoration: none;
+
+      @media @tablet {
+        border-width: 3px;
+      }
+
+      @media @mobile {
+        border-width: 2px;
+      }
+    }
+  }
+
+  &__copy {
+    font-size: 1.2rem;
+    max-width: 540px;
+    margin: 72px 0 24px;
+
+    &--small {
+      font-size: 0.8rem;
+      margin-top: 18px;
+      max-width: 400px;
+      opacity: 0.5;
+    }
+  }
+
+  &__button {
+    margin-top: 2rem;
+  }
+
+  &__github-link {
+    margin-left: 12px;
+    img {
+      width: 25px;
+      height: 25px;
+      vertical-align: middle;
+    }
+  }
+}

src/icon.less

@@ -0,0 +1,18 @@
+.icon {
+  &::before {
+    display: inline-block;
+    content: "";
+    width: 16px;
+    height: 16px;
+    margin: 0 8px -2px 0;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 16px 16px;
+  }
+  &--facebook::before {
+    background-image: url(../images/social-facebook.svg);
+  }
+  &--twitter::before {
+    background-image: url(../images/social-twitter.svg);
+  }
+}

src/image.less

@@ -0,0 +1,27 @@
+.image {
+  position: relative;
+  padding: 14rem 0 4rem;
+  text-align: center;
+  background: linear-gradient(
+    to bottom,
+    @color-headline 0%,
+    @color-headline 50%,
+    #fff 50%,
+    #fff 100%
+  );
+
+  @media @mobile {
+    padding-top: 4rem;
+  }
+
+  &__item {
+    display: block;
+    width: 100%;
+    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+    width: 90%;
+    max-width: 1440px;
+    margin: 0 auto;
+    position: relative;
+  }
+}

src/link.less

@@ -0,0 +1,18 @@
+.link {
+  text-decoration: underline;
+  color: inherit;
+  transition: all 0.3s;
+
+  &:hover {
+    text-decoration: none;
+    opacity: 0.8;
+  }
+
+  &--invert {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/newsletter.less

@@ -0,0 +1,16 @@
+.newsletter {
+  padding-top: 0;
+  padding-bottom: 8rem;
+  background-color: white;
+  text-align: center;
+
+  @media @mobile {
+    padding-bottom: 4rem;
+  }
+
+  &__copy {
+    max-width: 480px;
+    margin: 0 auto;
+    width: 90%;
+  }
+}