Awesome underlines and slight fixes

This commit is contained in:
ポール ウェッブ 2018-06-29 11:09:36 -05:00
parent 0580225da3
commit 4e9fb73237
4 changed files with 40 additions and 38 deletions

View file

@ -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%;
}
}

View file

@ -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 {

View file

@ -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 {

View file

@ -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>.