init test branch

scss/_all.scss

@@ -0,0 +1,5 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}

scss/_btn.scss

@@ -0,0 +1,111 @@
+@import "colors";
+
+$default-color: transparent !default;
+$dark-gray: #4f4f4f !default;
+$navy-blue: #436da7 !default;
+$white: white !default;
+
+$btn-colors: (
+  border: $dark-gray,
+  bg: $default-color,
+  font: $dark-gray,
+  hover: (
+    bg: $dark-gray,
+    font: $white
+  )
+);
+
+.btn {
+  display: block;
+  min-width: 270px;
+  padding: 8px 10px;
+
+  @apply border-4 rounded-md;
+  border-style: solid;
+  border-color: $default-color;
+
+  background-color: map-get($btn-colors, bg);
+}
+
+@mixin btn($colors: $btn-colors) {
+  border-color: map-get($colors, border);
+  background-color: map-get($colors, bg);
+
+  font-size: 1.05em;
+  color: map-get($colors, font);
+
+  &[disabled] {
+    opacity: .7;
+  }
+
+  &:hover:not([disabled]) {
+    $hovers: map-get($colors, hover);
+    background-color: map-get($hovers, bg);
+    color: map-get($hovers, font);
+  }
+
+  @content;
+}
+
+@mixin btn-reverse($leading-color: $dark-gray) {
+  $colors: (
+    border: $leading-color,
+    bg: $leading-color,
+    font: $white,
+    hover: (
+      bg: $default-color,
+      font: $leading-color
+    )
+  );
+  @include btn($colors);
+}
+
+@mixin button($reverse: false, $has-icon: false) {
+  @if not $reverse {
+    @include btn()
+  } @else {
+    @include btn-reverse($navy-blue);
+  }
+  @if $has-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .icon {
+      margin-right: 10px;
+      font-size: 1.3em;
+    }
+  }
+  @content;
+}
+
+@mixin ghost-button($has-icon: false) {
+  @include button($has-icon: $has-icon);
+
+  position: relative;
+  font-size: 1.2em;
+  border: unset;
+
+  &:hover:not([disabled]) {
+    background-color: $default-color;
+    color: $dark-gray;
+
+    &::after {
+      width: 98%;
+    }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto;
+    width: 30%;
+    height: 2px;
+    background-color: $dark-gray;
+    transform: translateY(2px);
+    transition: width .3s linear;
+  }
+}

scss/_colors.scss

@@ -0,0 +1,10 @@
+// default colors
+$gray: #fafafa;
+$dark-gray: #4f4f4f;
+$navy-blue: #436da7 !default;
+
+// default colors for style
+$text-color: #2c3e50;
+$bg-color: white;
+
+$white: white;

scss/_media.scss

@@ -0,0 +1,34 @@
+@mixin media($min-max, $reverse: false) {
+  $type: max-width;
+  @if $reverse {
+    $type: min-width;
+    $min-max: $min-max + 1;
+  }
+  @media screen and ($type: $min-max) {
+    @content
+  }
+}
+
+@mixin media-mobile($reverse: false) {
+  @include media(480px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-tablet($reverse: false) {
+  @include media(768px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-small($reverse: false) {
+  @include media(1024px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-large($reverse: false) {
+  @include media(1200px, $reverse) {
+    @content
+  }
+}

scss/_root.scss

@@ -0,0 +1,9 @@
+@import "colors";
+
+:root {
+  --font-family: 'Roboto', sans-serif;;
+  --dark-gray-color: #{$dark-gray};
+  --gray-color: #{$gray};
+  --text-color: #{$text-color};
+  --bg-color: #{$bg-color};
+}

scss/default.scss

@@ -0,0 +1,48 @@
+@import "media";
+@import "root";
+@import "all";
+
+a {
+  text-decoration: none;
+}
+
+h2 {
+  font-size: 1.8em;
+  margin-bottom: 10px;
+}
+
+p {
+  font-size: 1.1em;
+  line-height: 1.4em;
+
+  &:not(&:last-of-type) {
+    padding-bottom: 10px;
+  }
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+
+  @include media-large {
+    padding: 0 10px;
+  }
+
+  @include media-small {
+    padding: 0 20px;
+  }
+}
+
+.loading {
+  height: 200px;
+
+  .loading_animation {
+    margin: 20px auto;
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 10px #A2CF00 solid;
+    border-radius: 50%;
+    animation: loading-animation 1s linear infinite;
+  }
+}