update font colors and sizing to match personal branding

[ProsperousHeart]

update font colors and sizing to match personal branding

[ProsperousHeart]

header active sections are now pink instead of maroon

[ProsperousHeart]

putting specific personal branding on hold - need to update so it looks nice as is - personal branding colors & fonts can be done later

Looking at the following fonts:

• Archivo

• Archivo Narrow

• Arimo

• Baloo 2 --- looks weird but my words look ok?

• Comfortaa

• Fredoka

• Grandstander

• Libre Franklin

• Marhey - also strange but my letters look good

• Montserrat -- already there

• Noto Sans Cherokee --- want this !!!

• Radio Canada

• Readex Pro

• Red Hat Display

• Rubik

• Spline Sans

• Urbanist

• Varta

• Yaldevi

[ProsperousHeart]

Original Styling

Libre Baskerville

CSS Names	file name	font-size	font-weight	line-height	Font To Change To
body	base.css	1.6rem	400 (regular)	1.875	?
em, i	base.css	?	400 (regular - italics)	?	?
strong, b	base.css	?	400 (regular - italics)	?	?
table	base.css	?	400 (regular)	?	?
abbr	base.css	?	700 (bold)	?	?
.page-header__title	blog.css (not currently in use - may use to point to my own blog on WP)	?	700 (bold)	?	?

Montserrat

CSS Names	font-weight	font-size	line-height	letter-spacing	text-transform	file name	Font To Change To
p.lead	400 (regular)	2rem	1.8	?	?	00-base.css	?
blockquote p	400 (regular)	2.1rem	1.857	?	?	00-base.css	?
blockquote cite	400 (regular)	1.4rem	1.5	?	?	00-base.css	?
.alert-box	400 (regular)	1.5rem	1.6	?	?	01-main.css	?
.header-menu-toggle	400 (regular)	1.4rem	?	.2rem	uppercase	02-home.css	?
.item-folio__cat	400 (regular)	1.5rem	N/A	N/A	N/A	04-projects.css	?
.testimonials__author span	400 (regular)	1.3rem	N/A	0	none	06-testimonials.css	?
h1, h2, h3, h4, h5, h6	(COMMENTED OUT) 500 (medium)	?	?	?	?	00-base.css	?
section-intro h3	600 (semi-bold)	2rem	?	.15rem	uppercase	00-sections.css	?
.btn, button, input[type="submit"], input[type="reset"], input[type="button"]	600 (semi-bold)	font-size = 1.2rem	line-height calculated	letter-spacing: .3rem	text-transform: uppercase	01-main.css	?
.home-content__scroll a	600 (semi-bold)	font-size = 1.1rem	?	letter-spacing: .3rem	text-transform: uppercase	02-home.css	?
.item-folio__title	600 (semi-bold)	1.4rem	N/A	N/A	uppercase	04-projects.css	?
.s-contact .form-field label	600 (semi bold)	1.1rem	2.4rem	.1rem	uppercase	10-contact.css	?
th	700 (bold)	?	?	?	?	00-base.css	?
.drop-cap:first-letter	700 (bold)	?	8.4rem	6rem	.16rem	uppercase - 01-main.css	?
.header-nav-wrap	700 (bold)	11px	?	.25rem	uppercase	02-home.css	?
.home-social	700 (bold)	?	?	?	?	02-home.css	?
.timeline__header .timeline__timeframe	700 (bold)	1.4rem	1.5rem	.15rem	uppercase	04-xp.css	?
.submit-loader .text-loader	700 (bold)	1.4rem	N/A	.2rem; uppercase	10-contact.css	?
.header-nav li.current a	800 (extra bold)	?	?	?	?	02-home.css	?
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select	400 (regular)	1.5rem	3rem	N/A	N/A	10-contact.css	?
label, legend	700 (bold)	1.4rem	1.714rem	N/A	N/A	10-contact.css	?
label > .label-text	400 (regular)	N/A	inherit	N/A	N/A	10-contact.css	?
footer	400 (regular)	14px	N/A	N/A	N/A	11-footer.css	?
.footer-social	400 (regular)	1.3rem	N/A	.3rem	uppercase	11-footer.css	?

Across the Board

Libre Baskerville

CSS Names	font-weight	font-size	line-height	file name	Font To Change To
.section-intro h1	700 (bold)	?	?	sections.css	?
.home-content h1	700 (bold)	?	?	home.css	?
.testimonials-header h1	700 (bold)	?	?	testimonials.css	?

Montserrat

CSS Names	font-weight	font-size	line-height	letter-spacing	text-transform	file name	Font To Change To
- h1, .h01	700 (bold)	3.6rem	1.25rem	-.1rem	N/A	00-base.css	?
.home-content h3	700 (bold)	?	1.8rem	.5rem	uppercase	02-home.css	?
h6, .h06	700 (bold)	1.4rem	1.5	.16rem	uppercase	00-base.css	?

Additional Info

• There may be others later - will deal with that when the time comes
• did not touch Montserrat for blog.css

[ProsperousHeart]

[fonts chosen for at LEAST general font + my name](CSS rules to specify families)

<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Fredoka:wght@300;400;500;600;700&family=Grandstander:wght@200&family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Noto+Sans+Cherokee:wght@200;300;400;500;700&family=Radio+Canada:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Readex+Pro:wght@200;300;400;500;600;700&family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,700;0,800;1,400&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,800;1,400;1,700&family=Spline+Sans:wght@300;400;500;600;700&family=Urbanist:ital,wght@0,100;0,400;0,500;0,600;0,700;0,800;1,400&family=Yaldevi:wght@400;500;600;700&display=swap" rel="stylesheet">

CSS rules to specify families:

font-family: 'Comfortaa', cursive;
font-family: 'Fredoka', sans-serif;
font-family: 'Grandstander', cursive;
font-family: 'Libre Franklin', sans-serif;
font-family: 'Noto Sans Cherokee', sans-serif;
font-family: 'Radio Canada', sans-serif;
font-family: 'Readex Pro', sans-serif;
font-family: 'Red Hat Display', sans-serif;
font-family: 'Rubik', sans-serif;
font-family: 'Spline Sans', sans-serif;
font-family: 'Urbanist', sans-serif;
font-family: 'Yaldevi', sans-serif;

[ProsperousHeart]

leaving open for the fonts - may update with the fonts later