jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-17 11:55:31 -04:00
Code Issues Activity

tidy up homepage font size/spacing

Browse Source
This commit is contained in:
Jake Jarvis
2020-05-07 09:41:14 -04:00
parent 323b3dd9f6
commit 705e800881
6 changed files with 54 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/sass/components/_content.scss
View File

@@ -16,9 +16,10 @@ div#content {
h2 {
padding-bottom: 0.25em;
border-bottom: 1px solid;
@include themed() {
border-bottom: 1px solid t(color-kinda-light);
border-color: t(color-kinda-light);
}
}

8
assets/sass/components/_footer.scss
View File

@@ -5,12 +5,13 @@ footer {
width: 100%;
letter-spacing: -0.005em;
line-height: 1.7;
padding: 1.25em 1.75em;
padding: 1.25em 1.5em;
box-sizing: border-box;
border-top: 1px solid;
@include themed() {
color: t(color-medium);
border-top: 1px solid t(color-kinda-light);
border-color: t(color-kinda-light);
background-color: t(color-super-duper-light);
}
@@ -45,9 +46,10 @@ footer {
a#source {
padding-bottom: 2px;
border-bottom: 1px solid;
@include themed() {
border-bottom: 1px solid t(color-light);
border-color: t(color-light);
}
}
}

12
assets/sass/components/_global.scss
View File

@@ -54,9 +54,10 @@ strong {
blockquote {
margin-left: 0.5em;
padding-left: 1em;
border-left: 5px solid;
@include themed() {
border-left: 5px solid t(color-links);
border-color: t(color-links);
}
}
@@ -98,13 +99,14 @@ code {
font-size: 0.95em;
letter-spacing: 0;
page-break-inside: avoid;
border: 1px solid;
// inline code in paragraphs (single tildes)
padding: 0.2em;
@include themed() {
background-color: t(color-super-duper-light);
border: 1px solid t(color-light);
border-color: t(color-light);
}
}
@@ -115,10 +117,12 @@ div.highlight {
overflow-x: scroll;
object-fit: scale-down;
margin: 1em 0;
border: 1px solid;
border-left: 3px solid;
@include themed() {
border: 1px solid t(color-light);
border-left: 3px solid t(color-links);
border-color: t(color-light);
border-left-color: t(color-links);
background-color: t(color-super-duper-light);
}

5
assets/sass/components/_header.scss
View File

@@ -3,11 +3,12 @@
// Global Header Styles
header {
width: 100%;
padding: 0 1.7em;
padding: 0 1.5em;
box-sizing: border-box;
border-bottom: 1px solid;
@include themed() {
border-bottom: 1px solid t(color-kinda-light);
border-color: t(color-kinda-light);
background-color: t(color-super-duper-light);
}

72
assets/sass/pages/_home.scss
View File

@@ -2,9 +2,9 @@
// Home Styles
main#home {
font-size: 1.1em;
font-size: 1.025em;
padding-top: 1.5em;
padding-bottom: 0.5em;
padding-bottom: 0.75em;
h2 {
margin: 0 0 0.6em 0;
@@ -12,6 +12,7 @@ main#home {
font-weight: 500;
letter-spacing: -0.014em;
line-height: 1.1;
margin-left: -0.03em; // TODO: why is this indented slightly?
}
h3 {
@@ -23,50 +24,40 @@ main#home {
}
p {
margin: 0.8em 0;
letter-spacing: -0.015em;
margin: 0.85em 0;
letter-spacing: -0.009em;
line-height: 1.6;
}
sup {
top: -0.5em;
font-size: 0.54em;
font-size: 0.6em;
letter-spacing: -0.005em;
line-height: 0;
position: relative;
top: -0.5em;
vertical-align: middle;
}
img#me {
float: right;
margin-bottom: 0.5em;
margin-left: 1em;
margin-bottom: 0.6em;
margin-left: 1.6em;
padding: 4px;
border-radius: 50%;
width: 160px;
height: 160px;
border: 1px solid;
border-radius: 50%;
@include themed() {
border: 1px solid t(color-light);
border-color: t(color-light);
}
}
a {
&#blog {
font-size: 0.9em;
margin-bottom: 0;
span {
margin-right: 0.1em;
}
}
// easter egg emoji cursor
&#birthday {
// prettier-ignore
&:hover {
cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
}
// easter egg emoji cursor
a#birthday {
// prettier-ignore
&:hover {
cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
}
}
@@ -81,6 +72,10 @@ main#home {
color: t(color-medium-light);
}
}
&.wave {
margin-left: 2px;
}
}
}
@@ -97,28 +92,31 @@ main#home {
// Responsive
@mixin responsive--home() {
main#home {
font-size: 1em;
padding: 1.2em 1.2em 0.2em 1.2em;
font-size: 0.975em;
padding: 1.2em 1.2em 0.4em 1.2em;
h2 {
font-size: 1.45em;
font-size: 1.5em;
letter-spacing: -0.014em;
line-height: 1.4;
}
h3 {
font-size: 1.25em;
line-height: 1.4;
font-size: 1.185em;
letter-spacing: -0.017em;
line-height: 1.55;
}
p {
line-height: 1.65;
letter-spacing: -0.012em;
}
img#me {
width: 85px;
height: 85px;
width: 90px;
height: 90px;
margin: 0 0 0.3em 0.6em;
padding: 2px;
}
a#blog {
font-size: 1em;
}
}
}