Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change inline code styling. #1203

Merged
merged 7 commits into from
Dec 18, 2024
+8 −17
Merged

Change inline code styling. #1203

Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d566da4
Change inline code styling.
sfc-gh-tteixeira Dec 12, 2024
5bae17d
Volley #1 with Jess
sfc-gh-tteixeira Dec 16, 2024
b19cbd1
Volley #2 with Jess.
sfc-gh-tteixeira Dec 16, 2024
4a823cb
Fix code links inside non-p elements.
sfc-gh-tteixeira Dec 16, 2024
e8f34cd
Make inline code changes less specific and apply to <code> too
sfc-gh-tteixeira Dec 16, 2024
979b224
Fix comments
sfc-gh-tteixeira Dec 17, 2024
951e071
Got back to old underline style for links with code
sfc-gh-tteixeira Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 19 additions & 7 deletions styles/text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,25 @@ button:focus-visible {

/* Inline code blocks */
p > code,
li > code {
@apply border border-gray-40 dark:border-gray-80 text-red-70 rounded-md px-1 mx-1 break-words;
li > code,
/* Inline code blocks in docstrings */
tt.docutils.literal {
@apply break-words px-1 rounded;
@apply text-green-80 bg-gray-10;
@apply dark:text-green-50 dark:bg-gray-90;
@apply text-base;
}

/* Improve `code` links. Don't use border, use underline instead. */
a:has(tt:only-child),
a:has(code:only-child) {
@apply border-0;
}

/* Improve `code` links. Don't use border, use underline instead. */
a > tt:only-child,
a > code:only-child {
@apply underline;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Inline code links outside of Autofunction have double underline in default text color:
image

Inline code links in Autofunction (function or class description; not parameter description) have a double underline (underline is green, border is default text color)
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great finds! Should be fixed now.

}

p a code {
Expand All @@ -121,8 +138,3 @@ p a code {
div.code-desc {
@apply mb-4 text-gray-90 dark:text-gray-40;
}

/* Inline code blocks in docstrings */
tt.docutils.literal {
@apply border border-gray-40 text-red-70 rounded-md px-1 mx-1 break-words;
}