Skip to content

Commit

Permalink
🐛 🎨 Consistent formatting of links
Browse files Browse the repository at this point in the history
  • Loading branch information
@ebullient
ebullient committed Dec 2, 2023
1 parent d66e416 commit a3c5020
Show file tree
Hide file tree
Showing 2 changed files with 174 additions and 104 deletions.
109 changes: 52 additions & 57 deletions src/fragments/_05-text-links.scss
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,39 @@
// This file is suitable for publish

.theme-dark {
// Body + theme-dark
body {
--bold-color: var(--blue-3);
--italic-color: var(--pink-2);
--ebw-strong-em: var(--yellow-2);
--ebw-link-underline: var(--cyan-4);
--ebw-link-hidden: var(--cyan-4);

// --link-color Resolved link text color
--link-color: var(--gray-light-1);
// --link-color-hover Resolved link text color (hover)
--link-color-hover: var(--cyan-2);

--ebw-del-link-decoration-color: rgba(203, 203, 203, 0.5);
// --link-decoration Resolved link text decoration
--link-decoration: underline;
// --link-decoration-hover Resolved link text decoration (hover)
--link-decoration-hover: underline;
// --link-decoration-thickness Resolved link text decoration thickness
// --link-unresolved-color Unresolved link text color
--link-unresolved-color: var(--link-color);
// --link-unresolved-opacity Unresolved link opacity
--link-unresolved-opacity: 0.9;
// --link-unresolved-filter Unresolved link filter, e.g. hue-rotate
// --link-unresolved-decoration-style Unresolved link text decoration style
--link-unresolved-decoration-style: dotted;
// --link-unresolved-decoration-color Unresolved link text decoration color
--link-unresolved-decoration-color: var(--ebw-link-underline);
// --link-external-color External link text color
--link-external-color: var(--link-color);
// --link-external-color-hover External link text color (hover)
--link-external-color-hover: var(--link-color-hover);
// --link-external-decoration External link text decoration
--link-external-decoration: underline;
// --link-external-decoration-hover External link text decoration (hover)
--link-external-decoration-hover: underline;
}

.theme-light {
--bold-color: var(--blue-4);
--italic-color: var(--pink-4);
Expand All @@ -22,68 +43,42 @@

--link-color: var(--gray-dark-3);
--link-color-hover: var(--cyan-4);

--ebw-del-link-decoration-color: rgba(100, 100, 100, 0.5);
}

body {
--link-decoration: underline;
--link-decoration-hover: underline;
--link-external-decoration: underline;
--link-external-decoration-hover: underline;

--link-decoration-color: var(--ebw-link-underline);

--link-external-color: var(--link-color);
--link-external-color-hover: var(--link-color-hover);

--link-unresolved-color: var(--link-color);
--link-unresolved-opacity: 0.9;
--link-unresolved-decoration-style: dotted;
--link-unresolved-decoration-color: var(--ebw-link-underline);
}


// Strong

strong em,
strong em a.internal-link {
color: var(--ebw-strong-em);
}
.markdown-rendered del a.external-link,
.markdown-rendered del a.internal-link,
.markdown-rendered del a.internal-link.is-unresolved {
text-decoration: line-through var(--link-decoration-color);
}
a {
text-decoration-color: var(--link-decoration-color);
text-decoration-color: var(--ebw-link-underline);
}

del a,
.markdown-rendered del a.external-link,
.markdown-rendered del a.internal-link,
.markdown-rendered del a.internal-link.is-unresolved {
text-decoration-color: var(--ebw-del-link-decoration-color);
}

.markdown-rendered {
a del,
del a,
del a.internal-link {
color: var(--text-muted);
}
em a,
em a.internal-link,
em a.internal-link.is-unresolved {
color: var(--italic-color);
}
strong a,
strong a.internal-link,
strong a.internal-link.is-unresolved {
color: var(--bold-color);
}
strong em,
strong em a.external-link,
strong em a.internal-link,
strong em a.internal-link.is-unresolved {
color: var(--ebw-strong-em);
}
.internal-link.is-unresolved {
text-decoration-line: var(--link-decoration);
text-decoration-color: var(--ebw-link-underline);
}
.internal-link.is-unresolved::after {
content: ' ✎';
color: var(--ebw-link-underline);
}
}

em a {
color: var(--italic-color);
text-decoration: var(--link-decoration);
text-decoration-color: var(--link-decoration-color);
}

strong a{
color: var(--bold-color);
text-decoration: var(--link-decoration);
}

em a:hover,
strong a:hover {
color: var(--link-color-hover);
Expand Down
169 changes: 122 additions & 47 deletions src/fragments/_05a-text-links-app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,58 +2,133 @@

@use '05-text-links' as *;

.cm-s-obsidian span.cm-quote.cm-em {
color: var(--italic-color);
}
.cm-s-obsidian span.cm-quote.cm-strong {
color: var(--bold-color);
}

.cm-s-obsidian span.cm-strong.cm-em,
.cm-s-obsidian span.cm-quote.cm-strong.cm-em {
color: var(--ebw-strong-em);
}

.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough,
.markdown-source-view.mod-cm6 .cm-url.cm-strikethrough .cm-underline,
.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough,
.markdown-source-view.mod-cm6 .cm-link.cm-strikethrough .cm-underline,
.markdown-source-view.mod-cm6 .cm-hmd-internal-link.cm-strikethrough,
.cm-s-obsidian .cm-url.cm-strikethrough,
.cm-s-obsidian .cm-link.cm-strikethrough,
.cm-s-obsidian .cm-hmd-internal-link.cm-strikethrough {
text-decoration: line-through var(--link-decoration-color);
}

.cm-s-obsidian span.cm-string.cm-url {
color: var(--ebw-link-hidden);
}

// Em A
.cm-s-obsidian span.cm-link.cm-em {
color: var(--italic-color);
text-decoration: var(--link-decoration);
text-decoration-color: var(--link-decoration-color);
}

// Strong A

.cm-s-obsidian span.cm-link.cm-strong {
color: var(--bold-color);
text-decoration: var(--link-decoration);
.cm-s-obsidian {
span.cm-quote.cm-em {
color: var(--italic-color);
}
span.cm-quote.cm-strong {
color: var(--bold-color);
}
span.cm-strong.cm-em,
span.cm-quote.cm-strong.cm-em {
color: var(--ebw-strong-em);
}
}

// Strong and Em A Hover

.cm-s-obsidian span.cm-link.cm-em:hover,
.cm-s-obsidian span.cm-link.cm-strong:hover {
color: var(--link-color-hover);
text-decoration: var(--link-decoration-hover);
.cm-s-obsidian,
.markdown-source-view.mod-cm6 {
// Readable strikethrough characters in source mode
.cm-formatting-strikethrough {
text-decoration: none;
color: var(--text-faint);
}
.cm-strikethrough:not(.cm-formatting-strikethrough) {
text-decoration-line: line-through;
text-decoration-thickness: var(--link-decoration-thickness);
}
span.cm-hmd-internal-link, // wiki links
span.cm-link { // markdown links
.cm-underline {
text-decoration: none;
}
// Strikethrough links in live preview
&.cm-strikethrough .cm-underline {
color: var(--text-muted);
text-decoration-line: line-through;
text-decoration-thickness: var(--link-decoration-thickness);
}
&.cm-strikethrough:has(.cm-underline):not(:has(.is-unresolved)):after {
content: ' \27B9';
font-size: .8rem;
opacity: .5;
}
// Strikethrough link text in source mode
&.cm-strikethrough:not(.cm-formatting-strikethrough):not(:has(.cm-underline)) {
color: var(--text-muted);
text-decoration-line: line-through;
text-decoration-thickness: var(--link-decoration-thickness);
text-decoration-color: var(--text-normal);
}
// Readable strikethrough formatting characters in source mode
&.cm-formatting-strikethrough {
color: var(--text-faint);
text-decoration: none;
}
// consistent link decorations
&:not(:has(.is-unresolved)),
&.cm-em:not(:has(.is-unresolved)),
&.cm-strong:not(:has(.is-unresolved)),
&.cm-em.cm-strong:not(:has(.is-unresolved)) {
text-decoration-line: var(--link-decoration);
text-decoration-color: var(--ebw-link-underline);
}
&:has(.is-unresolved),
&.cm-em:has(.is-unresolved),
&.cm-strong:has(.is-unresolved),
&.cm-em.cm-strong:has(.is-unresolved) {
text-decoration-line: var(--link-decoration);
text-decoration-color: var(--ebw-link-underline);
text-decoration-style: var(--link-unresolved-decoration-style);
&:after {
content: ' ✎';
color: var(--ebw-link-underline);
}
}
}
// Bare links
.cm-line .cm-url.cm-link {
color: var(--link-external-color);
opacity: unset;
}
// Unmatched bare links are .. super strange for formatting in source mode/live preview.
.cm-line:has(.cm-url):not(:has(.cm-link)) .cm-url:not(.cm-link) {
background-color: green;
color: var(--text-normal);
font-weight: normal;
font-style: normal;
}
span.cm-hmd-internal-link, // wiki links
span.cm-link, // markdown links
span.cm-url.cm-link { // bare links
&.cm-em:hover,
&.cm-strong:hover,
&.cm-em.cm-strong:hover {
color: var(--link-color-hover);
text-decoration-line: var(--link-decoration-hover);
}
// Em A (wikilink & markdown link text)
&.cm-em,
&.cm-em .is-unresolved {
color: var(--italic-color);
}
// Strong A (wikilink & markdown link text)
&.cm-strong,
&.cm-strong .is-unresolved {
color: var(--bold-color);
}
// Em Strong A (wikilink & markdown link text)
&.cm-em.cm-strong,
&.cm-em.cm-strong .is-unresolved {
color: var(--ebw-strong-em);
}
}
span.cm-formatting-link:not(.cm-url.cm-link) {
font-weight: normal;
font-style: normal;
opacity: .7;
}
// the URL portion of markdown URL
span.cm-string.cm-url {
color: var(--ebw-link-hidden);
font-weight: normal;
font-style: normal;
}
}

/* Collapse external links / markdown links in edit mode */
body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 {
div.cm-line:not(.cm-active) {
> .cm-string.cm-url {
text-decoration: none;
}
> .cm-string.cm-url:not(.cm-formatting) {
font-size: 0;
}
Expand Down

0 comments on commit a3c5020

Please sign in to comment.