jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-11-18 00:00:48 -05:00
Code Issues Activity

clean up style.scss

Browse Source
This commit is contained in:
Jake Jarvis
2019-09-24 23:06:17 -04:00
parent 180c5b3441
commit 08636a7b51
3 changed files with 101 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
assets/style.scss
View File

@@ -1,64 +1,68 @@
/* JJ SCSS */
/* Compiled from https://github.com/jakejarvis/jarv.is/blob/master/assets/style.scss */
// Main Colors
$color-text: #202020;
$color-links: #036e9b;
$color-light: #666666;
// Global Colors
$color-background: #ffffff;
$color-text: #202020;
$color-light: #666666;
$color-medium-light: #9e9e9e;
$color-super-light: #dddddd;
$color-super-light: #dddddd;
$color-super-duper-light: #f4f4f4;
$color-read-more: #0077a7;
$color-links: #036e9b;
// Colorful Homepage
$colors-home:(
boston: #fb4d42,
boston: #fb4d42,
javascript: #f48024,
node: #6fbc4e,
golang: #566468,
react: #4fb3cd,
angular: #c3002f,
vue: #486491,
java: #ab6311,
cpp: #865fc5,
python: #fea500,
php: #8892bf,
ruby: #d34135,
infosec: #00b81a,
server: #0098ec,
serverless: #87cef7,
devops: #ff6200,
containerization: #c48f49,
y2k: #4169e1,
jbb: #9932cc,
github: #8d4eff,
linkedin: #0073b1,
facebook: #4267b2,
twitter: #00acee,
instagram: #a37754,
mastodon: #6d8ca7,
resume: #d54b3d,
email: #de0c0c,
pgp: #777777,
sms: #6fcc01,
news-1: #ff1b1b,
news-2: #f78200,
news-3: #f2b702,
news-4: #5ebd3e,
news-5: #009cdf,
news-6: #3e49bb,
news-7: #973999
node: #6fbc4e,
golang: #00acd7,
react: #4fb3cd,
angular: #c3002f,
vue: #486491,
java: #ab6311,
cpp: #865fc5,
python: #fea500,
php: #8892bf,
ruby: #d34135,
infosec: #00b81a,
server: #0098ec,
devops: #ff6200,
containers: #c48f49,
y2k: #4169e1,
jbb: #9932cc,
github: #8d4eff,
linkedin: #0073b1,
facebook: #4267b2,
twitter: #00acee,
dm: #00acee,
instagram: #a37754,
mastodon: #6d8ca7,
resume: #d54b3d,
email: #de0c0c,
pgp: #777777,
sms: #6fcc01,
news-1: #ff1b1b,
news-2: #f78200,
news-3: #f2b702,
news-4: #5ebd3e,
news-5: #009cdf,
news-6: #3e49bb,
news-7: #973999
);
$color-serverless: #87cef7;
$color-fairy: #f23e93;
// Global Styles
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
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",
@@ -67,24 +71,15 @@ body {
font-weight: 300;
font-size: 24px;
line-height: 1.5em;
}
* {
box-sizing: border-box;
}
a {
background-color: transparent;
text-decoration: none;
border-bottom: 1px solid transparent;
}
body {
a {
color: $color-links;
background-color: transparent;
text-decoration: none;
border-bottom: 1px solid transparent;
&:hover {
border-color: $color-links;
border-color: unquote($color-links + '60');
border-color: mix($color-links, $color-background, 40%);
}
}
@@ -136,18 +131,22 @@ body {
a {
// Loop through $colors-home -- the main reason I'm using SASS :)
@each $key, $color in $colors-home {
&##{$key} {
@each $id, $color in $colors-home {
&##{$id} {
color: $color;
&:hover {
border-color: $color;
border-color: unquote($color + '60');
border-color: mix($color, $color-background, 40%);
}
}
}
}
span {
&#serverless {
color: $color-serverless;
}
&#shh {
color: $color-medium-light;
}
@@ -214,7 +213,6 @@ body {
}
// Blog Styles
&#notes {
font-size: 18px;
font-weight: 400;
@@ -406,26 +404,6 @@ body {
padding-left: 0;
}
code {
font-family: monospace;
background: $color-super-duper-light;
padding: 0.2em;
border: 1px solid $color-super-light;
font-size: 16px;
}
pre code {
padding: 1em 1.5em;
line-height: 1.6;
page-break-inside: avoid;
border: 1px solid $color-super-light;
border-left: 3px solid $color-links;
overflow-x: scroll;
display: block;
max-width: 100%;
object-fit: scale-down;
}
hr {
width: 60%;
margin: 10px auto;
@@ -459,6 +437,26 @@ body {
margin: 0 auto;
display: block;
}
code {
font-family: monospace;
background: $color-super-duper-light;
padding: 0.2em;
border: 1px solid $color-super-light;
font-size: 16px;
}
pre code {
padding: 1em 1.5em;
line-height: 1.6;
page-break-inside: avoid;
border: 1px solid $color-super-light;
border-left: 3px solid $color-links;
overflow-x: scroll;
display: block;
max-width: 100%;
object-fit: scale-down;
}
}
&#commento {
@@ -514,21 +512,7 @@ body {
}
// Fancy Waving Hand Emoji (TM) - https://jarv.is/notes/css-waving-hand-emoji/
@keyframes wave {
0% { transform: rotate( 0.0deg); }
10% { transform: rotate(-10.0deg); }
20% { transform: rotate( 12.0deg); }
30% { transform: rotate(-10.0deg); }
40% { transform: rotate( 9.0deg); }
50% { transform: rotate( 0.0deg); }
100% { transform: rotate( 0.0deg); }
}
// Responsive Awesomeness
@media screen and (max-width: 800px) {
// Responsive Home
body#home {
@@ -592,6 +576,10 @@ body {
main#single article {
width: 100%;
max-width: 100%;
div.meta {
font-size: 14px;
}
}
header {
@@ -632,49 +620,48 @@ body {
}
}
}
main#single article div.meta {
font-size: 14px;
}
}
}
// Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight
/* Fancy Waving Hand Emoji (TM) - https://jarv.is/notes/css-waving-hand-emoji/ */
@keyframes wave {
0% { transform: rotate( 0.0deg); }
10% { transform: rotate(-10.0deg); }
20% { transform: rotate( 12.0deg); }
30% { transform: rotate(-10.0deg); }
40% { transform: rotate( 9.0deg); }
50% { transform: rotate( 0.0deg); }
100% { transform: rotate( 0.0deg); }
}
/* Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */
div.highlight span {
&.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no {
color: #03748a;
}
&.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p {
color: #111111;
}
&.na, &.nc, &.nd, &.ne, &.nf, &.nx {
color: #489c44;
}
&.err, &.nt, &.o, &.ow, &.kn {
color: #e8003d;
}
&.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo {
color: #8145ec;
}
&.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
color: #c17005;
}
&.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
color: #6b6859;
}
&.ge {
font-style: italic;
}
&.gs {
font-weight: bold;
}