archive/inter-font
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: unerline style

Browse source
This commit is contained in:
Rasmus Andersson 2017-08-22 13:47:34 -07:00
parent a89faf2f6c
commit 25820ad9d1
1 changed files with 53 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

95
docs/index.html
View file

@ -42,33 +42,17 @@ body {
a { a {
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: underline;
background-image:
linear-gradient(to bottom,
rgba(0,0,0,.6) 50%,
rgba(0,0,0,0) 50%);
background-repeat: repeat-x;
background-size: 2px .1em;
background-position: 0 1.07em;
text-shadow:
/* creates "openings" for descenders in the underline */
-1px -1px 0 #f4f4f4,
1px -1px 0 #f4f4f4,
-1px 1px 0 #f4f4f4,
1px 1px 0 #f4f4f4;
word-break: break-word; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;
} }
a:hover { a:hover {
color: rgb(48, 112, 232); color: rgb(48, 112, 232);
background-image:
linear-gradient(to bottom,
rgba(48, 112, 232, 1) 50%,
rgba(48, 112, 232, 0) 50%);
} }
a.plain { a.plain {
background:none; background:none;
text-shadow:none; text-shadow:none;
text-decoration:none;
} }
p { p {
margin: 20px 0; margin: 20px 0;
@ -104,6 +88,7 @@ h2 {
h1 > a, h2 > a, h3 > a { h1 > a, h2 > a, h3 > a {
color: inherit; color: inherit;
text-decoration: none;
text-shadow: none; text-shadow: none;
background: none !important; background: none !important;
} }
@ -133,14 +118,6 @@ h1 > a, h2 > a, h3 > a {
.row.white { .row.white {
background: white; background: white;
} }
.row.white a {
text-shadow:
/* creates "openings" for descenders in the underline */
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
.row.dark { .row.dark {
background: #2b2b2b; background: #2b2b2b;
@ -148,28 +125,62 @@ h1 > a, h2 > a, h3 > a {
} }
.row.dark a:hover { .row.dark a:hover {
color: rgb(164, 188, 255); color: rgb(164, 188, 255);
background-image:
linear-gradient(to bottom,
rgba(164, 188, 255, 1) 50%,
rgba(164, 188, 255, 0) 50%);
}
.row.dark a {
background-image:
linear-gradient(to bottom,
rgba(255,255,255,.3) 50%,
rgba(255,255,255,0) 50%);
text-shadow:
/* creates "openings" for descenders in the underline */
-1px -1px 0 #2b2b2b,
1px -1px 0 #2b2b2b,
-1px 1px 0 #2b2b2b,
1px 1px 0 #2b2b2b;
} }
.row.dark h2, .row.dark h2 > a { .row.dark h2, .row.dark h2 > a {
color: #ccc; color: #ccc;
background: none; background: none;
} }
/* Medium.com-style link underline for high-density displays */
@media (-webkit-min-device-pixel-ratio: 1.5) {
a {
text-decoration: none;
background-image:
linear-gradient(to bottom,
rgba(0,0,0,.6) 50%,
rgba(0,0,0,0) 50%);
background-repeat: repeat-x;
background-size: 2px .1em;
background-position: 0 1.07em;
text-shadow:
/* creates "openings" for descenders in the underline */
-1px -1px 0 #f4f4f4,
1px -1px 0 #f4f4f4,
-1px 1px 0 #f4f4f4,
1px 1px 0 #f4f4f4;
}
a:hover {
background-image:
linear-gradient(to bottom,
rgba(48, 112, 232, 1) 50%,
rgba(48, 112, 232, 0) 50%);
}
.row.white a {
text-shadow:
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}
.row.dark a {
background-image:
linear-gradient(to bottom,
rgba(255,255,255,.3) 50%,
rgba(255,255,255,0) 50%);
text-shadow:
-1px -1px 0 #2b2b2b,
1px -1px 0 #2b2b2b,
-1px 1px 0 #2b2b2b,
1px 1px 0 #2b2b2b;
}
.row.dark a:hover {
background-image:
linear-gradient(to bottom,
rgba(164, 188, 255, 1) 50%,
rgba(164, 188, 255, 0) 50%);
}
}
.row ::selection { .row ::selection {
background: rgb(48, 112, 232); background: rgb(48, 112, 232);
color: white; color: white;