init scss structure

docs/assets/css/style.css

@@ -0,0 +1,25 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit; }
+
+html {
+  font-size: 62.5%; }
+  @media (max-width: 78em) {
+    html {
+      font-size: 56.25%; } }
+  @media (max-width: 56.25em) {
+    html {
+      font-size: 50%; } }
+  @media (min-width: 112.5em) {
+    html {
+      font-size: 75%; } }
+
+body {
+  box-sizing: border-box;
+  padding: 3rem; }
+  @media (max-width: 56.25em) {
+    body {
+      padding: 0rem; } }

docs/assets/sass/abstracts/_mixins.scss

@@ -0,0 +1,29 @@
+@mixin clearfix {
+    &::after {
+        content: "";
+        display: table;
+        clear: both;        
+    }    
+}
+
+@mixin absCenter {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+@mixin respond($breakpoint) {
+    @if $breakpoint == phone {
+        @media (max-width: 37.5em){ @content };     //600px
+    }
+    @if $breakpoint == tab-port {
+        @media (max-width: 56.25em){ @content };      //900px
+    }
+    @if $breakpoint == tab-land {
+        @media (max-width: 78em){ @content };     //1200px
+    }
+    @if $breakpoint == big-desktop {
+        @media (min-width: 112.5em){ @content };     //1800px
+    }
+}

docs/assets/sass/base/_base.scss

@@ -0,0 +1,30 @@
+*,
+*::after,
+*::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+}
+
+html {
+    font-size: 62.5%;
+   
+    @include respond(tab-land) {
+        font-size: 56.25%;
+    }
+    @include respond(tab-port) {
+        font-size: 50%;
+    }
+    @include respond(big-desktop) {
+        font-size: 75%;
+    }
+}
+
+body {
+    box-sizing: border-box;
+    padding: 3rem;
+
+    @include respond(tab-port) {
+        padding: 0rem;
+    }
+}

docs/assets/sass/main.scss

@@ -0,0 +1,5 @@
+@import "./abstracts/mixins";
+
+@import "./base/base";
+
+@import "./layout/header";