jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-15 04:05:32 -04:00
Code Issues Activity

not messing with the base font size sure fixes a ton of problems....

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-31 19:51:29 -05:00
parent a6499fd5bb
commit 854b9da5e2
19 changed files with 66 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/Content.module.scss
View File

@@ -1,13 +1,7 @@
.content {
font-size: 0.925em;
letter-spacing: -0.004em;
font-size: 0.9em;
line-height: 1.7;
b,
strong {
letter-spacing: 0.008em; // not sure why the discrepancy between weights
}
blockquote {
margin-left: 0;
padding-left: 1.5em;
@@ -18,9 +12,8 @@
h2,
h3,
h4 {
margin-top: 1.25em;
margin-top: 1em;
margin-bottom: 0.5em;
letter-spacing: 0.001em;
line-height: 1.5;
}
@@ -33,7 +26,6 @@
figure {
margin: 1em auto;
text-align: center;
line-height: 1;
img {
height: auto;
@@ -41,9 +33,9 @@
}
figcaption {
font-size: 0.95em;
font-size: 0.9em;
line-height: 1.5;
margin-top: 0.5em;
margin-top: 0.3em;
color: var(--medium);
}
}

2
components/Layout.module.scss
View File

@@ -5,7 +5,7 @@
background-color: var(--background-inner);
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 768px) {
.main {
padding: 1.25em;
}

1
components/contact/ContactForm.module.scss
View File

@@ -60,7 +60,6 @@
margin-right: 1.5em;
border: 0;
border-radius: 0.3em;
font-size: 1.1em;
cursor: pointer;
user-select: none;
color: var(--text);

20
components/home/Home.module.scss
View File

@@ -1,13 +1,13 @@
.home {
h1 {
margin: 0 0 0.3em -0.03em; // TODO: why is this indented slightly?
margin: 0 0 0.5em -0.03em; // TODO: why is this indented slightly?
font-size: 1.8em;
font-weight: 500;
letter-spacing: -0.014em;
letter-spacing: -0.01em;
.wave {
display: inline-block;
margin-left: 2px;
margin-left: 0.1em;
animation: wave 5s infinite;
animation-delay: 1s;
transform-origin: 65% 80%;
@@ -19,13 +19,13 @@
margin: 0.5em 0 0.5em -0.03em; // TODO: why is this indented slightly?
font-size: 1.35em;
font-weight: 400;
letter-spacing: -0.022em;
letter-spacing: -0.016em;
line-height: 1.4;
}
p {
margin: 0.85em 0;
letter-spacing: -0.009em;
letter-spacing: -0.004em;
line-height: 1.7;
&:last-of-type {
@@ -55,17 +55,19 @@
}
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 768px) {
.home {
font-size: 0.975em;
h1 {
font-size: 1.6em;
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
p {
font-size: 0.925em;
}
}
}

12
components/notes/List.module.scss
View File

@@ -1,10 +1,10 @@
.section {
margin: 1.5em 0;
margin: 2.4em 0;
.year {
font-size: 2.1em;
font-size: 2.2em;
margin-top: 0;
margin-bottom: 0.4em;
margin-bottom: 0.5em;
}
.list {
@@ -25,3 +25,9 @@
margin-bottom: 0;
}
}
@media screen and (max-width: 768px) {
.section .year {
font-size: 2em;
}
}

1
components/notes/ListItem.module.scss
View File

@@ -1,6 +1,5 @@
.row {
display: flex;
letter-spacing: -0.008em;
line-height: 1.75;
margin-bottom: 1em;
}

1
components/notes/Meta.module.scss
View File

@@ -61,7 +61,6 @@
font-size: 2.1em;
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.006em;
a {
background: none;

4
components/page-footer/Footer.module.scss
View File

@@ -1,6 +1,5 @@
.footer {
width: 100%;
letter-spacing: -0.005em;
padding: 1.25em 1.5em;
border-top: 1px solid var(--kinda-light);
color: var(--medium-dark);
@@ -35,7 +34,7 @@
will-change: transform;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 768px) {
.footer {
padding: 1em 1.25em 0;
@@ -50,7 +49,6 @@
// stack columns on left instead of flexboxing across
.row {
display: block;
line-height: 2;
}
}

2
components/page-header/Header.module.scss
View File

@@ -18,7 +18,7 @@
justify-content: space-between;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 768px) {
.header {
padding: 0.75em 1.25em;
}

7
components/page-header/Menu.module.scss
View File

@@ -9,8 +9,6 @@
.item {
margin-left: 1.8em;
display: inline-flex;
align-items: center;
line-height: 1;
.link {
display: inline-flex;
@@ -34,7 +32,6 @@
font-weight: 500;
margin-top: 0.125em;
margin-left: 0.75em;
line-height: 1;
}
}
@@ -42,9 +39,9 @@
margin-left: 1.25em;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 768px) {
.menu {
max-width: 380px;
max-width: 360px;
justify-content: space-between;
flex-grow: 1;
}

5
components/page-header/Name.module.scss
View File

@@ -26,12 +26,11 @@
.name {
margin: 0 0.6em;
font-size: 1.25em;
font-size: 1.2em;
font-weight: 500;
letter-spacing: -0.01em;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 768px) {
.selfie {
width: 70px;
height: 70px;

1
components/page-header/ThemeToggle.module.scss
View File

@@ -2,6 +2,5 @@
border: 0;
padding: 0;
background: none;
line-height: 1;
cursor: pointer;
}

4
components/page/PageTitle.module.scss
View File

@@ -1,6 +1,6 @@
.title {
margin-top: 0;
margin-bottom: 0.4em;
margin-bottom: 0.6em;
font-size: 2em;
text-align: center;
@@ -11,7 +11,7 @@
}
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 768px) {
.title {
font-size: 1.8em;
}

7
components/projects/RepoCard.module.scss
View File

@@ -1,6 +1,6 @@
.card {
width: 100%;
padding: 1em 1.2em;
padding: 1.2em;
border: 1px solid;
border-radius: 0.5em;
font-size: 0.85em;
@@ -13,17 +13,18 @@
}
.description {
margin: 0.4em 0 0.7em;
margin: 0.7em 0;
line-height: 1.7;
}
.meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
.meta_item {
margin-right: 1.5em;
font-size: 0.9em;
font-size: 0.875em;
color: var(--medium);
a {