Add love

docs/_sass/header.sass

@@ -1,6 +1,3 @@
-$github: #333333
-$twitter: #55acee
-
 #github
   color: $github
   border-color: $github
@@ -9,12 +6,16 @@ $twitter: #55acee
     border-color: $github
     color: $white
 
-#twitter
-  color: $twitter
-  border-color: $twitter
+.tw-button
+  background-color: $twitter
+  color: $white
+  border-color: transparent !important
   &:hover
-    background: $twitter
-    border-color: $twitter
+    background-color: darken($twitter, 2.5%)
+    color: $white
+  &:active,
+  &:focus
+    background-color: darken($twitter, 5%)
     color: $white
 
 +desktop

docs/_sass/love.sass

@@ -0,0 +1,91 @@
+.testimonials
+  background-color: $background
+
+.love
+  align-items: flex-start
+  display: flex
+  justify-content: center
+
+.more-loves
+  align-items: center
+  display: flex
+  justify-content: center
+  margin-top: 1.5rem
+  text-align: center
+  .button
+    height: auto
+    padding: 0.75em 1.5em
+    span
+      transform-origin: center center
+      transition: transform $speed $easing
+    &:hover
+      span
+        transform: scale(1.04)
+
++mobile
+  .testimonials
+    padding: 1.5rem
+  .love
+    margin-bottom: 1.5rem
+
++tablet
+  .testimonials
+    padding: 3rem
+  .love + .love
+    margin-top: 1.5rem
+
+.rainbow
+  animation: rainbow 8s ease infinite
+  background-image: linear-gradient(124deg, $orange, $red, $purple, $blue)
+  background-size: 800% 800%
+
+.hero.is-love
+  .title,
+  .subtitle
+    color: $white
+
+@keyframes rainbow
+    0%
+      background-position: 0% 80%
+    50%
+      background-position: 100% 20%
+    100%
+      background-position: 0% 80%
+
+.hug
+  align-items: flex-start
+  display: flex
+  justify-content: center
+
+.more-love-container
+  align-items: center
+  background-color: $background
+  border-radius: $radius
+  display: flex
+  justify-content: center
+  padding: 1.5rem
+  .tw-button
+    margin-left: 1.5rem
+
++mobile
+  .hug,
+  .more-love
+    margin: 1.5rem
+
++tablet
+  .more-love
+    margin: 3rem 0 1.5rem
+  .hugs
+    display: flex
+    flex-wrap: wrap
+    padding-bottom: 3rem
+  .hug
+    margin-top: 1.5rem
+    width: calc(33.3333% - 1rem)
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3)
+      margin-top: 0
+    &:nth-child(3n-1),
+    &:nth-child(3n)
+      margin-left: 1.5rem

docs/_sass/specific.sass

@@ -74,7 +74,6 @@
     height: 180px
     width: 240px
 
-
 .article-overlay
   +overlay
   background-color: $black
@@ -104,3 +103,7 @@
   font-size: 2.5rem
   font-weight: $weight-bold
   line-height: 1.25
+
+.emoji
+  margin-right: 0.5em
+  margin-top: 2px

docs/_sass/twitter.sass

@@ -0,0 +1,47 @@
+.tws
+  display: flex
+  flex-wrap: wrap
+  overflow: auto
+  padding: 20px
+
+.tw
+  color: #697882
+  flex-shrink: 0
+  font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif
+  font-size: 16px
+  // height: 270px
+  line-height: 1.4
+  padding: 10px
+  width: 520px
+  a
+    color: currentColor
+  p
+    color: #1c2022
+    font-size: 16px
+    margin-bottom: 3.2px
+    a
+      color: #2b7bb9
+
+.twitter-tweet:not(.twitter-tweet-rendered)
+  background-color: $white
+  border: 1px solid #e1e8ed
+  border-radius: 5px
+  color: #697882
+  font-size: 14px
+  padding: 20px 20px 11.6px
+  a
+    color: currentColor
+    &:hover
+      text-decoration: underline
+  p
+    color: #1c2022
+    font-size: 16px
+    margin-bottom: 3.2px
+    a
+      color: #2b7bb9
+
+.twitter-tweet-rendered
+  border: none
+  border-radius: 0
+  margin: 0 !important
+  padding: 0 !important