jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-11-02 06:04:06 -05: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 {
margin-left: 0;
padding-left: 1.5em;
border-left: 3px solid var(--link);
padding-left: 1.25em;
border-left: 0.25em solid var(--link);
color: var(--medium-dark);
}

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

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

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

@@ -4,7 +4,8 @@
background-position: 0% 100%;
background-repeat: no-repeat;
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: */
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.current {
border-bottom: 3px solid;
margin-bottom: -3px;
border-bottom: 0.2em solid;
margin-bottom: -0.2em;
}
.link:hover {

4
styles/settings.css
View File

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