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

style & homepage tweaks

Browse Source
This commit is contained in:
Jake Jarvis
2019-12-09 23:33:16 -05:00
parent ac89ef7412
commit fb55b3fe8b
13 changed files with 296 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
assets/sass/abstracts/_variables.scss
View File

@ -1,10 +1,24 @@
@charset "UTF-8";
// System Fonts
// https://markdotto.com/2018/02/07/github-system-fonts/
$system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
"Menlo", "Courier", monospace;
// Misc Settings
$responsive-width: 890px;
$link-opacity: 40%;
$link-underline-size: 2px;
// Global Colors
$color-background: #ffffff;
$color-gray-background: #fbfbfb;
$color-text: #222222;
$color-medium-dark: #313131;
$color-medium-dark: #313131;
$color-medium: #444444;
$color-light: #666666;
$color-medium-light: #757575;
@ -12,6 +26,11 @@ $color-super-light: #dddddd;
$color-super-duper-light: #f4f4f4;
$color-links: #0e6dc2;
// For nifty color swapping on svg logo hover in components/_header.scss
$color-logo1: #6fbc4e;
$color-logo2: #ffb900;
$color-logo3: #009cdf;
// Colorful Homepage
$colors-home:(
boston: #fb4d42,
@ -22,7 +41,7 @@ $colors-home:(
angular: #c3002f,
vue: #486491,
java: #ab6311,
cpp: #865fc5,
// cpp: #865fc5,
python: #fea500,
php: #8892bf,
ruby: #d34135,
@ -53,14 +72,3 @@ $colors-home:(
news-7: #973999
);
$color-serverless: #87cef7;
// For nifty color swapping on svg logo hover in components/_header.scss
$color-logo1: #6fbc4e;
$color-logo2: #ffb900;
$color-logo3: #009cdf;
// Other Settings
$link-opacity: 40%;
$link-underline-size: 2px;
$responsive-width: 890px;

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

@ -7,10 +7,7 @@ body {
margin: 0 auto;
background-color: $color-background;
color: $color-text;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: $system-fonts;
line-height: 1.5;
box-sizing: border-box;
}

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

@ -20,18 +20,17 @@ header {
color: $color-medium-dark;
padding: 15px;
img,
svg {
width: 30px;
height: 45px;
}
h1#name {
margin: 0 0 0 20px;
font-size: 1.4em;
font-weight: 500;
}
svg {
width: 30px;
height: 45px;
}
// mix up logo colors on hover
&:hover {
color: $color-links;

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

@ -25,7 +25,7 @@ main#home {
h3 {
margin: 0.6em 0;
font-size: 1.15em;
font-size: 1.2em;
font-weight: 400;
line-height: 1.4;
}
@ -65,7 +65,7 @@ main#home {
&#blog {
font-size: 0.9em;
margin-bottom: 0;
span {
margin-right: 4px;
}
@ -84,6 +84,7 @@ main#home {
margin: 0 0 0.5em 1em;
padding: 4px;
border: 1px solid $color-super-light;
border-radius: 50%;
width: 160px;
height: 160px;
}
@ -96,12 +97,12 @@ main#home {
font-size: 1.1em;
line-height: 1.6;
padding: 1em 1.2em 0.5em 1.2em;
img#me {
width: 85px;
height: 85px;
margin: 0 0 0.3em 0.6em;
padding: 2px;
}
}
}
}

4
assets/sass/pages/_single.scss
View File

@ -9,7 +9,7 @@ main#single {
article div {
&#content {
font-weight: 400;
line-height: 1.8;
line-height: 1.7;
h1,
h2,
@ -106,7 +106,7 @@ main#single {
// all code
div.highlight, code {
// https://markdotto.com/2018/02/07/github-system-fonts/
font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
font-family: $system-fonts-monospace;
background: $color-super-duper-light;
font-size: 0.9em;
page-break-inside: avoid;