From 4e9fb73237859af85ca067d6672b6fb4ab6775c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Fri, 29 Jun 2018 11:09:36 -0500
Subject: [PATCH] Awesome underlines and slight fixes

---
 content/.vuepress/scss/init/_mixins.scss      | 33 +++++++++++----
 .../.vuepress/scss/pages/_documentation.scss  |  2 +-
 content/.vuepress/scss/pages/_page.scss       | 41 ++++++-------------
 content/.vuepress/theme/Layout.vue            |  2 +-
 4 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/content/.vuepress/scss/init/_mixins.scss b/content/.vuepress/scss/init/_mixins.scss
index 6fbcfff..89a8a22 100644
--- a/content/.vuepress/scss/init/_mixins.scss
+++ b/content/.vuepress/scss/init/_mixins.scss
@@ -39,15 +39,34 @@
   white-space: nowrap;
 }
 
-@mixin selection($background, $foreground) {
-  ::selection {
-    background-color: $background;
-    color: $foreground;
+@mixin selection($backgroundColor, $textColor) {
+  &::selection {
+    background-color: $backgroundColor;
+    color: $textColor;
+    text-shadow: none;
   }
 
-  ::-moz-selection {
-    background-color: $background;
-    color: $foreground;
+  &::-moz-selection {
+    background-color: $backgroundColor;
+    color: $textColor;
+    text-shadow: none;
+  }
+}
+
+@mixin underline($textColor: #000, $whitespaceColor: #fff) {
+  @include selection($textColor, $whitespaceColor);
+
+  background-image: linear-gradient($whitespaceColor, $whitespaceColor), linear-gradient($whitespaceColor, $whitespaceColor), linear-gradient($textColor, $textColor);
+  background-position: 0 88%, 100% 88%, 0 88%;
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
+  box-decoration-break: clone;
+  display: inline;
+  text-decoration: none;
+  text-shadow: 0.03rem 0 $whitespaceColor, -0.03rem 0 $whitespaceColor, 0 0.03rem $whitespaceColor, 0 -0.03rem $whitespaceColor, 0.06rem 0 $whitespaceColor, -0.06rem 0 $whitespaceColor, 0.09rem 0 $whitespaceColor, -0.09rem 0 $whitespaceColor, 0.12rem 0 $whitespaceColor, -0.12rem 0 $whitespaceColor, 0.15rem 0 $whitespaceColor, -0.15rem 0 $whitespaceColor;
+
+  @-moz-document url-prefix() {
+    background-position: 0 90%, 100% 90%, 0 90%;
   }
 }
 
diff --git a/content/.vuepress/scss/pages/_documentation.scss b/content/.vuepress/scss/pages/_documentation.scss
index dc9fa52..7f18127 100644
--- a/content/.vuepress/scss/pages/_documentation.scss
+++ b/content/.vuepress/scss/pages/_documentation.scss
@@ -39,7 +39,7 @@
 
 
   .blog-post__title {
-    display: inline-block; // position is set elsewhere
+    // display: inline-block; // position is set elsewhere
     line-height: 1.33;
 
     &::after {
diff --git a/content/.vuepress/scss/pages/_page.scss b/content/.vuepress/scss/pages/_page.scss
index 74afcb6..b6cf651 100644
--- a/content/.vuepress/scss/pages/_page.scss
+++ b/content/.vuepress/scss/pages/_page.scss
@@ -158,7 +158,10 @@
     }
   }
 
-  p, ol, ul:not(.overview__ecosystem__module), table {
+  p,
+  ol,
+  ul:not(.overview__ecosystem__module),
+  table {
     code {
       background-color: $black;
       border-radius: 3px;
@@ -175,11 +178,10 @@
     }
   }
 
-  p, ol, ul:not(.overview__ecosystem__module):not(.feature-links) {
+  p,
+  ol,
+  ul:not(.feature-links):not(.overview__ecosystem__module) {
     margin-bottom: 1rem;
-  }
-
-  p, ol, ul:not(.overview__ecosystem__module):not(.feature-links) {
     position: relative;
 
     @media (min-width: 901px) {
@@ -193,7 +195,8 @@
     }
   }
 
-  ol, ul:not(.overview__ecosystem__module):not(.feature-links) {
+  ol,
+  ul:not(.feature-links):not(.overview__ecosystem__module) {
     padding-top: 0.5rem;
 
     li {
@@ -212,7 +215,7 @@
     padding-left: 1.6rem;
   }
 
-  ul:not(.overview__ecosystem__module):not(.feature-links) {
+  ul:not(.feature-links):not(.overview__ecosystem__module) {
     padding-left: 1.25rem;
   }
 
@@ -222,29 +225,9 @@
     }
   }
 
-  a:not(.button):not(.__button-black):not(.feature-link__title):not(.newsletter-standalone__submit) {
+  a:not(.__button-black):not(.button):not(.feature-link__title):not(.header-anchor):not(.newsletter-standalone__submit) {
+    @include underline($teal, $white);
     color: $teal;
-    position: relative;
-
-    &::after {
-      width: 100%; height: 1px;
-
-      background-color: currentColor;
-      content: "";
-      left: 0;
-      position: absolute;
-      transition: all 0.2s;
-    }
-
-    &:not(:hover)::after {
-      bottom: 0;
-      opacity: 0;
-    }
-
-    &:hover::after {
-      bottom: 3px;
-      opacity: 1;
-    }
   }
 
   pre {
diff --git a/content/.vuepress/theme/Layout.vue b/content/.vuepress/theme/Layout.vue
index 2f0b8c9..a74727b 100644
--- a/content/.vuepress/theme/Layout.vue
+++ b/content/.vuepress/theme/Layout.vue
@@ -242,7 +242,7 @@
           All information should be considered incomplete and possibly incorrect and things may not work as expected.
         </p>
 
-        <br/>
+        <br/><br/>
 
         <p>
           Please do not share or link this site publicly while this message is here. This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank" rel="noopener noreferrer">contribute to it on Github</a>.