index page done

38 files changed, 1007 insertions, 118 deletions

diff --git a/assets/js/script.js b/assets/js/script.js
index b2fd3ef..98bb8df 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -1,12 +1,29 @@
-const navButton = document.querySelector('.header__menu-btn')

-const headerNavMobile = document.querySelector('.header-nav.mobile')

-const navCloseButton = document.querySelector('.header-nav__close-btn')

+const navButton = document.querySelector('.mb-header__menu-btn')

+const headerNavMobile = document.querySelector('.mb-header-nav')

+const navCloseButton = document.querySelector('.mb-header-nav__close-btn')

+const headerNavListItems = document.querySelectorAll('.mb-header-nav-list__item')

 

 navButton.addEventListener('click', () => {

-    headerNavMobile.setAttribute('active', '')

+  headerNavMobile.style.opacity = '0'

+  headerNavMobile.classList.add('active')

+  window.requestAnimationFrame(() => {

+    headerNavMobile.style.opacity = '1'

+    headerNavListItems.forEach((item, i) => {

+      console.log(item)

+      setTimeout(() => {

+        item.style.opacity = 1;

+      }, 90 * i)

+    })

+  })

     function closeHeaderNavHandler() {

-        headerNavMobile.removeAttribute('active')

+        headerNavMobile.style.opacity = '0'

+      setTimeout(() => {

+        headerNavListItems.forEach(item => {

+          item.style.opacity = 0

+        })

+        headerNavMobile.classList.remove('active')

         navCloseButton.removeEventListener('click', closeHeaderNavHandler)

+      }, 300)

     }

     navCloseButton.addEventListener('click', closeHeaderNavHandler)

 })

diff --git a/assets/scss/_featured-posts.scss b/assets/scss/_featured-posts.scss
index ca7fecc..78478dc 100644
--- a/assets/scss/_featured-posts.scss
+++ b/assets/scss/_featured-posts.scss
@@ -1,29 +1,69 @@
+.featured-title {
+  font-size: 1.5rem;
+  font-family: monospace;
+  margin: 0 auto;
+  @media (min-width: $screen-lg) {
+    width: 80%;
+  }
+}
 .featured-posts {
   display: grid;
   width: 100%;
-  max-height: 50vh;
-  margin: 1rem 0;
+  height: auto;
+  max-height: 100vh;
+  margin: 0 auto 2.5rem auto;
   box-shadow: 4px 4px var(--color-boxshadow-dark);
   transition-property: box-shadow, transform;
   transition-duration: 0.2s, 0.3s;
   transition-timing-function: ease;
   background: var(--color-card-bg);
 
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-template-rows: auto;
-  grid-template-areas: 
-    "first second"
-    "first third";
+  grid-template-rows: 2fr repeat(2, 1fr);
+  grid-template-areas:
+    "first"
+    "second"
+    "third";
+
+  @media (min-width: $screen-md) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: auto;
+    grid-template-areas:
+      "first second"
+      "first third";
+  }
+  @media (min-width: $screen-lg) {
+    width: 80%;
+  }
 }
 
-
 .featured-post {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
   border: 1px solid var(--color-border);
-  padding: 2rem;
-  position:relative;
+  padding: 1rem;
+  position: relative;
   transition-property: box-shadow, transform;
   transition-duration: 0.2s, 0.3s;
   transition-timing-function: ease;
+  background: var(--color-hover);
+
+  @media (min-width: $screen-md) {
+    background: transparent;
+    padding: 1.5rem;
+    z-index: 1;
+    position: relative;
+  }
+  @media (min-width: $screen-lg) {
+    padding: 2rem;
+  }
+
+  // &-content {
+  //   position:relative;
+  //   top: 50%;
+  //   left: 50%;
+  //   transform: translate(-50%, -50%);
+  // }
 
   & time {
     font-family: monospace;
@@ -36,41 +76,66 @@
   }
 
   &__wrapper {
-    padding: 1rem;
     background: transparent;
+    z-index: 1;
+    position: relative;
     display: block;
+    color: var(color-text-light);
+    @media (min-width: $screen-md) {
+      color: var(color-text);
+    }
+    & time {
+      color: var(--color-text-light);
+      @media (min-width: $screen-md) {
+        color: var(--color-text);
+      }
+    }
+  }
+  &__title {
+    color: var(--color-text-light);
+    @media (min-width: $screen-md) {
+      color: var(--color-text);
+    }
   }
 
   &__image {
-    opacity: 0;
+    opacity: 1;
     position: absolute;
-    top:0;
-    bottom:0;
-    left:0;
-    right:0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     z-index: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    transition: opacity 0.3s ease; 
+    transition: opacity 0.3s ease;
+    @media (min-width: $screen-md) {
+      opacity: 0;
+    }
   }
-
   &__image-filter {
-    display:none;
-    background: rgba(0,0,0,0.65);
+    display: block;
+    background: rgba(0, 0, 0, 0.7);
     position: absolute;
     z-index: 0;
-    width:100%;
+    width: 100%;
     height: 100%;
-    top:0;
-    bottom:0;
-    left:0;
-    right:0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    @media (min-width: $screen-md) {
+      display: none;
+    }
   }
 
   &__description {
-      color:var(--color-text-2);
-      margin: 0.5rem 0;
+    color: var(--color-text-light);
+    margin: 0.5rem 0;
+    @media (min-width: $screen-md) {
+      color: var(--color-text-2);
+    }
   }
 
   &__tags {
@@ -79,58 +144,63 @@
     position: relative;
     z-index: 1;
     margin-top: 1rem;
+    margin-left: -0.5rem;
 
     & > li {
       padding: 0.5rem;
-      border: 1px solid var(--color-border);
-      margin: 0.5rem; 
+      border: 1px solid var(--color-border-light);
+      margin: 0.5rem;
+      @media (min-width: $screen-md) {
+        border: 1px solid var(--color-border);
+      }
+      & > a {
+        color: var(--color-text-light);
+        @media (min-width: $screen-md) {
+          color: var(--color-text);
+        }
+      }
       &:hover {
-       background: rgba(0,0,0,0.8); 
-       box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.4);
+        background: rgba(0, 0, 0, 0.8);
+        box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.4);
+        transition: transform 0.4s ease;
+        transform: translate(2px, 2px);
       }
     }
   }
 
-  &__title {
-    &:hover {
-    }
-  }
-
   &:nth-child(1) {
     grid-area: first;
-    .featured-post__title{
+    .featured-post__title {
       font-weight: 700;
       font-size: 1.5rem;
-      margin: 1rem 0;
+      margin: 0 0 1rem 0;
     }
-    .featured-post__description{
+    .featured-post__description {
       font-size: 1rem;
     }
   }
   &:nth-child(2) {
     grid-area: second;
-    .featured-post__title{
+    .featured-post__title {
       font-weight: 700;
       font-size: 1rem;
       margin: 0.5rem 0;
     }
-    .featured-post__description{
+    .featured-post__description {
       font-size: 0.8rem;
     }
   }
   &:nth-child(3) {
     grid-area: third;
-    .featured-post__title{
+    .featured-post__title {
       font-weight: 700;
       font-size: 1rem;
       margin: 0.5rem 0;
     }
-    .featured-post__description{
+    .featured-post__description {
       font-size: 0.8rem;
     }
   }
-
-
 }
 
 .featured-post:hover .featured-post__image {
@@ -144,6 +214,16 @@
   z-index: 1;
   position: relative;
 }
+.featured-post:hover .featured-post__title {
+  color: var(--color-text-light);
+  z-index: 1;
+  position: relative;
+}
+.featured-post:hover .featured-post__wrapper time {
+  color: var(--color-text-light);
+  z-index: 1;
+  position: relative;
+}
 .featured-post:hover .featured-post__description {
   color: var(--color-text-light);
 }
diff --git a/assets/scss/_flex.scss b/assets/scss/_flex.scss
new file mode 100644
index 0000000..2d37acb
--- /dev/null
+++ b/assets/scss/_flex.scss
@@ -0,0 +1,12 @@
+.flex {
+  &-between{
+    display: flex;
+    justify-content: space-between;
+    align-items:center;
+  }
+  &-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss
new file mode 100644
index 0000000..1a51b62
--- /dev/null
+++ b/assets/scss/_footer.scss
@@ -0,0 +1,26 @@
+footer {
+  max-width: $screen-max;
+  margin: auto auto 0 auto;
+  width: 100%;
+  padding-bottom: 10px;
+}
+.footer {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  padding: 1rem 2rem;
+  background: var(--color-footer-bg);
+  width: 100%;
+  margin: 0 auto;
+  box-shadow: 0px 0px 8px 0px var(--color-boxshadow);
+  @media (min-width: $screen-md) {
+    width: 80%;
+  }
+
+  &__socials {
+    display: flex;
+    align-items:center;
+  }
+}
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
index 9789a0e..dc6b3fd 100644
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@@ -2,15 +2,21 @@ header {
   max-width: $screen-max;
   margin: 0 auto;
   padding: 1rem 2%;
+  width: 100%;
+  @media (min-width: $screen-lg) {
+    padding: 1rem 4%;
+  }
 }
 
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   &__title {
     font-size: 2rem;
     font-weight: bold;
+    margin-bottom: 0.5rem;
   }
 }
 .header-nav-list {
@@ -22,12 +28,11 @@ header {
     margin: 0.5rem;
   }
   &__link {
-    color: black;
-    text-decoration: none;
+    border-bottom: 2px solid transparent;
   }
   &__link:hover {
+    border-bottom: 2px solid black;
     color: black;
-    text-decoration: underline;
   }
 }
 
@@ -37,35 +42,140 @@ header {
     display: block;
   }
 }
-
-.header-nav.mobile {
+.header-nav {
+  &__close-btn {
+    fill: currentColor;
+    &:hover .header-nav__svg-icon {
+      color: gray;
+      fill: gray;
+    }
+  }
+}
+.mb-header-nav {
+  transition: opacity 0.3s ease;
   display: none;
+  position: fixed;
+  background: var(--color-bg);
+  z-index: 10;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100vh;
+  &__title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    & text {
+      animation: 2s stroke alternate;
+      stroke-width: 0.4;
+    }
+  }
 }
-.header-nav[active].mobile {
+.mb-header-nav.active {
   display: block;
-  position: absolute;
-  top:0;
-  left:0;
-  bottom:0;
-  right:0;
-  width:100%;
-  height: 100%;
 }
+.mb-header-nav-list {
+  &__list {
+    margin: auto;
+    width: 50%;
+    display: flex;
+    flex-flow: column;
+    padding: 1rem 1rem;
+  }
+  &__item {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    font-size: 2.5rem;
+    width: 60%;
+    margin: 1rem auto;
+    text-align: center;
 
-.header__menu-btn {
-  background: transparent;
-  border:none;
-  outline: none;
+    @media (min-width: $screen-md) {
+      width: 50%;
+    }
+
+    & > a {
+      display: block;
+      position: relative;
+      overflow: hidden;
+      -webkit-text-stroke: 1px var(--color-text);
+      -webkit-text-fill-color: transparent;
+      &:hover {
+        -webkit-text-stroke: 1px #333333;
+      }
+      &:before {
+        z-index: -1;
+        position: absolute;
+        display: block;
+        width: 0;
+        content: "";
+        height: 100%;
+        background: var(--color-hover-extra);
+        transition: width 0.3s ease;
+      }
+      &:hover:before {
+        width: 100%;
+      }
+    }
+  }
 }
-.header__menu-btn.mobile {
+
+.mb-header__menu-btn {
   display: block;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+  position: relative;
+
+  & > span:nth-child(1) {
+    transition: transform 0.2s ease;
+    display: inline-block;
+    position: absolute;
+    left:0;
+    top: 3px;
+    width: 100%;
+    height: 2px;
+    background: black;
+  }
+  & > span:nth-child(2) {
+    transition: transform 0.2s ease;
+    display: inline-block;
+    background: black;
+    position: absolute;
+    left:0;
+    top: 12px;
+    width: 100%;
+    height: 2px;
+  }
+  & > span:nth-child(3) {
+    transition: transform 0.2s ease;
+    display: inline-block;
+    background: black;
+    position: absolute;
+    left:0;
+    top: 21px;
+    width: 100%;
+    height: 2px;
+  }
+
+  &:hover &-line:nth-child(1){
+    transform: translate(-2px, -6px) rotate(2deg);
+  }
+  &:hover &-line:nth-child(2){
+    transform: translate(-2px, -2px) rotate(-2deg);
+  }
+  &:hover &-line:nth-child(3){
+    transform: translate(-2px, 6px) rotate(2deg);
+  }
+
   @media (min-width: $screen-lg) {
     display: none;
   }
 }
 
 .header-frame {
-  width: calc(100%);
+  width: 100%;
   transform: translateX(-6px);
   padding: 1rem;
   background: var(--color-header-bg);
@@ -76,13 +186,16 @@ header {
   margin-left: auto;
   transform-style: preserve-3d;
   overflow: visible;
+  @media (min-width: $screen-lg) {
+    width: 80%;
+  }
 }
 .header-frame:after {
   content: "";
   position: absolute;
   background: var(--box-color);
-  width: 17px;
-  height: 17px;
+  width: 15px;
+  height: 15px;
   left: 1px;
   bottom: -11px;
   transform: translateZ(-1px) rotate(45deg);
@@ -94,11 +207,27 @@ header {
   background: var(--box-color);
   width: 15px;
   height: 15px;
-  right: -10px;
+  right: -11px;
   top: 1px;
   transform: translateZ(-1px) rotate(45deg);
   z-index: -1;
 }
 
-.header__title {
+@keyframes stroke {
+  0% {
+    fill: rgba(0, 0, 0, 0);
+    stroke: rgba(0, 0, 0, 1);
+    stroke-dasharray: 0% 50%;
+    stroke-width: 1;
+  }
+  70% {
+    fill: rgba(0, 0, 0, 0);
+    stroke: rgba(0, 0, 0, 1);
+    stroke-dasharray: 90% 50%;
+    stroke-width: 1;
+  }
+  100% {
+    fill: rgba(0, 0, 0, 1);
+    stroke: rgba(0, 0, 0, 1);
+  }
 }
diff --git a/assets/scss/_li.scss b/assets/scss/_li.scss
index d700e37..4ccd3e9 100644
--- a/assets/scss/_li.scss
+++ b/assets/scss/_li.scss
@@ -76,20 +76,75 @@
   grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
   grid-template-rows: minmax(auto, 25px) minmax(0, auto) auto;
   grid-column-gap: 0.5rem;
-  grid-row-gap: 1rem;
   align-items: center;
   grid-template-areas:
-  'pad image'
-  'title image'
-  'description image';
+    'pad image'
+    'title image'
+    'description image';
 
-  &__nopad {
-    grid-row: pad/title;
+  &--nopad {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    grid-template-rows: minmax(0, auto) auto;
+    grid-column-gap: 0.5rem;
+    align-items: center;
+    grid-template-areas:
+      'title image'
+      'description image';
+  }
+
+  &--noimage {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    grid-template-rows: minmax(0, 2rem) auto;
+    grid-column-gap: 0.5rem;
+    align-items: center;
+    grid-template-areas:
+      'pad description'
+      'title description';
+  }
+
+  &--nodesc {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    grid-template-rows: minmax(0, 2rem) auto;
+    grid-column-gap: 0.5rem;
+    align-items: center;
+    grid-template-areas:
+      'pad image'
+      'title image';
+  }
+
+  &--only-title {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    grid-template-rows: auto;
+    grid-column-gap: 0.5rem;
+    align-items: center;
+    grid-template-areas:
+      'title .';
+  }
+
+  &--title-with-tag {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    grid-template-rows: minmax(0, 2rem) auto;
+    grid-column-gap: 0.5rem;
+    align-items: center;
+    grid-template-areas:
+      'pad .'
+      'title .';
+  }
+  &--noimage-nopad {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    grid-template-rows: minmax(0, auto) auto;
+    grid-column-gap: 0.5rem;
+    align-items: center;
+    grid-template-areas:
+      'title .'
+      'description .';
   }
 
   &__title {
     grid-area: title;
     align-self: start;
+    height: 100%;
+    margin-bottom: 1rem;
   }
   &__image {
     grid-area: image;
@@ -97,11 +152,9 @@
   &__description {
     grid-area: description;
     align-self: start;
+    height: 100%;
   }
   &__pad {
     grid-area: pad;
   }
-  &__nodesc {
-    grid-row: title / description;
-  }
 }
diff --git a/assets/scss/_list.scss b/assets/scss/_list.scss
index 059b125..7706a4f 100644
--- a/assets/scss/_list.scss
+++ b/assets/scss/_list.scss
@@ -1,4 +1,9 @@
 .post-list {
   display: flex;
   flex-flow: column nowrap;
+  margin: 0 auto;
+  width: 100%;
+  @media (min-width: $screen-lg) {
+    width: 80%;
+  }
 }
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index eefbd0e..f84d0c7 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -3,4 +3,7 @@
   max-width: $screen-max; 
   margin: 0 auto;
   background: var(--color-bg);
+  @media (min-width: $screen-lg) {
+    padding: 4%;
+  }
 }
diff --git a/assets/scss/_pagination.scss b/assets/scss/_pagination.scss
new file mode 100644
index 0000000..92a77b1
--- /dev/null
+++ b/assets/scss/_pagination.scss
@@ -0,0 +1,37 @@
+.pagination {
+  margin-top: 3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  &__item {
+    width: 48px;
+    height: 48px;
+    &:not(:last-of-type) {
+      margin-right: 1rem;
+    }
+  }
+  &__pagenums {
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  &__link {
+    border: 1px solid var(--color-border);
+    background: var(--color-card-bg);
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    box-shadow: 5px 5px var(--color-boxshadow);
+    transition-property: box-shadow, transform;
+    transition-duration: 0.2s, 0.3s;
+    transition-timing-function: ease;
+
+    &:hover {
+      transform: translate(4px, 4px);
+      box-shadow: 1px 1px var(--color-boxshadow);
+    }
+  }
+}
diff --git a/assets/scss/_post.scss b/assets/scss/_post.scss
new file mode 100644
index 0000000..ef22046
--- /dev/null
+++ b/assets/scss/_post.scss
@@ -0,0 +1,98 @@
+.post {
+  
+}
+
+.post-content {
+  h1{
+    font-size: 3rem;
+    font-weight: bold;
+    margin: 1rem 0;
+  }
+  h2 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin: 0.825rem 0;
+  }
+  h3 {
+    font-size: 2rem;
+    font-weight: semibold;
+    margin: 0.825rem 0;
+  }
+  h4 {
+    font-size: 1.5rem;
+    font-weight: semibold;
+    margin: 0.825rem 0;
+  }
+  h5 {
+    font-size: 1rem;
+    margin: 0.825rem 0;
+  }
+  h6 {
+    font-size: 0.75rem;
+    margin: 0.825rem 0;
+  }
+  h1,h2,h3,h4,h5,h6,p,code,blockquote {
+    line-height: 1.3;
+    @media (min-width: $screen-lg) {
+      line-height: 1.5;
+    }
+  }
+  p {
+    margin: 1rem 0;
+    color: var(--color-text-2);
+  }
+  blockquote {
+    margin-left: 1rem;
+    padding-left: 1rem;
+    border-left: 4px solid var(--color-border);
+    font-family: monospace;
+  }
+  code {
+    padding: 1px 2px;
+    border-radius: 2px;
+    background-color: var(--color-code-bg);
+    color: var(--color-text-light);
+  }
+  pre code {
+    color: inherit;
+    background-color: inherit;
+    padding: 0;
+    border-radius: inherit;
+  }
+  .highlight pre {
+    padding: 1rem;
+  }
+  .highlight code {
+    color: inherit;
+    background-color: inherit;
+    padding: 0;
+    border-radius: inherit;
+  }
+  ul {
+    list-style-type: disc;
+    padding-left: 1rem;
+  }
+  ol {
+    list-style-type: decimal;
+    padding-left: 1rem;
+  }
+  table {
+    margin: 0.5rem 0; 
+  }
+  table th {
+    padding: 0.5rem;
+    background: var(--color-extra);
+  }
+  table td {
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--color-border);
+    border-collapse: collapse;
+  }
+  table tbody tr:nth-child(even) {
+    background: var(--color-table-bg);
+  }
+  table tbody tr:hover {
+    background: var(--color-hover);
+    color: var(--color-text-light);
+  }
+}
diff --git a/assets/scss/_spacing.scss b/assets/scss/_spacing.scss
new file mode 100644
index 0000000..d626660
--- /dev/null
+++ b/assets/scss/_spacing.scss
@@ -0,0 +1,24 @@
+.p {
+  &y--sm{
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+  &x--sm {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+  &y--md{
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+  &x--md {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  &--sm {
+    padding: 1rem;   
+  }
+  &--md {
+    padding: 2rem;   
+  }
+}
diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss
new file mode 100644
index 0000000..dea5492
--- /dev/null
+++ b/assets/scss/_typography.scss
@@ -0,0 +1,15 @@
+.h {
+  &2 {
+    font-size: 3rem; 
+    font-weight: bold;
+  }
+}
+.text-shadow {
+  text-shadow: 1px 1px 1px rgb(60,60,60),
+    2px 2px 1px rgb(100,100,100),
+    3px 3px 1px rgb(110,110, 110),
+    4px 4px 1px rgb(120,120,120),
+    5px 5px 1px rgb(130,130,130),
+    6px 6px 1px rgb(140,140,140),
+    7px 7px 1px rgb(150,150,150);
+}
diff --git a/assets/scss/_vars.scss b/assets/scss/_vars.scss
index 9de7625..b75fa9a 100644
--- a/assets/scss/_vars.scss
+++ b/assets/scss/_vars.scss
@@ -1,5 +1,5 @@
 $screen-sm: 320px;
-$screen-m: 672px;
+$screen-md: 672px;
 $screen-lg: 1056px;
 $screen-xl: 1312px;
 $screen-max: 1584px;
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 81fd91a..04fce7e 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -12,7 +12,12 @@
   --color-border-light: white;
   --color-boxshadow: rgba(100,100,100,1);
   --color-boxshadow-dark: rgba(70,70,70,1);
-  --body-bg: rgba(255, 247, 240, 1);
+  --color-extra: #ffecbc;
+  --color-footer-bg: rgba(250,250,250,0.8);
+  --color-code-bg: rgba(100,100,100,1);
+  --color-table-bg: rgba(200,200,200);
+
+  --color-blockquote: #999999;
   --box-color: black;
   --post-text-color: #343f44;
   --post-card-bg: rgba(250, 250, 250, 0.8);
@@ -85,6 +90,9 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   background: var(--color-bg);
+  height: 100vh;
+  display: flex;
+  flex-flow: column nowrap;
 }
 * {
   box-sizing: border-box;
@@ -107,6 +115,9 @@ table {
 
 button {
   cursor: pointer;
+  background: transparent;
+  border:none;
+  outline: none;
 }
 
 a {
@@ -115,9 +126,15 @@ a {
 }
 
 @import "vars";
+@import "typography";
+@import "flex";
+@import "spacing";
 @import "header";
 @import "main";
+@import "pagination";
 @import "li";
 @import "list";
 @import "summary";
 @import "featured-posts";
+@import "post";
+@import "footer";
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5f8e2ec..95597a8 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -2,7 +2,7 @@
 <html>
     {{- partial "head.html" . -}}
     <body>
-        {{- partial "header.html" . -}}
+        {{- block "header" .}}{{- end }}
         <div id="content">
         {{- block "main" . }}{{- end }}
         </div>
diff --git a/layouts/_default/li.html b/layouts/_default/li.html
index fe32e94..f7bd7b5 100644
--- a/layouts/_default/li.html
+++ b/layouts/_default/li.html
@@ -1,13 +1,20 @@
 <article class="post-item">
-    <div class="post-item-grid">
-        {{$test := "test"}}
-        {{$title_class := "post-item-grid__title"}}
-        {{if not (isset .Params "description")}}
-        {{$title_class = "post-item-grid__nodesc"}}
+        {{$grid_class := ""}}
+        {{if (not (isset .Params "description")) | and (not (isset .Params "image")) | and (not (isset .Params "tags"))}}
+            {{$grid_class = "post-item-grid--only-title"}}
+        {{else if (not (isset .Params "description")) | and (not (isset .Params "image"))}}
+            {{$grid_class = "post-item-grid--title-with-tag"}}
+        {{else if (not (isset .Params "tags") | and (not (isset .Params "image")))}}
+            {{$grid_class = "post-item-grid--noimage-nopad"}}
+        {{else if not (isset .Params "description")}}
+            {{$grid_class = "post-item-grid--nodesc"}}
+        {{else if not (isset .Params "image")}}
+            {{$grid_class = "post-item-grid--noimage"}}
         {{else if not (isset .Params "tags")}}
-        {{$title_class = "post-item-grid__nopad"}}
+            {{$grid_class = "post-item-grid--nopad"}}
         {{end}}
-        <a class="{{$title_class}} post-item__link" href="{{.Permalink}}">
+        <div class="post-item-grid {{$grid_class}}">
+        <a class="post-item-grid__title post-item__link" href="{{.Permalink}}">
             <h2 class="post-item__title">{{.Title}}</h2>
             <time class="post-item__date" datetime="{{.Date.Format "2006-01-02"}}">{{.Date.Format "2006-01-02"}}</time>
         </a>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 68b967f..bf741ba 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,4 +1,8 @@
-<article>
-    <h1>{{.Title}} </h1>
-    <div>{{.Content}}</div>
+{{define "header"}}
+    {{partial "post-header.html" .}}
+{{end}}
+{{define "main"}}
+<article class="post">
+    <div class="post-content">{{.Content}}</div>
 </article>
+{{end}}
diff --git a/layouts/index.html b/layouts/index.html
index 8196297..c48ca3c 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,29 +1,41 @@
+{{define "header"}}
+    {{partial "header.html" .}}
+{{end}}
+
 {{define "main"}}
-{{ if isset .Site.Params "featured" }}
+
+{{ $paginator := .Paginator }}
+{{ if  .Site.Params.featured }}
+<h2 class="featured-title">FEATURED</h2>
+{{ if eq $paginator.PageNumber 1 }}
 <div class="featured-posts">
     {{ $pages := .Site.RegularPages }}
     {{range first 3 $pages}}
         {{ partial "featured" . }}
     {{end}}
 </div>
+{{end}}
 <div class="post-list">
-    {{ $pages := .Pages }}
-    {{ if .IsHome }}
-        {{ $pages = .Site.RegularPages }}
-    {{ end }}
-    {{ range after 3 $pages }}
-       {{ .Render "li" }}
-    {{ end }}
+    {{if eq $paginator.PageNumber 1}}
+        {{ range after 3 $paginator.Pages }}
+            {{ .Render "li" }}
+        {{ end }}
+    {{else}}
+        {{ range $paginator.Pages }}
+            {{ .Render "li" }}
+        {{ end }}
+    {{end}}
+
+    {{ partial "pagination" . }}
 </div>
 {{else}}
 <div class="post-list">
-    {{ $pages := .Pages }}
-    {{ if .IsHome }}
-        {{ $pages = .Site.RegularPages }}
-    {{ end }}
-    {{ range $pages }}
+    {{ range $paginator.Pages }}
         {{ .Render "li" }}
     {{ end }}
+
+    {{ partial "pagination" . }}
 </div>
 {{end}}
+
 {{end}}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index a02b6ec..bf0236f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,2 +1,10 @@
+<footer>
+    <div class="footer">
+        {{with .Site.Copyright }}
+            <div>{{ . | safeHTML }}</div>
+        {{end}}
+        <div class="footer__socials">{{partial "social.html" .}}</div>
+    </div>
+</footer>
 {{$script := resources.Get "js/script.js"}}
 <script src="{{$script.Permalink}}"></script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 751a15f..494824d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,5 +1,6 @@
 <head>
     <title>{{ .Title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
     <link rel="stylesheet" href="{{$style.Permalink}}" >
 </head>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 5a3eee0..8939e2b 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -10,23 +10,52 @@
       <ul class="header-nav-list">
         {{ range .Site.Taxonomies.tags }}
         <li class="header-nav-list__item">
-          <a class="header-nav-list__link" href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
+          <a class="header-nav-list__link" href="{{ .Page.Permalink }}"
+            >{{ .Page.Title }}</a
+          >
         </li>
         {{end}}
       </ul>
     </nav>
-    <button class="header__menu-btn mobile">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
+    <button class="mb-header__menu-btn">
+      <span class="mb-header__menu-btn-line"></span>
+      <span class="mb-header__menu-btn-line"></span>
+      <span class="mb-header__menu-btn-line"></span>
     </button>
   </div>
-  <nav class="header-nav mobile">
-    <button class="header-nav__close-btn">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
-    </button>
-    <ul>
+  <nav class="mb-header-nav">
+    <div class="flex-between px--md py--sm">
+      <svg
+        width="240"
+        height="72"
+        viewBox="0 0 240 72"
+        class="mb-header-nav__title"
+      >
+        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">
+          Navigation
+        </text>
+      </svg>
+      <button class="mb-header-nav__close-btn flex-center">
+        <svg
+          class="mb-header-nav__svg-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="32"
+          height="32"
+        >
+          <path
+            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+          />
+          <path d="M0 0h24v24H0z" fill="none" />
+        </svg>
+      </button>
+    </div>
+    <ul class="mb-header-nav-list mobile">
       {{ range .Site.Taxonomies.tags }}
-      <li class="header-nav-list__item">
-        <a class="header-nav-list__link" href="{{ .Page.Permalink}}">{{.Page.Title}}</a>
+      <li class="mb-header-nav-list__item">
+        <a class="mb-header-nav-list__link" href="{{ .Page.Permalink}}"
+          >{{.Page.Title}}</a
+        >
       </li>
       {{end}}
     </ul>
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644
index 0000000..d90b178
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,128 @@
+<!--
+//
+//  OUTPUT POSTS
+//––––––––––––––––––––––––––––––––––––––––––––––––––
+-->
+{{ $paginator := .Paginate (where .Data.Pages "Type" "posts") }}
+
+<!--
+//
+//  PAGE NUMBERS
+//––––––––––––––––––––––––––––––––––––––––––––––––––
+-->
+{{ $paginator := .Paginator }}
+
+<!-- Number of links either side of the current page. -->
+{{ $adjacent_links := 2 }}
+
+<!-- $max_links = ($adjacent_links * 2) + 1 -->
+{{ $max_links := (add (mul $adjacent_links 2) 1) }}
+
+<!-- $lower_limit = $adjacent_links + 1 -->
+{{ $lower_limit := (add $adjacent_links 1) }}
+
+<!-- $upper_limit = $paginator.TotalPages - $adjacent_links -->
+{{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}
+
+<!-- If there's more than one page. -->
+{{ if gt $paginator.TotalPages 1 }}
+
+  <div class="pagination">
+    
+    <!-- First page. -->
+    {{ if ne $paginator.PageNumber 1 }}
+    <div class="pagination__item pagination__item--first">
+      <a class="pagination__link pagination__link--first" href="{{ $paginator.First.URL }}">
+        <svg transform="rotate(180)" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="15.5,5 11,5 16,12 11,19 15.5,19 20.5,12"/><polygon points="8.5,5 4,5 9,12 4,19 8.5,19 13.5,12"/></g></g></svg>
+      </a>
+    </div>
+    {{ end }}
+
+    <!-- Previous page. -->
+    {{ if $paginator.HasPrev }}
+    <div class="pagination__item pagination__item--previous">
+      <a href="{{ $paginator.Prev.URL }}" class="pagination__link pagination__link--previous">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+      </a>
+    </div>
+    {{ end }}
+    <div class="pagination__pagenums"> 
+    <!-- Page numbers. -->
+    {{ range $paginator.Pagers }}
+    
+      {{ $.Scratch.Set "page_number_flag" false }}
+
+      
+      <!-- Advanced page numbers. -->
+      {{ if gt $paginator.TotalPages $max_links }}
+
+
+        <!-- Lower limit pages. -->
+        <!-- If the user is on a page which is in the lower limit.  -->
+        {{ if le $paginator.PageNumber $lower_limit }}
+
+          <!-- If the current loop page is less than max_links. -->
+          {{ if le .PageNumber $max_links }}
+            {{ $.Scratch.Set "page_number_flag" true }}
+          {{ end }}
+
+
+        <!-- Upper limit pages. -->
+        <!-- If the user is on a page which is in the upper limit. -->
+        {{ else if ge $paginator.PageNumber $upper_limit }}
+
+          <!-- If the current loop page is greater than total pages minus $max_links -->
+          {{ if gt .PageNumber (sub $paginator.TotalPages $max_links) }}
+            {{ $.Scratch.Set "page_number_flag" true }}
+          {{ end }}
+
+
+        <!-- Middle pages. -->
+        {{ else }}
+          
+          {{ if and ( ge .PageNumber (sub $paginator.PageNumber $adjacent_links) ) ( le .PageNumber (add $paginator.PageNumber $adjacent_links) ) }}
+            {{ $.Scratch.Set "page_number_flag" true }}
+          {{ end }}
+
+        {{ end }}
+
+      
+      <!-- Simple page numbers. -->
+      {{ else }}
+
+        {{ $.Scratch.Set "page_number_flag" true }}
+
+      {{ end }}
+
+      <!-- Output page numbers. -->
+      {{ if eq ($.Scratch.Get "page_number_flag") true }}
+        <div class="pagination__item{{ if eq . $paginator }} pagination__item--current{{ end }}">
+          <a href="{{ .URL }}" class="pagination__link">
+            {{ .PageNumber }}
+          </a>
+        </div>
+      {{ end }}
+
+    {{ end }}
+    </div>
+
+    <!-- Next page. -->
+    {{ if $paginator.HasNext }}
+    <div class="pagination__item pagination__item--next">
+      <a href="{{ $paginator.Next.URL }}" class="pagination__link pagination__link--next">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+      </a>
+    </div>
+    {{ end }}
+
+    <!-- Last page. -->
+    {{ if ne $paginator.PageNumber $paginator.TotalPages }}
+    <div class="pagination__item pagination__item--last">
+      <a class="pagination__link pagination__link--last" href="{{ $paginator.Last.URL }}">
+        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="15.5,5 11,5 16,12 11,19 15.5,19 20.5,12"/><polygon points="8.5,5 4,5 9,12 4,19 8.5,19 13.5,12"/></g></g></svg>
+      </a>
+    </div>
+    {{ end }}
+
+  </div><!-- .pagination -->
+{{ end }}
diff --git a/layouts/partials/post-header.html b/layouts/partials/post-header.html
new file mode 100644
index 0000000..fea8674
--- /dev/null
+++ b/layouts/partials/post-header.html
@@ -0,0 +1,50 @@
+<header>
+  <div class="header header-frame">
+    <div>
+      <div class="header__title">{{.Title}}</div>
+      {{with .Description}}
+      <div class="header__description">{{.}}</div>
+      {{end}}
+    </div>
+    <nav class="header-nav desktop">
+      <ul class="header-nav-list">
+      </ul>
+    </nav>
+    <button class="mb-header__menu-btn">
+      <span class="mb-header__menu-btn-line"></span>
+      <span class="mb-header__menu-btn-line"></span>
+      <span class="mb-header__menu-btn-line"></span>
+    </button>
+  </div>
+  <nav class="mb-header-nav">
+    <div class="flex-between px--md py--sm">
+      <svg
+        width="240"
+        height="72"
+        viewBox="0 0 240 72"
+        class="mb-header-nav__title"
+      >
+        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">
+          Navigation
+        </text>
+      </svg>
+      <button class="mb-header-nav__close-btn flex-center">
+        <svg
+          class="mb-header-nav__svg-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="32"
+          height="32"
+        >
+          <path
+            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+          />
+          <path d="M0 0h24v24H0z" fill="none" />
+        </svg>
+      </button>
+    </div>
+    <ul class="mb-header-nav-list mobile">
+    </ul>
+  </nav>
+</header>
+
diff --git a/layouts/partials/social.html b/layouts/partials/social.html
new file mode 100644
index 0000000..b0b60a1
--- /dev/null
+++ b/layouts/partials/social.html
@@ -0,0 +1,120 @@
+{{ $icon_size := "32px" }}
+{{ with .Param "stackoverflow" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="Stack Overflow link"
+  rel="noopener"
+  aria-label="follow on Stack Overflow——Opens in a new window"
+>
+  {{partial "svg/iconmonstr-stackoverflow-2.svg"}}
+</a>
+{{ end }}
+{{ with .Param "facebook" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="Facebook link"
+  rel="noopener"
+  aria-label="follow on Facebook——Opens in a new window"
+>
+  {{partial "svg/iconmonstr-facebook-2.svg"}}
+</a>
+{{ end }}
+{{ with .Param "twitter" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="Twitter link"
+  rel="noopener"
+  aria-label="follow on Twitter——Opens in a new window"
+>
+  {{partial "svg/iconmonstr-twitter-2.svg"}}
+</a>
+{{ end }}
+{{ with .Param "instagram" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="Instagram link"
+  rel="noopener"
+  aria-label="follow on Instagram——Opens in a new window"
+>
+  {{partial "svg/iconmonstr-instagram-12.svg"}}
+</a>
+{{ end }}
+{{ with .Param "youtube" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="Youtube link"
+  rel="noopener"
+  aria-label="follow on Youtube——Opens in a new window"
+>
+  {{partial "svg/iconmonstr-youtube-2.svg"}}
+</a>
+{{ end }}
+{{ with .Param "linkedin" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="LinkedIn link"
+  rel="noopener"
+  aria-label="follow on LinkedIn——Opens in a new window"
+>
+  {{partial "svg/iconmonstr-linkedin-2.svg"}}
+</a>
+{{ end }}
+{{ with .Param "github" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="Github link"
+  rel="noopener"
+  aria-label="follow on Github——Opens in a new window"
+>
+  {{partial "svg/iconmonstr-github-2.svg"}}
+</a>
+{{ end }}
+{{ with .Param "gitlab" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="Gitlab link"
+  rel="noopener"
+  aria-label="follow on Gitlab——Opens in a new window"
+>
+</a>
+{{ end }}
+{{ with .Param "medium" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="Medium link"
+  rel="noopener"
+  aria-label="follow on Medium——Opens in a new window"
+>
+  {{partial "svg/iconmonstr-medium-2.svg"}}
+</a>
+{{ end }}
+{{ with .Param "slack" }}
+<a
+  href="{{ . }}"
+  target="_blank"
+  class="social-link"
+  title="Slack link"
+  rel="noopener"
+  aria-label="follow on Slack——Opens in a new window"
+>
+  {{partial "svg/iconmonstr-slack-3.svg"}}
+</a>
+{{ end }}
diff --git a/layouts/partials/svg/double_arrow-24px.svg b/layouts/partials/svg/double_arrow-24px.svg
new file mode 100644
index 0000000..ce7dd99
--- /dev/null
+++ b/layouts/partials/svg/double_arrow-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="15.5,5 11,5 16,12 11,19 15.5,19 20.5,12"/><polygon points="8.5,5 4,5 9,12 4,19 8.5,19 13.5,12"/></g></g></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-facebook-2.svg b/layouts/partials/svg/iconmonstr-facebook-2.svg
new file mode 100644
index 0000000..9f8d8ec
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-facebook-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v24h24v-24h-24zm16 7h-1.923c-.616 0-1.077.252-1.077.889v1.111h3l-.239 3h-2.761v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-github-2.svg b/layouts/partials/svg/iconmonstr-github-2.svg
new file mode 100644
index 0000000..97dd410
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-github-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v24h24v-24h-24zm14.534 19.59c-.406.078-.534-.171-.534-.384v-2.195c0-.747-.262-1.233-.55-1.481 1.782-.198 3.654-.875 3.654-3.947 0-.874-.311-1.588-.824-2.147.083-.202.357-1.016-.079-2.117 0 0-.671-.215-2.198.82-.639-.18-1.323-.267-2.003-.271-.68.003-1.364.091-2.003.269-1.528-1.035-2.2-.82-2.2-.82-.434 1.102-.16 1.915-.077 2.118-.512.56-.824 1.273-.824 2.147 0 3.064 1.867 3.751 3.645 3.954-.229.2-.436.552-.508 1.07-.457.204-1.614.557-2.328-.666 0 0-.423-.768-1.227-.825 0 0-.78-.01-.055.487 0 0 .525.246.889 1.17 0 0 .463 1.428 2.688.944v1.489c0 .211-.129.459-.528.385-3.18-1.057-5.472-4.056-5.472-7.59 0-4.419 3.582-8 8-8s8 3.581 8 8c0 3.533-2.289 6.531-5.466 7.59z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-instagram-12.svg b/layouts/partials/svg/iconmonstr-instagram-12.svg
new file mode 100644
index 0000000..489f718
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-instagram-12.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.667 12c0 1.473-1.194 2.667-2.667 2.667-1.473 0-2.667-1.193-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667zm3.846-3.232c.038.843.046 1.096.046 3.232s-.008 2.389-.046 3.233c-.1 2.15-1.109 3.181-3.279 3.279-.844.038-1.097.047-3.234.047-2.136 0-2.39-.008-3.232-.046-2.174-.099-3.181-1.132-3.279-3.279-.039-.845-.048-1.098-.048-3.234s.009-2.389.047-3.232c.099-2.152 1.109-3.181 3.279-3.279.844-.039 1.097-.047 3.233-.047s2.39.008 3.233.046c2.168.099 3.18 1.128 3.28 3.28zm-2.405 3.232c0-2.269-1.84-4.108-4.108-4.108-2.269 0-4.108 1.839-4.108 4.108 0 2.269 1.84 4.108 4.108 4.108 2.269 0 4.108-1.839 4.108-4.108zm1.122-4.27c0-.53-.43-.96-.96-.96s-.96.43-.96.96.43.96.96.96c.531 0 .96-.43.96-.96zm6.77-7.73v24h-24v-24h24zm-4 12c0-2.172-.009-2.445-.048-3.298-.131-2.902-1.745-4.52-4.653-4.653-.854-.04-1.126-.049-3.299-.049s-2.444.009-3.298.048c-2.906.133-4.52 1.745-4.654 4.653-.039.854-.048 1.127-.048 3.299 0 2.173.009 2.445.048 3.298.134 2.906 1.746 4.521 4.654 4.654.854.039 1.125.048 3.298.048s2.445-.009 3.299-.048c2.902-.133 4.522-1.745 4.653-4.654.039-.853.048-1.125.048-3.298z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-linkedin-2.svg b/layouts/partials/svg/iconmonstr-linkedin-2.svg
new file mode 100644
index 0000000..3d8a056
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-linkedin-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v24h24v-24h-24zm8 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.397-2.586 7-2.777 7 2.476v6.759z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-medium-2.svg b/layouts/partials/svg/iconmonstr-medium-2.svg
new file mode 100644
index 0000000..0b5f4f0
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-medium-2.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 24h-24v-24h24v24zm-4.03-5.649v-.269l-1.247-1.224c-.11-.084-.165-.222-.142-.359v-8.998c-.023-.137.032-.275.142-.359l1.277-1.224v-.269h-4.422l-3.152 7.863-3.586-7.863h-4.638v.269l1.494 1.799c.146.133.221.327.201.523v7.072c.044.255-.037.516-.216.702l-1.681 2.038v.269h4.766v-.269l-1.681-2.038c-.181-.186-.266-.445-.232-.702v-6.116l4.183 9.125h.486l3.593-9.125v7.273c0 .194 0 .232-.127.359l-1.292 1.254v.269h6.274z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-slack-3.svg b/layouts/partials/svg/iconmonstr-slack-3.svg
new file mode 100644
index 0000000..3a25404
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-slack-3.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 24h-24v-24h24v24zm-4.885-9.531l-1.622.541.561 1.677c.22.679-.139 1.418-.82 1.637-.767.217-1.432-.214-1.642-.817l-.56-1.679-3.342 1.118.56 1.678c.261.802-.289 1.695-1.221 1.695-.586 0-1.067-.376-1.24-.876l-.561-1.678-1.621.54c-.756.218-1.43-.212-1.642-.82-.219-.678.141-1.418.821-1.637l1.621-.539-1.08-3.216-1.622.539c-.903.256-1.705-.393-1.705-1.226 0-.545.339-1.055.885-1.231l1.622-.539-.562-1.677c-.22-.68.141-1.419.822-1.638.68-.22 1.42.139 1.64.819l.562 1.677 3.34-1.118-.559-1.678c-.269-.826.323-1.702 1.229-1.702.546 0 1.056.339 1.233.884l.561 1.678 1.62-.54c.68-.22 1.421.14 1.641.819.221.679-.14 1.417-.82 1.637l-1.622.54 1.081 3.215 1.622-.539c.828-.268 1.705.322 1.705 1.225 0 .546-.34 1.055-.885 1.231zm-5.995-4.285l-3.34 1.117 1.079 3.218 3.341-1.116-1.08-3.219z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-stackoverflow-2.svg b/layouts/partials/svg/iconmonstr-stackoverflow-2.svg
new file mode 100644
index 0000000..50c5bea
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-stackoverflow-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v24h24v-24h-24zm10.488 8.272l5.531 3.243-.686 1.162-5.532-3.243.687-1.162zm-1.456 3.113l6.185 1.739-.331 1.23-6.204-1.667.35-1.302zm-.672 2.813l6.498.65-.118 1.28-6.504-.586.124-1.344zm-.193 2.469h6.667v1.333h-6.667v-1.333zm8.833 3.333h-11v-7h1v6h9v-6h1v7zm-.852-8.704l-3.56-5.219 1.115-.76 3.559 5.219-1.114.76zm1.356-.841l-1.08-6.224 1.328-.231 1.081 6.224-1.329.231z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-twitch-2.svg b/layouts/partials/svg/iconmonstr-twitch-2.svg
new file mode 100644
index 0000000..40dcd11
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-twitch-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v24h24v-24h-24zm19.642 14.791l-4.179 4.179h-3.104l-2.031 2.03h-2.149v-2.03h-3.821v-11.224l1.075-2.746h14.209v9.791zm-9.672 3.701l2.03-2.03h3.821l2.388-2.388v-7.641h-11.463v10.03h3.224v2.029zm4.418-9.313h1.433v4.175h-1.433v-4.175zm-3.821 0h1.433v4.175h-1.433v-4.175z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-twitter-2.svg b/layouts/partials/svg/iconmonstr-twitter-2.svg
new file mode 100644
index 0000000..1f6ebf3
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-twitter-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v24h24v-24h-24zm18.862 9.237c.208 4.617-3.235 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.079-4.03 3.198-4.03.944 0 1.797.398 2.396 1.037.748-.147 1.451-.42 2.085-.796-.245.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.44.656-.997 1.234-1.638 1.697z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-vk-2.svg b/layouts/partials/svg/iconmonstr-vk-2.svg
new file mode 100644
index 0000000..43a4647
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-vk-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0v24h24v-24h-24zm19.25 16.996h-2.133c-1.205 0-1.41-.687-2.402-1.679-.897-.897-1.394-.209-1.374 1.068.006.339-.161.611-.566.611-1.264 0-3.08.178-4.918-1.806-1.883-2.033-3.857-6.111-3.857-6.513 0-.237.196-.344.524-.344h2.17c.574 0 .623.284.783.649.667 1.521 2.265 4.574 2.69 2.87.244-.978.344-3.245-.703-3.44-.594-.11.452-.746 1.968-.746.377 0 .786.041 1.205.137.769.179.771.523.761 1.026-.039 1.903-.269 3.184.233 3.507.479.31 1.739-1.717 2.403-3.281.183-.433.22-.722.735-.722h2.655c1.389 0-.182 1.997-1.383 3.557-.968 1.255-.916 1.28.208 2.324.802.744 1.75 1.76 1.75 2.336.001.272-.211.446-.749.446z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/iconmonstr-youtube-2.svg b/layouts/partials/svg/iconmonstr-youtube-2.svg
new file mode 100644
index 0000000..ecb874e
--- /dev/null
+++ b/layouts/partials/svg/iconmonstr-youtube-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.888 14.154c-.288 0-.535.184-.717.405v-1.893h-.814v5.88h.814v-.333c.225.28.471.388.766.388.537 0 .737-.417.737-.954v-2.406c0-.588-.195-1.087-.786-1.087zm-.044 3.376c0 .138-.023.238-.07.299-.089.116-.281.111-.413.045l-.191-.153v-2.703l.167-.132c.141-.071.323-.058.421.071.058.076.086.187.086.333v2.24zm-2.716-8.53v-2.119c0-.25.115-.434.353-.434.26 0 .371.179.371.434v2.119c0 .248-.126.431-.354.431-.235 0-.37-.191-.37-.431zm-1.849 4.52h-.94v5.027h-.908v-5.027h-.94v-.854h2.788v.854zm1.484.688h.807v4.338h-.807v-.479c-.148.176-.303.311-.464.403-.435.249-1.031.244-1.031-.636v-3.626h.806v3.325c0 .175.042.292.215.292.157 0 .376-.202.474-.325v-3.292zm-10.763-14.208v24h24v-24h-24zm13.434 5.62h.847v3.491c0 .184.044.307.226.307.165 0 .395-.212.498-.341v-3.457h.847v4.555h-.847v-.504c-.367.436-.723.569-.979.569-.454 0-.591-.364-.591-.813v-3.807zm-1.937-.038c.687 0 1.217.511 1.217 1.224v2.233c0 .765-.536 1.22-1.217 1.22-.821 0-1.241-.417-1.241-1.22v-2.233c0-.731.495-1.224 1.241-1.224zm-3.435-1.582l.658 2.468.611-2.468h.969l-1.11 3.67v2.504h-.954v-2.504l-1.134-3.67h.96zm8.493 15.912c-1.735.118-7.377.118-9.11 0-1.878-.128-2.097-1.267-2.111-4.245.014-2.983.235-4.116 2.111-4.245 1.733-.118 7.375-.118 9.11 0 1.878.128 2.097 1.267 2.111 4.245-.014 2.983-.235 4.116-2.111 4.245zm-.047-5.813c-.728 0-1.225.522-1.225 1.275v1.947c0 .781.394 1.342 1.164 1.342.85 0 1.208-.506 1.208-1.342v-.326h-.83v.301c0 .378-.02.607-.36.607-.325 0-.352-.282-.352-.607v-.818h1.542v-1.104c0-.783-.373-1.275-1.147-1.275zm.317 1.707h-.712v-.439c0-.298.062-.508.36-.508.29 0 .352.215.352.508v.439z"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/navigate_before-24px.svg b/layouts/partials/svg/navigate_before-24px.svg
new file mode 100644
index 0000000..0cdead5
--- /dev/null
+++ b/layouts/partials/svg/navigate_before-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/layouts/partials/svg/navigate_next-24px.svg b/layouts/partials/svg/navigate_next-24px.svg
new file mode 100644
index 0000000..58ee688
--- /dev/null
+++ b/layouts/partials/svg/navigate_next-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file