Skip to content

Commit e204a47

Browse files
jasonraimondijasonraimondi
committed
styles(fix): update site font and fix resume fonts
split the resume.css stuff out from the site css, I want to eventually start changing the site css
1 parent a539d9c commit e204a47

39 files changed

+589
-40
lines changed

‎.idea/jasonraimondi.iml

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/css-resume/_base.css

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
:root {
2+
--sidebar-width: 275px;
3+
--sidebar-toggle-width: 0.9rem;
4+
5+
/**
6+
* Root
7+
*/
8+
9+
--root-size: 100%;
10+
--root-size-large: 120%;
11+
12+
/**
13+
* Container
14+
*/
15+
16+
--container-gutter: 1rem;
17+
--container-xxl: 1000px;
18+
--container-xl: 1000px;
19+
--container-lg: 70%;
20+
--container-md: 80%;
21+
--container-sm: 90%;
22+
--container-xs: 95%;
23+
}
24+
25+
.hidden {
26+
display: none;
27+
}
28+
29+
.invisible {
30+
visibility: hidden;
31+
}

‎assets/css-resume/_colors.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
:root {
2+
--colors-transparent: transparent;
3+
4+
--colors-gray-50: #F9FAFB;
5+
--colors-gray-100: #F3F4F6;
6+
--colors-gray-200: #E5E7EB;
7+
--colors-gray-300: #D1D5DB;
8+
--colors-gray-400: #9CA3AF;
9+
--colors-gray-500: #6B7280;
10+
--colors-gray-600: #4B5563;
11+
--colors-gray-700: #374151;
12+
--colors-gray-800: #1F2937;
13+
--colors-gray-900: #111827;
14+
15+
--colors-green-50: #ECFDF5;
16+
--colors-green-100: #D1FAE5;
17+
--colors-green-200: #A7F3D0;
18+
--colors-green-300: #6EE7B7;
19+
--colors-green-400: #34D399;
20+
--colors-green-500: #10B981;
21+
--colors-green-600: #059669;
22+
--colors-green-700: #047857;
23+
--colors-green-800: #065F46;
24+
--colors-green-900: #064E3B;
25+
26+
--colors-purple-50: #F5F3FF;
27+
--colors-purple-100: #EDE9FE;
28+
--colors-purple-200: #DDD6FE;
29+
--colors-purple-300: #C4B5FD;
30+
--colors-purple-400: #A78BFA;
31+
--colors-purple-500: #8B5CF6;
32+
--colors-purple-600: #7C3AED;
33+
--colors-purple-700: #6D28D9;
34+
--colors-purple-800: #5B21B6;
35+
--colors-purple-900: #4C1D95;
36+
37+
--colors-rose-50: #fff1f2;
38+
--colors-rose-100: #ffe4e6;
39+
--colors-rose-200: #fecdd3;
40+
--colors-rose-300: #fda4af;
41+
--colors-rose-400: #fb7185;
42+
--colors-rose-500: #f43f5e;
43+
--colors-rose-600: #e11d48;
44+
--colors-rose-700: #be123c;
45+
--colors-rose-800: #9f1239;
46+
--colors-rose-900: #881337;
47+
48+
--colors-lightBlue-50: #f0f9ff;
49+
--colors-lightBlue-100: #e0f2fe;
50+
--colors-lightBlue-200: #bae6fd;
51+
--colors-lightBlue-300: #7dd3fc;
52+
--colors-lightBlue-400: #38bdf8;
53+
--colors-lightBlue-500: #0ea5e9;
54+
--colors-lightBlue-600: #0284c7;
55+
--colors-lightBlue-700: #0369a1;
56+
--colors-lightBlue-800: #075985;
57+
--colors-lightBlue-900: #0c4a6e;
58+
59+
--colors-white: var(--colors-gray-50);
60+
--colors-black: var(--colors-gray-800);
61+
}

‎assets/css-resume/_mixin.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@define-mixin stretch {
2+
/**
3+
text-align: justify;
4+
text-justify: inter-character;
5+
&::after{
6+
content: '';
7+
width: 100%;
8+
display: inline-block;
9+
}
10+
*/
11+
}
12+
13+
@define-mixin scrollable {
14+
overflow-y: auto;
15+
-webkit-overflow-scrolling: touch;
16+
}
17+
18+
@define-mixin no-scrollbar {
19+
scrollbar-width: none;
20+
21+
&::-webkit-scrollbar {
22+
display: none;
23+
}
24+
}
25+
26+
@define-mixin date-item {
27+
font-size: var(--text-sm);
28+
color: var(--colors-gray-500);
29+
30+
@media (--dark) {
31+
color: var(--colors-gray-200);
32+
}
33+
}

‎assets/css-resume/_typography.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
:root {
2+
--font-family-sans: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
3+
--font-family-serif: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
4+
--font-family-mono: JetBrains Mono, Fira Code Retina, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
5+
6+
--text-xxxl: 3.052rem;
7+
--text-xxl: 2.441rem;
8+
--text-xl: 1.953rem;
9+
--text-lg: 1.25rem;
10+
--text-md: 1rem;
11+
--text-sm: 0.8rem;
12+
--text-xs: 0.64rem;
13+
--text-xxs: 0.512rem;
14+
15+
16+
--h1: var(--text-xl);
17+
--h2: var(--text-lg);
18+
--h3: var(--text-md);
19+
--h4: var(--text-sm);
20+
--h5: var(--text-xs);
21+
--h6: var(--text-xs);
22+
23+
@media (--xlarge) {
24+
--h1: var(--text-xxl);
25+
--h2: var(--text-xl);
26+
--h3: var(--text-lg);
27+
--h4: var(--text-md);
28+
--h5: var(--text-sm);
29+
--h6: var(--text-xs);
30+
}
31+
32+
--font-thin: 100;
33+
--font-extralight: 200;
34+
--font-light: 300;
35+
--font-normal: 400;
36+
--font-medium: 500;
37+
--font-semibold: 600;
38+
--font-bold: 700;
39+
--font-extrabold: 800;
40+
--font-black: 900;
41+
42+
font-synthesis: none;
43+
text-rendering: optimizeLegibility;
44+
-webkit-font-smoothing: antialiased;
45+
-moz-osx-font-smoothing: grayscale;
46+
}

‎assets/css-resume/base/_anchor.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
a {
2+
color: var(--colors-green-500);
3+
transition: color 0.2s ease;
4+
text-decoration: none;
5+
6+
&[href]:focus,
7+
&[href]:hover,
8+
&[href]:active {
9+
color: var(--colors-green-800);
10+
text-decoration: none;
11+
}
12+
13+
@media (--dark) {
14+
color: var(--colors-purple-500);
15+
16+
&[href]:focus,
17+
&[href]:hover,
18+
&[href]:active {
19+
color: var(--colors-purple-200);
20+
}
21+
}
22+
23+
&.unstyled {
24+
color: var(--colors-gray-800);
25+
26+
&:hover {
27+
color: var(--colors-gray-800);
28+
}
29+
30+
@media (--dark) {
31+
color: var(--colors-white);
32+
33+
&:hover {
34+
color: var(--colors-white);
35+
}
36+
}
37+
}
38+
}

‎assets/css-resume/base/_code.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
code {
2+
font-family: var(--font-family-mono);
3+
line-height: inherit;
4+
}
5+
6+
pre {
7+
border-radius: 0.5em;
8+
text-align: left;
9+
white-space: pre;
10+
word-spacing: normal;
11+
word-break: normal;
12+
tab-size: 2;
13+
hyphens: none;
14+
padding: 1em;
15+
16+
margin: 1em 0;
17+
overflow: auto;
18+
font-family: var(--font-family-mono);
19+
font-size: 0.8rem;
20+
21+
background: inherit;
22+
@include scrollable;
23+
24+
& code {
25+
font-size: inherit;
26+
}
27+
}
28+
29+
.highlight pre {
30+
color: var(--colors-white);
31+
background-color: var(--colors-black);
32+
}
33+
34+
.highlight > pre > code {
35+
padding: 0;
36+
background-color: transparent;
37+
}
38+
39+
@media (--dark) {
40+
.highlight pre {
41+
background-color: var(--colors-gray-900);
42+
}
43+
}
44+
45+
h1,
46+
h2,
47+
h3,
48+
h4,
49+
h5,
50+
a,
51+
p,
52+
li,
53+
strong,
54+
span {
55+
& > code {
56+
white-space: nowrap;
57+
color: var(--colors-black);
58+
background-color: var(--colors-gray-300);
59+
padding: 0.025em .4em .05em;
60+
border-radius: 0.25em;
61+
62+
@media (--dark) {
63+
color: var(--colors-gray-300);
64+
background-color: var(--colors-gray-900);
65+
}
66+
}
67+
}

‎assets/css-resume/base/_container.css

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.container {
2+
width: 100%;
3+
min-height: 100%;
4+
max-width: var(--container-xs);
5+
6+
@media (--small) {
7+
max-width: var(--container-sm);
8+
}
9+
@media (--medium) {
10+
max-width: var(--container-md);
11+
}
12+
@media (--large) {
13+
max-width: var(--container-lg);
14+
}
15+
@media (--xlarge) {
16+
max-width: var(--container-xl);
17+
}
18+
@media (--xxlarge) {
19+
max-width: var(--container-xxl);
20+
}
21+
22+
@media print {
23+
max-width: 100%;
24+
}
25+
26+
&.padded {
27+
padding: 1rem 0;
28+
@media (--large) {
29+
padding: 2rem 0;
30+
}
31+
@media print {
32+
padding: 0;
33+
}
34+
}
35+
36+
&.center {
37+
margin-left: auto;
38+
margin-right: auto;
39+
}
40+
41+
@media (--medium) {
42+
&.resume {
43+
position: relative;
44+
left: -3.5rem;
45+
}
46+
}
47+
}
48+

‎assets/css-resume/base/_headings.css

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
html,
2+
body {
3+
font-family: var(--font-family-sans);
4+
-webkit-font-smoothing: antialiased;
5+
}
6+
7+
h1, .h1,
8+
h2, .h2,
9+
h3, .h3,
10+
h4, .h4,
11+
h5, .h5,
12+
h6, .h6 {
13+
font-family: inherit;
14+
color: inherit;
15+
16+
& small {
17+
font-size: 80%;
18+
}
19+
}
20+
21+
a,
22+
li,
23+
button {
24+
font-family: inherit;
25+
}
26+
27+
h1,
28+
.h1 {
29+
font-size: var(--h1);
30+
}
31+
32+
h2,
33+
.h2 {
34+
font-size: var(--h2);
35+
}
36+
37+
h3,
38+
.h3 {
39+
font-size: var(--h3);
40+
}
41+
42+
h4,
43+
.h4 {
44+
font-size: var(--h4);
45+
}
46+
47+
h5,
48+
.h5 {
49+
font-size: var(--h5);
50+
}
51+
52+
h6,
53+
.h6 {
54+
font-size: var(--h6);
55+
}

0 commit comments

Comments
 (0)