jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 15:16:40 -04:00
Code Issues Activity

swap logo in header with my face 📸

Browse Source
This commit is contained in:
Jake Jarvis
2021-05-26 21:40:12 -04:00
parent 5f81813e75
commit 233349781e
9 changed files with 101 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
// Global Header Styles
header {
width: 100%;
padding: 0 1.5em;
padding: 0.7em 1.5em;
border-bottom: 1px solid;
@include colors() {
@ -26,17 +26,22 @@ header {
color: c(medium-dark);
}
span#name {
margin: 1.1em 0 1.1em 0.8em;
font-size: 1.35em;
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
img#selfie {
width: 50px;
height: 50px;
border: 1px solid;
border-radius: 50%;
@include colors() {
border-color: c(light);
}
}
svg {
width: 28px;
height: 40px;
span#name {
margin: 0 0.6em;
font-size: 1.25em;
font-weight: 500;
letter-spacing: -0.01em;
}
// mix up logo colors on hover
@ -45,16 +50,8 @@ header {
color: c(links);
}
svg {
g#c1 {
fill: $color-logo2;
}
g#c2 {
fill: $color-logo3;
}
g#c3 {
fill: $color-logo1;
}
img#selfie {
opacity: 0.9;
}
}
}
@ -122,6 +119,7 @@ header {
height: 1.56em; // 24.33px, don't ask
width: 1.56em;
margin-top: -0.05em;
margin-left: 1.4em;
margin-right: -0.3em; // weirdness w/ svg ratio
cursor: pointer;
@ -136,19 +134,24 @@ header {
// Responsive
@mixin responsive--header() {
header {
padding: 1em 1.25em;
padding: 0.5em 1.25em;
nav {
a#logo {
img,
svg {
width: 36px;
height: 54px;
img#selfie {
width: 70px;
height: 70px;
}
span#name {
display: none;
}
&:hover {
img#selfie {
opacity: 1;
}
}
}
ul {
@ -179,7 +182,7 @@ header {
// TODO: figure out need for weird magic numbers here
height: 1.08em; // ~27px, don't ask
width: 1.08em;
margin-top: 0.175em;
margin-top: 0.15em;
margin-left: 1em;
margin-right: -0.2em; // weirdness w/ svg ratio
}

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

@ -3,8 +3,8 @@
// Home Styles
div.layout-home {
font-size: 1em;
padding-top: 1.25em;
padding-bottom: 0.75em;
padding-top: 1.2em;
padding-bottom: 0.6em;
h1 {
margin: 0 0 0.3em 0;
@ -23,6 +23,7 @@ div.layout-home {
font-size: 1.35em;
font-weight: 400;
letter-spacing: -0.022em;
margin-left: -0.03em; // TODO: why is this indented slightly?
line-height: 1.4;
}
@ -48,20 +49,6 @@ div.layout-home {
}
}
img#me {
float: right;
margin: 0.2em 0 0.6em 1.2em;
padding: 4px;
width: 170px;
height: 170px;
border: 1px solid;
border-radius: 50%;
@include colors() {
border-color: c(light);
}
}
// easter egg emoji cursor
a#birthday {
&:hover {
@ -101,7 +88,7 @@ div.layout-home {
@mixin responsive--home() {
div.layout-home {
font-size: 0.975em;
padding-top: 1.2em;
padding-top: 1em;
padding-bottom: 0.2em;
h1 {
@ -119,12 +106,5 @@ div.layout-home {
p {
letter-spacing: -0.012em;
}
img#me {
width: 100px;
height: 100px;
margin: 0 0 0.3em 0.6em;
padding: 2px;
}
}
}