jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-04-17 10:28:46 -04:00
Code Issues Activity

make link underlines and rounded corners proportional to font size

Browse Source
This commit is contained in:
Jake Jarvis
2022-02-01 14:19:23 -05:00
parent 83f06d2abd
commit c4e212f6de
5 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/Blockquote/Blockquote.module.css
View File

@@ -1,6 +1,6 @@
.blockquote { .blockquote {
margin-left: 0; margin-left: 0;
padding-left: 1.5em; padding-left: 1.25em;
border-left: 3px solid var(--link); border-left: 0.25em solid var(--link);
color: var(--medium-dark); color: var(--medium-dark);
} }

2
components/HorizontalRule/HorizontalRule.module.css
View File

@@ -1,6 +1,6 @@
.hr { .hr {
margin: 1.5em auto; margin: 1.5em auto;
height: 2px; height: 0.175em;
border: 0; border: 0;
background-color: var(--light); background-color: var(--light);
} }

3
components/Link/Link.module.css
View File

@@ -4,7 +4,8 @@
background-position: 0% 100%; background-position: 0% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 0% var(--link-underline-size); background-size: 0% var(--link-underline-size);
padding-bottom: var(--link-underline-size); padding-bottom: 0.2rem;
/* background-size is for hover animation, color & border are for theme fading: */ /* background-size is for hover animation, color & border are for theme fading: */
transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease; transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease;
} }

4
components/MenuLink/MenuLink.module.css
View File

@@ -8,8 +8,8 @@
.link:hover, .link:hover,
.link.current { .link.current {
border-bottom: 3px solid; border-bottom: 0.2em solid;
margin-bottom: -3px; margin-bottom: -0.2em;
} }
.link:hover { .link:hover {

4
styles/settings.css
View File

@@ -1,6 +1,6 @@
:root { :root {
--rounded-edge-radius: 8px; --rounded-edge-radius: 0.65em;
--link-underline-size: 2px; --link-underline-size: calc(0.1em + 0.05rem);
--font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
sans-serif; sans-serif;